iPhone
Using Dashcode: Creating A Simple iPhone Hello World Page
May 20, 2009
0

Included in the iPhone SDK is another “application-builder” named Dashcode.  If you have the iPhone SDK installed (and the iPhone SDK is the only way to get Dashcode as far as I know), then you can find Dashcode at Developers::Applications folder. The icon looks like this:

dashcodeicon

Dashcode was originally a tool for developing Widgets, is more suitable for (simpler) applications, and version 2 comes with support (and templates) for developing iPhone web-apps.  While Xcode and iPhone SDK is the Ferrari for iPhone development, Dashcode, is the modest-cousin, suitable for simple applications – those that can be written with HTML and Javascript.  This isn’t to say that Dashcode is worthless.  In fact, it can be faster to develop some type of applications in Dashcode.   You can read more about Dashcode on the Apple’s websiteMore in-depth write-ups at Apple’s same web-site, but on different URL is linked here.

For this tutorial, we’re going to use HTML to add text and image into the application (which really is just a html page).  I am assuming that you’re familiar with HTML, css (JavaScript will not be used in this example).  The purpose of this tutorial is just to get started and to show where things are.

Simple Hello World

First, create a new project, using File -> New Project.  A dialog will pop up, shown below.  Chose Web Application on the left panel, then chose Custom.  The Custom template creates a blank HTML page which we can then “compose” into, like laying out pages.   While at it, you can click on the other templates to read their descriptions.

dashcodetemplates

Select Custom, then click Choose.  Let’s see what Dashcode has created for you.

dashcodenewproject

The page hierarchy is on the top left of the left-panel, currently, it contains two elements: content and footer which are actually div elements – we will see the code generated by Dashcode later.  You can select footer, for example, and that element (which is the textbox saying “Developed with Dashcode”) will be selected on the view.

Select content and bring up the Inspector dialog (Window->Show Inspector).  You can customize the content here, without changing the code (we will see where to edit the code later).  For now, let’s change the content background color to blue, by selecting the Fill & Stroke tab (the second tab, with overlapping circle and rectangle icon) in the Inspector window, selecting Style, changing the Fill to Color, and opening the Background Color button.

dashcodeblue

 

Now let’s add some text.

Make sure the Library window is open (shown below).  The Library window contains a rich set of elements which you can easily add into the page.    For this example, we will add a text-box.  Drag the Text element (shown on the bottom-right on the element-list on the Library window below) into the view and change the text (double clicking after adding).  Type Hello World or any text you want.

dashcodeaddtext

You can change the text color the same way as before, from the Inspector window,but using the fourth tab (the one which icon looks like the letter T).

Now we’re ready to run.  Click the Run button on the toolbar to test it with the iPhone simulator.dashcodeexample1

Save the project, name it Hello.  To deploy to a web-server, open the Share section, by selecting the icon labeled Share on the picture below.

dashcodeshare

If you have a server account, you can set Dashcode to upload to the server, by using the Add Account… option.  Alternatively, you can save into local disk by chosing Save to Disk.  To see what files Dashcode has created, you can examine the deploy folder.  Or, open the View menu on the toolbar and select Files.

dashcodeviewfiles

 

More things to Do

Let’s now do some hand-coding.  Click on the main.js button on the lower-pane of the Dashcode window:

dashcodemainjs

This also bring up a list of files used by your project.

dashcodefiles

Open index.html, and you can see the html file that was created by Dashcode.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Hello</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6">
    <meta name="apple-mobile-web-app-capable" content="YES">
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
<link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
</head>
<body onload="load();">
<div id="content">
<div apple-part="com.apple.Dashcode.part.webtext"
                vclass="apple-text apple-no-children" apple-default-image-visibility="hidden"
                apple-text-overflow="ellipsis" id="text"
                apple-style="part-width-dependent: true;part-height-dependent: true;"></div>
</div>
<div apple-part="com.apple.Dashcode.part.webtext"
                class="apple-text apple-no-children" apple-default-image-visibility="hidden"
                apple-text-overflow="ellipsis" id="footer" apple-group="text"
                apple-style="part-height-dependent: true;"></div>

</body>
</html>

 

You can see there are two div elements, one with id=”text”, which is the text-box we created, and the other with id=”footer” which Dashcode created.  But where is the content of the text?  It’s on another file: setup.js

 

 

/*
 This file was generated by Dashcode and is covered by the
 license.txt included in the project.  You may edit this file,
 however it is recommended to first turn off the Dashcode
 code generator otherwise the changes will be lost.
 */
var dashcodePartSpecs = {
    "footer": { "creationFunction": "CreateText", "text": "Developed with Dashcode" },
    "text": { "creationFunction": "CreateText", "text": "Hello World" }
};

 

Dashcode has a slick mechanism to add elements and the warning-text above discourages you from fiddling with it too much, but that doesn’t mean that we cannot use our own code.  You can, for example, change the style of the text-boxes by editing main.css.

 

#content {
    position: relative;
    -webkit-margin-top-collapse: separate;
    -webkit-margin-bottom-collapse: separate;
    min-height: 326px;
    height: auto;
    width: auto;
    background-color: rgb(23, 20, 158);
    -webkit-border-top-left-radius: 0px 0px;
    -webkit-border-top-right-radius: 0px 0px;
    -webkit-border-bottom-left-radius: 0px 0px;
    -webkit-border-bottom-right-radius: 0px 0px;
}

#text {
    font-family: Helvetica;
    font-size: 17px;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    -webkit-margin-top-collapse: separate;
    -webkit-margin-bottom-collapse: separate;
    margin-top: 169px;
    margin-left: 119px;
    width: auto;
    margin-right: 101px;
    min-height: 23px;
    height: auto;
    opacity: 1;
    color: rgb(129, 255, 9);
    text-shadow: rgb(0, 0, 0) 40px 0px 8px;
}

 

 

For now, let’s just do a few more stuff, using plain html code. Open index.html. Add text and images, so the inside of tag looks like this:

 

<body onload="load();">
<div id="content">
        Hello from HTML and Dashcode<br>
        <img src="https://www.permadi.com/java/images/vox1.gif" id="img">
        <img src="Images/moirecircles.gif" id="img">
<div apple-part="com.apple.Dashcode.part.webtext"
                class="apple-text apple-no-children" apple-default-image-visibility="hidden"
                apple-text-overflow="ellipsis" id="text" apple-style="part-width-dependent: true;
                part-height-dependent: true;"></div>
</div>
<div apple-part="com.apple.Dashcode.part.webtext" class="apple-text apple-no-children"
                apple-default-image-visibility="hidden" apple-text-overflow="ellipsis" id="footer"
                apple-group="text" apple-style="part-height-dependent: true;"></div>

</body>

 

The code that I added is inside the content div.  I added a text: Hello from HTML and Dashcode and two images.  The first image is located on a live URL, you can substitute with any image that you have on your site.  The second one loads from the local server (or local folder). Make sure the image exists. You can add files into the deploy folder by right-clicking the Files panel and selecting Add Files.
dashcodeaddfile

Run the app. Mine looks like this:
dashcodescreenshot2
That’s all for the Dashcode introduction. I’m hoping to cover animations and interactivity in future articles.