Download - BluePrint Mobile Framework
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
– Memory
Diversity
Write once, best everywhere!
What is blueprint?
• The 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
<!-- 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>
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:
– Config.xml
– Gallery.xml
– Resources/images
• Part 2: resides on public Server:
– Server side code generates your BP
How it works? (HTML)
HTMLrenderer
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
Config.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 protected]>Jose Palazon</author> <!-- change this widget base to your server url --> <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
• Go to your server url in the browser
• Force content-type firefox extension
– From: application/x-ywidget+xml
– to: application/xhtml+xml
Submit your widget to Yahoo!
• Zip xml files and resources
• Use a browser to go to:http://mobile.yahoo.com/developers/test/upload
• Go to beta.m.yahoo.com
• Test!
And it looks like this
Note: Work in progress!
• For more help:
– Dev Guide
– Developers Group
http://tech.groups.yahoo.com/group/yhoomobiledevelopers