Chapter 1 RI AL Exploring the World of Apps and Widgets TE In This Chapter ▶ Discovering Dashcode terminology MA ▶ Getting to know apps and widgets ▶ Working with Safari Web apps D ▶ Using iPhone Web apps TE F RI GH rom the very beginning, the Mac has demonstrated that it doesn’t have to hurt to use a computer. You don’t have to type some obscure command; instead, you can move a mouse to click an icon.
10 Part I: Introducing Dashcode and How You Can Use It system for iPhone, iPad, and more wonders to come.) Apple also builds application programs for people to use — products such as Safari, iTunes, the iWork suite (Numbers, Keynote, and Pages), the iLife suite (iPhoto, iMovie, iDVD, GarageBand, and iWeb), along with applications that ship as part of Mac OS X, such as Mail, iCal, Address Book, Preview, and utilities such as Disk Utility, System Preferences, Terminal, and Console.
Chapter 1: Exploring the World of Apps and Widgets Apple has found a way to provide access to specific hardware features through its Safari Web browser and to make that access available to people who develop Web pages. On Safari, a Web page can initiate a phone call on an iPhone; the same page when run in a browser on a Mac properly skips over the phone call code because a Mac can’t make a phone call.
12 Part I: Introducing Dashcode and How You Can Use It Maybe it’s because learning how to use the development tools for Mac OS X and iOS is a major project or maybe it’s because developing on those platforms takes more time and effort, Dashcode and the Third Platform sometimes get skipped over. No more. This book is your guide to developing for the Third Platform.
Chapter 1: Exploring the World of Apps and Widgets ✓ The end result of a project is a product, which can be a widget or an app. You can deploy a completed project with Dashcode to Dashboard or to a Web site (including a MobileMe site); you can also save a Dashcode project to disk so that you can send it to people or post it on a Web site for further deployment and distribution. Visiting a Small World: Apps and Widgets Compared to traditional software programs, apps and widgets are smaller.
14 Part I: Introducing Dashcode and How You Can Use It Figure 1-2: Build the template for mobile Safari. If you click one of the pop-up menus in the simulator or tap one of them on your iPhone, the typical iPhone interface element, shown in Figure 1-4, appears. You don’t have to do anything special. Figure 1-5 shows a Dashboard widget built from the Countdown template. It provides a countdown (or countup) clock. This example shows a project template that may need some customization to work.
Chapter 1: Exploring the World of Apps and Widgets Figure 1-3: Select fonts and font sizes. Figure 1-6 shows how you make such a change. This layout has a lot of settings, but all you need to do is either change the date and time or choose to count up. The Countdown template is yet another example of how you can focus Dashcode projects; it isn’t a stopwatch. Instead, this example is a countdown/countup clock for a specific date and time. Simple and focused.
16 Part I: Introducing Dashcode and How You Can Use It Figure 1-4: The appropriate interface elements are automatically used. Figure 1-5: Count down or up from a time. When I say it’s easy to build these projects, I mean that you can make a change to a template to see whether it might work in only a few minutes. Even if you have to do some customization, such as entering a start date for the countdown timer your changes to the templates can often be fast.
Chapter 1: Exploring the World of Apps and Widgets Figure 1-6: Modify the settings. Categorizing Widgets and Apps Apple’s Way As you explore the templates and think about developing your own projects, it can help to categorize your ideas. One of the challenges in designing Dashcode projects is keeping them focused. Identifying the kind of project you’re building helps with the focus.
18 Part I: Introducing Dashcode and How You Can Use It those two values, as you see in Figure 1-8. (You can see how to get the key in “Chapter 8.) ✓ Productivity: Finally, projects such as the Utility template let you create a small word processor. Often, a productivity project is characterized by the fact that the user puts data into it; a utility app often is characterized by the fact that the user gets data out of it (a map, the translation of a word or phrase, and so on).
Chapter 1: Exploring the World of Apps and Widgets Navigating the Data Dashcode templates provide tools for users to navigate through data easily. One of the handiest constructs is the browser interface tool that is available on iPhone in many apps built on iOS as well as Dashcode. Figure 1-9 shows the Browser Dashcode template in action. This example uses the data that is built into the template: It is information about a number of national parks in the United States.
20 Part I: Introducing Dashcode and How You Can Use It Figure 1-10: Details are provided for each item. Dashcode can use data that is included in the project as the National Park data is, but it can also use data that it accesses at runtime from a location on the Internet. In either case, the data needs to be in a standard format — JSON (JavaScript Object Notation) or XML (eXtensible Markup Language). You can find examples of the data files in Chapter 12.
Chapter 1: Exploring the World of Apps and Widgets code to the project to augment the template’s code, but, most often, you customize with specific information on forms (refer to Figures 1-6 and 1-8). Sometimes, you need to enter information into the code that Dashcode has generated; in those cases, clear comments tell you what to do. For example, Figure 1-11 shows you code that you can drag from the Library into your project. It lets you enable a specific button.
22 Part I: Introducing Dashcode and How You Can Use It through data is useful, but widgets shine at presenting changing data to you in a way in which you don’t have to navigate to find what you want. Podcasts, video podcasts, and RSS feeds all fit the bill: They’re changing data, and the widget or app just needs to go out to an address that you specify once to find the latest and greatest information. Figure 1-12 shows the Daily Feed Dashboard widget template in action.
Chapter 1: Exploring the World of Apps and Widgets At the bottom of Figure 1-13, you can see a section called Localization. This section supports the ability to customize the interface automatically for various languages. Note that the languages supported are more than just languages: They include dialects and variants, such as UK and U.S. versions of English.
24 Part I: Introducing Dashcode and How You Can Use It Figure 1-15: RSS shows several stories. Dashcode lets you specify the feed as with Daily Feed, but you also can specify how many stories to show and the date range to use, as you see in Figure 1-16. In addition to the options you specify in the widget, the back of the RSS widget has an option that the user can set (see Figure 1-17). Figure 1-16: Specify options for RSS.
Chapter 1: Exploring the World of Apps and Widgets Figure 1-17: Users set options on the back of Dashboard widgets. Trekking with Safari Web Apps Safari is available on Mac OS X, Windows, and the iOS devices. Safari is compliant with the standards for the Web, including HTML 5, which is the latest version of the basic Web programming language. HTML has a number of major additions that Safari supports, along with many other browsers.
26 Part I: Introducing Dashcode and How You Can Use It Figure 1-18: RSS Safari Web app behaves like the RSS Dashboard widget. The interface looks different, but it has the same information. As you can see in Figure 1-19, the settings are the same as for the Dashboard widget. You provide the URL for the feed, and the settings for the display. Figure 1-19: Settings are similar to the Dashboard widget setup.
Chapter 1: Exploring the World of Apps and Widgets Calling iPhone Web Apps The Safari RSS template allows you to build a mobile Safari version for iPhone at the same time. So, without further ado, Figure 1-20 shows the same RSS feed on the iPhone simulator. Figure 1-20: The same RSS settings let you produce an iPhone product with Dashcode. The difference in the interface reflects the size and features of iPhone: Dashcode has done all the work for you.
28 Part I: Introducing Dashcode and How You Can Use It The settings for the mobile Safari version are shown in Figure 1-22. The feed and the options (number of stories, for example) are the same settings as they were for a regular Safari Web app. You don’t have to enter them again; they’re the same values. In Figure 1-23, you do see some additional settings that apply only to mobile devices, such as iPhone.
Chapter 1: Exploring the World of Apps and Widgets Figure 1-22: You can see the original article in Safari on iPhone. Figure 1-23: Specific iPhone settings handle the rotation of the device between horizontal and vertical orientations.
30 Part I: Introducing Dashcode and How You Can Use It
