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

Ovidiu Predescu

April 5th, 2001

Using Cocoon

Using Cocoon to build Web sites

for wireless devices

Ovidiu PredescuHewlett PackardApacheCon 2001

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Contents

• Characteristics of wireless devices

• Random introduction to WML

• Why use Cocoon?

• Enhancements to Cocoon

• XHTML language to describe the presentation

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Characteristics of wireless devices

• small screens

• cumbersome data input capabilities

• limited memory

• different markup languages: WML, c-HTML, HTML

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

Contents



• Why use Cocoon?


• XHTML language

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Simple WML example

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"

"http://www.phone.com/dtd/wml11.dtd" ><wml> <card> <p>Choose service:<br/> <a href=”/news" accesskey="1">News</a><br/> <a href=”/weather” accesskey="2">Weather</a><br/> <a href=”/stocks” accesskey="3">Stocks</a><br/> </p> </card></wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Simple WML example (continued)


"http://www.phone.com/dtd/wml11.dtd" ><wml> <card> <p>Weather<br/> Enter your zip code: <input type="text" name="zip"/> <do type="accept" label="Show"> <go href=”/show" method="post"> <postfield name="zip" value="$(zip)"/> </go> </do> </p> </card></wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Simple WML example (continued)


"http://www.phone.com/dtd/wml11.dtd" ><wml> <card> <p>Sunnyvale, <br/>clear skies, 70F</p> </card></wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

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

<wml>

<card>

<do type=“accept”><go href=“#c2”/></do>

<p>Hello...</p>

</card>

<card id=“c2”>

<p>Hello World!</p>

</card>

</wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

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

<wml>

<card title=“Want a free beer?”>

<do type=“accept” label=“Get”>

<go href=“get.wml” method=“post”>

<postfield name=“beer” value=“1”/>

</go>

</do>

<do type=“prev” label=“Cancel”><prev/></do>

</card>

</wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

<wml>

<card>

<onevent type=“onenterforward”>

<refresh>

<setvar name=“SID” value=“123”/>

</refresh>

</onevent>

...

</card>

</wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

WML: user input

• input: specifies a text entry element

<wml>

<card>

<p>

SSN: <input type=“text” name=“ssn”

format=“NNN-NN-NNNN”/>

</p>

</card>

</wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

WML: user input (continued)

• select, option: allow the user to choose from a list of options

<wml>

<card>

<p>Please select your menu:

<select name=“sel” multiple=“true”>

<option value=“beer”>Beer</option>

<option value=“pizza”>Pizza</option>

<option value=“hotdog”>Hot dog</option>

</select>

</p>

</card>

</wml>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Contents



• Why use Cocoon?


• XHTML language

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

Cocoon architecture

LDAP, SQL information retrieval processor

s

Datasource

XSLT processo

r

XMLWeb

serverRequest Response

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Example using Cocoon and XHTML

<?xml version="1.0"?>

<?cocoon-process type=“xslt”?><?xml-stylesheet href=“resource:xhtml.xsl” type=“text/xsl”?>

<page cache=“true”> <h1>Choose service</h1> <ul> <li><a href=“/news”>News</a></li> <li><a href=“/weather”>Weather</a></li> <li><a href=“/stocks”>Stocks</a></li> </ul></page>

Using Cocoon

Ovidiu Predescu

April 5th, 2001




<page cache=“true”> <h1>Weather</h1> <form action=“/show”> <p>Enter your zip code: <textfield name=“zip”/></p> </form></page>

Using Cocoon

Ovidiu Predescu

April 5th, 2001




<page cache=“false”> <p>Sunnyvale, clear skies, 70F</p></page>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Contents



• Why use Cocoon?


• XHTML language

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

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

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

Browser capabilities database example

<browser-category media="wap">

<mime-type>text/vnd.wap.wml</mime-type>

<formatter-type>text/wml</formatter-type>

<browser name="phone.com">

<formatter-type>text/wml/phone.com</formatter-type>

<user-agent>UP.Browser</user-agent>

<has-accesskey/>

<binds-call-to-send>vnd.up.send</binds-call-to-send>

<prf:WmlDeckSize>1400</prf:WmlDeckSize>

<has-wtai-add-phonebook/>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Browser capabilities database (continued)

<browser name="Motorola i500+, i700+, i1000+"> <user-agent>MO01</user-agent>

<binds-call-to-send>false</binds-call-to-send>

<has-wtai-add-phonebook>false</has-wtai-add-phonebook>

<prf:NumberOfSoftKeys>2</prf:NumberOfSoftKeys>

</browser>

</browser>

</browser-category>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

Contents



• Why use Cocoon?


• XHTML language

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

Ovidiu Predescu

April 5th, 2001

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

Using Cocoon

Ovidiu Predescu

April 5th, 2001

The translation to WML (continued)

• Translate form elements in do elements with the appropriate postfield elements

<form action=“/show”> <p>Enter your zip code: <textfield name=“zip”/></p></form>

<p>Enter your zip code: <input type="text" name="zip"/> <do type="accept" label="Show"> <go href=”/show" method="post"> <postfield name="zip" value="$(zip)"/> </go> </do></p>

Using Cocoon

Ovidiu Predescu

April 5th, 2001

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

<page>

<form action=“login.xml”>

<p><table keep=“false”>

<tr><td>Name:</td><td><textfield name=“name”/></td></tr>

<tr><td>Password:</td><td><textfield name=“pwd”></td></tr>

</table></p>

<input type=“submit” name=“Login” value=“login”/>

</form>

</page>

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

Documents

Transcript of Using Cocoon Page 2 Ovidiu Predescu April 5th, 2001 Using Cocoon to build Web sites for wireless...