webOS Pre Hands On Agile Commerce Eric Marthinsen and Gary Smith

Agenda 8 – 9 | Starting from scratch 9 – 10 | Creating a new scene 10 – 11 | Building and populating a list 11 – 12 | Adding an ImageView widget

8 – 9 | Starting from scratch

9 – 10 | Creating a new scene

10 – 11 | Building and populating a list

11 – 12 | Adding an ImageView widget

Starting from Scratch Eclipse can create the necessary files and directory structure for you application. You can also use palm-generate The application structure is very similar to a Ruby on Rails application. Key files include: appinfo.json sources.json stage-controller.js At this point the application can run in the emulator or on the device. Logging is a critical part of webOS development. To add logging, you must add a framework_config.json file to your application root and set a “logLevel”. Mojo.Log.Info(“message”) will write messages to the log.

Eclipse can create the necessary files and directory structure for you application.

You can also use palm-generate

The application structure is very similar to a Ruby on Rails application. Key files include:

appinfo.json

sources.json

stage-controller.js

At this point the application can run in the emulator or on the device.

Logging is a critical part of webOS development. To add logging, you must add a framework_config.json file to your application root and set a “logLevel”. Mojo.Log.Info(“message”) will write messages to the log.

Generating a Scene Eclipse can also generate new scenes complete with assistants. You can also use palm-generate with the appropriate options. The following occurs upon generating a scene. home-scene.html home-assistant.js These two files were also added to the sources.json file PushScene from stage assistant Add widgets in html Textbox Button Setup widgets in javascript Add in styling Push to imagelist

Eclipse can also generate new scenes complete with assistants. You can also use palm-generate with the appropriate options. The following occurs upon generating a scene.

home-scene.html

home-assistant.js

These two files were also added to the sources.json file

PushScene from stage assistant

Add widgets in html

Textbox

Button

Setup widgets in javascript

Add in styling

Push to imagelist

Building and Populating a List First, some setup of flickr-service. It calls flickr with the search text and returns list of images. Also, we often add a lib folder under the app folder for services. Data from the search screen was passed in the constructor. As usual, generate a new scene, image-list. Add in html Need two parts for the list, list-container.html and list-entry.html Setup widget and bind to list

First, some setup of flickr-service. It calls flickr with the search text and returns list of images. Also, we often add a lib folder under the app folder for services.

Data from the search screen was passed in the constructor.

As usual, generate a new scene, image-list.

Add in html

Need two parts for the list, list-container.html and list-entry.html

Setup widget and bind to list

Adding an ImageView widget Generate new scene, image-view Add widget to html Get data, same model as before, it was passed in via the constructor Set up widget Hook up left and right events

Generate new scene, image-view

Add widget to html

Get data, same model as before, it was passed in via the constructor

Set up widget

Hook up left and right events

Wrap Up What did we do? Built an new application from scratch Generated new scenes for the application Communicated with an external restful web service and parsed the resulting json data Populated a list from data Created an imageview widget to scroll through images

What did we do?

Built an new application from scratch

Generated new scenes for the application

Communicated with an external restful web service and parsed the resulting json data

Populated a list from data

Created an imageview widget to scroll through images

One Last Resource

Thanks!

Optional Spinner Palm Inspector Debugging Luna-send

Spinner

Palm Inspector

Debugging

Luna-send

Palm Inspector Good to view html in your app Need to flag project as inspectable in config oprions in eclipse Use the -i option with Palm Launch. palm-launch -i com.example.app can be a little flakey if so restart both http://developer.palm.com/index.php?option=com_content&view=article&id=1611

Good to view html in your app

Need to flag project as inspectable in config oprions in eclipse

Use the -i option with Palm Launch.

palm-launch -i com.example.app can be a little flakey if so restart both

http://developer.palm.com/index.php?option=com_content&view=article&id=1611