New challenge: cellphones

1
New challenge cellphones PDAs

• Show homework (majors)2-phase xml/xsl
• Nokia Mobile Toolkit, Openwave
• WML, WMLScript, wbmp
• XHTML-XP
• Homework download, install use simulators

2
2 phase xml/xsl

• Use xml file twice (xml file of books)
• produce list of all entries for specific child
  element (category author, title, etc.). User
  then makes choice
• produce all book entries with a child of that
  name holding that choice (e.g., an author element
  is 'meyer')

3

• lt?xml version"1.0" ?gt
• ltbooksgt
• ltbookgt
• ltauthorgtAgnewlt/authorgt
• ltauthorgtKellermanlt/authorgt
• ltauthorgtMeyerlt/authorgt
• lttitlegtMultimedia in the Classroom lt/titlegt
• ltpublishergtAllyn and Baconlt/publishergt
• ltyeargt1996lt/yeargt
• lt/bookgt
• ltbookgtlt/bookgt . lt/booksgt

4
books.xml
preparelistfix4.xsl
chooselists.html
display.js
html giving choices
displayitemsbycat.xsl
html showing books matching choice
5
2-phase

• Demonstrate example on website
• newmedia.purchase.edu/Jeanine/interfaces/xmlstuff
  .html
• Examine files
• in phase 1, xsl produces calls to a javascript
  function called displayitems taking 2 parameters,
  which leads to xsl transformation using 2
  parameters
• in phase2, an ltxslifgt test involves complex
  condition using the 2 parameters

6

• ltxslwhen test"'author'whichcat"gt
• ltxslvariable name"list" select"//authornot(.
  precedingauthor)"/gt
• ltxslfor-each select"list"gt
• ltxslelement name"a"gt
• ltxslattribute name"href"gt
• javascriptdisplayitems('ltxslvalue-of
  select"whichcat"/gt','ltxslvalue-of
  select"."/gt')
• lt/xslattributegt
• ltxslvalue-of select"."/gt
• lt/xslelementgt
• ltbr/gt
• lt/xslfor-eachgt
• lt/xslwhengt

7

• ltxslfor-each select"//book"gt
• ltxslif test"((whichcat'author') and
  authorwhichones)) or
• ((whichcat'title') and (titlewhichones))
  or
• ((whichcat'publisher') and (publisherwhichones
  )) or
• ((whichcat'year') and (yearwhichones))"gt
  lthr/gt
• ltbgtltxslvalue-of select"title"/gtlt/bgt by ltbr/gt
• ltxslfor-each select"author"gt
• ltxslvalue-of select"."/gt ltbr/gt
• lt/xslfor-eachgt
• Published by ltbr/gt
• ltxslvalue-of select"publisher"/gt in
  ltxslvalue-of select"year"/gt
• lt/xslifgt
• lt/xslfor-eachgt

8
by Jerry Scott Jim Borgman http//www.kingfeatu
res.com/features/comics/zits/about.htm
9
Reason to do .

• Challenge of very small screen low bandwidth
  can help focus on what is important.
• Emerging area of activity. Standards still
  evolving
• WAP wireless application protocol. Speak of WAP
  enabled sites. Different protocols than
  http/tcp/ip.
• Older standard Wireless Markup Language, with
  WML Script, wbmp 2 color images
• Newer standard XHTML-MP

10
Nokia Mobile Internet Toolkit

• editors to create modify WML, WMLScript and
  wbmp files or XHTML-MP files
• simulator to SHOW (run) files
• manuals for WML, WMLScript, WAP, push,
  authentication, XHTML-MP
• At Nokia site, there are ways to customize the
  simulator to different phones.

11
OpenWave

• Use textpad or other editor to create file

12
XHTML-MP

• good news XHTML-MP is essentially (x)HTML. Not
  everything is supported
• bad news you can create inappropriately large
  documents for small screen browsers using
  XHTML-MP.
• more bad news requires server-side programming
  to do what Javascript or wmlscript do.

13
WML

• wml scripts are analogous to the HTML files
• Deck of cards
• XHTML style
• The application may use a wmls file. This holds
  the JavaScript code.
• The application may make use of wbmp files.
  These hold tiny images.

14
Sample programs

• You will need to copy all the files of an
  application to the D drive to run them.
• This is because the simulator creates a new file
  (called wmlc) and needs to place it somewhere.
• To edit data already present in a field, you may
  need to click on control(right arrow key over
  the 6)
• Mortgage program

15
(No Transcript)
16
Nokia Mobile Internet ToolkitOpenWave

• demos

17
WML

• WML documents are XML documents
• 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
• lt/wmlgt

18
WML elements

• WML documents are a deck of card elements.
• Note the contents of a card can require more
  than one screen.
• Card elements can have ids, titles, other
  attributes
