www.webOShelp.net

This chapter of Palm webOS Rough Cuts by O'Reilly covers installing the Mojo SDK, creating a new project and customizing critical application components. It begins a walkthrough of the development of an RSS reader application that utilizes many features of the webOS framework and will be developed in this and subsequent chapters of the book.

This chapter covers a lot of the same material that was presented during the first official tutorial presented during the developer webcast with Mitch Allen, so we won't repeat it here. Instead, we'll look at some of the new concepts and language elements that are introduced. If you haven't yet gone through that tutorial, we recommend you do so before continuing.

Chapter 2 starts off with Palm reinforcing that webOS is a "great environment for building applications".  They suggest that web development languages combined with access to native services and local data makes a "powerful and productive" platform that "even" Java and C/C++ developers will find fun and exciting. The development environment will also feel familiar to because there is a "robust" API for UI elements, db queries, and other system calls. The "only difference" is that the programming language is Javascript and the UI is generated with HTML and CSS. They really want to shake off the idea that webOS apps will be just "web gadgets and spinners". [From what we've seen so far, we have to agree. The majority of the best-selling apps on other platforms (aside from advanced games) could probably be built easily using the functionality we've seen so far in webOS.]

The chapter then goes in to the similarity between browser based web apps and webOS applications, but they point out one key difference: webOS applications are pretty much served from the device itself so there's no request/response life cycle between server and client for most screens (unless of course you are sending and retrieving data from a remote server).

We will go through the new information in the order it was presented in the book.

Installing the SDK

The chapter starts off with few mundane details about downloading and installing the Mojo SDK, which will come with an installer on all platforms. The installer will provides option for installing various tool bundles including command line tools and plugins for some "popular IDEs" and web development editors.   So far Palm has publicly announced support for Eclipse with the Aptana Studio plugin, but it sounds like they're leaving the door open to support for additional software packages in the future.

webOS application directory structure

The chatper then looks at the directory structure, naming conventions and required files of a Palm webOS application.  The webOS SDK includes tools that will generate the appropriate directories and files automatically, given an application or scene name.

The structure of a standard application is as follows:

• [AppName] – Required: must correspond to value of id property in appinfo.json
  • [app] – Required: logic and presentation files (MVC structure)
    • [assistants] – Required: controller-like objects; specify your application's behavior
      • first-assistant.js
      • second-assistant.jsTgmail.com
      • ...
    • [models] – Folder Required, files optional: application data models
      • model1.js
      • model2.js
      • ...
    • [views] – Required: layout files; one main HTML view file and optional HTML template view files per scene assistant
      • first
        • first-scene.html
      • second
        • second-scene.html
      • ...
  • appinfo.json – Required:  main application config file
  • icon.png
  • [images] – Optional
    • image1_
    • image2_
    • ...
  • index.html – Required: First file opened on app launch.
  • sources.json – Optional: Lazy loading of JavaScript files
  • [stylesheets] – Optional: Cascading stylesheets – files that style the application
    • AppName.css
    • ...

[] = folder

We saw a similar structure in the first official tutorial from Palm during the webcast, but what's new here are sources.json file and the model.js files in the models folder. Sources.json will be explored a bit later in the chapter, but unfortunately models are not explained until later in the book. (SeanBlader is leading a discussion in the forums on the possible contents of the model.js file.)

appinfo.json

Appinfo.json is the most important configuration file for your webOS application.  We guessed at some of the properties in that we saw in the tutorial; it seems that some of the properties have since disappeared and been replaced with others:

appinfo.json properties and values

Property	Values	Required	Description
title	Any	Yes	Name of application as it appears in Launcher and in app window
type	web	Yes	Conventional application
main	index.html	Yes	Application entry point; defaults to index.html
id	Any	Yes	Must be unique for each application
version	x.y	Yes	Application version number
noWindow	true false	No	Headless application; defaults to false
icon	file path	No	Application's launcher icon; defaults icon.png
minicon	file path	No	Notification icon; defaults to miniicon.png
category	Any	No	Default category for application

The differences between the previous tutorial and what appears in the book will be explored in a separate article.

icon.png

We got some specifics on application icons:  64x64 pixels, 24-bit PNG with alpha support.  The actual icon image should fit within 56x56 pixels (presumably for effects that may be applied to the image by the launcher such as rounded corners, etc.).

index.html

Index.html is the first application file that gets loaded, and you must include the Mojo framework explicitly, as we saw in the webcast:

Palm also says to specify the latest version of the framework that is compatible with your app, and that older versions may be included for backward compatibility in future webOS releases.

sources.json

Here's something new: using the never-before-seen sources.json file to load JavaScript files as needed rather than all at once by including them in the index.html file.  Here's the default file:

[
  {
    "source": "app\/assistants\/app-assistant.js"
  },
  {
    "source": "app\/assistants\/stage-assistant.js"
  },
  {
    "source": "app\/assistants\/first-assistant.js",
    "scenes": "first"
  },
  {
    "source": "app\/assistants\/second-assistant.js",
    "scenes": "second"
  },
]

Files are specified in this order:

1. App-assistant
2. Stage assistant
3. Scene file paths in any order (both source and scenes properties must be included)

We'll take a closer look at this file in a separate article.

Testing and Debugging

Palm mentions the  "webOS Emulator with integrated JavaScript debugger and DOM inspector", which runs as a full native application on every platform.

You will be able to open the emulator directly or launch the emulator from the command line or IDE plugins. This setup will be familiar to most application developers, regardless of platform.

You will also be able to test your program directly on your USB-connect webOS device, but you'll need to have your application signing certificates from the Palm Developer program.

Sample News Application

The chapter then launches into an overview of sample application is an RSS reader application called News, written primarily by Mitch Allen.  This application will be built upon in every chapter of the book, as it uses many features of the framework. It is very similar to most RSS readers, containing features that allow you to manage and view multiple newsfeeds, tap to view details of individual stories, and view the story in its original location on the web. It also allows you to send a story to a friend via email or SMS, and caches feeds and stories for offline viewing and searching.

Wireframes

At this point the chapter delves into how to wireframe an application by outlining the widgets and styles that will be used for the various elements of the home scene, as well as how a user would move from scene to scene. Due to copyright restrictions, we can't reproduce the diagram here, but it's similar to the wireframe diagrams in this article. The main difference is that instead of labeling the UI elements with letters, the  elements are labeled with the name of the actual Mojo UI widget that will represent that item.  In addition, the diagram in the chapter has some of the elements pointing to a rectangle representing the scene that will be loaded if the user taps that control.  This seems like a very useful exercise for anyone planning out a webOS application.

webOS application style guidelines

The book mentions that the SDK will include a "comprehensive set of style guidelines" that cover everything from broad user experience to technical details for graphics and interaction designers and help developers create applications that will work across all webOS devices and not just the Palm Pre. A few guidelines are provided in this chapter:

• Total usable screen real estate will be at least 320 pixels wide in primary use mode, but will often be larger. Your application should gracefully handle different window sizes, usually by having at least one section of the screen that can expand or contract.
• Make the minimum hit target size at least 48px.
• Keep the minimum font size to 16px for lower case text or 14px for all caps.

We will continue exploring the rest of this chapter in part 2, coming later today.