Creating a Hello World Application using Dashcode

Here's a very loose script:

Now, open up Dashcode. When you open up Dashcode, you can select a template to use. On the left side, we have various different types of applications we can make in Dashcode, mainly Web Applications and Dashboard Widgets. For now, select "Web Application" and select "Custom".

Dashcode handles most of the starting work for you. It gives you a nice canvas to work on (the grey box in the middle), and creates most of the code for you (which you can access by going to View in the toolbar, and selecting "Source Code").

Now, we are just going to create a simple "Hello World" application that simply displays some text. This is a pretty simple application, and will require no coding.

First, open up the Library by going to "Window" on the menu bar, and then going to "Show Library". The library gives you various widgets (which in Dashcode-speak are called "Parts") and pieces of code to use in your application. If you are an iPhoto user, you can also select various photos from your iPhoto library to use in your application.

The most important part of the Library is the search box at the very bottom. We're looking for a text label, so search for "text". Three things should pop up: Text area (which is multi-line text input), text field (one line text input) and then, Text, which is our label.

Click and drag the text onto the canvas. You should see the word Text at the top of the gray box no matter where you dragged it. This is due Dashcode using a layout system called "Document Flow". Document Flow essentially repositions different parts depending on their relative location to other parts. If you prefer having absolute control of your layout, it is easy to turn off Document Flow. First, click on the Text piece we just created. Then go to Window. Click on "Show Inspector". Then, click on tab with a ruler on it, and then in the selection box at the top, choose "Absolute" instead of "Document Flow".

Now, keep the Inspector open - this is a very useful tool, as you can edit parts settings from here, including the text of labels. In the Inspector, there's a tab with a picture of name tag. Go down to "Label" and type in "Hello World" instead, pressing the Return key when you are done. Now, instead of saying "Text", the label says "Hello World". Hello, Dashcode!

Now, we can mess with the color and the position of the text by clicking on the "T" (for Text) tab in the Inspector. You can set font, color and even create shadows.

That was a brief introduction to using the Library and the Inspector in Dashcode.

Category:

Science & Technology

Tags:

• dashcode
• tutorial
• screencast
• hello
• world

[TheMachowtos]

you can make the video 2 min. shorter, get to the point

[yapple207]

ok great tutorial but now how do i get it on my webiste? preferably in html? is it possible?

[knight1424]

Oh thats fine if it doesnt neither does most of ours if you have the newest version of dashcode it will look more like an iPad...

[swcom]

Dude, get to the point!

[Seaneyful]

mine doesn't show up as an iphone any help?

[mcquoidellum]

I'm wondering if you can change "document flow" in iweb to "absolute", I'm sure it's not named the same, but i'd like move the menu bars on the home page, help?

[iphonemart]

cool

[Xerbox1]

omg im so stupid. its under the xcode install on the disk. sry. nvr mind.

[Xerbox1]

how do u get dashcode. I have snow leopard