Dashcode Tips and Tricks

iAd Gallery - FAQ

2011-04-09T19:02:00.000-07:00

Where can I find the iAd Gallery app ?
You can download the iAd Gallery app for free from the App Store on your iPhone or iPod touch.

What are the system requirements to use iAd Gallery ?
The iAd Gallery app requires iOS 4.2.6 or later, and can be viewed on an iPhone 4, iPhone 3GS, or iPod touch (4th generation).

Which ads are viewable in iAd Gallery ?
The iAd Gallery is updated regularly to include a selection of the latest ads appearing in your favorite apps on the iAd Network. Browse, search, read about, and interact with ads from leading brands from around the world. You can even select ads to add to your Loved section so you can easily go back to them any time.

When are ads added/removed ?
The iAd Gallery is updated regularly to include a selection of the latest ads appearing in your favorite apps on the iAd Network.

Why is an ad in my Loved section not working ?
As we retire ads from the iAd Gallery app, they will appear as disabled in the Loved section. You may delete any ad from the Loved section at any time.

Why do some ads have functions that are disabled ?
Some advertising featured in the iAd Gallery include content that is not currently available, and so it is disabled.

Where can I find iAd advertisements outside of the iAd Gallery ?
You can find iAd advertisements in many of your favorite applications. Every iAd is identified on the lower-right corner of the ad.

How do I find out more about iAd advertising ?

For more information about advertising on the iAd Network, please visit http://advertising.apple.com/.
For more information about how you can earn money by running iAd advertising in your apps, please visit http://developer.apple.com/iad/.

Developer Courses + Tutorials !

2010-09-30T18:25:00.000-07:00

Unless you’ve been living under a rock, you know that the iPhone is a big deal and it’s one of the most popular subjects of development these days. Lots of developers are creating their own iPhone apps, and with the right know-how, you can too. Check out our list of courses and tutorials to learn everything that’s important about developing for the iPhone.

University
Here you’ll find iPhone development courses offered by top universities.

iPhone Application Programming: Learn about programming for the iPhone from Stanford on iTunes. [Stanford]
Introduction to iPhone Application Development: Use this course’s posted slides to get a crash course in iPhone application development. [MIT]

Apple Resources
You can learn about iPhone development straight from the source with these Apple documents.

Getting Started with iPhone: Here you’ll find a general introduction to iPhone development. [Apple]
Object-Oriented Programming with Objective-C: This document offers an excellent guide for object oriented programming. [Apple]
Networking & Internet Coding How-Tos: In this resource, you will find lots of great advice for networking and Internet development on the iPhone. [Apple]
Getting Started with Audio & Video: Use this document to get started with audio and video features in iPhone applications. [Apple]
Your First iPhone Application: This introductory tutorial offers a step by step description of getting started with an iPhone application. [Apple]
Getting Started with Performance: This guide offers an introduction to improving the performance on iPhone apps. [Apple]
iPhone Application Programming Guide: Get an introduction to the iPhone OS and development process. [Apple]
iPhone OS Technology Overview: Learn about the iPhone OS and its technologies from this guide. [Apple]
Getting Started with Data Management: Here you’ll find a reference that will help you with data management. [Apple]
Security Overview: Get an understanding of the security concepts on the iPhone from this resource. [Apple]
Performance Overview: Get a look at the factors that determine performance through this guide. [Apple]
Resource Programming Guide: Check out this resource to learn how to work with nib and bundle resources.
Getting Started with User Experience: This document offers an introduction to constructing iPhone application user interfaces. [Apple]
iPhone Human Interface Guidelines: Follow these guidelines to make sure your iPhone app has a good human interface. [Apple]
iPhone Development Guide: Use this development guide to get an introduction to creating web apps on the iPhone. [Apple]
Data Formatting Programming Guide for Cocoa: This guide will teach you how to use Cocoa formatters for data. [Apple]
Getting Started with Tools: You will find a guided introduction to the Xcode toolset from this document. [Apple]
Data Management Coding How-tos: Get answers to common data management coding questions. [Apple]
Introduction to Cocoa Application Tutorial: You’ll need at least a base level understanding of Cocoa for iPhone development, which you can check out in this tutorial. [Apple]
Core Animation Programming Guide: Follow this guide to get the main components and services of Core Animation. [Apple]
Coding Guidelines for Cocoa: In this guide, you’ll learn about naming guidelines for the Cocoa API as well as design advice. [Apple]
Getting Started with Graphics and Animation: Follow this guide for an introduction to 2D and 3D graphics and animation. [Apple]
Learning Objective-C: A Primer: Check out this document once you’ve worked through object oriented programming and Cocoa. [Apple]
Cocoa Fundamentals Guide: You’ll learn about the basic concepts, terminology, and more in Cocoa from this guide. [Apple]
Graphics and Animation Coding How-Tos: In this resource, you’ll find lots of great tips and advice for graphics and animation on the iPhone. [Apple]

Getting Started
Get an introduction to iPhone development through these tutorials.

iPhone App Development-Where to Start: This tutorial will teach you how to get started in iPhone app development. [The Daleisphere]
Bootstrap: Learn a few pointers for iPhone development from this resource. [furbo]
Learn How to Develop for the iPhone: This tutorial will show you how to build an alternate page and style sheet for the iPhone. [NETTUTS]
iPhone Application Development, Step By Step: In this tutorial, you will find a step by step guide to creating a simple iPhone game. [Open Laszlo]
First iPhone Application: Get a brief introduction to creating your first iPhone application. [iPhone SDK Articles]
iPhone Dev: Check out this PDF to get a tutorial for iPhone development. [Lucas Newman]
iPhone App Development for Web Hackers: Use this tutorial to learn about geo-location features and beginner development tips. [How to Iphone Application]
How to Write an iPhone App: This tutorial gives you a basic look at what it takes to write an iPhone application. [Webmonkey]
iPhone App Development for Web Hackers: In this article, you’ll learn about web hacking development for the iPhone. [Dominiek]
Writing Your First iPhone Application: Bill Dudney will walk you through all of the tools and pieces of knowledge you’ll need to write your first iPhone application. [The Pragmatic Bookshelf]
Cocoa Touch Tutorial: iPhone Application Example: This tutorial will show you how to make a very basic Cocoa Touch application with Interface Builder. [Cocoa Is My Girlfriend]
Building an iPhone app in a day: Check out this tutorial to see how you can build a useful app quickly. [The Bakery]
Seven Things All iPhone Apps Need: Check out this list to see what’s essential when creating an iPhone app. [APCmag]
Put Your Content in My Pocket: Learn how to use the iPhone web browser to your advantage from this article. [A List Apart]
iPhone Training Course: Become a master at writing iPhone applications through this course. [Rose India]
So you’re going to write an iPhone app…: Learn about code reuse, memory, and more from this tutorial. [furbo]
Learn How to Develop for the iPhone: Check out this tutorial to see how to build an alternative page and style sheet for the iPhone. [Net Tuts]
Developing for the iPhone: This resource will show you how to develop ASP.NET applications for the iPhone. [Dot Net Slackers]
Getting Started with iPhone Development: Ed Burnette offers a basic introduction to iPhone development. [ZDnet]

Tools
These tutorials will teach you how to use specific tools in order to create iPhone apps.

Make an iPhone App Using the Envato API: Make your own iPhone app with the Envato API with the help of this tutorial. [Net Tuts]
Developing iPhone Applications using Ruby on Rails and Eclipse: Learn how to detect mobile Safari from a Ruby on Rails application through this tutorial. [IBM]
14 Essential Xcode Tips, Tricks and Resources for iPhone Devs: Learn how to make sense of xcode with this helpful resource. [Mobile Orchard]
Develop iPhone Web Applications with Eclipse: This tutorial will help you learn how to create iPhone applications with Aptana’s iPhone development plug-in. [IMB]
Build an iPhone Webapp in Minutes with Ruby, Sinatra, and iUI: You can learn how to quickly put together an iPhone app with these tools. [Mobile Orchard]
iPhone Development with PHP and XML: In this tutorial, you’ll get a look at developing custom applications for the iPhone. [IBM]

Details
These tutorials cover all of the important details in iPhone app development.

Avoiding iPhone App Rejection from Apple: This tutorial holds the secrets to making sure your iPhone app makes the cut. [Mobile Orchard]
Landscape Tab Bar Application for the iPhone: Follow this tutorial to learn about making the tab bar application support landscape orientation. [Cocoa Is My Girlfriend]
iPhone Programming Tutorial-Using openURL to Send Email from Your App: This tutorial explains how you can send email through applications, and even pre-fill fields. [iCode]
Multi Touch Tutorial: This tutorial will show you how you can respond to a tap event. [iPhone SDK Articles]
Create a Navigation-Based Application: This tutorial will teach you how to create and run a navigation-based application from XCode.
Advanced iPhone Development: Go beyond the basics with this iPhone development tutorial. [Dot Net Slackers]
Here’s a Quick Way to Deal with Dates in Objective C: Get information on dealing with date fetching through this tutorial. [Howtomakeiphoneapps]
Navigation Controller + UIToolbar: Through this tutorial, you can learn how to add a UIToolbar to an app. [iPhone SDK Articles]
iPhone Asynchonous Table Image: Follow this thorough article to learn about loading multiple images in your iPhone app in an asynchonous manner. [Markj]
Localizing iPhone Apps-Internationalization: You can use resource files to display text in a user’s language-learn how in this tutorial. [iPhone SDK Articles]
Tutorial: JSON Over HTTP on the iPhone: With this tutorial, you’ll get a step by step how-to for JSON web services through an iPhone app. [Mobile Orchard]
Parsing xml on the iPhone: This tutorial will show you how to parse XML using the iPhone SDK. [Craig Giles]
Reading data from a SQLite Database: Here you’ll find a quick tutorial for reading data from a SQLite database. [dBlog]
How to Make an Orientation-Aware Clock: Through this tutorial, you’ll learn about building a simple, orientation-aware clock. [The Apple Blog]
Finding iPhone Memory Leaks: Carefully find iPhone memory leaks by using this tutorial. [Mobile Orchard]
Localizing iPhone Apps: MAke sure that your iPhone app is properly formatted according to a user’s native country or region with the help of this tutorial. [iPhone SDK Articles]
OpenAL Audio Programming on iPhone: Here you’ll get code snippets, learning, and more. [Gehaktes]
9 iPhone Memory Management Links and Resources: Here you’ll find a variety of iPhone memory management resources that can help you get things under control. [Mobile Orchard]
Parsing XML Files: Get an understanding of how you can parse XML files with this tutorial. [iPhone SDK Articles]