• ltcard id"result"title"Found!"gt
• The id can be used in href attribute
• ltgo href"result" /gt
• Also referenced from external WMLScript file.
• Card elements can contain text, some formatting,
  images.

19
Example with labels and actions

• ltcard id"m1"gt
• ltpgt31-May-2002 ltbr/gtSenegal 1, France 0lt/pgt
• ltdo type"prev" name"next" label"Next"gtltgo
  href"m2"/gtlt/dogt
• ltdo type"options" name"prev" label"Prev"gtltprev/
  gtlt/dogt
• lt/cardgt

20
(No Transcript)
21
lookup example

• ltcard id"start" title"Find office"
  newcontext"true"gt
• ltpgt
• Select, type in name, click on ok, click on
  options, select find
• ltinput name"key" type"text"/gt
• ltdo type"accept" label"Find"gt
• ltgo href"find.wmlslookup('(key)')"/gt
• lt/dogt
• lt/pgt
• lt/cardgt

22

• ltcard id"result" title"Found!"gt
• ltp align"center"gt
• ltbiggtltbgt(key) is in (location).lt/bgtlt/biggt
  
• lt/pgt
• ltdo type"accept" label"Repeat?"gt
• ltgo href"start" /gt
• lt/dogt
• ltdo type"home" label"Map" gt
• ltgo href"map" /gt
• lt/dogt
• lt/cardgt

values returned from script
23
Click Options
Enter name then click under OK
24
screens appear and are replaced
Click select
Click down arrow
25
in case of duplicates

• ltcard id"dup" title"More than one"gt
• ltpgt
• (fullnames) ltbr/gt
• (location)
• lt/pgt
• ltdo type"accept" label"Repeat?"gt
• ltgo href"start" /gt
• lt/dogt
• lt/cardgt

26
(No Transcript)
27
find.wmls

• extern function lookup(key)
• var place
• var found
• var dups
• var fn
• fn ""
• dups false
• place""
• foundfalse

28

• if (String.find("Jeanine Meyer",key)gt0)
• fn"Jeanine Meyer"
• found true
• place "NS"
• if (String.find("Jon Rubin",key)gt0)
• if (found)
• fn fn"Jon Rubin"
• place place "Music"
• dups true
• else
• fn"Jon Rubin"
• found true
• place "Music"

29

• if (String.find("Peter Ohring",key)gt0)
• if (found)
• fn fn"Peter Ohring"
• place place "NS"
• dups true
• else
• fn"Peter Ohring"
• foundtrue
• place"NS"
• .

30

• if (dups)
• WMLBrowser.setVar("fullnames",fn)
• WMLBrowser.setVar("location",place)
• WMLBrowser.go("lookup.wmldup")
• else if (found)
• WMLBrowser.setVar("location",place)
• WMLBrowser.go("lookup.wmlresult")
• else
• WMLBrowser.go("lookup.wmlnf")

31
Start of example

• 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-mobile10.dtd"gt
• ltheadgt
• lttitlegtOrigamilt/titlegt
• ltlink rel"stylesheet" href"style.css"
  type"text/css"/gt
• lt/headgt

32

• ltbodygt
• ltimg src"bird.gif" alt"" width"60"/gt
• ltbr/gt
• ltbgtltigtOrigami modelslt/igtlt/bgt
• ltbr clear"all"gt
• .
• lt/bodygt
• lt/htmlgt

33

• lttablegt lttr class"blue"gt
• lttdgt1 lta accesskey"1" href"wiggler.xhtml"gtWiggle
  rlt/agtlt/tdgt lt/trgt
• lttrgt lttdgt2 lta accesskey"2" class"bluetext"
  href"wbomb.xhtml"gtWater bomblt/agtlt/tdgt lt/trgt
• lttr class"blue"gt
• lttdgt3 lta accesskey"3" href"frogface.xhtml"gtFrog
  facelt/agtlt/tdgt lt/trgt
• lttrgt lttdgt4 lta accesskey"4" class"bluetext"
  href"mbox.xhtml"gtMagazine cover boxlt/agtlt/tdgt
  lt/trgt
• lttr class"blue"gt
• lttdgtltp mode"nowrap"gt5 lta accesskey"5"
  href"cup.xhtml"gt
• Drinking cuplt/agtlt/pgtlt/tdgt lt/trgt lt/tablegt

34
style.css

• BODY color006699 font-family Arial,
  sans-serif background-colorFFFFFF
• TD font-family Arial, sans-serif
• .bluetext color006699
• .blue color000000 background-color99CCFF

35
Work session Homework

• Go to forum.nokia.com
• try built-in examples
• make (small) modifications, save under new name,
  and try out!
• Home/office download keep experimenting
• need to register
• download Nokia Mobile Internet Toolkit
• download OpenWave
• Experiment
• Next class graphics exercise