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

3. 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

4. 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

5. 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

6. 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

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

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

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

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

11. 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!

12. 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

13. 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

14. 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...

15. 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”/>

16. 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

17. 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

18. 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?

19. 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!

20. 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

21. 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

22. 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:

23. 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

24. 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

25. 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

26. 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 page and makes them non- cacheable

27. 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

28. 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

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

30. 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

31. 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

32. 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. email is another special element to display an email address, which may be integrated with an internal existing email application

33. 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:

34. 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: