You Know WebOS

2,776 views

Published on

1 of 2 Gary and Eric from Agile Commerce present a Hands-On course on Palms new WebOS MojoSDK at the InsideMobile Conference.

Published in: Technology, Business
1 Comment
4 Likes
Statistics
Notes
  • very useful (long-time webOS fan, sdk-virgin ready to jump in, if only to keep my Pre1 running ^_^
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,776
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
114
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

You Know WebOS

  1. 1. webOS The Platform You Already Know Eric Marthinsen and Gary Smith Agile Commerce
  2. 2. Agenda <ul><li>Terminology </li></ul><ul><li>Technologies </li></ul><ul><li>Similarities </li></ul><ul><li>Differences </li></ul><ul><li>What next? </li></ul>
  3. 3. Terminology <ul><li>Palm Pre </li></ul><ul><li>webOS </li></ul><ul><li>Mojo </li></ul>
  4. 4. Technologies <ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul>
  5. 5. Similarities <ul><li>Structure </li></ul><ul><ul><li>Model View Controller (MVC) paradigm </li></ul></ul><ul><ul><li>Very close in style and form to Ruby on Rails </li></ul></ul><ul><li>Philosophy </li></ul><ul><ul><li>Helper tools, similar to Ruby on Rails </li></ul></ul><ul><ul><li>Convention over configuration </li></ul></ul><ul><li>Coding </li></ul><ul><ul><li>HTML, CSS, and JavaScript – follows typical web paradigms </li></ul></ul>
  6. 6. Structure <ul><li>Ruby on Rails </li></ul><ul><li>app controllers </li></ul><ul><li>   models </li></ul><ul><li>    views </li></ul><ul><li>public </li></ul><ul><li>    images </li></ul><ul><li>    stylesheets </li></ul><ul><li>Mojo </li></ul><ul><li>app assistants models views </li></ul><ul><li>images </li></ul><ul><li>stylesheets </li></ul>Mojo applications are MVC applications.
  7. 7. Philosophy <ul><li>Mojo follows closely to many core concepts in Ruby on Rails. </li></ul><ul><li>Convention over configuration </li></ul><ul><li>ruby script/generate versus palm-generate </li></ul>
  8. 8. Code: HTML <ul><li>HTML </li></ul><ul><li><div style=”background: red”> This is some text </div> </li></ul><ul><li>webOS </li></ul><ul><li><div style=”background: red”> This is some text </div> </li></ul>
  9. 9. Code: Finding an Element <ul><li>HTML </li></ul><ul><li>document.findElementById(“id”) </li></ul><ul><li>$('id') </li></ul><ul><li>webOS </li></ul><ul><li>document.findElementById(“id”) </li></ul><ul><li>$('id') </li></ul><ul><li>this.controller.get('id') </li></ul>
  10. 10. Code: Wiring up an Event Handler <ul><li>HTML </li></ul><ul><li>elem.onclick = this.handler </li></ul><ul><li>Event.observe('elemName', 'click', this.handler) </li></ul><ul><li>webOS </li></ul><ul><li>Mojo.Event.listen(element, Mojo.Event.tap, this.handler) </li></ul>
  11. 11. Code: Ajax <ul><li>A typical AJAX call:  </li></ul><ul><li>  </li></ul><ul><li>var url = &quot;http://api.example.com&quot;; </li></ul><ul><li>new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { console.log(&quot;SUCCESS!!!&quot;); }, onFailure: function() { console.log(&quot;FAILURE&quot;); } }); </li></ul>
  12. 12. Code: Ajax <ul><li>Accessing the GPS System Service in Mojo:  </li></ul><ul><li>  </li></ul><ul><li>var url = &quot;palm://com.palm.location&quot;;  </li></ul><ul><li>  </li></ul><ul><li>this.controller.serviceRequest(url, {   method:&quot;startTracking&quot;,   parameters:{ subscribe: true },   onSuccess: function(result){     console.log(&quot;GOT A NEW LOCATION&quot;);   },   onFailure: function(result){     console.log(&quot;FAILURE&quot;);   } }); </li></ul>
  13. 13. Code: Widgets <ul><li>SWFobject </li></ul><ul><li><div id=&quot;myContent&quot;></div> </li></ul><ul><li>swfobject.embedSWF( &quot;myContent.swf&quot;, &quot;myContent&quot;, &quot;300&quot;, &quot;120&quot;, &quot;9.0.0&quot; ); </li></ul>
  14. 14. Code: Widgets <ul><li>Simple slider widget in jQuery </li></ul><ul><li><div id=&quot;slider&quot;></div> </li></ul><ul><li>$(&quot;#slider&quot;).slider(); </li></ul>
  15. 15. Code: Widgets <ul><li>TextField in Mojo </li></ul><ul><li><div id=&quot;searchString&quot; x-mojo-element=&quot;TextField&quot;></div> </li></ul><ul><li>this.controller.setupWidget( &quot;searchString&quot;, { hintText: 'enter search criteria', multiline: false }, this.searchModel = { value: “” } ); </li></ul>
  16. 16. Differences: JavaScript <ul><li>It is not like Java or a scripting language </li></ul><ul><li>More like Self or Scheme </li></ul><ul><li>It has objects, but no classes </li></ul><ul><li>Functions can have properties (which can be functions themselves) </li></ul><ul><li>“ this” isn't always that </li></ul>
  17. 17. Differences: Mojo API <ul><li>Any platform has a set of APIs, Mojo is no exception </li></ul>
  18. 18. What Next? Learn JavaScript <ul><li>JavaScript: The Good Parts </li></ul><ul><li>Douglas Crockford </li></ul>
  19. 19. What Next? Get Mitch's Book <ul><li>Palm webOS </li></ul><ul><li>Mitch Allen </li></ul><ul><li>Available through O'Reilly </li></ul>
  20. 20. One Last Resource

×