User Interface
These tutorials are all about the user interface and interaction.

UITableView-Drill down table view tutorial: Check out this tutorial to learn how to make a drill down table view. [iPhone SDK Articles]
iPhone Coding-Learning About UIWebViews by Creating a Web Browser: In this tutorial, you’ll learn about UIWebViews through the creation of a browser. [iCode]
Design Patterns on the iPhone: Check out David Choi’s guest lecture on user interface design for the iPhone. [New Jersey Institute of Technology]
UITableView-Adding subviews to a cell’s content view: This tutorial will show you how to customize the UITableViewCell. [iPhone SDK Articles]
Drill down table view with a detail view: Learn how to load a different detail view on the UITabBarController. [iPhone SDK Articles]
Extending the iPhone’s SDK’s UIColor Class: Learn how to extend the iPhone SDK UIColor class, and get code samples from this article. [Ars Technica]
UITableView: Learn how to make a simple index for the table view with this tutorial. [iPhone SDK Articles]

Building Tutorials
Check out these tutorials where you’ll build a specific app, and learn more about iPhone development along the way.

Build a Simple RSS Reader for the iPhone: Get walked through the creation of an RSS reader for a simple feed on the iPhone. [The Apple Blog]
iPhone Gaming Framework: This article offers a look at writing code for iPhone game developers. [Craig Giles]
Build a Simple RSS Reader for the iPhone: Follow this tutorial, and you’ll learn about building a simple iPhone RSS reader.
iPhone Game Programming Tutorial: This multipart tutorial offers a way to learn OpenGL and Quartz for iPhone development. [iCode]
Build your very own Web browser!: Follow this tutorial to learn about the process of building your own iPhone web browser. [dBlog]
iPhone application development, step by step: Find out how to build the iPhone application NEWSMATCH using OpenLaszlo. [OpenLaszlo]
Building an Advanced RSS Reader using TouchXML: Get step by step information for creating an advanced iPhone RSS reader from this tutorial. [DBlog]
iPhone SDK Tutorial: Building an Advanced RSS Reader Using TouchXML: This tutorial will help you learn more about iPhone development by building an advanced RSS reader with TouchXML. [dBlog]

Videos
Watch these videos for a visual guide to iPhone app development.

Basic iPhone Programming: Check out this video to get started with iPhone programming. [iPhone Dev Central]
First Step Towards the App Store: Work towards getting your app in the app store with the help of this tutorial. [You Tube]
Hello World: This tutorial will help you learn the basics of iPhone programming. [iPhone Dev Central]
UITableView iPhone Programming Tutorial: Watch this video to learn how to populate a UITableView. [YouTube]
iPhone App Tutorial 1: Check out this video to quickly learn about Interface Builder. [YouTube]
iPhone IB-Your First App: Watch this tutorial to learn how to use the Interface Builder. [iPhone Dev Central]
Understanding Source Code: Learn how to get started with development on the iPhone through this video tutorial. [YouTube]
How to Make an iPhone App: Create an iPhone app using Jiggy and this tutorial. [YouTube]
iPhone Development with Dashcode: Find out how to develop iPhone applications with Dashcode through this tutorial. [YouTube]

Development Resources
These resources are not courses or tutorials, but they are incredibly valuable resources for beginner iPhone app developers.

iPhone Open Application Development: This book will teach you how to create software for the iPhone environment. [Safari Books Online]
iPhone GUI PSD File: Use this set to get a comprehensive, editable library of iPhone UI assets. [Teehanlax]
31 iPhone Applications with Source Code: Teach yourself how to create iPhone apps by taking a look at the code in these. [Mobile Orchard]
iPhoney: Using iPhoney, you’ll be able to see how your creation will look on the iPhone. [Market Circle]
35 Free iPhone Icon Sets: Check out this resource to find a great variety of iPhone icons.

Dashboard Widget Tutorial

2010-09-30T18:18:00.000-07:00

This tutorial walks you through using Dashcode to create a Dashboard widget. As you follow the steps, you learn how to choose a widget template, customize your widget’s appearance and code, and share your widget with others. Completing this tutorial is a quick and easy way to get started building Dashboard widgets in Dashcode.

This document includes two additional tutorials, “Mobile Safari Web Application Tutorial” and “Dual-Product Web Application Tutorial,” which follow this one. The remainder of the document delves more deeply into the Dashcode development environment, describing how it supports both widget and web application development. If you don’t want to learn how to create a web application, you can continue learning more about Dashcode by reading “Starting a Project.”

Before You Begin !

In this tutorial, you build a Dashboard widget that counts down to your birthday, similar to the widget shown in Figure 1-1.

Figure 1-1 The Birthday widget

Before continuing, make sure that you have Dashcode installed on your Mac (the location is /Developer/Applications/). If you don’t have Dashcode installed, read “Getting and Running Dashcode” to learn how to get and install Dashcode.

Choose a Template

To start, double-click the Dashcode icon to open it. A new project window opens and displays a dialog in which you first select the type of project you’re interested in—in this case, Dashboard—and then, the kind of widget you want to create from an assortment of templates. Templates are handy starting points for creating common types of widgets. Select a template’s icon to show a short description of what that template does.

To make the Birthday widget, this tutorial uses the Countdown template. Select its icon and click Choose. A project window opens with a new widget based on the Countdown template, as shown in Figure 1-2.

Figure 1-2 A project window showing a new Dashboard widget

Along the left side of the project window is the navigator, which you use to switch between the various tools available when you’re designing a widget. The main portion of the window is the canvas, which you use to design your widget’s interface.

At the bottom of the navigator in Figure 1-2 you can see the Workflow Steps list, which guides you through the widget development process. Each step is a milestone in creating a widget, telling you what to do and where to do it. When you complete a step, mark it as done and move on to the next step.

Note: If you don’t want to see the Workflow Steps list, you can hide it by choosing View > Steps or by clicking the button that looks like a checkbox at the bottom edge of the project window (this button is highlighted in Figure 1-2).
Alternatively, you can view a list of the widget’s files in place of the Workflow Steps list. If you want to see the Files list, choose View > Files or click the list button in the bottom edge of the project window (it’s the button that looks like a bulleted list).
Set the Target Date

The Countdown template gives you a Dashboard widget with all the elements and code needed to count down to an event. All you need to do is tell the widget the target date. To set the target date, select Widget Attributes in the navigator. The canvas is replaced by the widget attributes pane, in which you specify important values that your widget needs.

In the Properties section of the widget attributes pane, choose Date and Time in the Target Kind pop-up menu and enter the date of your next birthday, as shown in Figure 1-3.

Figure 1-3 The Countdown template’s properties

Test the Countdown

Your new Dashboard widget is already fully functional. To prove this, choose Debug > Run to run the widget. Dashcode can run a widget without opening it in Dashboard, making it a handy place to test your widget and fix any problems you encounter. After the widget loads, it starts counting down towards your next birthday.

When you’re satisfied that your widget is working as you expect, choose Debug > Stop to stop it.

Now is a good time to save your widget project. Choose File > Save to save the project. Give your project a name and select a location to save it in. Your widget is saved in a widget project that encapsulates the widget and information Dashcode needs to create the widget for you.

Customize the Widget’s Appearance

Although you now have a fully functioning Dashboard widget that’s ready to share, you might want to personalize it to make it unique. Dashcode’s design tools make it easy to customize your widget’s interface. Select the widget item in the navigator (it should display the name you gave it when you saved the project). The widget attributes pane is replaced with the canvas.

First, change your widget’s body color. Select the widget body (also called the front image or frontImg) on the canvas and then choose Window > Show Inspector. The inspector window allows you to modify a selected element’s properties, such as its appearance and behavior. Click the Fill & Stroke button at the top of the inspector window (it’s the second from the left). If it’s not already selected, click the Style tab to reveal fill, stroke, corner roundness, and opacity values. Click the color well and choose a new color in the Colors window that appears. Try different fill styles until you find a combination that you like. If you want to try changing other effects, such as the glass appearance, click the Effects tab to reveal these values, as shown in Figure 1-4.

Figure 1-4 Tweaking the front image using the Fill & Stroke inspector

When you’re finished customizing your widget’s body, add a photo of yourself from iPhoto to the widget. Your iPhoto library is available from the Library window. To show your iPhoto library, choose Window > Show Library; then click the Photos button. Find a photo and drag it to your widget on the canvas. Resize it by dragging any of the resize handles on the photo.

Finally, change the Event Label text to something like “...days until my birthday.“ You can do this by selecting the Event Label text, clicking the Attributes button in the inspector window (it’s the leftmost button), and entering the text in the Value field, or by double-clicking the text in the widget body itself and entering the new text.

Add Functionality Using Parts

Now that you have a personalized Dashboard widget that counts down to your birthday, add a button that, when clicked, shows the Apple Store (so your friends and family can buy you a birthday present!). To add a button to your widget, use a button part. Parts are controls and views used on a widget’s interface.

To find a button part, choose Window > Show Library and click Parts. You can use the search field at the bottom of the window to help you find a particular part or type of part. From the list of parts, drag the Lozenge Button part from the Library window to your widget’s body. Double-click the button to select its label text, enter the text “Buy me a gift” and press Return. You'll probably need to resize the button to fit the new label.

Write Code to Show the Apple Store

