Creating Yahoo Mobile Widgets

Slide 1: C r e a t in g M o b ile W id g e t s R ic a rd o Va re la Mo b ile E n g in e e rin g Le a d Ove rTh e Air h a c k fe s t – Lo n do n - Ap r 4 th

Slide 2: B a c k g ro u n d • Mobile de ve lopme nt? Th a t is s uc h a g ood ide a ! • “Write onc e , run a nywh e re ”

Slide 3: Fa s t fo rw a rd ..

Slide 4: T h e s o lu t io n ?

Slide 5: Ya h o o ! t o t h e r e s c u e We me a n… to our own re s c ue too!

Slide 6: W id g e t s • Our ope n pla tform for mobile de ve lopme nt • S imple de c la ra tive XML la ng ua g e , blue print (ba s e d on XF orms ) • Obje c tive : g ive your a pp th e ma ximum dis tribution pos s ible !

Slide 7: B lu e p r in t g u id e lin e s • B re a dth ove r de pth • G e t your c onte nt out to e ve rybody • S implic ity + g ood re s ults • G ra c e ful de g ra da tion + be s t-of-c la s s e xpe rie nc e • “Write onc e , run in a s muc h a s pos s ible ”

Slide 8: M in im u m E f f o r t Write onc e ..

Slide 9: M a x im u m F id e lit y R un e ve rywh e re we c a n..

Slide 10: G a m e p la n • Ope n pla tform to e na ble YOU to c re a te mobile c onte nt in a n e a s ie r wa y! • S e a rc h ing for th e kille r mobile a pp

Slide 11: Re fe re n c e s • Ya h oo! Mobile Widg e ts S DK • B lue print • h ttp:/ mobile .ya h oo.c om/ / • h ttp:/ mobile .ya h oo.c om/ ve lope rs / de • h ttp:/ mobile .ya h oo.c om/ a lle ry# / g • Ya h oo G o c lie nt / HTML c lie nt • h ttp:/ be ta .m.ya h oo.c om /

Slide 12: B lu e p r in t • S imple de c la ra tive XML la ng ua g e ba s e d on XF orms • S e ma ntic , te mpla te -ba s e d • Us e d in both s nippe ts & widg e ts

Slide 13: S n ip p e t s • Live in th e m ob ile h om e pa g e • Ha ve 2 vie ws : – norm a l – E xte nde d [opt]

Slide 14: W id g e t s • Ha ve th e ir own s e t of pa g e s • Ac c e s s e d from c a rous e l

Slide 15: S id e n o t e : r s s v ie w s • R S S vie ws c ome for fre e • To s e t up a s imple R S S Vie w, write a c o n f ig . x m l file in wh ic h th e s ourc e url (widg e t or s nippe t) s pe c ifie s th e s ourc e of th e R S S fe e d

Slide 16: C a ro u s e l

Slide 17: B lu e p r in t r o a d m a p • P h a s e 1 (in be ta ) • s e rve r-s id e lo g ic • P h a s e 1.5 • s u p p o rt fo r o n e S e a rc h /C on n e c t/P la c e • Ma y ju s t tu rn in to ... • P ha s e 2 • F u ll da ta m o d e l, MVC

Slide 18: B lu e p r in t s a m p le <!-- g re e t.xml --> <!-- h e llo_a pp.xml --> <pa g e id="g re e t"> <pa g e > <c onte nt> <c onte nt> <s e c tion> <s e c tion> <module > <module > <h e a de r la yout="s imple "> <trig g e r> <la yout-ite ms > <la be l>Clic k Me !</ b e l> la <b loc k <loa d-pa g e e ve nt="a c tiva te “ c la s s ="title ">G re e ting </bloc k> pa g e ="g re e t.xml" /> </ yout-ite ms > la </ g e r> trig </ e a de r> h </ module > <bloc k>He llo World!</ loc k> b </ e c tion> s </ module > </ onte nt> c </ e c tion> s </ g e > pa </ onte nt> c </ g e > pa

Slide 19: B lu e p r in t s t r u c t u r e : w id g e t s

Slide 20: B lu e p r in t s t r u c t u r e : s n ip p e t s

Slide 21: D is p la y s t r u c t u r e

Slide 22: D is p la y c o n t r o ls • B loc ks , pla c a rds , ima g e lis ts , da ta input (s imple , multiline , pa s s wd)… • Coming s oon: ma ps , s e a rc h box,… • Ch e c k th e doc in th e S DK

Slide 23: B u ild in g w id g e t s • G e t S DK – h ttp :/ m ob ile .ya h o o.c o m / e ve lo p e rs / d • G e ne ra te 2 c ode “fa c e ts ”: – S u b m is s io n p a c ka g e – S e rve r c o de

