Web Os Hands On


Published on

Eric and Gary's presentation at InsideMobile, doing a hands on WebOS training session.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Os Hands On

  1. 1. webOS Pre Hands On Agile Commerce Eric Marthinsen and Gary Smith
  2. 2. Agenda <ul><li>8 – 9 | Starting from scratch </li></ul><ul><li>9 – 10 | Creating a new scene </li></ul><ul><li>10 – 11 | Building and populating a list </li></ul><ul><li>11 – 12 | Adding an ImageView widget </li></ul>
  3. 3. Starting from Scratch <ul><ul><li>Eclipse can create the necessary files and directory structure for you application. </li></ul></ul><ul><ul><ul><li>You can also use palm-generate </li></ul></ul></ul><ul><ul><li>The application structure is very similar to a Ruby on Rails application. Key files include: </li></ul></ul><ul><ul><ul><li>appinfo.json </li></ul></ul></ul><ul><ul><ul><li>sources.json </li></ul></ul></ul><ul><ul><ul><li>stage-controller.js </li></ul></ul></ul><ul><ul><li>At this point the application can run in the emulator or on the device. </li></ul></ul><ul><ul><li>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. </li></ul></ul>
  4. 4. Generating a Scene <ul><li>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. </li></ul><ul><ul><li>home-scene.html </li></ul></ul><ul><ul><li>home-assistant.js </li></ul></ul><ul><ul><li>These two files were also added to the sources.json file </li></ul></ul><ul><li>PushScene from stage assistant </li></ul><ul><li>Add widgets in html </li></ul><ul><ul><li>Textbox </li></ul></ul><ul><ul><li>Button </li></ul></ul><ul><li>Setup widgets in javascript </li></ul><ul><li>Add in styling </li></ul><ul><li>Push to imagelist </li></ul>
  5. 5. Building and Populating a List <ul><li>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. </li></ul><ul><li>Data from the search screen was passed in the constructor. </li></ul><ul><li>As usual, generate a new scene, image-list. </li></ul><ul><ul><li>Add in html </li></ul></ul><ul><ul><li>Need two parts for the list, list-container.html and list-entry.html </li></ul></ul><ul><li>Setup widget and bind to list </li></ul>
  6. 6. Adding an ImageView widget <ul><li>Generate new scene, image-view </li></ul><ul><li>Add widget to html </li></ul><ul><li>Get data, same model as before, it was passed in via the constructor </li></ul><ul><li>Set up widget </li></ul><ul><li>Hook up left and right events </li></ul>
  7. 7. Wrap Up <ul><li>What did we do? </li></ul><ul><ul><li>Built an new application from scratch </li></ul></ul><ul><ul><li>Generated new scenes for the application </li></ul></ul><ul><ul><li>Communicated with an external restful web service and parsed the resulting json data </li></ul></ul><ul><ul><li>Populated a list from data </li></ul></ul><ul><ul><li>Created an imageview widget to scroll through images </li></ul></ul>
  8. 8. One Last Resource
  9. 9. Thanks!
  10. 10. Optional <ul><ul><li>Spinner </li></ul></ul><ul><ul><li>Palm Inspector </li></ul></ul><ul><ul><li>Debugging </li></ul></ul><ul><ul><li>Luna-send </li></ul></ul>
  11. 11. Palm Inspector <ul><li>Good to view html in your app </li></ul><ul><li>Need to flag project as inspectable in config oprions in eclipse </li></ul><ul><li>Use the -i option with Palm Launch. </li></ul><ul><li>palm-launch -i com.example.app can be a little flakey if so restart both </li></ul><ul><li>http://developer.palm.com/index.php?option=com_content&view=article&id=1611 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.