To make the button take the user to the Apple Store when it’s clicked, you need to add a behavior to the button. In the inspector window, click the Behaviors button (it’s the rightmost button). This shows the Behaviors pane, in which you assign handler functions to events on an object. Select the button on the canvas and double-click in the Handlers column next to the onclick event name. Enter the name of a new function, such as showAppleStore, and press Return. Click the arrow next to the function name you entered to reveal the source code editor below the canvas. Here you write code to add functionality to your widget. Clicking the arrow reveals the showAppleStore function Dashcode inserted in your widget’s code. Between the braces ({ .. }) enter the following line of code:

widget.openURL("http://store.apple.com/");

The code in the source code editor should look like that in Figure 1-5.

Figure 1-5 A function in the source code editor

Test your widget again by choosing Debug > Run. Click the button you added and make sure a new Safari window opens with the Apple Store website displayed. Be sure you save your project often to preserve the changes you make.

Deploy Your Widget

Congratulations! You’ve created your first complete Dashboard widget using Dashcode.

To open your widget in Dashboard, choose File > Deploy Widget. Click Install in the dialog that appears to view your widget in Dashboard.

To share your widget with the world, select Run & Share in the navigator. The pane that appears displays the widget project name you chose in “Test the Countdown,” but you can replace this with a different name if you want. You can also set the minimum version of Mac OS X your widget should run in. Click Save to Disk to save your widget. You can now email it to friends or post it on your webpage. You can use the File > Compress command in the Finder to archive it.

Developer Forum

2010-09-30T18:01:00.000-07:00

iOS Developer News

2010-09-30T11:50:00.000-07:00

RSS Feed Reader Widget !

2010-09-30T11:19:00.000-07:00

Build Web Apps with Dashcode !

2010-09-30T11:15:00.000-07:00

When you first launch Dashcode (the easiest way to launch it is through Spotlight), you will see that Dashcode has already created some templates for you to build your Web applications quickly (see Figure 1).

Figure 1: The various templates provided by Dashcode

The best way to learn is to select each template (other than the Custom template) and examine the content of each application. When you have selected a template, examine their contents and press Command-r to test the application on the iPhone Simulator. Go ahead and have fun with each template. When you have enough fun and get yourself acquainted with the environment, come back and we shall create an iPhone Web application from scratch and you will see how each part is built.

Building the UI
Alright, now that you are back, create a new Custom project In Dashcode. Notice that by default, Dashcode created a content and a footer parts for you (see Figure 2). Parts are the various views that you seen on your Web applications, such as buttons, text, etc. For this section, you will create a simple currency convertor Web application for the iPhone.

Figure 2: The parts in the Custom template

Select each of these parts and press the delete key. We shall delete these two parts and add our own parts manually.

