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