Using Cocoon to build Web sites for wireless devices - PowerPoint PPT Presentation

Loading...

PPT – Using Cocoon to build Web sites for wireless devices PowerPoint presentation | free to download - id: 24f53a-OWYwZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Using Cocoon to build Web sites for wireless devices

Description:

only one card is visible at a time, but all the cards in a deck are sent to the ... If the page navigation is the same for the HTML and WML versions, the ... – PowerPoint PPT presentation

Number of Views:42
Avg rating:3.0/5.0
Slides: 38
Provided by: ovidiup
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Using Cocoon to build Web sites for wireless devices


1
(No Transcript)
2
Using Cocoon to build Web sites for wireless
devices
Ovidiu Predescu Hewlett Packard ApacheCon 2001
3
Contents
  • Characteristics of wireless devices
  • Random introduction to WML
  • Why use Cocoon?
  • Enhancements to Cocoon
  • XHTML language to describe the presentation

4
Characteristics of wireless devices
  • small screens
  • cumbersome data input capabilities
  • limited memory
  • different markup languages WML, c-HTML, HTML

5
User experience challenges
  • information retrieval, not browsing
  • organize data such that its easy to access it
  • the application should be optimized for the
    device, to increase the user experience

6
Contents
  • Characteristics of wireless devices
  • Random introduction to WML
  • Why use Cocoon?
  • Enhancements to Cocoon
  • XHTML language

7
Random introduction to WML
  • Card and deck
  • Anchors anchor, a
  • Text elements
  • Emphasis elements (em, strong, i, b, u, big,
    small)
  • br, p, table, tr, td
  • Events and tasks do, postfield, go, prev
  • Variables setvar, refresh, onevent
  • User input input, select, option

8
Simple WML example
lt?xml version"1.0"?gt lt!DOCTYPE wml PUBLIC
"-//PHONE.COM//DTD WML 1.1//EN"
"http//www.phone.com/dtd/wml11.dtd" gt ltwmlgt
ltcardgt ltpgtChoose serviceltbr/gt lta
href/news" accesskey"1"gtNewslt/agtltbr/gt lta
href/weather accesskey"2"gtWeatherlt/agtltbr/gt
lta href/stocks accesskey"3"gtStockslt/agtltbr/gt
lt/pgt lt/cardgt lt/wmlgt
9
Simple WML example (continued)
lt?xml version"1.0"?gt lt!DOCTYPE wml PUBLIC
"-//PHONE.COM//DTD WML 1.1//EN"
"http//www.phone.com/dtd/wml11.dtd" gt ltwmlgt
ltcardgt ltpgtWeatherltbr/gt Enter your zip
code ltinput type"text" name"zip"/gt
ltdo type"accept" label"Show"gt ltgo
href/show" method"post"gt ltpostfield
name"zip" value"(zip)"/gt lt/gogt
lt/dogt lt/pgt lt/cardgt lt/wmlgt
10
Simple WML example (continued)
lt?xml version"1.0"?gt lt!DOCTYPE wml PUBLIC
"-//PHONE.COM//DTD WML 1.1//EN"
"http//www.phone.com/dtd/wml11.dtd" gt ltwmlgt
ltcardgt ltpgtSunnyvale, ltbr/gtclear skies,
70Flt/pgt lt/cardgt lt/wmlgt
11
WML card and deck
  • A WML page, or deck, is a collection of cards
  • only one card is visible at a time, but all the
    cards in a deck are sent to the browser in one
    message
  • ltwmlgt
  • ltcardgt
  • ltdo typeacceptgtltgo hrefc2/gtlt/dogt
  • ltpgtHello...lt/pgt
  • lt/cardgt
  • ltcard idc2gt
  • ltpgtHello World!lt/pgt
  • lt/cardgt
  • lt/wmlgt

12
WML emphasis elements
  • Very similar with the HTML elements with the same
    name em, strong, i, b, u, br, p, table, tr, td
  • big and small are informative elements to
    increase or decrease the font size ignored on
    most phones

13
WML events and tasks
  • do mechanism to perform actions on the current
    card
  • postfield post the value of a variable in a URL
    request
  • go, prev go to a given URL or to the calling one
  • ltwmlgt
  • ltcard titleWant a free beer?gt
  • ltdo typeaccept labelGetgt
  • ltgo hrefget.wml methodpostgt
  • ltpostfield namebeer value1/gt
  • lt/gogt
  • lt/dogt
  • ltdo typeprev labelCancelgtltprev/gtlt/dogt
  • lt/cardgt
  • lt/wmlgt

