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

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

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

Questions?

Jose Palazon

[email protected]

BluePrint Mobile Framework

Technology

Transcript of BluePrint Mobile Framework