Creating interfaces

1
Creating interfaces

• XML to WML, Push
• Use actual cell phones
• Homework practice with simulators your own
  cell phone if you have a contract for Web
  access. Look at commercial Web sites and report
  on Discussion Board. Sign up as tellme developer.

2
Online tutorials

• Webmonkey, elsewhere tutorials on wml and
  xhtml-mp
• Pursue this if you want to do your second project
  on this.

3
Soccer results

• Take same content (results xml file) and use XSLT
  to produce a WML file
• (Leave out steps of posting this WML file to a
  WAP transmitting server for access by WAP enabled
  phones and PDAs.)
• Our goal is to work with different channels to
  focus on the interface design.

4
XML to WML

• On my site, see the two files
• resultsnoref.xml
• resultswml.xsl

5
resultsnoref.xml (fragment)

• lt?xml version"1.0" encoding"UTF-8" ?gt
• ltresults group"A"gt
• ltmatch feature"no"gt
•   ltdategt07-Jun-2002lt/dategt
•   ltteam score"3"gtSpainlt/teamgt
•   ltteam score"1"gtParaguaylt/teamgt   lt/matchgt
• .
• ltmatch feature"yes"gt
•   ltdategt31-May-2002lt/dategt
•   ltheadlinegtFrance loses to Senegallt/headlinegt
•   ltstorygtThe 1998 World Cup Champion France lost
  the opening game to Senegal. for France. The
  team was playing without one of the stars,
  Zidane.lt/storygt
•   ltteam score"1"gtSenegallt/teamgt
•   ltteam score"0"gtFrancelt/teamgt
•   ltpicturegtsoccer1.jpglt/picturegt   lt/matchgt

6
Task for transformation

• What do we need to do?
• generate at the start the 'boilerplate' for
  producing an WML file
• produce a 'card' for each match
• Generate ids for the cards m1, m2, etc.
• produce in that card the text giving the score
• produce next and prev tag elements to go forward
  and back
• do and go elements for the next (generating the
  href value
• prev for the previous

7
resultswml.xsl

• lt?xml version"1.0" encoding"UTF-8" ?gt
• ltxslstylesheet version"1.0" xmlnsxsl
• "http//www.w3.org/1999/XSL/Transform"
  xmlnsfo"http//www.w3.org/1999/XSL/Format"gt
•   ltxsloutput doctype-public"-//WAPFORUM//DTD
  WML 1.3//EN" doctype-system"http//www.wapforum.o
  rg/DTD/wml13.dtd" /gt

8

• ltxsltemplate match"/results"gt
• ltwmlgt
• ltxslapply-templates select"/results/match"gt
•   ltxslsort select"_at_feature" order"descending"
  /gt
•   lt/xslapply-templatesgt
• lt/wmlgt
• lt/xsltemplategt

9

• ltxsltemplate match"match"gt
•   ltxsltext /gt
• ltcard id"concat('m',position())"gt
• ltpgt
•   ltxslvalue-of select"date" /gt
•   ltbr /gt
•   ltxslvalue-of select"team1" /gt
•   ltxslvalue-of select"team1/_at_score" /gt
•   ltxsltextgt,lt/xsltextgt
•   ltxslvalue-of select"team2" /gt
•   ltxslvalue-of select"team2/_at_score" /gt
•   lt/pgt

10

• ltdo type"prev" name"next" label"Next"gt
•   ltxslvariable name"nextp" select"position()1"
  /gt
•   ltxslvariable name"nextpn" select"concat('m',
  nextp)" /gt
•   ltgo href"nextpn" /gt
•   lt/dogt
• ltdo type"options" name"prev" label"Prev"gt
•   ltprev /gt
•   lt/dogt
•  
• lt/cardgt
• lt/xsltemplategt
• lt/xslstylesheetgt

11
Push

• refers to pushing information out to a client
  through a previous arrangement
• send me the soccer scores as they occur
• send me news on these topics
• send me financial information
• Old idea being re-cycled. It MAY be more
  appealing for cell phone/PDA/wireless media than
  for 'old fashioned' desktop PCs using the Web
• I'm a news junkie and do not want to limit my
  news to specific topics.
• You?

12
Problem

• OpenWave handles xhtml-mp meta tag mechanism for
  timed events, but does not handle links to wml
  (with wmlscript calls)
• Nokia handles links to wml (with wmlscript calls)
  but not meta tag mechanism for timed events
• Not sure about actual phones

13
Why is this a problem?

• Want to do virtual pet example
• need timing to (starve) dog
• need random for petting

14

• lt?xml version"1.0" encoding"utf-8"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile 1.0//EN"
• "http//www.wapforum.org/DTD/xhtml-mobile1
  0.dtd" gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt lttitlegtVirtual Doglt/titlegt
• ltmeta http-equiv"refresh" content"5
  urlthindog.xhtml" /gt
