Yahoo Mobile Widgets


Published on

Yahoo widgets are written in blueprint, a new xforms based language that allows you to write your mobile app once and get the best possible experience in any device.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Yahoo Mobile Widgets

  1. 1. Mobile Widgets Jose Palazon Mobile Engineer
  2. 2. Where do I start <ul><li>I want to develop a mobile app. Where do I start? </li></ul><ul><li>Problems </li></ul><ul><ul><li>Screen resolution and sizes </li></ul></ul><ul><ul><li>OS and SDKs </li></ul></ul><ul><ul><li>M emory </li></ul></ul>
  3. 3. Diversity
  4. 4. Write once, best everywhere!
  5. 5. What is blueprint? <ul><li>T h e name of the platform </li></ul><ul><li>The name of the language </li></ul><ul><li>You write your apps once in blueprint </li></ul><ul><li>The platform will make them work in as much devices as possible. </li></ul><ul><li>Widgets and snippets. </li></ul>
  6. 6. Blueprint guidelines <ul><li>Takes care of UI and interaction </li></ul><ul><li>You can concentrate on features </li></ul><ul><li>Create complex elements easily (maps, pagination, …) </li></ul><ul><li>Choose the best possible experience for each handset </li></ul><ul><li>No extra effort on your side </li></ul>
  7. 7. Maximum Fidelity <ul><li>Run everywhere we can.. </li></ul>
  8. 8. 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>
  9. 9. Widgets <ul><li>Have their own set of pages </li></ul><ul><li>Accessed from carousel </li></ul>
  10. 10. Carousel
  11. 11. Display structure
  12. 12. 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>
  13. 13. Rich set of controls available Navigation bar Image list tables Maps & directions location
  14. 14. Display controls <ul><li>Blocks, placards, image lists, data input (simple, multiline, passwd)… </li></ul><ul><li>Complex elements: maps, driving directions, pagination … </li></ul><ul><li>Complete spec document in SDK </li></ul>
  15. 15. Best everywhere
  16. 16. Widget examples
  17. 17. A more complex example: location-based mashup
  18. 18. Detail view of event + map linking to map widget
  19. 19. HTML version: detail view of photo + map
  20. 20. Parts of a widgets <ul><li>Part 1: resides on Y! Servers: </li></ul><ul><ul><li>C onfig.xml </li></ul></ul><ul><ul><li>G allery.xml </li></ul></ul><ul><ul><li>R esources/images </li></ul></ul><ul><li>Part 2: resides on public Server: </li></ul><ul><ul><li>Server side code generates your BP </li></ul></ul>
  21. 21. How it works? (HTML) HTML renderer Widget engine Your server html BP
  22. 22. What’s in the SDK <ul><li>Templates for creating your apps. </li></ul><ul><li>Code samples </li></ul><ul><li>A php helper class </li></ul><ul><li>XML Schemas for validation </li></ul><ul><li>The blueprint specification guide </li></ul><ul><li>Readme and release notes </li></ul>
  23. 23. A note on Images <ul><li>Automatic handling of different sizes </li></ul><ul><li>Naming convention makes it work </li></ul><ul><ul><li><name>_<width>x<height>.<extension> </li></ul></ul><ul><li>Just reference by identifier </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><ul><li>Check the manual for screen/size optimal sizes. </li></ul>
  24. 24. Server code <ul><li>Use your preferred technology. Just output bluepirnt. </li></ul><ul><li>Content type </li></ul><ul><ul><li>application/x-ywidget+xml </li></ul></ul><ul><ul><li>application/x-ysnippet+xml </li></ul></ul><ul><li>Cache-control : no-cache </li></ul>
  25. 25. C onfig.xml <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <config xmlns:xsi=&quot;; xmlns=&quot;;> <title>YDN Widget</title> <version>1.0</version> <identifier>ydn-widget-1</identifier> <description>YDN Widget</description> <icon>ybang</icon> <author organization=&quot;Yahoo!&quot; href=&quot;; email= [email_address] >Jose Palazon</author> <!-- change this widget base to your server url --> <widget base=&quot;;> <preview> <icon>ybang</icon> <label>YDN Widget</label> </preview> <shortcuts> <item default=&quot;true&quot;> <label>YDN Widget</label> <href>index.php</href> </item> </shortcuts> </widget> </config>
  26. 26. Server side code <?php header( &quot;Content-Type: application/x-ywidget+xml&quot; ); header( &quot;Cache-Control: no-cache&quot; );   $xsl = &quot;ydn.xsl&quot;; $xml = &quot;;; $xslt = new XSLTProcessor(); $xslt->importStyleSheet(DOMDocument::load($xsl)); echo ($xslt->transformToXML(DOMDocument::load($xml))); ?>
  27. 27. Server side code <?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?> <xsl:stylesheet version=&quot;1.0&quot; xmlns:xsl=&quot;;> <xsl:output method=&quot;xml&quot; encoding=&quot;utf-8&quot; doctype-public=&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; doctype-system= indent=&quot;yes&quot;/>   <xsl:template match='//channel'> <page> <content> <section> <header layout=&quot;simple&quot;> <layout-items> <block class=&quot;title&quot;>YDN Widget</block> </layout-items> </header> </section> <xsl:apply-templates select=&quot;item&quot; /> </content> </page> </xsl:template> <xsl:template match=&quot;item&quot;> <placard layout=&quot;card&quot; class=&quot;link&quot;> <layout-items> <image resource=&quot;ybang&quot;/> <block class=&quot;title&quot;><xsl:value-of select=&quot;title&quot;/></block> <block class=&quot;description&quot;><xsl:value-of select=&quot;pubDate&quot;/></block> <block class=&quot;subtext&quot;><xsl:value-of select=&quot;category&quot;/></block> </layout-items> <load resource=&quot;{link}&quot; event=&quot;activate&quot;/> </placard> </xsl:template> </xsl:stylesheet>
  28. 28. Step 4: test your server code <ul><li>Go to your server url in the browser </li></ul><ul><li>Force content-type firefox extension </li></ul><ul><ul><li>F rom: application/x-ywidget+xml </li></ul></ul><ul><ul><li>to: application/xhtml+xml </li></ul></ul>
  29. 29. Submit your widget to Yahoo! <ul><li>Zip xml files and resources </li></ul><ul><li>Use a browser to go to: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Go to </li></ul><ul><li>Test! </li></ul>
  30. 30. And it looks like this
  31. 31. Note: Work in progress! <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> </li></ul></ul></ul>
  32. 32. Questions? Jose Palazon [email_address]