14
WML variables
  • setvar sets a variable on the users browser
  • refresh task that indicates an update of the
    cards variables
  • onevent binds a task to the enclosing element
  • ltwmlgt
  • ltcardgt
  • ltonevent typeonenterforwardgt
  • ltrefreshgt
  • ltsetvar nameSID value123/gt
  • lt/refreshgt
  • lt/oneventgt
  • ...
  • lt/cardgt
  • lt/wmlgt

15
WML user input
  • input specifies a text entry element
  • ltwmlgt
  • ltcardgt
  • ltpgt
  • SSN ltinput typetext namessn
  • formatNNN-NN-NNNN/gt
  • lt/pgt
  • lt/cardgt
  • lt/wmlgt

16
WML user input (continued)
  • select, option allow the user to choose from a
    list of options
  • ltwmlgt
  • ltcardgt
  • ltpgtPlease select your menu
  • ltselect namesel multipletruegt
  • ltoption valuebeergtBeerlt/optiongt
  • ltoption valuepizzagtPizzalt/optiongt
  • ltoption valuehotdoggtHot doglt/optiongt
  • lt/selectgt
  • lt/pgt
  • lt/cardgt
  • lt/wmlgt

17
Contents
  • Characteristics of wireless devices
  • Random introduction to WML
  • Why use Cocoon?
  • Enhancements to Cocoon
  • XHTML language

18
Challenges in building wireless applications
  • How to write applications that have to work with
    both WML and HTML devices?
  • Handling sessions is a tricky task to do it in a
    portable and transparent way with all phones and
    WAP gateways
  • Browser implementations vary widely from vendor
    to vendor, or even from one version to another
    supporting them all is a maintenance nightmare
  • How to display dynamic content such that the
    generated decks are not larger than the size
    limit?

19
Approach to solving the problem
  • Use an XML based language to represent the user
    interface an enhanced subset of XHTML to
    describe the UI
  • Use XSLT for doing the translation from XML to
    the language supported by the device
  • As long as the navigation between screens is
    common between WML and HTML, we can use the same
    source XML pages to describe the user interface
  • Cocoon, an XML publishing engine, looks like the
    perfect choice for this, so lets use it!

20
Cocoon architecture
XML
Response
Web server
Request
Data source
21
Example using Cocoon and XHTML
lt?xml version"1.0"?gt lt?cocoon-process
typexslt?gt lt?xml-stylesheet hrefresourcexhtm
l.xsl typetext/xsl?gt ltpage
cachetruegt lth1gtChoose servicelt/h1gt ltulgt
ltligtlta href/newsgtNewslt/agtlt/ligt ltligtlta
href/weathergtWeatherlt/agtlt/ligt ltligtlta
href/stocksgtStockslt/agtlt/ligt lt/ulgt lt/pagegt
22
Example using Cocoon and XHTML
lt?xml version"1.0"?gt lt?cocoon-process
typexslt?gt lt?xml-stylesheet hrefresourcexhtm
l.xsl typetext/xsl?gt ltpage
cachetruegt lth1gtWeatherlt/h1gt ltform
action/showgt ltpgtEnter your zip code
lttextfield namezip/gtlt/pgt lt/formgt lt/pagegt
23
Example using Cocoon and XHTML
lt?xml version"1.0"?gt lt?cocoon-process
typexslt?gt lt?xml-stylesheet hrefresourcexhtm
l.xsl typetext/xsl?gt ltpage
cachefalsegt ltpgtSunnyvale, clear skies,
70Flt/pgt lt/pagegt
24
Contents
  • Characteristics of wireless devices
  • Random introduction to WML
  • Why use Cocoon?
  • Enhancements to Cocoon
  • XHTML language

25
Additional work needed
  • Some adaptation of Cocoon is required though
  • support for sessions needs to be in the engine
  • browser capabilities database to be able generate
    the presentation with the best user experience
  • generate the MIME type expected by the browser,
    even if the browser type is not specified in the
    capabilities database
  • design the XHTML language and implement the XSLT
    sheets
  • post-processing of generated pages to split large
    pages in smaller ones that fit on the device

26
Session handling
  • Some WAP gateways support cookies, so we can rely
    on them to keep the session id on behalf of the
    phone
  • Some WAP gateways send the subscriber ID as a
    header with each request we can make use of this
    id as the session identifier
  • Many WAP gateways do not support cookies we can
    set a variable on the phone thats presented with
    each request, it will act as the session id
  • When everything else fails, we can use URL
    rewriting this however increases the size of the
    pages and makes them non-cacheable

27
Browser capabilities database
  • We need to have some knowledge on what are the
    capabilities of the browser to generate
  • correct pages, with no additional elements or
    attributes which can cause errors on the device
  • enhance the user experience for that particular
    device by making use of features available for
    that particular browser
  • The database should be extensible and allow
    specifying browser variants, which derive from a
    given browser type but have certain new or
    modified attributes
  • Solution use an XML format to describe the data
    and pass the capabilities of the current browser
    in the XSLT stylesheets

