Creating Mobile Widgets Ricardo Varela Mobile Engineering Lead OverTheAir hack fest – London - Apr 4 th

Background Mobile development? That is such a good idea! “ Write once, run anywhere”

Mobile development? That is such a good idea!

“ Write once, run anywhere”

Fast forward..

The solution?

Yahoo! to the rescue We mean… to our own rescue too!

We mean… to our own rescue too!

Widgets Our open platform for mobile development Simple declarative XML language, blueprint (based on XForms) Objective: give your app the maximum distribution possible!

Our open platform for mobile development

Simple declarative XML language, blueprint (based on XForms)

Objective: give your app the maximum distribution possible!

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”

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”

Minimum Effort Write once..

Write once..

Maximum Fidelity Run everywhere we can..

Run everywhere we can..

Game plan Open platform to enable YOU to create mobile content in an easier way! Searching for the killer mobile app

Open platform to enable YOU to create mobile content in an easier way!

Searching for the killer mobile app

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

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

Blueprint Simple declarative XML language based on XForms Semantic, template-based Used in both snippets & widgets

Simple declarative XML language based on XForms

Semantic, template-based

Used in both snippets & widgets

Snippets Live in the mobile home page Have 2 views: normal Extended [opt]

Live in the mobile home page

Have 2 views:

normal

Extended [opt]

Widgets Have their own set of pages Accessed from carousel

Have their own set of pages

Accessed from carousel

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

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

Carousel

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

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

Blueprint sample <!-- hello_app.xml --> <page> <content> <section> <module> <trigger> <label>Click Me!</label> <load-page event=&quot;activate“ page=&quot;greet.xml&quot; /> </trigger> </module> </section> </content> </page> <!-- greet.xml --> <page id=&quot;greet&quot;> <content> <section> <module> <header layout=&quot;simple&quot;> <layout-items> <block class=&quot;title&quot;>Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </section> </content> </page>

<!-- hello_app.xml -->

<page>

<content>

<section>

<module>

<trigger>

<label>Click Me!</label>

<load-page event=&quot;activate“

page=&quot;greet.xml&quot; />

</trigger>

</module>

</section>

</content>

</page>

<!-- greet.xml -->

<page id=&quot;greet&quot;>

<content>

<section>

<module>

<header layout=&quot;simple&quot;>

<layout-items>

<block

class=&quot;title&quot;>Greeting</block>

</layout-items>

</header>

<block>Hello World!</block>

</module>

</section>

</content>

</page>

Blueprint structure: widgets

Blueprint structure: snippets

Display structure

Display controls Blocks, placards, image lists, data input (simple, multiline, passwd)… Coming soon: maps, searchbox,… Check the doc in the SDK

Blocks, placards, image lists, data input (simple, multiline, passwd)…

Coming soon: maps, searchbox,…

Check the doc in the SDK

Building widgets Get SDK http://mobile.yahoo.com/developers Generate 2 code “facets”: Submission package Server code

Get SDK

http://mobile.yahoo.com/developers

Generate 2 code “facets”:

Submission package

Server code

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!

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!

Submission package Includes config files, images and metainfo Stored in Yahoo servers

Includes config files, images and metainfo

Stored in Yahoo servers

Sample config file <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <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;> <title>HelloWorld Example</title> <version>1.0</version> <identifier>helloworld-example-rv</identifier> <description>A Hello World Widget.</description> <icon>icon</icon> <author organization=&quot;Yahoo!&quot; href=&quot;http://www.yahoo.com&quot;>Ricardo Varela</author> <widget base=&quot;http://phobeo.com/hacks/yahoowidgets/hellowidget&quot;> <preview> <icon>icon</icon> <label>Hello world!</label> </preview> <shortcuts> <item default=&quot;true&quot;> <label>Main</label> <href>helloworld.php</href> </item> </shortcuts> </widget> </config>

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>

<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;>

<title>HelloWorld Example</title>

<version>1.0</version>

<identifier>helloworld-example-rv</identifier>

<description>A Hello World Widget.</description>

<icon>icon</icon>

<author organization=&quot;Yahoo!&quot; href=&quot;http://www.yahoo.com&quot;>Ricardo Varela</author>

<widget base=&quot;http://phobeo.com/hacks/yahoowidgets/hellowidget&quot;>

<preview>

<icon>icon</icon>

<label>Hello world!</label>

</preview>

<shortcuts>

<item default=&quot;true&quot;>

<label>Main</label>

<href>helloworld.php</href>

</item>

</shortcuts>

</widget>

</config>

Sample gallery file <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <gallery xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance“ xsi:schemaLocation=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/ http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot;> <description lang=&quot;en&quot;>A simple hello world widget for testing</description> <tags> <tag>hello</tag> <tag>world</tag> <tag>example</tag> </tags> </gallery>

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>

<gallery xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot;

xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance“

xsi:schemaLocation=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/ http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot;>

<description lang=&quot;en&quot;>A simple hello world widget for testing</description>

<tags>

<tag>hello</tag>

<tag>world</tag>

<tag>example</tag>

</tags>

</gallery>

Images Best results: upload them Must supply multiple sizes <name>_<width>x<height>.<extension> Just reference by name <image reference=&quot;icon&quot; size=&quot;small&quot;/> Fill-styles only work on uploaded images

Best results: upload them

Must supply multiple sizes

<name>_<width>x<height>.<extension>

Just reference by name

<image reference=&quot;icon&quot; size=&quot;small&quot;/>

Fill-styles only work on uploaded images

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)

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)

Server code (ii) Can be static… <page> <content> <section> <module> <header layout=&quot;simple&quot;> <layout-items> <block class=&quot;title&quot;>Blueprint XML</block> </layout-items> </header> <block>Hello World!</block> </module></section> </content></page>

Can be static…

<page>

<content>

<section>

<module>

<header layout=&quot;simple&quot;>

<layout-items>

<block class=&quot;title&quot;>Blueprint XML</block> </layout-items>

</header>

<block>Hello World!</block> </module></section> </content></page>

Server code (iii) Or use blueprint php library… (not pasted, see code)

Or use blueprint php library…

(not pasted, see code)

The result

And now… it’s up to you!

Note: Work in progress! … really, we feel your pain… For more help: Dev Guide Developers Group http:// tech.groups.yahoo.com/group/yhoomobiledevelopers

… really, we feel your pain…

For more help:

Dev Guide

Developers Group

http:// tech.groups.yahoo.com/group/yhoomobiledevelopers

Thanks! Ricardo Varela [email_address]