Creating Yahoo Mobile Widgets

6,110 views

Published on

Slides for the class on creating Yahoo Mobile Widgets for BBC OverTheAir 2008 event in London

Published in: Technology, Business
  • Be the first to comment

Creating Yahoo Mobile Widgets

  1. 1. Creating Mobile Widgets Ricardo Varela Mobile Engineering Lead OverTheAir hack fest – London - Apr 4 th
  2. 2. Background <ul><li>Mobile development? That is such a good idea! </li></ul><ul><li>“ Write once, run anywhere” </li></ul>
  3. 3. Fast forward..
  4. 4. The solution?
  5. 5. Yahoo! to the rescue <ul><li>We mean… to our own rescue too! </li></ul>
  6. 6. Widgets <ul><li>Our open platform for mobile development </li></ul><ul><li>Simple declarative XML language, blueprint (based on XForms) </li></ul><ul><li>Objective: give your app the maximum distribution possible! </li></ul>
  7. 7. Blueprint guidelines <ul><li>Breadth over depth </li></ul><ul><li>Get your content out to everybody </li></ul><ul><li>Simplicity + good results </li></ul><ul><li>Graceful degradation + best-of-class experience </li></ul><ul><li>“ Write once, run in as much as possible” </li></ul>
  8. 8. Minimum Effort <ul><li>Write once.. </li></ul>
  9. 9. Maximum Fidelity <ul><li>Run everywhere we can.. </li></ul>
  10. 10. Game plan <ul><li>Open platform to enable YOU to create mobile content in an easier way! </li></ul><ul><li>Searching for the killer mobile app </li></ul>
  11. 11. References <ul><li>Yahoo! Mobile Widgets SDK </li></ul><ul><li>Blueprint </li></ul><ul><li>http://mobile.yahoo.com/ </li></ul><ul><li>http://mobile.yahoo.com/developers </li></ul><ul><li>http://mobile.yahoo.com/gallery# </li></ul><ul><li>Yahoo Go client / HTML client </li></ul><ul><li>http://beta.m.yahoo.com </li></ul>
  12. 12. Blueprint <ul><li>Simple declarative XML language based on XForms </li></ul><ul><li>Semantic, template-based </li></ul><ul><li>Used in both snippets & widgets </li></ul>
  13. 13. Snippets <ul><li>Live in the mobile home page </li></ul><ul><li>Have 2 views: </li></ul><ul><ul><li>normal </li></ul></ul><ul><ul><li>Extended [opt] </li></ul></ul>
  14. 14. Widgets <ul><li>Have their own set of pages </li></ul><ul><li>Accessed from carousel </li></ul>
  15. 15. Side note: rss views <ul><li>RSS views come for free </li></ul><ul><li>To set up a simple RSS View, write a config.xml file in which the source url (widget or snippet) specifies the source of the RSS feed </li></ul>
  16. 16. Carousel
  17. 17. Blueprint roadmap <ul><li>Phase 1 (in beta) </li></ul><ul><ul><li>server-side logic </li></ul></ul><ul><li>Phase 1.5 </li></ul><ul><ul><li>support for oneSearch/Connect/Place </li></ul></ul><ul><ul><li>May just turn into... </li></ul></ul><ul><li>Phase 2 </li></ul><ul><ul><li>Full data model, MVC </li></ul></ul>
  18. 18. Blueprint sample <ul><li><!-- hello_app.xml --> </li></ul><ul><li><page> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><trigger> </li></ul><ul><li><label>Click Me!</label> </li></ul><ul><li><load-page event=&quot;activate“ </li></ul><ul><li>page=&quot;greet.xml&quot; /> </li></ul><ul><li></trigger> </li></ul><ul><li></module> </li></ul><ul><li></section> </li></ul><ul><li></content> </li></ul><ul><li></page> </li></ul><ul><li><!-- greet.xml --> </li></ul><ul><li><page id=&quot;greet&quot;> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><header layout=&quot;simple&quot;> </li></ul><ul><li><layout-items> </li></ul><ul><li><block </li></ul><ul><li>class=&quot;title&quot;>Greeting</block> </li></ul><ul><li></layout-items> </li></ul><ul><li></header> </li></ul><ul><li><block>Hello World!</block> </li></ul><ul><li></module> </li></ul><ul><li></section> </li></ul><ul><li></content> </li></ul><ul><li></page> </li></ul>
  19. 19. Blueprint structure: widgets
  20. 20. Blueprint structure: snippets
  21. 21. Display structure
  22. 22. Display controls <ul><li>Blocks, placards, image lists, data input (simple, multiline, passwd)… </li></ul><ul><li>Coming soon: maps, searchbox,… </li></ul><ul><li>Check the doc in the SDK </li></ul>
  23. 23. Building widgets <ul><li>Get SDK </li></ul><ul><ul><li>http://mobile.yahoo.com/developers </li></ul></ul><ul><li>Generate 2 code “facets”: </li></ul><ul><ul><li>Submission package </li></ul></ul><ul><ul><li>Server code </li></ul></ul>
  24. 24. Building widgets (ii) <ul><li>Start from a template (samples included) </li></ul><ul><ul><li>Modify config, add images.. </li></ul></ul><ul><li>Implement server-side code </li></ul><ul><ul><li>Test on browser! </li></ul></ul><ul><li>Submit test via: </li></ul><ul><ul><li>http://mobile.yahoo.com/developers/test/upload </li></ul></ul><ul><li>When ready, submit to gallery </li></ul><ul><li>Profit! </li></ul>
  25. 25. Submission package <ul><li>Includes config files, images and metainfo </li></ul><ul><li>Stored in Yahoo servers </li></ul>
  26. 26. Sample config file <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://mobile.yahoo.com/widgets/schema/1.0/config/” xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/config/&quot;> </li></ul><ul><li><title>HelloWorld Example</title> </li></ul><ul><li><version>1.0</version> </li></ul><ul><li><identifier>helloworld-example-rv</identifier> </li></ul><ul><li><description>A Hello World Widget.</description> </li></ul><ul><li><icon>icon</icon> </li></ul><ul><li><author organization=&quot;Yahoo!&quot; href=&quot;http://www.yahoo.com&quot;>Ricardo Varela</author> </li></ul><ul><li><widget base=&quot;http://phobeo.com/hacks/yahoowidgets/hellowidget&quot;> </li></ul><ul><li><preview> </li></ul><ul><li><icon>icon</icon> </li></ul><ul><li><label>Hello world!</label> </li></ul><ul><li></preview> </li></ul><ul><li><shortcuts> </li></ul><ul><li><item default=&quot;true&quot;> </li></ul><ul><li><label>Main</label> </li></ul><ul><li><href>helloworld.php</href> </li></ul><ul><li></item> </li></ul><ul><li></shortcuts> </li></ul><ul><li></widget> </li></ul><ul><li></config> </li></ul>
  27. 27. Sample gallery file <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><gallery xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot; </li></ul><ul><li>xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance“ </li></ul><ul><li>xsi:schemaLocation=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/ http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot;> </li></ul><ul><li><description lang=&quot;en&quot;>A simple hello world widget for testing</description> </li></ul><ul><li><tags> </li></ul><ul><li><tag>hello</tag> </li></ul><ul><li><tag>world</tag> </li></ul><ul><li><tag>example</tag> </li></ul><ul><li></tags> </li></ul><ul><li></gallery> </li></ul>
  28. 28. Images <ul><li>Best results: upload them </li></ul><ul><li>Must supply multiple sizes </li></ul><ul><ul><li><name>_<width>x<height>.<extension> </li></ul></ul><ul><li>Just reference by name </li></ul><ul><ul><li><image reference=&quot;icon&quot; size=&quot;small&quot;/> </li></ul></ul><ul><li>Fill-styles only work on uploaded images </li></ul>
  29. 29. Server code <ul><li>Create the php files in your server </li></ul><ul><li>Pointed from config </li></ul><ul><li>Notes: </li></ul><ul><ul><li>Remember to set content type ( application/x-ywidget+xml or application/x-ysnippet+xml) </li></ul></ul>
  30. 30. Server code (ii) <ul><li>Can be static… </li></ul><ul><li><page> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><header layout=&quot;simple&quot;> </li></ul><ul><li><layout-items> </li></ul><ul><li> <block class=&quot;title&quot;>Blueprint XML</block> </layout-items> </li></ul><ul><li></header> </li></ul><ul><li><block>Hello World!</block> </module></section> </content></page> </li></ul>
  31. 31. Server code (iii) <ul><li>Or use blueprint php library… </li></ul><ul><li>(not pasted, see code) </li></ul>
  32. 32. The result
  33. 33. And now… it’s up to you!
  34. 34. Note: Work in progress! <ul><li>… really, we feel your pain… </li></ul><ul><li>For more help: </li></ul><ul><ul><li>Dev Guide </li></ul></ul><ul><ul><li>Developers Group </li></ul></ul><ul><ul><ul><li>http:// tech.groups.yahoo.com/group/yhoomobiledevelopers </li></ul></ul></ul>
  35. 35. Thanks! Ricardo Varela [email_address]

×