Yahoo widgets are written in blueprint, a new xforms based language that allows you to write your mobile app once and get the best possible experience in any device.

1. Mobile Widgets Jose Palazon Mobile Engineer

3. Diversity

4. Write once, best everywhere!

10. Carousel

11. Display structure

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

15. Best everywhere

16. Widget examples

17. A more complex example: location-based mashup

18. Detail view of event + map linking to map widget

19. HTML version: detail view of photo + map

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

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

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

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

30. And it looks like this

32. Questions? Jose Palazon [email_address]