• ltlink rel"stylesheet" href"style.css"
  type"text/css"/gt
• ltstyle type"text/css"gt lt/stylegt lt/headgt
• ltbodygt
• lth2gtRegular doglt/h2gt
• ltpgt ltimg src"sdog.gif" alt"dog" width"30"/gt
  lt/pgt
• ltpgtYou maylt/pgt
• ltulgt ltligtlta href"feddog.xhtml"gtFeed
  doglt/agtlt/ligt
• ltligtlta href"petdog.wmlsetdog"gtPet doglt/agtlt/ligt
  lt/ulgt
• lt/bodygt lt/htmlgt

15

• lt?xml version"1.0" encoding"utf-8"?gt
• lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.3//EN"
• "http//www.wapforum.org/DTD/wml13.dtd"gt
• ltwmlgt
• ltcard id"setdog" title"Petting"gt
• ltonevent type"ontimer"gt
• ltgo href"doit"gt
• ltsetvar name"odds" value"2"/gt
• lt/gogt
• lt/oneventgt
• lttimer value"3"/gt
• ltpgt
• ...petting lt/pgt
• lt/cardgt

16

• ltcard id"setthin" title"Petting"gt
• ltonevent type"ontimer"gt
• ltgo href"doit"gt
• ltsetvar name"odds" value"1"/gt
• lt/gogt
• lt/oneventgt
• lttimer value"3"/gt
• ltpgt
• ...petting lt/pgt
• lt/cardgt

17

• ltcard id"setfed" title"Petting"gt
• ltonevent type"ontimer"gt
• ltgo href"doit"gt
• ltsetvar name"odds" value"3"/gt
• lt/gogt
• lt/oneventgt
• lttimer value"3"/gt
• ltpgt
• ...petting lt/pgt
• lt/cardgt

18

• ltcard id"setfat" title"Petting"gt
• ltonevent type"ontimer"gt
• ltgo href"doit"gt
• ltsetvar name"odds" value"4"/gt
• lt/gogt
• lt/oneventgt
• lttimer value"3"/gt
• ltpgt
• ...petting lt/pgt
• lt/cardgt

19

• ltcard id"doit"gt
• ltonevent type"ontimer"gt
• ltgo href"trytopet.wmlspet('(odds)')"/gt
• lt/oneventgt
• lttimer value"1"/gt
• ltpgtdoing it lt/pgt
• lt/cardgt

20

• ltcard id"happy2" title"Happy dog"gt
• ltonevent type"ontimer"gt
• ltgo href"dog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgt
• ltimg src"happydog.gif" alt"happy" /gt
• lt/pgt
• lt/cardgt

21

• ltcard id"sad2" title"Sad dog"gt
• ltonevent type"ontimer"gt
• ltgo href"dog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgtsad dog lt/pgt
• lt/cardgt

22

• ltcard id"happy1" title"Happy thin dog"gt
• ltonevent type"ontimer"gt
• ltgo href"thindog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgthappy dog lt/pgt
• lt/cardgt

23

• ltcard id"sad1" title"Sad thin dog"gt
• ltonevent type"ontimer"gt
• ltgo href"thindog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgt
• ltimg src"sadthindog.gif" alt"sad thin dog" /gt
• lt/pgt
• lt/cardgt

24

• ltcard id"happy3" title"Happy fed dog"gt
• ltonevent type"ontimer"gt
• ltgo href"feddog.xhtml"/gt
• lt/oneventgt
• lttimer value"20"/gt
• ltpgt
• ltimg src"happydog.gif" alt"happy dog" /gt
• lt/pgt
• lt/cardgt
• ltcard id"sad3" title"Sad fed dog"gt
• ltonevent type"ontimer"gt
• ltgo href"feddog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgtsad dog lt/pgt
• lt/cardgt

25

• ltcard id"happy4" title"Happy fat dog"gt
• ltonevent type"ontimer"gt
• ltgo href"fatdog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgthappy dog lt/pgt
• lt/cardgt
• ltcard id"sad4" title"Sad fat dog"gt
• ltonevent type"ontimer"gt
• ltgo href"fatdog.xhtml"/gt
• lt/oneventgt
• lttimer value"30"/gt
• ltpgtsad dog -- should never happen lt/pgt
• lt/cardgt
• lt/wmlgt

26
trytopet.wmls

• extern function pet(odds)
• var choice
• Lang.seed(-1)
• if (oddsgtLang.random(4))
• WMLBrowser.go("petdog.wmlhappy"odds)
• else
• WMLBrowser.go("petdog.wmlsad"odds)

27
newmedia.purchase.edu/Jeanine/origami.htmlnewmed
ia.purchase.edu/Jeanine/origami.xhtml

• On my phone (verizon service), origami.xhtml did
  NOT workorigami.html worked partially
• the css file and the gif files were not used
• links did work
• demonstrate using
• regular web browser
• simulators

28
Homework

• Try samples
• Experiment with your own!