28
Browser capabilities database example
  • ltbrowser-category media"wap"gt
  • ltmime-typegttext/vnd.wap.wmllt/mime-typegt
  • ltformatter-typegttext/wmllt/formatter-typegt
  • ltbrowser name"phone.com"gt
  • ltformatter-typegttext/wml/phone.comlt/formatter-
    typegt
  • ltuser-agentgtUP.Browserlt/user-agentgt
  • lthas-accesskey/gt
  • ltbinds-call-to-sendgtvnd.up.sendlt/binds-call-to
    -sendgt
  • ltprfWmlDeckSizegt1400lt/prfWmlDeckSizegt
  • lthas-wtai-add-phonebook/gt

29
Browser capabilities database (continued)
  • ltbrowser name"Motorola i500, i700,
    i1000"gt
  • ltuser-agentgtMO01lt/user-agentgt
  • ltbinds-call-to-sendgtfalselt/binds-call-to-sen
    dgt
  • lthas-wtai-add-phonebookgtfalselt/has-wtai-add-
    phonebookgt
  • ltprfNumberOfSoftKeysgt2lt/prfNumberOfSoftKey
    sgt
  • lt/browsergt
  • lt/browsergt
  • lt/browser-categorygt

30
Contents
  • Characteristics of wireless devices
  • Random introduction to WML
  • Why use Cocoon?
  • Enhancements to Cocoon
  • XHTML language

31
XHTML language
  • Would like to have developers write using the
    XHTML familiar language instead of learning WML
  • If the page navigation is the same for the HTML
    and WML versions, the presentation can be written
    only once
  • An XSLT set of stylesheets converts from our XML
    language to WML
  • Another set of XSLT stylesheets deals with the
    translation from our enhanced subset of XHTML to
    pure XHTML

32
The translation to WML
  • h1 through h6 elements are translated to a b
    element
  • an a XHTML element is translated to an anchor WML
    element if the browser support the accesskey
    attribute, it will be automatically added to the
    generated anchor element
  • the select and option XHTML elements are
    translated to the corresponding WML elements
  • phone, an additional element is used to describe
    special content to be treated as a phone number.
    On a cell phone, it automatically creates a
    call button to call that number. If the cell
    phone has the ability to add the number to its
    internal phonebook, another button with this
    functionality is created.
  • email is another special element to display an
    email address, which may be integrated with an
    internal existing email application

33
The translation to WML (continued)
  • Translate form elements in do elements with the
    appropriate postfield elements

ltform action/showgt ltpgtEnter your zip code
lttextfield namezip/gtlt/pgt lt/formgt
ltpgtEnter your zip code ltinput type"text"
name"zip"/gt ltdo type"accept" label"Show"gt
ltgo href/show" method"post"gt
ltpostfield name"zip" value"(zip)"/gt lt/gogt
lt/dogt lt/pgt
34
The translation to WML (continued)
  • Table elements are not usually used in WML, but
    they are handy when displaying HTML. The special
    attribute keep tells whether the stylesheet has
    to keep the table in the output page or not
  • ltpagegt
  • ltform actionlogin.xmlgt
  • ltpgtlttable keepfalsegt
  • lttrgtlttdgtNamelt/tdgtlttdgtlttextfield
    namename/gtlt/tdgtlt/trgt
  • lttrgtlttdgtPasswordlt/tdgtlttdgtlttextfield
    namepwdgtlt/tdgtlt/trgt
  • lt/tablegtlt/pgt
  • ltinput typesubmit nameLogin
    valuelogin/gt
  • lt/formgt
  • lt/pagegt

35
Page splitting motivation
  • Dynamic Web applications can generate arbitrary
    amounts of data
  • Web developers should not be aware of the device
    requesting the data or about its limitations
  • Complex issue, which requires the framework to
    understand the logical structure of the page

36
Page splitting possible approach
  • This issue exists not only in WML browsers, but
    also in iMode devices
  • Split the high level XHTML page not the resulting
    WML or cHTML page
  • Pages could be transparently split and cached by
    the framework when subsequent requests come, the
    framework can serve them from the cache
  • Splitting long p elements is the simplest example
  • Long table elements can be split relatively
    easily
  • Large form elements that embed large tables, p
    and input elements are difficult to split
    correctly
  • Some human guidance to the splitter could be a
    reasonable expectation
  • Work in progress...

37
Resources
  • Cocoon http//xml.apache.org/cocoon
  • Patches http//xml.apache.org/cocoon/patches.html
  • These slides http//www.geocities.com/SiliconVall
    ey/Monitor/7464/apachecon-2001/
About PowerShow.com