using cocoon page 2 ovidiu predescu april 5th, 2001 using cocoon to build web sites for wireless...
TRANSCRIPT
Page 2
Ovidiu Predescu
April 5th, 2001
Using Cocoon
Using Cocoon to build Web sites
for wireless devices
Ovidiu PredescuHewlett PackardApacheCon 2001
Using Cocoon
Page 3
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
Page 4
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
Page 5
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
Page 6
Ovidiu Predescu
April 5th, 2001
Contents
• Characteristics of wireless devices
• Random introduction to WML
• Why use Cocoon?
• Enhancements to Cocoon
• XHTML language
Using Cocoon
Page 7
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
Page 8
Ovidiu Predescu
April 5th, 2001
Simple WML example (continued)
<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"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
Page 9
Ovidiu Predescu
April 5th, 2001
Simple WML example (continued)
<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd" ><wml> <card> <p>Sunnyvale, <br/>clear skies, 70F</p> </card></wml>
Using Cocoon
Page 10
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
Page 11
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
Page 12
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
Page 13
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
Page 14
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
Page 15
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
Page 16
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
Page 17
Ovidiu Predescu
April 5th, 2001
Contents
• Characteristics of wireless devices
• Random introduction to WML
• Why use Cocoon?
• Enhancements to Cocoon
• XHTML language
Using Cocoon
Page 18
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
Page 19
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
Page 20
Ovidiu Predescu
April 5th, 2001
Cocoon architecture
LDAP, SQL information retrieval processor
s
Datasource
XSLT processo
r
XMLWeb
serverRequest Response
Using Cocoon
Page 21
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
Page 22
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>Weather</h1> <form action=“/show”> <p>Enter your zip code: <textfield name=“zip”/></p> </form></page>
Using Cocoon
Page 23
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=“false”> <p>Sunnyvale, clear skies, 70F</p></page>
Using Cocoon
Page 24
Ovidiu Predescu
April 5th, 2001
Contents
• Characteristics of wireless devices
• Random introduction to WML
• Why use Cocoon?
• Enhancements to Cocoon
• XHTML language
Using Cocoon
Page 25
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
Page 26
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
Page 27
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
Page 28
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
Page 29
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
Page 30
Ovidiu Predescu
April 5th, 2001
Contents
• Characteristics of wireless devices
• Random introduction to WML
• Why use Cocoon?
• Enhancements to Cocoon
• XHTML language
Using Cocoon
Page 31
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
Page 32
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
Page 33
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
Page 34
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>