Using the Library (Window'Show Library), drag-and-drop a Stack Layout part to the design surface (see Figure 3).

Figure 3: Using the Library to drag and drop parts onto your application

Expand the stackLayout part and you should see that it contains two subviews - view1 and view2. Select view1 and change its size to 320px by 356px (see Figure 4) via the Inspector window (Window'Show Inspector). Do the same for view2.

Figure 4: Changing the size for view1 and view2 via the Inspector window

Double-click on view1 and rename it as mainScreen. Do the same for view2 and rename it as settings (see Figure 5).

Figure 5: Renaming the two subviews

In the Library, drag-and-drop the Rounded Rectangle Shape part onto the mainScreen view (see Figure 6).

Figure 6: Adding the Rounded Rectangle Shape part to the subview

It its Inspector window, select the Fill & Stroke tab and in the Style tab select Gradient fill (see Figure 7) and select two colors.

Figure 7: Using the gradient fill to fill the part

Select the Effects tab and check the Glass and Recess checkboxes (see Figure 8).

Figure 8: Adding glass effect to the part

Select the Metrics tab and select the Absolute layout (see Figure 9).

Figure 9: Using absolute layout for parts positioning

Add the following parts to the Rounded Rectangle Shape part (see Figure 10) and name them as:

Text
TextField
Pop-up Menu
Push Button

Figure 10: Adding additional parts to the subview

Select the settings subview and repeat the same steps you have performed above. Figure 11 shows the parts added to the settings subview.

Figure 11: Populating the settings subview

You are now ready to view the application on the iPhone Simulator. Press Command-r to view the application on the iPhone Simulator (see Figure 12). Notice that the application is hosted by mobile Safari on the iPhone.

Figure 12: Click 'Run' toView the application on the iPhone Simulator

Notice that you can only see the mainScreen subview. To see the settings subview, you need to write some code to navigate to it from the mainScreen subview.

Coding the Application
So you are now ready to write some code. With the mainScreen subview selected, right-click on the Settings button and select Events'onclick (see Figure 13).

Figure 13: Creating an event handler for the onclick event

You will be asked to name the event handler for this event. Name it as shown in Figure 14.

Figure 14: Naming the handler for the event

Notice that the code editor now appears at the bottom of the designer (see Figure 15).

Figure 15: The code editor where you can add your code

Enter the following code:

function btnSettings_ClickHandler(event)

{

var views = document.getElementById('stackLayout');

var settings = document.getElementById('settings');

if (views && views.object && settings) {

views.object.setCurrentView(settings);

}

Select the settings subview and right-click on the Save Settings button and select Events'onclick. Name the handler as btnSave_ClickHandler. Enter the following code:

function btnSave_ClickHandler(event)

{

var views = document.getElementById('stackLayout');

var front = document.getElementById('mainScreen');

if (views && views.object && front) {

views.object.setCurrentView(front, true);

}

Test the application again by pressing Command-r. This time, you will be able to navigate to the settings view by tapping on the Settings button in the mainScreen subview (see Figure 16).

Figure 16: Tapping on the Settings button navigates to the settings subview

Database Access
So far, your application displays two screens where you can perform some currency conversion as well as set the exchange rates for the different currencies. For simplicity, I am going to assume that you are converting the currencies into Singapore Dollars (SGD). All the exchange rates would be based on the SGD as the base currency.

To allow the users to store their own exchange rates, you will make use of the local database feature as defined in HTML 5 (which is supported by Mobile Safari). Doing so allows users of your application to store the exchange rate locally on their iPhones.

In the main.js file, add the following lines of code for performing database operations:

var database = null; // The client-side database

var DB_tableName = "CurrencyKeyValueTable"; // database name

// Function: initDB() - Init and create the local database, if possible

function initDB()

{

try {

if (window.openDatabase) {

database = openDatabase("ExchangeRatesDB", "1.0",

"Exchange Rates Database", 1000);

if (database) {

database.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM " + DB_tableName, [],

function(tx, result) {

loadRates();

function(tx, error) {

// Database doesn't exist. Let's create one.

tx.executeSql("CREATE TABLE " + DB_tableName +

" (id INTEGER PRIMARY KEY," +

" key TEXT," +

" value TEXT)", [], function(tx, result) {

initRates();

loadRates ();

});

}

} catch(e) {

database = null;

}

// Function: initRates() - Initialize the default exchange rates

function initRates()

{

if (database) {

database.transaction(function (tx) {

tx.executeSql("INSERT INTO " + DB_tableName +

" (id, key, value) VALUES (?, ?, ?)", [0, 'USD', 1.44]);

tx.executeSql("INSERT INTO " + DB_tableName +

" (id, key, value) VALUES (?, ?, ?)", [1, 'EUR', 2.05]);

tx.executeSql("INSERT INTO " + DB_tableName +

" (id, key, value) VALUES (?, ?, ?)", [2, 'AUS', 1.19]);

});

}

// Function: loadRates() - Load the currency exchange rates from DB

function loadRates()

{

var element;

var popUpElement = document.getElementById('popupConvertTo');

if (database) {

database.transaction(function(tx) {

tx.executeSql("SELECT key, value FROM " + DB_tableName, [],

function(tx, result) {

for (var i = 0; i < result.rows.length; ++i) {

var row = result.rows.item(i);

var key = row['key'];

var value = row['value'];

//---populate the pop-up menu part---

popUpElement.options[i].text = key;

popUpElement.options[i].value = value;

if (key == 'USD') {

element = document.getElementById('txtUSD');

}

else {

if (key == 'EUR') {

element = document.getElementById('txtEUR');

}

else if (key == 'AUS') {

element = document.getElementById('txtAUS');

}

element.value = value;

}

function(tx, error) {

showError('Failed to retrieve stored information from database - ' +

error.message);

});

}

else {

loadDefaultRates();

}

// Function: saveRates() - Save the currency exchange rates into DB

function saveRates()

{

if (database) {

var elementUSD = document.getElementById('txtUSD');

var elementEUR = document.getElementById('txtEUR');

var elementAUS = document.getElementById('txtAUS');

database.transaction(function (tx) {

tx.executeSql("UPDATE " + DB_tableName + " SET key = 'USD',

value = ? WHERE id = 0", [elementUSD.value]);

tx.executeSql("UPDATE " + DB_tableName + " SET key = 'EUR',

value = ? WHERE id = 1", [elementEUR.value]);

tx.executeSql("UPDATE " + DB_tableName + " SET key = 'AUS',

value = ? WHERE id = 2", [elementAUS.value]);

});

}

loadRates();

}

// Function: deleteTable() - Delete currency exchange table from DB

function deleteTable()

{

try {

if (window.openDatabase) {

database = openDatabase("ExchangeRatesDB", "1.0",

"Exchange Rates Database");

if (database) {

database.transaction(function(tx) {

tx.executeSql("DROP TABLE " + DB_tableName, []);

});

}

} catch(e) {

}

// Function: loadDefaultRates() - Load the default exchange rates

function loadDefaultRates()

{

var popUpElement = document.getElementById('popupConvertTo');

var element = document.getElementById('txtUSD');

element.value = "1.44";

popUpElement.options[0].text = "USD";

popUpElement.options[0].value = element.value;

element = document.getElementById('txtEUR');

element.value = "2.05";

popUpElement.options[1].text = "EUR";

popUpElement.options[1].value = element.value;

element = document.getElementById('txtAUS');

element.value = "1.19";

popUpElement.options[2].text = "AUS";

popUpElement.options[2].value = element.value;

}

The database code above is pretty straightforward - store the exchange rates inside the database and populate the pop-up menu part when the rates are retrieved.

Modify the load() function as follows:

// Function: load()

// Called by HTML body element's onload event when the Web application is ready to

// start

function load()

{

dashcode.setupParts();

initDB();

if (!database) {

loadDefaultRates();

}

Press Command-r to test the application. When the application is loaded, the pop-up menu will now display the three different currencies (see Figure 17).

Figure 17: The pop-up menu part displaying the different currencies

When you tap on the Settings button, the exchange rates would also be displayed in the settings subview (see Figure 18).

Figure 18: The exchange rates displayed in the settings subview

Performing the Conversion
You are now ready to perform the actual conversion of the currencies. In Dashcode, select the mainScreen subview and right-click on the Convert! Button and select Events'onclick (see Figure 19).

Figure 19: Handling the onclick event for the Convert! button

Name the event handler as btnConvert_ClickHandler and code it as follows:

function btnConvert_ClickHandler(event)

{

var amount = document.getElementById("txtAmount").value;

var rates = document.getElementById("popupConvertTo").value;

var result = amount * rates;

alert(result);

}

Press Command-r to test the application. Enter an amount and select the currency to convert. Tapping on the Convert! button will now display the amount converted (see Figure 20).

Figure 20: Try converting some currencies!

Converting your Web Application into an iPhone Native Application
Now that your application is completed, you may deploy your application onto a Web server so that users can access your application through the Safari browser on their iPhones. However, since this is a Web application, the user must have access to the Internet, or else there is no way to access your application. And since our application does not make use of any server-based data, it is a good candidate to convert into a native iPhone application. The easiest way would be to host the Web application within the Safari browser, which is represented by the WebView view in the iPhone SDK.

In this section, I will show you how you can convert an iPhone Web application into a native iPhone application.

First, deploy your Web application by clicking the Share item in Dashcode (see Figure 21). Click the Deploy button so that all the files of the application will be saved to a Web publishing directory. Take note of the Web publishing directory shown in Dashcode. It is saved in /Users//Sites/CurrencyConvertor/. You will make use of the files contained within this folder shortly.

Figure 21: Deploying a Web application in Dashcode

Launch Xcode and create a new View-based Application project. Name the project as CurrencyConvertor.
In Finder, navigate to the /Users//Sites/CurrencyConvertor/ folder and select the files shown in Figure 22.

Figure 22: All the project files created by Dashcode

Drag-and-drop all the selected files onto the Resources folder in Xcode. Xcode will prompt you with a dialog (see Figure 23). Check the Copy items into destination group's folder (if needed) checkbox and click Add.

Figure 23: Adding all the Dashcode files into the Resource folder in Xcode

Perform a global Find-and-Replace (by pressing Shift-Command-F). Search and replace the following strings with an empty string (see Figure 24):

Parts/
Images/

Figure 24: Replacing all instances of "Parts/" and "Images/" with an empty string

This will update the various HTML and JavaScript files that reference other files using the Parts/ and Images/ folder. Files stored in the Resources folder of your Xcode application have no directory structure when they are deployed; hence all the files are in a flat directory.

Select the files shown in Figure 25 and drag-and-drop them onto the Copy Bundle Resources (16) folder. This will ensure that all the HTML, JavaScript, CSS, and images files will be deployed together with your application.

Figure 25: Copying all the Web files into the targets folder so that they are deployed together with your application

In the CurrencyConvertorViewController.h file, add the following statements to define an outlet:

    #import

    @interface CurrencyConvertorViewController : UIViewController {
        IBOutlet UIWebView *webView;
    }

    @property (nonatomic, retain) UIWebView *webView;

    @end

Double-click on the CurrencyConvertorViewController.xib file to open it in Interface Builder.
Add a WebView view to the View window and control-click and drag the File's Owner item to the WebView view (see Figure 26). Select webView.

Figure 26: Connecting an outlet to a view

In the CurrencyConvertorViewController.m file, add the following statements:

    #import "CurrencyConvertorViewController.h"

    @implementation CurrencyConvertorViewController

    @synthesize webView;

    - (void)viewDidLoad {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"index"
                            ofType:@"html"];
        [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path
                                isDirectory:NO] ]];
        [super viewDidLoad];
    }

That's it! Press Command-r to test the application on the iPhone Simulator. The Web application is now hosted within the WebView view (see Figure 27). What you have just done is convert a Web application into a native application!

Figure 27: Running the Web application as a native iPhone application

Developer Tips

2010-09-28T11:43:00.000-07:00

Developer News

2010-08-08T03:39:00.000-07:00

Developer Widgets

2010-08-08T03:38:00.001-07:00

Development Tools

2010-08-08T03:38:00.000-07:00

Introducing Dashcode:

2009-01-01T05:55:00.001-08:00

New in Mac OS X Leopard, Dashcode lets you quickly and easily build elegant and compelling Dashboard widgets.
Created to meet the need of widget developers, Dashcode combines powerful visual layout tools with a code editor, debugger, and comprehensive package management into a world-class integrated development environment.
It lets you easily and quickly create powerful and useful widgets for yourself, your organization, or even for distribution to the world.
From the start, Dashboard widgets were designed to be easy to develop. They use the familiar and widely used Web technologies of HTML, JavaScript, and CSS.
Because of the use of standard Web technologies, it's possible to develop a widget using only a text editor, such as TextEdit. However, very few developers are well-versed in creating both great graphical artwork and smoothly functioning code.
As well, it became apparent that the process of packing up a widget and tracking down bugs takes too much time when using just a text editor.
Dashcode was created to address all of these issues.
It takes care of packaging so that you don't have to create a widget's bundle by hand.
It provides a test runtime with a built-in debugger that's a click away so that you don't have to deploy your widget into Dashboard to test it.
And, it provides rich library of graphic elements for you to use to give your widget a compelling design. These features let you focus on making cool, unique, and polished widgets.
This article, part of the Leopard Technology Series for Developers, introduces you to Dashcode and touches on some of its major features.
You'll soon be on your way to creating your own widgets with Dashcode.

A Good Starting Point

One of the first ways that Dashcode helps you to work faster is that it provides several common starter templates to build some of the most popular types of widgets.
The templates range from a basic "Hello, World!" widget to a fairly complex system monitoring widget. All of these templates give you a front and back canvas layout, an icon, and the necessary HTML, CSS, and JavaScript files.
By taking care of these common items that all widgets share, you'll be able to get to the real task of working on what makes your widget unique that much more quickly.
For example, when you first create a project, you'll be greeted with the following:

When you pick one of these templates, everything you need to get started is created and you can immediately run the widget and get feedback on what you need to do next.

For example, here are a few widgets created with the provided templates:

Behind the scenes, when Dashcode creates a new project, it's managing all of the needed files for you. Instead of making you deal with the files in the Finder, Dashcode presents a clean interface to work with them.

For example, here's a view of a new Photocast widget in Dashcode:

This view is the primary Dashcode workspace and gives you access to all of the tools you'll need in order to create, debug, and ship your widgets.
The left side of the Dashcode window holds the Parts Outline.
This gives you quick and easy access to all the various components that make up your widget.
You'll notice that the parts outline gives you structured access to both the front and back of your widget.
As well, it gives you access to the attributes, default image, and icon for your widget.
The following figure shows the attributes editor for the widget.

The parts outline isn't the only way to navigate through your widget.
You can also use the Search box. When you enter a search term, the parts outline is replaced with a Spotlight-style results listing.

The Parts Outline, as well as the Spotlight style search functionality, gives you quick access to any part of your widget that you need to work on.
Now that you can see how to navigate your widget, let's look at actually working with your widget.

Workflow

To help you build a widget, Dashcode provides a helpful workflow for each of the templates it provides. These workflows are tuned for each template and will walk you step-by-step through the process of taking a template and creating a finished widget from it.
You can access this list by clicking the Show Workflow Button.

Working with the Layout Canvas.
You can manipulate the position of any element in a widget by simply moving it about in the layout. Alignment guides and an absolute position indicator help you adjust your widget's user interface to perfection.
You can also adjust the total size of your widget by using the resize-handle at the lower-right corner of the widget.

You can also work with the attributes of any element by selecting the element and bringing up the Inspector (Option-Command-I).
For example, to change the attributes of the title text in the Photocast starter widget, you could select the text, bring up the Inspector and then change the Character attributes, as shown in the following figure.

As you adjust the properties for an object, Dashcode makes all of the necessary changes in the widget's CSS file.
For example, changing the color and adding a drop shadow to the text above results in the following CSS rules being set:


#caption {
position: absolute;
text-align: center;
opacity: 0.75;
overflow: hidden;
background-color: rgb(111, 111, 111);
font-weight: bold;
font-family: Helvetica Neue;
font-size: 18px;
height: 26px;
color: rgb(255, 255, 0);
left: 0px;
top: -1px;
right: 0px;
width: auto;
text-shadow: rgb(0, 0, 0) 2px 2px 4px;
}

There's a very direct connection between the actions you take in Dashcode and the resulting changes in the underlying files. Dashcode lets you work in both worlds easily.

Editing Code

Dashcode does everything possible to make it easy to work with your widgets graphically. When it's time to add custom behavior, however, you'll need to work with the actual source files.
To edit these files, Dashcode provides a fully-functional code editor for CSS, HTML, and JavaScript files.
For example, to further illustrate the connection between actions you take in the Dashcode user interface and the underlying files, here's a view of the CSS tweaks shown above:

The Dashcode editor is a serious coder's editor.
It features automatic indentation, syntax highlighting, and on-demand code completion.
For example, if you were writing a CSS file by hand and wanted to get all of the possible completions starting with font, a quick click of the Option-Escape keys brings up a list, as shown in the following figure:

You can also quickly navigate your files by CSS selector or JavaScript function name, as shown in the following figure:

The Library

Dashcode comes with a comprehensive set of UI widgets that you can use to create your widget's interface.
You can open up the Library using either the Library toolbar button or the Window > Show Library menu. Not only does the Library give access to UI items, you can also browse your iLife photos, music, and movies to add them to your widget.

Running Your Widget

Once you've created your widget, testing it is easy.
Just press Command-R and it will run in an embedded Dashboard runtime.
You'll even see it "splash" onto your screen.

Once started, your widget is fully functional and runs just like it would in the real Dashboard. Dashcode's embedded runtime, however, gives you the ability to see runtime events and inspect your widget's object model.
It also features the Code Evaluator which allows you to execute arbitrary JavaScript code against your running widget.
This allows you to get a better sense of how your widget is working and can help you debug problems.
As an example of using the Code Evaluator, if you want to work with the "Loading..." text at the bottom of the Photocast example widget at runtime, you can type the following into the Code Evaluator window:

document.getElementById("loading").innerText =
"Now loading the next photograph..."

Here's an image showing what this looks like:

With the Code Evaluator, you can manipulate almost every aspect of your widget's runtime object model. For example, you could query the size of an RSS feed and display that information from within the Code Evaluator.
This allows you to try out snippets of JavaScript that you can then integrate into your widget once you're happy with it.

Debugging Support

Dashcode wouldn't be a true world-class development environment without one more important feature—a fully functional debugger.
You can set breakpoints in your JavaScript code and walk through your code step by step and inspect the values of your widget's variables.
For example, you could set a breakpoint in the showBack method, which gets called when the user flips a widget over to access its preferences.
Once set, the debugger will stop the execution of the widget within the showBack method and let you step through your code.

In addition to setting breakpoints, you can also have Dashcode log every function and method call that happens as your widget runs, as shown in the following figure:

From tracing through your widget's execution to setting breakpoints and stepping through your widget's code, Dashcode gives you the right tools to make sure that your widget works the way you expect it to.

Get Started with Leopard

The next generation of the world's most advanced operating system is now available.
Tap into the innovative technologies of Mac OS X Leopard and
design your products with new and compelling features.
With an ADC Premier or Select Membership, you have a range of developer resources from Apple engineers and experts, including ADC on iTunes, Coding Headstarts, the ADC Compatibility Labs and more.
Learn how ADC Memberships provide you Apple expertise. From code to market.

Dashboard 10.4(Tiger) and 10.5(Leopard) Tips:

2009-01-01T05:54:00.000-08:00

Change the Dashboard shelf's background image:

In 10.4, when you press the '+' symbol in the bottom left corner while Dashboard is active,
the Dashboard shelf slides up into view containing all your widgets.The background image used for the shelf can be found here:

...System/Library/CoreServices/Dock.app/Contents/Resources/perf.png

You can replace this image with any PNG image you like and it'll be tiled, or you can use a single, full width image.
The shelf is 118 pixels high and as wide as your monitor (1024 pixels in my case),
so you can use those dimensions to construct your own shelf background.
The bottom area (where the widget names appear) will need to be lighter in color for best results,
as the text is both light and shadowed.
The height of the text area is 14 pixels.
Note also that you do not need to make your PNG file the full width of your monitor --
the image will repeat horizontally if it's not full-width.
I used a tiny 2KB PNG to create the above full shelf background.

Speed up Dashboard by clearing out its cache:

Over the course of the past few months, Dashboard had become painfully slow for me,
sometimes taking 10 to 20 seconds to load.

I took a look at:

~/Library/Caches/ DashboardClient

...and found that the Dashboard cache was 20MB !!!.

This seemed excessive (plus, I had a fairly recent backup), so I took a gamble and deleted all the files in the DashboardClient folder. Dashboard now loads almost instantaneously for me.

Quickly free memory used by Dashboard widgets:

If you only use Dashboard on rare occasions, and don't want all those widgets to stay running forever,
try the following AppleScript:

tell application "Dock"

quit

launch

end tell

This will relaunch the Dock and, since all the Dashboard widgets are subprocesses of the dock, they will be closed. Widgets will stay closed until Dashboard is invoked again.

This is a handy way to quickly free up the RAM used by open Dashboard widgets.

Run it, and the RAM is released. Press F12 again after that, and you'll see that your open Widgets are all still open (you'll just have to wait through that slight delay as Dashboard 'activates' them again).

Detach widgets from the Dashboard:

If you'd like one of your Dashboard widgets to be available all the time, instead of only when you have activated Dashboard via F12, then activate the Dashboard dvelopment mode.

Open the Terminal and type defaults write:

com.apple.dashboard devmode YES

...and press Return. Then logout and log back in again.
Now debugging mode is activated.

To get a widget off of the Dashboard and onto your desktop, just do the following:

1 - Activate Dashboard by pressing F12 (or whatever key you've assigned to Dashboard).
2 - Begin dragging the widget.
3 - Press F12 again, before letting up on the mouse button.
4 - Drop the widget wherever you want it.

You can do the same thing in reverse to drag the widget back onto the Dashboard. Also of interest: while a widget is frontmost, you can press Command-R to reload it. (This may be necessary if a widget is buggy and gets messed up somehow.) There's even a nifty Core Image-based twirl effect to accompany the reload.

However, I find it extremely useful -- there are certain widgets that you'd just rather see and use all the time, instead of only in Dashboard mode. Note that the widgets float above all windows, so this trick is most useful if you have some spare desktop space.

To disable this mode, repeat the above command, but replace YES with NO, and then logout/login again. Note that you can also restart the Dock to make the changes take effect (the Dock controls the Dashboard).

Widget Limbo !

When you have dragged a widget out of the Dashboard layer you can make it go into Widget Limbo like this: press and hold the mouse button over the widget; do not move the mouse. Press F12. Release the mouse button.

The widget will now belong outside (beneath) Dashboard, but only be visible (in a darkened state) when Dashboard is active. So it's not possible to close it nor move it. (Normally you can hold the Option key to close a widget).

Generic Ajax Widget

2009-01-01T05:53:00.001-08:00

As part of this article, I've included a generic Ajax widget that simply grabs a URL and parses out a small section of the DOM that I'm interested in.
It’s a good jumping off point to get going with an Ajaxified widget.

Getting Dashcode

If you've got a recent version of Leopard or Tiger, the system Disks will contain Dashcode in the developer kit (it may be installed already in your /Developer/Applications directory).

Apple did have Dashcode available for download, but since it expired in July (when Leopard was to come out) it’s no longer there.
You can hunt around the Internet for a old mirror if you don't have the CDs.
Once installed, it'll say it’s expired: just get Dashcode working again.

Stability

Dashcode is particularly ropy with Safari 3.
With Safari 2 it’s much more stable. Since there is the occasional crash from Dashcode,
I would recommend constantly saving your project as you're coding.
I found more than 10% of the time, Dashcode would crash and result in a total loss of my code from the last save point.

Also, I've noticed that dumping a lot to the run log, when viewing the log, can cause Dashcode to slow right down to almost hanging.
Best to avoid dumping large amounts of HTML to the log.

However - and this is a big one - the upside of programming with Dashcode is worth the risk of the crash, because it’s takes most work out of the design process.

Since you're using it’s GUI to drag and drop your design and how the user will interact with it, rather than having to code the look and feel by hand.

Designing Widgets

The interface and the library component of Dashcode makes it possibly the strongest app for developing widgets. It’s 2 minutes work to create a glass effect on your widget, or to place the elements on the window and get going.

I would strongly recommend studying other widgets, and reading through the Dashcode design recommendations as it’s easy to design a widget that works, but twice the work to design a widget that’s usable and works well.

You'll find you can place widget-type objects on your widget, like scroll areas or gauges - but to handle them in the code isn't entirely intuitive, which is why the best source of understand how these interface elements work, is by opening up other widgets that already make use of the element.

Controls

Dashcode offers the easy integration of bespoke elements such as the scrollarea, gauges and other such sexy components.
They're pretty easy to drop on to the widget from Dashcode, but until you're coding, they're not immediately obvious how they work.
The help is limited, so I would recommend to develop by tutorial, in particular, look for the 'refresh()' methods - as this seems to be a fairly standard way to redraw objects.

Full documentation for the Apple classes API is available, but it’s pretty clinical.

Effects

Although effects are available within the Apple classes, you'll need to implement them yourself.

This is fairly limited to dynamic resizing of the widget, which is achieved using:

window.resizeTo(x, y);

If you are going to resize the widget dynamically, check out the Apple resizing examples too.

I used this technique in my HTML entities widget to keep the widget small when it’s dropped in to the Dashboard, but to allow it to grow dynamically when the user searched for a particular HTML entity.

You should be able to find easing effects code and examples if the built in Apple animation class doesn't suite your needs.

Running system commands

This is one of the few areas that’s well documented in the provided API.

You can run system commands using the following type of command:

widget.system('ps -auxww | grep ' + myCommand, null);

What you should keep in mind, is that you can run any command through the system method. This includes Perl, Ruby, AppleScript and anything else that suits your needs.
Using these commands I've recently been able to create a widget that queries Mail’s SQLite’s database via Perl.
It was a case of running the system method and capturing the output (and in my case, eval'ing it from a JSON output).

Ajax in the widget

You widget supports a variation of the Ajax object (or rather xmlhttprequest object).

This version isn't bound by the usual security constraints of a browser - most importantly, it can request content from any domain.

To execute any Ajax requests from your widget, ensure you have the Allow Network Access attribute turned on - otherwise the Ajax will fail without any given reason.

For example, you could use Ajax to pull your film page from IMDb and then parse the XML for the elements of interest.

However, if you do want to pull some data from a web page and process it using the DOM returned you have to fiddle the request - in particular the responseXML will be null because the page being returned isn't text/xml - it’s text/html. You can do it using the following (in jQuery syntax):

$.ajax({
url: 'http://remysharp.com/example_page', // doesn't really exist!
dataType: 'html', // important
success: function (xml) {
// convert the HTML to an XML DOM object
var dom = getDOMfromXML(xml);
alert(dom.getElementsByTagName('h1').length);
}
});

function getDOMfromXML(xml) {
var d = document.createElement('div');
xml = xml.substring(xml.indexOf('<body') + xml.substring(xml.indexOf('<body')).indexOf('>')+1);
xml = xml.substring(0, xml.indexOf('</body>'));
d.innerHTML = xml;
return d;
}

This getDOM function is pretty horrible - but it works. I tried using DOMParser and tried using Ajax local data trick and I tried using an iframe to inject the XLM - but neither would load the XML properly (in fact it would be blank).

The iframe would not load properly because it was still loading the entire frame while I was trying to access it.

You can see this in use in the generic Ajax widget or download the source Dashcode project.

Widget Attributes

The widget attributes are fairly self explanatory, but it’s worth knowing:

Allow Network Access is required for Ajax requests
Allow Command Line Access is required for running external programs, i.e. if you have a Perl script executing some arbitrary task

If you intend to make your widget available in different languages, then this is the place to enter the different strings.

The Inspector

Hide items from the default image to present a better widget when it’s installing. It can to keep the preview of your app looking clean.

Debugging

Dashcode comes with a log that can be viewed during run time.

You have following debugging tools:

Breakpoints
Live stack traces
Evaluate window - to test commands

To write to the log, you need to use alert("My debug message");.

The iPhone SDK !

2009-01-01T05:52:00.000-08:00

The new iPhone SDK in Dashcode allows you to create Web Applications for the iPhone and iPod Touch.
It provides three templates: Custom, Browser and RSS.

It provides you with fields to specify how to handle orientation changes and zooming.

There is a Home Screen icon editor.

Here is how the Browser template looks when run using the iPhone Simulator.

I copied the Ski Report icon from the Dashboard Widget.

I then tried to dump the contents of the Translation Dashboard widget into an iPhone Web Application. It nearly worked.

The RSS template allows you to enter an RSS field URL and customize which and how many articles should appear.

I added Slashdot's Home Screen Icon.

Running it in the simulator.

Deploying the Web Application is very easy.
Select "Deploy Web Application" from the File menu, and it outputs a folder that you can put on your server.

Apple iPhone SDK with Dashcode allows you to make web apps:

With Apple iPhone SDK anyone can now code a web application for the iPhone.
How you may well ask?
Well Apple’s iPhone SDK includes a new version of Dashcode which makes easy of web-app development for the iPhone.

You can start off using the default browsing screen template, (and the interface includes preset styles we associate with the iPhone) or simple code your own.
Those new to iPhone development will be pleased to hear that it is possible for them to take the slider plate and add on gauges, indications, form elements, forward/back buttons and much more, all with a little knowledge of code.

One drawback I can possibly see is with the new Dashcode just maybe the web will suddenly be inundated with an abundance of new iPhone web-apps.
More than likely most will not be that good, but then again maybe some amateur developer may develop a really cool web-app, who knows?
So if you are a budding web-app developer, or even if not, go and download the iPhone SDK and have a play at web-app development, you may just be very good at it.

Refreshing a Widget

2009-01-01T05:51:00.002-08:00

A tough reference to find is keyboard shortcuts within Mac OS X Dashboard.

I'm not talking about launching Dashboard - everyone knows you can set "hot keys" or mouse corners to trigger that. I'm referring to keyboard shortcuts once your in Dashboard view.

To refresh a specific widget, click on the widget once, and hit Command + R.

You'll notice a very cool "swirl" effect, which almost looks like a hurricane on a radar screen:

Every widget you refresh will perform this "swirl" action, and subsequently refresh the widget content.

If you're wondering what widget this was that I refreshed, it's the basic weather widget from Apple:

If you manually click the "+" icon in the lower left corner of Dashboard view, your "widget toolbar" will appear along the bottom.

Here you can add or remove widgets from display.

To open this "widget toolbar," you can also hit Command + "+".

That's Command and the "+" key at the same time. Hitting it again will close the "widget toolbar."

This is not so much a keyboard shortcut, but a keyboard adjustment.

If you hold down the "Option" key while in Dashboard view, and hover over a widget, you can manually remove the widget by clicking the "X" in the upper left corner of the widget.

The "X" only appears when you move the mouse over each widget.

This is quicker than opening the "widget toolbar" first, and then removing.

I'm making a list of additional shortcuts that would be useful:

Much like hitting Command + R refreshes a widget, hitting Command + I should provide info on the widget. (Only applicable for widgets that have a "back side" info panel.)

Some way of removing widgets without having to manually click the "X". (I'm thinking Command + W or something similar.)

Key Combos !

2009-01-01T05:51:00.001-08:00

Startup:

Press X during startup - Force Mac OS X startup
Press Option-Command-Shift-Delete during startup - Bypass primary startup volume and seek a different startup volume (such as a CD or external disk)
Press C during startup - Start up from a CD that has a system folder
Press N during startup - Attempt to start up from a compatible network server (NetBoot)
Press T during startup - Start up in FireWire Target Disk mode
Press Shift during startup - Start up in Safe Boot mode and temporarily disable login items and non-essential kernel extension files (Mac OS X 10.2 and later)
Press Command-V during startup - Start up in Verbose mode.
Press Command-S during startup - Start up in Single-User mode

Finder window:

Command-W - Close Window
Option-Command-W - Close all Windows
Command-Right Arrow - Expand folder (list view)
Option-Command-Right Arrow - Expand folder and nested subfolders (list view)
Command-Left Arrow - Collapse Folder (list view)
Option-Command-Up Arrow - Open parent folder and close current window

Menu commands:

Shift-Command-Q (Apple Menu) - Log out
Shift-Option-Command-Q (Apple Menu) - Log out immediately
Shift-Command-Delete (Finder Menu) - Empty Trash
Option-Shift-Command-Delete (Finder Menu) - Empty Trash without dialog
Command-H (Finder Menu) - Hide Finder
Option-Command-H (Finder Menu) - Hide Others
Command-N (File Menu) - New Finder window
Shift-Command-N (File Menu) - New Folder
Command-O (File Menu) - Open
Command-S (File Menu) - Save
Shift-Command-S (File Menu) - Save as
Command-P (File Menu) - Print
Command-W (File Menu) - Close Window
Option-Command-W (File Menu) - Close all Windows
Command-I (File Menu) - Get Info
Option-Command-I (File Menu) - Show Attributes Inspector
Command-D (File Menu) - Duplicate
Command-L (File Menu) - Make Alias
Command-R (File Menu) - Show original
Command-T (File Menu) - Add to Favorites (Mac OS X 10.2.8 or earlier), Add to Sidebar (Mac OS X 10.3 or later—use Shift-Command-T for Add to Favorites)
Command-Delete (File Menu) - Move to Trash
Command-E (File Menu) - Eject
Command-F (File Menu) - Find
Command-Z (Edit Menu) - Undo
Command-X (Edit Menu) - Cut
Command-C (Edit Menu) - Copy
Command-V (Edit Menu) - Paste
Command-A (Edit Menu) - Select All
Command-1 (View Menu) - View as Icons
Command-2 (View Menu) - View as List
Command-3 (View Menu) - View as Columns
Command-B (View Menu) - Hide Toolbar
Command-J (View Menu) - Show View Options
Command - [ (Go Menu) - Back
Command - ] (Go Menu) - Forward
Shift-Command-C (Go Menu) - Computer
Shift-Command-H (Go Menu) - Home
Shift-Command-I (Go Menu) - iDisk
Shift-Command-A (Go Menu) - Applications
Shift-Command-F (Go Menu) - Favorites
Shift-Command-G (Go Menu) - Goto Folder
Command-K (Go Menu) - Connect to Server
Command-M (Window Menu) - Minimize Window
Option-Command-M (Window Menu) - Minimize All Windows
Command-? (Help Menu) - Open Mac Help
Command-Space - Open Spotlight (Mac OS X 10.4 or later)
Command-esc (Front Row) - Activates Front Row for certain Apple computers

Universal Access and VoiceOver:

Option-Command-8 - Turn on Zoom
Option-Command-+ (plus) - Zoom in
Option-Command-- (minus) - Zoom out
Control-Option-Command-8 - Switch to White on Black
Control-F1 - Turn on Full Keyboard Access

When Full Keyboard Access is turned on,
you can use the key combinations listed in the table below from the Finder:

Control-F2 (Full Keyboard Access) - Highlight Menu
Control-F3 (Full Keyboard Access) - Highlight Dock
Control-F4 (Full Keyboard Access) - Highlight Window (active) or next window behind it
Control-F5 (Full Keyboard Access) - Highlight Toolbar
Control-F6 (Full Keyboard Access) - Highlight Utility window (palette)
Command-F5 or fn-Command-F5 - Turn VoiceOver on or off (Mac OS X 10.4 or later)
Control-Option-F8 or fn-Control-Option-F8 - Open VoiceOver Utility (Mac OS X 10.4 or later)
Control-Option-F7 or fn-Control-option-F7 - Display VoiceOver menu (Mac OS X 10.4 or later)
Control-Option-; or fn-Control-option-; - Enable/disable VoiceOver Control-Option lock (Mac OS X 10.4 or later)

The Universal Access preference pane allows you to turn on Mouse Keys. When Mouse Keys is on, you can use the numeric keypad to move the mouse. If your computer doesn't have a numeric keypad, use the Fn (function) key.

Mouse Keys:

8 - Move Up
2 - Move Down
4 - Move Left
6 - Move Right
1, 3, 7, and 9 - Move Diagonally
5 - Press Mouse Button
0 - Hold Mouse Button
. (period on keypad) - Release Mouse Button (use after pressing 0)

Other Commands:

Option-Command-D - Show/Hide Dock
Command-Tab - Switch application
tab - Highlight next item
Command-Up Arrow - Move up one directory
Command-Down Arrow - Move down one directory
Page Up or Control-Up Arrow - Move up one page
Page Down or Control-Down Arrow - Move down one page
Option-Drag - Copy to new location
Option-Command-Drag - Make alias in new location
Command-Drag - Move to new location without copying
Shift-Command-C - Show Colors palette in application
Command-T - Show Font palette in application
Command-Shift-3 - Take a picture of the screen
Command-Shift-4 - Take a picture of the selection
Command-Shift-4, then press Control while selecting - Take a picture of the screen, place in Clipboard
Command-Shift-4, then Spacebar - Take a picture of the selected window
Option-Command-esc - Force Quit
Control-Eject - Restart, Sleep, Shutdown dialog box
Control-Command-Eject - Quit all applications and restart
Option-Command-Eject or Option-Command-Power - Sleep
Command-click window toolbar button (upper right corner) - Cycle through available views for the window's toolbar (dependant on the nature of the Finder or application window)
Command-` - Cycle through windows in application or Finder (if more than one window is open)
Function-Delete - (portables only--PowerBook, iBook, MacBook, MacBook Pro) Forward Delete - (delete the character to the right of your cursor)

Sample Codes for Dashcode !

2009-01-01T05:49:00.000-08:00

Dashboard is a display and management system for Mac OS X desktop utilities, called widgets. Developers can create widgets, such as a clock or a calculator,
to provide functionality that doesn't require the complexity of a large application.

Dashcode Sample Codes:

Hello World
Introductory Dashboard widget example
(HTML)
(DMG)
(ZIP)

Fortune
Deprecated - Demonstrates use of a widget plug-in
(HTML)
(DMG)
(ZIP)

Scroller
Dashboard widget with a DHTML scrollbar implementation
(HTML)
(DMG)
(ZIP)

Birthdays
Dashboard widget with a plug-in that queries AddressBook.framework for contacts with upcoming birthdays
(HTML)
(DMG)
(ZIP)

Fader
Demonstrates fading of elements inside a Dashboard widget
(HTML)
(DMG)
(ZIP)

Goodbye World
Demonstrates display and use of widget preferences to save a widget's state
(HTML)
(DMG)
(ZIP)

Hello Welt
Demonstrates localization techniques for Dashboard widgets
(HTML)
(DMG)
(ZIP)

Voices
Demonstrates use of the widget.system command from Dashboard
(HTML)
(DMG)
(ZIP)

Resizer
A widget that demonstrates how to use the Apple Animation and Animator classes.
(HTML)
(DMG)
(ZIP)

Syncer
A widget that demonstrates how to use handle a Dashboard Sync event.
(HTML)
(DMG)
(ZIP)

Dashboard Guidelines:

2009-01-01T05:46:00.000-08:00

Dashboard Programming Topics:
(HTML) (PDF)
Explains Dashboard and WebKit technologies used in widgets.

Dashboard Reference:
(HTML) (PDF)
Explains JavaScript, Info.plist, and other objects used within Dashboard.

Dashboard Tutorial:
(HTML) (PDF)
Explains how to develop a Dashboard widget.

Debugging Dashboard Widgets:
(HTML)
TN2139: Dashboard widget troubleshooting techniques, from start to finish.

Developing Dashboard Widgets:
(HTML)
Learn how to create powerful mini-applications quickly and easily.
(10.4 Tiger Developer Overview)

Intel-Based Macs, Dashboard and Safari:
(HTML)
Details regarding widget and web development for Intel-based Macintosh computers.

WDGTPROJ - IT'S ALL ABOUT DASHCODE

2008-10-01T19:27:00.000-07:00

Download

Dashboard Guidelines

2008-09-04T18:05:00.000-07:00

Sample Codes for Dashcode !

2008-06-04T15:05:00.000-07:00

Dashcode Sample Codes:

Hello World
Introductory Dashboard widget example
(HTML)
(DMG)
(ZIP)

Fortune
Deprecated - Demonstrates use of a widget plug-in
(HTML)
(DMG)
(ZIP)

Scroller
Dashboard widget with a DHTML scrollbar implementation
(HTML)
(DMG)
(ZIP)

Birthdays
Dashboard widget with a plug-in that queries AddressBook.framework for contacts with upcoming birthdays
(HTML)
(DMG)
(ZIP)

Fader
Demonstrates fading of elements inside a Dashboard widget
(HTML)
(DMG)
(ZIP)

Goodbye World
Demonstrates display and use of widget preferences to save a widget's state
(HTML)
(DMG)
(ZIP)

Hello Welt
Demonstrates localization techniques for Dashboard widgets
(HTML)
(DMG)
(ZIP)

Voices
Demonstrates use of the widget.system command from Dashboard
(HTML)
(DMG)
(ZIP)

Resizer
A widget that demonstrates how to use the Apple Animation and Animator classes.
(HTML)
(DMG)
(ZIP)

Syncer
A widget that demonstrates how to use handle a Dashboard Sync event.
(HTML)
(DMG)
(ZIP)

Key Combos !

2008-05-15T12:52:00.000-07:00

Dashcode Video Tutorials

2008-04-04T03:27:00.000-07:00

Watch Dashcode Video Tutorials

Dashboard Wallpaper

2008-04-02T09:43:00.000-07:00

1280x960

Black

Download

Dashboard

Download

White
Download

Gradient
Download

...some Dashboard 10.4 Tiger Tips and Tricks !

2008-04-02T09:32:00.000-07:00

Change the Dashboard shelf's background image:

Speed up Dashboard by clearing out its cache:

Over the course of the past few months, Dashboard had become painfully slow for me,
sometimes taking 10 to 20 seconds to load.

I took a look at:

~/Library/Caches/ DashboardClient

...and found that the Dashboard cache was 20MB !!!.

This seemed excessive (plus, I had a fairly recent backup), so I took a gamble and deleted all the files in the DashboardClient folder. Dashboard now loads almost instantaneously for me.

Quickly free memory used by Dashboard widgets:

If you only use Dashboard on rare occasions, and don't want all those widgets to stay running forever,
try the following AppleScript:

tell application "Dock"

quit

launch

end tell

This will relaunch the Dock and, since all the Dashboard widgets are subprocesses of the dock, they will be closed. Widgets will stay closed until Dashboard is invoked again.

This is a handy way to quickly free up the RAM used by open Dashboard widgets.

Detach widgets from the Dashboard:

If you'd like one of your Dashboard widgets to be available all the time, instead of only when you have activated Dashboard via F12, then activate the Dashboard dvelopment mode.

Open the Terminal and type defaults write:

com.apple.dashboard devmode YES

...and press Return. Then logout and log back in again.
Now debugging mode is activated.

To get a widget off of the Dashboard and onto your desktop, just do the following:

Widget Limbo !

Dashcode !

2008-03-28T13:08:00.000-07:00

Ever wish you could make your very own Dashboard widget? A handy RSS feed of your favorite blog, maybe. Or a miniature photocast of your iPhoto library. Something uniquely useful, uniquely you. Say hello to Dashcode. Now you can get a widget up and running in minutes, even if you’ve never written a line of code in your life.

Choose your widget.
Your Dashcode project starts life as a template designed specifically for the kind of information you want to display. Choose from a handful of Dashcode widget templates — including a countdown timer, map, RSS feed, photocast, podcast, and gauge — or create a widget from scratch with a blank template. Every template includes detailed workflow steps to guide you through the process of creating your widget.

Stop, drop, and roll.
After you choose the perfect template, you can drag and drop components onto the Dashcode canvas. Drag in an RSS link and your widget populates with a full feed. Drag in a photocast URL and your widget transforms into a self-contained slideshow. Drag in a podcast link and you can start playing the feed right from your widget.

Widgets by design.
Once your widget’s working, you can use the Dashcode library to add design and functionality finesse. The library comes with a collection of buttons, lists, containers, and text fields. Resize the components of your entire widget or alter fonts, colors, gradients, images — practically every visual element — without writing a single line of code.

Deploy and conquer.
Dashcode organizes all the files that make up your widget, including images, JavaScript code, style sheets, generated files, and localizations. Add new files and the Dashcode project manager takes care of updates automatically. And when your widget is ready for prime time, Dashcode packages up all your files and the Apple-provided resources required to deploy your widget to Dashboard or submit it to Apple.com.

Dashcode for the power user.
Instant-on debugging. Total integration of project management, design, and code in Dashcode makes your widget ready to test. Just click Run and your widget instantly starts up. Click Pause to inspect the running widget or set breakpoints to debug specific sections of code. The built-in debugger provides all the features you’d expect from a professional developer tool.

Professional source code editor.
Dashcode offers all the text-editing features of a professional integrated development environment (IDE) — including color syntax highlighting, line numbering, and Code Sense code completion — optimized for the JavaScript programming language. The editor also integrates with the debugger, so you can easily set and view breakpoints and track your widget’s execution through the source code.

Code snippets.
The Dashcode library includes more than just GUI controls. It also provides a rich collection of JavaScript code snippets for many common programming tasks. Simply drag the snippet from the library and drop it into your JavaScript source file. Each snippet includes instructions for changing the behavior to meet your needs. The snippets complete many common tasks you would otherwise have to hand-code, including:

RSS parsing.
Download and understand RSS feeds to provide up-to-date information to your widget.

Animate elements.
Fade, move, or resize elements in your widget.

String and data processing.
Format and localize text.

Preferences.
Manage user preferences for your widget: Perfect for the back panel.

Parts APIs.
Manipulate the include GUI parts using JavaScript.

Refreshing a widget:

2008-03-28T12:58:00.000-07:00

A tough reference to find is keyboard shortcuts within Mac OS X Dashboard.

I'm not talking about launching Dashboard - everyone knows you can set "hot keys" or mouse corners to trigger that. I'm referring to keyboard shortcuts once your in Dashboard view.

To refresh a specific widget, click on the widget once, and hit Command + R.

You'll notice a very cool "swirl" effect, which almost looks like a hurricane on a radar screen:

Every widget you refresh will perform this "swirl" action, and subsequently refresh the widget content.

If you're wondering what widget this was that I refreshed, it's the basic weather widget from Apple:

If you manually click the "+" icon in the lower left corner of Dashboard view, your "widget toolbar" will appear along the bottom.

Here you can add or remove widgets from display.

To open this "widget toolbar," you can also hit Command + "+".

That's Command and the "+" key at the same time. Hitting it again will close the "widget toolbar."

This is not so much a keyboard shortcut, but a keyboard adjustment.

If you hold down the "Option" key while in Dashboard view, and hover over a widget, you can manually remove the widget by clicking the "X" in the upper left corner of the widget.

The "X" only appears when you move the mouse over each widget.

This is quicker than opening the "widget toolbar" first, and then removing.

I'm making a list of additional shortcuts that would be useful:

Much like hitting Command + R refreshes a widget, hitting Command + I should provide info on the widget. (Only applicable for widgets that have a "back side" info panel.)

Some way of removing widgets without having to manually click the "X". (I'm thinking Command + W or something similar.)

2008-03-28T09:02:00.000-07:00

The iPhone SDK !

2008-03-24T07:12:00.000-07:00

2008-03-24T06:58:00.001-07:00

Generic Ajax Widget

2008-03-24T06:58:00.000-07:00

Download generic Ajax widget

Download the source Dashcode Ajax project

Getting Dashcode

If you've got a recent version of Leopard or Tiger, the system Disks will contain Dashcode in the developer kit (it may be installed already in your /Developer/Applications directory).

Stability

However - and this is a big one - the upside of programming with Dashcode is worth the risk of the crash, because it’s takes most work out of the design process.

Since you're using it’s GUI to drag and drop your design and how the user will interact with it, rather than having to code the look and feel by hand.

Designing Widgets

Controls

Full documentation for the Apple classes API is available, but it’s pretty clinical.

Effects

Although effects are available within the Apple classes, you'll need to implement them yourself.

This is fairly limited to dynamic resizing of the widget, which is achieved using:

window.resizeTo(x, y);

If you are going to resize the widget dynamically, check out the Apple resizing examples too.

You should be able to find easing effects code and examples if the built in Apple animation class doesn't suite your needs.

Running system commands

This is one of the few areas that’s well documented in the provided API.

You can run system commands using the following type of command:

widget.system('ps -auxww | grep ' + myCommand, null);

Ajax in the widget

You widget supports a variation of the Ajax object (or rather xmlhttprequest object).

This version isn't bound by the usual security constraints of a browser - most importantly, it can request content from any domain.

To execute any Ajax requests from your widget, ensure you have the Allow Network Access attribute turned on - otherwise the Ajax will fail without any given reason.

For example, you could use Ajax to pull your film page from IMDb and then parse the XML for the elements of interest.

$.ajax({
url: 'http://remysharp.com/example_page', // doesn't really exist!
dataType: 'html', // important
success: function (xml) {
// convert the HTML to an XML DOM object
var dom = getDOMfromXML(xml);
alert(dom.getElementsByTagName('h1').length);
}
});

function getDOMfromXML(xml) {
var d = document.createElement('div');
xml = xml.substring(xml.indexOf('<body') + xml.substring(xml.indexOf('<body')).indexOf('>')+1);
xml = xml.substring(0, xml.indexOf('</body>'));
d.innerHTML = xml;
return d;
}

The iframe would not load properly because it was still loading the entire frame while I was trying to access it.

You can see this in use in the generic Ajax widget or download the source Dashcode project.

Widget Attributes

The widget attributes are fairly self explanatory, but it’s worth knowing:

Allow Network Access is required for Ajax requests
Allow Command Line Access is required for running external programs, i.e. if you have a Perl script executing some arbitrary task

If you intend to make your widget available in different languages, then this is the place to enter the different strings.

The Inspector

Hide items from the default image to present a better widget when it’s installing. It can to keep the preview of your app looking clean.

Debugging

Dashcode comes with a log that can be viewed during run time.

You have following debugging tools:

Breakpoints
Live stack traces
Evaluate window - to test commands

To write to the log, you need to use alert("My debug message");.

Introducing Dashcode

2008-03-23T20:00:00.000-07:00

Now in Mac OS X Snow Leopard, Dashcode lets you quickly and easily build elegant and compelling Dashboard widgets.
Created to meet the need of widget developers, Dashcode combines powerful visual layout tools with a code editor, debugger, and comprehensive package management into a world-class integrated development environment.
It lets you easily and quickly create powerful and useful widgets for yourself, your organization, or even for distribution to the world.
From the start, Dashboard widgets were designed to be easy to develop. They use the familiar and widely used Web technologies of HTML, JavaScript, and CSS.
Because of the use of standard Web technologies, it's possible to develop a widget using only a text editor, such as TextEdit. However, very few developers are well-versed in creating both great graphical artwork and smoothly functioning code.
As well, it became apparent that the process of packing up a widget and tracking down bugs takes too much time when using just a text editor.
Dashcode was created to address all of these issues.
It takes care of packaging so that you don't have to create a widget's bundle by hand.
It provides a test runtime with a built-in debugger that's a click away so that you don't have to deploy your widget into Dashboard to test it.
And, it provides rich library of graphic elements for you to use to give your widget a compelling design. These features let you focus on making cool, unique, and polished widgets.
This article, part of the Leopard Technology Series for Developers, introduces you to Dashcode and touches on some of its major features.
You'll soon be on your way to creating your own widgets with Dashcode.

A Good Starting Point

Workflow

To help you build a widget, Dashcode provides a helpful workflow for each of the templates it provides. These workflows are tuned for each template and will walk you step-by-step through the process of taking a template and creating a finished widget from it.
You can access this list by clicking the Show Workflow Button.

Working with the Layout Canvas.

You can manipulate the position of any element in a widget by simply moving it about in the layout. Alignment guides and an absolute position indicator help you adjust your widget's user interface to perfection.
You can also adjust the total size of your widget by using the resize-handle at the lower-right corner of the widget.

You can also work with the attributes of any element by selecting the element and bringing up the Inspector (Option-Command-I).
For example, to change the attributes of the title text in the Photocast starter widget, you could select the text, bring up the Inspector and then change the Character attributes, as shown in the following figure.

As you adjust the properties for an object, Dashcode makes all of the necessary changes in the widget's CSS file.

For example, changing the color and adding a drop shadow to the text above results in the following CSS rules being set:


#caption {
position: absolute;
text-align: center;
opacity: 0.75;
overflow: hidden;
background-color: rgb(111, 111, 111);
font-weight: bold;
font-family: Helvetica Neue;
font-size: 18px;
height: 26px;
color: rgb(255, 255, 0);
left: 0px;
top: -1px;
right: 0px;
width: auto;
text-shadow: rgb(0, 0, 0) 2px 2px 4px;
}

There's a very direct connection between the actions you take in Dashcode and the resulting changes in the underlying files. Dashcode lets you work in both worlds easily.

Editing Code

Dashcode does everything possible to make it easy to work with your widgets graphically. When it's time to add custom behavior, however, you'll need to work with the actual source files.
To edit these files, Dashcode provides a fully-functional code editor for CSS, HTML, and JavaScript files.

For example, to further illustrate the connection between actions you take in the Dashcode user interface and the underlying files, here's a view of the CSS tweaks shown above:

The Dashcode editor is a serious coder's editor.
It features automatic indentation, syntax highlighting, and on-demand code completion.

For example, if you were writing a CSS file by hand and wanted to get all of the possible completions starting with font, a quick click of the Option-Escape keys brings up a list, as shown in the following figure:

You can also quickly navigate your files by CSS selector or JavaScript function name, as shown in the following figure:

The Library

Running Your Widget

Once you've created your widget, testing it is easy.
Just press Command-R and it will run in an embedded Dashboard runtime.
You'll even see it "splash" onto your screen.

Once started, your widget is fully functional and runs just like it would in the real Dashboard. Dashcode's embedded runtime, however, gives you the ability to see runtime events and inspect your widget's object model.
It also features the Code Evaluator which allows you to execute arbitrary JavaScript code against your running widget.
This allows you to get a better sense of how your widget is working and can help you debug problems.

As an example of using the Code Evaluator, if you want to work with the "Loading..." text at the bottom of the Photocast example widget at runtime, you can type the following into the Code Evaluator window:

document.getElementById("loading").innerText =

"Now loading the next photograph..."

Dashcode Tips and Tricks

iAd Gallery - FAQ

Developer Courses + Tutorials !

Dashboard Widget Tutorial

Developer Forum

iOS Developer News

RSS Feed Reader Widget !

Build Web Apps with Dashcode !

Developer Tips

Developer News

Developer Widgets

Development Tools

Introducing Dashcode:

A Good Starting Point

Workflow

Editing Code

The Library

Running Your Widget

Get Started with Leopard

Dashboard 10.4(Tiger) and 10.5(Leopard) Tips:

Generic Ajax Widget

Getting Dashcode

Stability

Designing Widgets

Controls

Effects

Running system commands

Ajax in the widget

Widget Attributes

The Inspector

Debugging

The iPhone SDK !

Refreshing a Widget

Key Combos !

Sample Codes for Dashcode !

Dashboard Guidelines:

WDGTPROJ - IT'S ALL ABOUT DASHCODE

Dashboard Guidelines

Sample Codes for Dashcode !

Key Combos !

Dashcode Video Tutorials

Dashboard Wallpaper

...some Dashboard 10.4 Tiger Tips and Tricks !

Dashcode !

Refreshing a widget:

The iPhone SDK !

Generic Ajax Widget

Getting Dashcode

Stability

Designing Widgets

Controls

Effects

Running system commands

Ajax in the widget

Widget Attributes

The Inspector

Debugging

Introducing Dashcode

A Good Starting Point

Workflow

Editing Code

The Library

Running Your Widget

Get Started with Snow Leopard