Using Cocoon Page 2 Ovidiu Predescu April 5th, 2001 Using Cocoon to build Web sites for wireless devices Ovidiu Predescu Hewlett Packard ApacheCon 2001

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 3 Contents Characteristics of wireless devices Random introduction to WML Why use Cocoon? Enhancements to Cocoon XHTML language to describe the presentation

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 4 Characteristics of wireless devices small screens cumbersome data input capabilities limited memory different markup languages: WML, c-HTML, HTML

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 5 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 6 Contents Characteristics of wireless devices Random introduction to WML Why use Cocoon? Enhancements to Cocoon XHTML language

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 8 Simple WML example <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" " > Choose service: News Weather Stocks

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 9 Simple WML example (continued) <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" " > Weather Enter your zip code:

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 10 Simple WML example (continued) <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" " > Sunnyvale, clear skies, 70F

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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 Hello... Hello World!

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 14 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...

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 15 WML: user input input : specifies a text entry element SSN: <input type=“text” name=“ssn” format=“NNN-NN-NNNN”/>

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 16 WML: user input (continued) select, option : allow the user to choose from a list of options Please select your menu: Beer Pizza Hot dog

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 17 Contents Characteristics of wireless devices Random introduction to WML Why use Cocoon? Enhancements to Cocoon XHTML language

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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?

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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!

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 20 Cocoon architecture LDAP, SQL information retrieval processors Data source XSLT processor XML Web server Request Response

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 21 Example using Cocoon and XHTML <?xml-stylesheet href=“resource:xhtml.xsl” type=“text/xsl”?> Choose service News Weather Stocks

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 22 Example using Cocoon and XHTML <?xml-stylesheet href=“resource:xhtml.xsl” type=“text/xsl”?> Weather Enter your zip code:

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 23 Example using Cocoon and XHTML <?xml-stylesheet href=“resource:xhtml.xsl” type=“text/xsl”?> Sunnyvale, clear skies, 70F

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 24 Contents Characteristics of wireless devices Random introduction to WML Why use Cocoon? Enhancements to Cocoon XHTML language

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 28 Browser capabilities database example text/vnd.wap.wml text/wml text/wml/phone.com UP.Browser vnd.up.send 1400

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 29 Browser capabilities database (continued) MO01 false 2

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 30 Contents Characteristics of wireless devices Random introduction to WML Why use Cocoon? Enhancements to Cocoon XHTML language

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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. is another special element to display an address, which may be integrated with an internal existing application

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 33 The translation to WML (continued) Translate form elements in do elements with the appropriate postfield elements Enter your zip code: Enter your zip code:

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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 Name: Password:

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 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

Using Cocoon April 5th, 2001 Ovidiu Predescu 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 table s, p and input elements are difficult to split correctly Some human guidance to the splitter could be a reasonable expectation Work in progress...

Using Cocoon April 5th, 2001 Ovidiu Predescu Page 37 Resources Cocoon: Patches: These slides: hecon-2001/