Yahoo Mobile Widgets

Mobile Widgets Jose Palazon Mobile Engineer

Where do I start

I want to develop a mobile app. Where do I start?

Problems

Screen resolution and sizes

OS and SDKs

M emory

Diversity

Write once, best everywhere!

What is blueprint?

T h e name of the platform

The name of the language

You write your apps once in blueprint

The platform will make them work in as much devices as possible.

Widgets and snippets.

Blueprint guidelines

Takes care of UI and interaction

You can concentrate on features

Create complex elements easily (maps, pagination, …)

Choose the best possible experience for each handset

No extra effort on your side

Maximum Fidelity

Run everywhere we can..

Snippets

Live in the mobile home page

Have 2 views:

normal

Extended [opt]

Widgets

Have their own set of pages

Accessed from carousel

Carousel

Display structure

Blueprint sample

<page>

<content>

<section>

<module>

<trigger>

<label>Click Me!</label>

<load-page event="activate“

page="greet.xml" />

</trigger>

</module>

</section>

</content>

</page>

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

Rich set of controls available Navigation bar Image list tables Maps & directions location

Display controls

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

Complex elements: maps, driving directions, pagination …

Complete spec document in SDK

Best everywhere

Widget examples

A more complex example: location-based mashup

Detail view of event + map linking to map widget

HTML version: detail view of photo + map

Parts of a widgets

Part 1: resides on Y! Servers:

C onfig.xml

G allery.xml

R esources/images

Part 2: resides on public Server:

Server side code generates your BP

How it works? (HTML) HTML renderer Widget engine Your server html BP

What’s in the SDK

Templates for creating your apps.

Code samples

A php helper class

XML Schemas for validation

The blueprint specification guide

Readme and release notes

A note on Images

Automatic handling of different sizes

Naming convention makes it work

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

Just reference by identifier

<image reference="icon" size="small"/>

Fill-styles only work on uploaded images

Check the manual for screen/size optimal sizes.

Server code

Use your preferred technology. Just output bluepirnt.

Content type

application/x-ywidget+xml

application/x-ysnippet+xml

Cache-control : no-cache

C onfig.xml <?xml version="1.0" encoding="UTF-8"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://mobile.yahoo.com/widgets/schema/1.0/config/"> <title>YDN Widget</title> <version>1.0</version> <identifier>ydn-widget-1</identifier> <description>YDN Widget</description> <icon>ybang</icon> <author organization="Yahoo!" href="http://developer.yahoo.com" email= [email_address] >Jose Palazon</author>  <widget base="http://www.noletia.com/ydn"> <preview> <icon>ybang</icon> <label>YDN Widget</label> </preview> <shortcuts> <item default="true"> <label>YDN Widget</label> <href>index.php</href> </item> </shortcuts> </widget> </config>

Server side code <?php header( "Content-Type: application/x-ywidget+xml" ); header( "Cache-Control: no-cache" ); $xsl = "ydn.xsl"; $xml = "http://developer.yahoo.com/blog/index.xml"; $xslt = new XSLTProcessor(); $xslt->importStyleSheet(DOMDocument::load($xsl)); echo ($xslt->transformToXML(DOMDocument::load($xml))); ?>

Server side code <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system= http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd indent="yes"/> <xsl:template match='//channel'> <page> <content> <section> <header layout="simple"> <layout-items> <block class="title">YDN Widget</block> </layout-items> </header> </section> <xsl:apply-templates select="item" /> </content> </page> </xsl:template> <xsl:template match="item"> <placard layout="card" class="link"> <layout-items> <image resource="ybang"/> <block class="title"><xsl:value-of select="title"/></block> <block class="description"><xsl:value-of select="pubDate"/></block> <block class="subtext"><xsl:value-of select="category"/></block> </layout-items> <load resource="{link}" event="activate"/> </placard> </xsl:template> </xsl:stylesheet>

Step 4: test your server code