Slide 24: B u ild in g w id g e t s ( ii) • S ta rt from a te m pla te (s a m ple s inc lude d) – Mo dify c onfig , a dd im a g e s .. • Im ple m e nt s e rve r-s ide c ode – Te s t on b rows e r! • S ub m it te s t via : – h ttp:/ m ob ile .ya h oo.c om / ve lope rs / s t/ / de te uploa d • Wh e n re a dy, s ub m it to g a lle ry • P rofit!

Slide 25: S u b m is s io n p a c k a g e • Inc lude s c onfig file s , ima g e s a nd me ta info • S tore d in Ya h oo s e rve rs

Slide 26: S a m p le c o n f ig f ile <? xml ve rs ion="1.0" e nc oding ="UTF -8"? > <c onfig xmlns :xs i=“h ttp:/ www.w3.org / / 2001/ XMLS c h e ma -ins ta nc e ” xs i:s c h e ma Loc a tion=“h ttp:/ mobile .ya h oo.c om/ / widg e ts / c h e ma / c onfig / s 1.0/ ” xmlns ="h ttp:/ mobile .ya h oo.c om/ / widg e ts / c h e ma / c onfig / s 1.0/ "> <title >He lloWorld E xa mple </ > title <ve rs ion>1.0</ rs ion> ve <ide ntifie r>h e lloworld-e xa mple -rv</ ntifie r> ide <de s c ription>A He llo World Widg e t.</ s c ription> de <ic on>ic on</ icon> <a uth or org a niz a tion="Ya h oo!" h re f="h ttp:/ www.ya h oo.c om">R ic a rdo Va re la </ uth or> / a <widg e t ba s e ="h ttp:/ ph obe o.c om/ a c ks / h oowidg e ts / e llowidg e t"> / h ya h <pre vie w> <icon>ic on</ icon> <la be l>He llo world!</ be l> la </ vie w> pre <s h ortc uts > <ite m de fa ult="true "> <la be l>Ma in</ be l> la <h re f>h e lloworld.ph p</ re f> h </ m> ite </ h ortc uts > s </ widg e t> </ onfig > c

Slide 27: S a m p le g a lle r y f ile <? xm l ve rs ion="1.0" e nc oding ="UTF -8"? > <g a lle ry xm lns ="h ttp:/ m ob ile .ya h oo.c om / / widg e ts / c h e m a / g a lle ry/ s 1.0/ " xm lns :xs i="h ttp:/ www.w3.org / / 2001/ XMLS c h e m a -ins ta nc e “ xs i:s c h e m a Loc a tion="h ttp:/ m ob ile .ya h oo.c om / / widg e ts / c h e m a / g a l s 1.0/ le ry/ h ttp:/ m ob ile .ya h oo.c om / / widg e ts / c h e m a / g a lle ry/ s 1.0/ "> <de s c ription la ng ="e n">A s im ple h e llo world widg e t for te s ting </ s c ription> de <ta g s > <ta g >h e llo</ g > ta <ta g >world</ g >ta <ta g >e xa m ple </ g > ta </ g s > ta </ a lle ry> g

Slide 28: Im a g e s • B e s t re s ults : uploa d th e m • Mus t s upply m ultiple s iz e s – <na m e >_<width >x<h e ig h t>.<e xte ns ion> • J us t re fe re nc e b y na m e – <im a g e re fe re nc e ="ic on" s iz e ="s m a ll"/> • F ill-s tyle s only work on uploa de d im a g e s

Slide 29: S e rv e r c o d e • Cre a te th e ph p file s in your s e rve r • P ointe d from c onfig • Note s : – R e m e m b e r to s e t c o n te n t typ e (a p p lic a tio n/x-ywid g e t+xm l o r a pp lic a tio n/ x-ys n ip p e t+xm l)

Slide 30: S e r v e r c o d e ( ii) • Ca n be s ta tic … <pa g e > <c onte nt> <s e c tion> <module > <h e a de r la yout="s im ple "> <la yout-ite m s > <bloc k c la s s ="title ">B lue print XML</bloc k> </ yout-ite ms > la </ e a de r> h <bloc k>He llo World!</ bloc k> </ odule ></ e c tion> m s </ onte nt></ g e > c pa

Slide 31: S e r v e r c o d e ( iii) • Or us e b lue print ph p lib ra ry… • (not pa s te d, s e e c ode )

Slide 32: T h e r e s u lt

Slide 33: A n d n o w … it ’ s u p t o y o u !

Slide 34: N o t e : W o r k in p r o g r e s s ! • … re a lly, we fe e l your pa in… • F or more h e lp: – De v G u id e – De ve lop e rs G rou p h ttp:/ / te c h .g roups .ya h oo.c om / roup / oom ob ile de ve g yh

Slide 35: Th a n k s ! R ic a rdo Va re la ric a rd ov@ya h oo-inc .c om