Transcript No Slide Title
Using Cocoon
Using Cocoon to build Web sites for wireless devices
Ovidiu Predescu Hewlett Packard ApacheCon 2001 Ovidiu Predescu April 5th, 2001 Page 2
Using Cocoon
Contents
• Characteristics of wireless devices • Random introduction to WML • Why use Cocoon?
• Enhancements to Cocoon • XHTML language to describe the presentation Ovidiu Predescu April 5th, 2001 Page 3
Using Cocoon
Characteristics of wireless devices
• small screens • cumbersome data input capabilities • limited memory • different markup languages: WML, c-HTML, HTML Ovidiu Predescu April 5th, 2001 Page 4
Using Cocoon
User experience challenges
• information retrieval, not browsing • organize data such that it’s easy to access it • the application should be optimized for the device, to increase the user experience Ovidiu Predescu April 5th, 2001 Page 5
Using Cocoon
Contents
• Characteristics of wireless devices • Random introduction to WML • Why use Cocoon?
• Enhancements to Cocoon • XHTML language Ovidiu Predescu April 5th, 2001 Page 6
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 7
Using Cocoon
Simple WML example
Using Cocoon
Simple WML example (continued)
Weather
Enter your zip code:
Using Cocoon
Simple WML example (continued)
Sunnyvale,
clear skies, 70F
Using Cocoon
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 Hello... Hello World!
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 12
Using Cocoon
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
Using Cocoon
WML: variables
• setvar: sets a variable on the user’s browser • refresh : task that indicates an update of the card’s variables • onevent: binds a task to the enclosing element
Ovidiu Predescu April 5th, 2001 Page 14
Using Cocoon
WML: user input
• input : specifies a text entry element SSN:
Using Cocoon
WML: user input (continued)
• select , option : allow the user to choose from a list of options Please select your menu:
Using Cocoon
Contents
• Characteristics of wireless devices • Random introduction to WML • Why use Cocoon?
• Enhancements to Cocoon • XHTML language Ovidiu Predescu April 5th, 2001 Page 17
Using Cocoon
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?
Ovidiu Predescu April 5th, 2001 Page 18
Using Cocoon
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!
Ovidiu Predescu April 5th, 2001 Page 19
Using Cocoon
Cocoon architecture
Request Web server LDAP, SQL information retrieval processors XML XSLT processor Response Data source Ovidiu Predescu April 5th, 2001 Page 20
Using Cocoon
Example using Cocoon and XHTML
” type=“text/xsl”?> Choose service
Using Cocoon
Example using Cocoon and XHTML
Weather
Using Cocoon
Example using Cocoon and XHTML
Sunnyvale, clear skies, 70F
Using Cocoon
Contents
• Characteristics of wireless devices • Random introduction to WML • Why use Cocoon?
• Enhancements to Cocoon • XHTML language Ovidiu Predescu April 5th, 2001 Page 24
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 25
Using Cocoon
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 that’s 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 Ovidiu Predescu April 5th, 2001 Page 26
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 27
Using Cocoon
Browser capabilities database example
Using Cocoon
Browser capabilities database (continued)
Using Cocoon
Contents
• Characteristics of wireless devices • Random introduction to WML • Why use Cocoon?
• Enhancements to Cocoon • XHTML language Ovidiu Predescu April 5th, 2001 Page 30
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 31
Using Cocoon
The translation to WML
• h1 through h6 elements are translated to a b element • an a XHTML element is translated to an if the browser support the accesskey anchor WML element; 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 Ovidiu Predescu April 5th, 2001 Page 32
Using Cocoon
The translation to WML (continued)
• Translate form postfield elements in elements do elements with the appropriate
Enter your zip code:
Using Cocoon
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
Using Cocoon
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 Ovidiu Predescu April 5th, 2001 Page 35
Using Cocoon
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 input elements that embed large table elements are difficult to split correctly s, p and • Some human guidance to the splitter could be a reasonable expectation • Work in progress...
Ovidiu Predescu April 5th, 2001 Page 36
Using Cocoon
Resources
•Cocoon: http://xml.apache.org/cocoon •Patches: http://xml.apache.org/cocoon/patches.html
•These slides: http://www.geocities.com/SiliconValley/Monitor/7464/apac hecon-2001/ Ovidiu Predescu April 5th, 2001 Page 37