Developer Handbook WOPE 5.0 · • Samsung bada • Chrome, Safari To guarantee proper rendering on all devices, it's recommended to:Progressive enhancement 1. Develop your entire

WOPE 5.0.24

Developer Handbook

Developer Handbook

WOPE 5.0.24 Developer Handbook

Copyright Backelite 2012

iii

Preface vii1. The WOPE framework ................................................................................................... vii2. Purpose of this guide ..................................................................................................... vii3. Appendixes ................................................................................................................... vii

1. Introduction to mobile development 11.1. Viewing XHTML Mobile Profile pages ............................................................................ 11.2. Simulate different mobile phones using a browser .......................................................... 11.3. External CSS ............................................................................................................... 21.4. XML characters ............................................................................................................ 2

2. Getting started 52.1. Writing your first page .................................................................................................. 52.2. Guidelines for writing HTML5 pages .............................................................................. 5

2.2.1. Block tags ......................................................................................................... 52.2.2. Inline tags ......................................................................................................... 5

3. Standard tags 73.1. <header> and <footer> ............................................................................................ 73.2. <img> ......................................................................................................................... 7

3.2.1. Recommendations for images ............................................................................ 73.2.2. Image with multiple sources ............................................................................... 83.2.3. Image resizing ................................................................................................. 103.2.4. Image floating .................................................................................................. 11

3.3. <form> ..................................................................................................................... 133.3.1. Generalities ..................................................................................................... 133.3.2. Submit ............................................................................................................ 163.3.3. Calendar ......................................................................................................... 16

3.4. <video> ................................................................................................................... 203.4.1. Syntax ............................................................................................................. 203.4.2. Operation ........................................................................................................ 203.4.3. Recommendations regarding video formats ....................................................... 21

3.5. <audio> ................................................................................................................... 213.5.1. Syntax ............................................................................................................. 213.5.2. Operation ........................................................................................................ 223.5.3. Recommendations regarding audio formats ....................................................... 22

4. UI Widgets 254.1. Description ................................................................................................................. 254.2. Gallery of images ....................................................................................................... 25

4.2.1. Description ...................................................................................................... 254.2.2. Preview ........................................................................................................... 264.2.3. Usage ............................................................................................................. 264.2.4. Code example ................................................................................................. 26

4.3. Tabs .......................................................................................................................... 274.3.1. Description ...................................................................................................... 274.3.2. Preview ........................................................................................................... 284.3.3. Usage ............................................................................................................. 284.3.4. Recommendations ........................................................................................... 294.3.5. Code example ................................................................................................. 29

4.4. Link list ...................................................................................................................... 294.4.1. Description ...................................................................................................... 294.4.2. Preview ........................................................................................................... 304.4.3. Usage ............................................................................................................. 304.4.4. Code example ................................................................................................. 31

4.5. Navigation links .......................................................................................................... 31

Developer Handbook

iv

4.5.1. Description ...................................................................................................... 314.5.2. Preview ........................................................................................................... 324.5.3. Usage ............................................................................................................. 324.5.4. Code example ................................................................................................. 33

4.6. Headline .................................................................................................................... 334.6.1. Description ...................................................................................................... 334.6.2. Preview ........................................................................................................... 334.6.3. Usage ............................................................................................................. 334.6.4. Code example ................................................................................................. 34

5. Using JavaScript and Ajax 355.1. Default behavior ......................................................................................................... 35

5.1.1. Choosing the transition .................................................................................... 355.1.2. Turning off the Ajax links .................................................................................. 365.1.3. To mimic the native back button ....................................................................... 36

5.2. Using custom JavaScript and Ajax .............................................................................. 365.2.1. General points regarding the use of Ajax .......................................................... 365.2.2. JavaScript degradation ..................................................................................... 365.2.3. Sections .......................................................................................................... 375.2.4. Dynamic actions on links: the onclick attribute ............................................... 375.2.5. JavaScript functions ......................................................................................... 375.2.6. Passing parameters ......................................................................................... 375.2.7. Animations and effects ..................................................................................... 375.2.8. Overriding the "class" attribute of the <section> tag in HTML pages ..................... 38

5.3. Detailed description of JavaScript functions in WOPE ................................................... 405.3.1. Toggle ............................................................................................................. 405.3.2. Swap .............................................................................................................. 415.3.3. Replace .......................................................................................................... 425.3.4. Submit ............................................................................................................ 45

5.4. List of WOPE events .................................................................................................. 465.4.1. bkPageLoaded ............................................................................................... 465.4.2. bkPageUnloaded ........................................................................................... 475.4.3. bkScriptsLoaded ......................................................................................... 475.4.4. bkTransitionCompleted ............................................................................. 475.4.5. bkPageLoadRequestSucceeded ................................................................... 485.4.6. bkPageLoadRequestFailed ......................................................................... 485.4.7. bkPageLoadRequestTimeout ....................................................................... 48

6. Mobile development with WOPE 516.1. Reserved filenames .................................................................................................... 516.2. Viewing the mobile site as a webapp on iPhone ........................................................... 516.3. Performance .............................................................................................................. 51

6.3.1. Resources minification ..................................................................................... 516.3.2. Resources compression ................................................................................... 526.3.3. HTTP connection keep alive ............................................................................. 526.3.4. Recommendation ............................................................................................. 52

6.4. The data-* attribute reference ..................................................................................... 526.5. The CSS class properties reference ............................................................................ 536.6. Displaying the raw HTML code before it is rendered with WOPE ................................... 536.7. Headers ..................................................................................................................... 546.8. Device capabilities ...................................................................................................... 546.9. Building the visitor identification mechanism ................................................................. 556.10. Redirects .................................................................................................................. 566.11. Displaying errors ...................................................................................................... 57

6.11.1. Displaying errors in debug mode .................................................................... 57

v

6.11.2. Displaying errors in production mode .............................................................. 576.12. Audience measurement ............................................................................................ 58

6.12.1. Operation ...................................................................................................... 586.12.2. Configure audience measurement for AT Internet ............................................. 586.12.3. Configure audience measurement for Google Analytics .................................... 58

7. Developing your own blocks with WOPE: Do-it-yourself (DIY) mode 597.1. Do-it-yourself (DIY) mode ........................................................................................... 597.2. A simple example ....................................................................................................... 597.3. Operation ................................................................................................................... 607.4. How to write a do-it-yourself block ............................................................................... 60

7.4.1. General points ................................................................................................. 607.4.2. Template parameters ....................................................................................... 607.4.3. Template Encoding .......................................................................................... 617.4.4. Writing for all browsers .................................................................................... 617.4.5. Writing HTML for specific browsers without WOPE validation .............................. 627.4.6. Error management ........................................................................................... 677.4.7. Including templates inside templates ................................................................. 677.4.8. Cache management ......................................................................................... 68

vi

vii

Preface

1. The WOPE frameworkWOPE allows a site to be adapted to more than 6,000 different browsers. It renders the code sent tothe client browser using several criteria:• Maximize user-friendliness:

• Touch: optimization of the navigation for touchscreen devices

• Basic: optimization for low feature phones with low bandwidth and small screens

• Generating the appropriate language:• XHTML

• XHTML-MP (mobile profile)

• HTML

• Real-time adaptation to the screen size and resolution:• block style

• font size

• image size and format

• Support for Ajax and JavaScript:• form controls

• real-time modification of the DOM

• asynchronous processing

• optimized animations and effects

2. Purpose of this guideThis guide is for developers wishing to create mobile sites using the WOPE solution. It outlines:• the development stages of a mobile site

• the constraints and corresponding WOPE solutions

3. Appendixes• WOPE Installation Guide — a technical document detailing the installation and configuration of the

WOPE solution, including:• installation in a development environment

• installation in a production environment

• WOPE configuration parameters

• headers and other information sent to the business application

viii

Chapter 1.

1

Introduction to mobile development

1.1. Viewing XHTML Mobile Profile pagesInstall the XHTML Mobile Profile1 extension for Firefox. This allows pages generated with XHTML-MPto be viewed.

1.2. Simulate different mobile phones using a browserWOPE identifies different browsers based on the browser's user-agent.

During the development phase, it is advantageous to emulate a mobile device browser directly on thedevelopment workstation.

We recommend using Safari, Chrome or Firefox to simulate different mobile phones. To simulate aniPhone for example, you can use Safari in iPhone mode.

Note

The animations use HTML5 / CSS3 functions which may not be supported by Firefox. Therefore,for best results we recommend using Chrome or Safari to emulate an iPhone or Android browser.

To switch the user agent on firefox, install the User-Agent Switcher2 extension. This extension simu-lates a request coming from a mobile phone browser.

On Chrome, install User-Agent Switcher for Chrome3.

Table 1.1. Examples of user-agents

Family User-Agent

Touch family with AJAX and animations (iPhone /Android)

Mozilla/5.0 (iPhone; U; CPU iPhoneOS 3_0 like Mac OS X; en-us) Ap-pleWebKit/528.18 (KHTML, likeGecko) Version/4.0 Mobile/7A341 Sa-fari/528.16

Touch family with AJAX and animations (Desk-top)

Chrome or Safari browser

Touch Family XHTML without AJAX or anima-tions (Nokia N95)

Mozilla/5.0 (SymbianOS/9.2; U;Series60/3.1 NokiaN95/21.0.016

Touch XHTML family with AJAX but no anima-tions (Desktop)

Firefox or Internet Explorer browser

Basic XHTML family Nokia2610

1 https://addons.mozilla.org/fr/firefox/addon/13452 http://chrispederick.com/work/user-agent-switcher/3 https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

https://addons.mozilla.org/fr/firefox/addon/1345

http://chrispederick.com/work/user-agent-switcher/

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

https://addons.mozilla.org/fr/firefox/addon/1345

http://chrispederick.com/work/user-agent-switcher/

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

Chapter 1. Introduction to mobile development

2

1.3. External CSSWOPE generates CSS that is optimized for each browser, with a default rendering. The graphical ren-dering is optimized based on the following factors:• ergonomics (Touch or Basic)

• screen resolution

• workarounds of known display bugs of different browsers

Nevertheless, in order to customize the display on certain devices, an external CSS stylesheet can beused, which will override WOPE's CSS.

This CSS will only be displayed on Desktop and WebKit-based browsers, used on the following de-vices:• Apple(iPhone, iPod et iPad)

• Android

• Nokia S60 5éme édition and Symbian ^3

• Palm Pre, Pixi and HP

• BlackBerry version 6 and greater

• Samsung bada

• Chrome, Safari

Progressive enhancement

To guarantee proper rendering on all devices, it's recommended to:1. Develop your entire service without using the external CSS files. Use the style element within

the tags to set the colors for texts,link and backgrounds. This will be displayed on all devices(including the basic devices)

2. Next, add your styles with the external CSS file. Use the Safari or Chrome browser to viewthe overridden rendered output.

1.4. XML charactersThe WOPE HTML follows XML4 standards. Certain characters must be escaped:• &: &

• >: >

• <: <

4 http://www.w3.org/TR/REC-xml/#sec-predefined-ent

http://www.w3.org/TR/REC-xml/#sec-predefined-ent

http://www.w3.org/TR/REC-xml/#sec-predefined-ent

XML characters

3

Note

Escape characters of the é type are not valid in UTF-8 XML documents. It is strongly rec-ommended that all HTML entities be converted to UTF-8. For example:

• "é" becomes "é"

• " " becomes " "

4

Chapter 2.

5

Getting started

2.1. Writing your first pageWriting pages with WOPE is just like writing standard HTML5 pages. A page is composed of two mainparts:• a declarative header section (delimited by the head tag)

• a body, which contains the actual document (delimited by the body tag)

Here is an example of a HTML page written for WOPE:

<html> <head> <title> Having fun with WOPE </title> </head> <body> <div> Hello World! </div> </body><html>

2.2. Guidelines for writing HTML5 pagesThe HTML5 pages must be written in lowercase , including tags and attributes.

An HTML page written for WOPE consists of two tags families: inline and block elements.

2.2.1. Block tagsThe body of the page is solely comprised of block tags. These occupy the width of the screen and arestacked one on top of the other.

Example: <h1>, <div>, <p>, <table>, etc.

Note

Block tags are made up solely of inline tags.

2.2.2. Inline tagsThey are anchored to one line and displayed one after the other. They must always be used inside of ablock tag.

Example: <b>, <span>, <a>, <small>, etc.

Chapter 2. Getting started

6

Note

Inline elements can only contain other inline elements.

Chapter 3.

7

Standard tags

3.1. <header> and <footer>These tags are used to define the header and footer sections of a document.

By default, if a page contains more than one header, they will be combined into one header; same forthe footers.

<header> <div> This is my <b>header</b>! </div></header>

<footer> <div> This is my <b>footer</b>! </div></footer>

3.2. <img>

3.2.1. Recommendations for imagesThere are several ways to integrate images within an html page written for WOPE. There are somerules to be aware of which depend on the type and function of the image.

3.2.1.1. PhotosExamples: news photos, art albums, photos, etc.

It’s best to use JPEG for images of the type "photo". It is advisable to deliver high quality images at thelargest possible size (greater than or equal to the largest screen addressed, which is currently 800 pix-els).

These images will then be resized and compressed automatically depending on the screen.

3.2.1.2. Logos and diagramsExample: logos, graphics, images with solid shapes and/or containing text.

Suggested formats for such images are GIF or PNG. PNG-24 is not supported on older mobile de-vices.

WOPE will convert the images to the correct format depending on the device.

Chapter 3. Standard tags

8

Note

Avoid automatic resizing of a logo or diagram as there will always be some loss of quality. In thiscase, we recommend creating four versions of the logo with different minimum widths (using the<img> tag and the data-bk-src-* attributes): 115px, 160px, 220px and 310px. For more informa-tion, see: Section 3.2.2, “Image with multiple sources”

3.2.1.3. Icons and other pictogramsExample: icons next to links (list of links, navigation links, etc.).

We recommend using GIF or PNG.

WOPE will convert the images to the correct format depending on the device.

The vast majority of recent mobile devices handle transparency correctly.

Icons in lists of links (< ul> tag with an attribute data-bk-role="link-list"): For an optimized rendering, werecommend using images that are exactly 30x30 pixels. For more information, see: Section 4.4, “Linklist”

3.2.2. Image with multiple sources

3.2.2.1. DescriptionBy default, WOPE resizes images to adapt rendering to device screen. This operation can alter imagequality in case of small screen size devices.

This UI widget displays an image that is automatically selected from a set of images depending on thescreen resolution. We defined a set of width that cover the different families of mobiles devices: 115px,160px, 220px and 310px.

The image that is chosen will be the widest image that is smaller than the width of the screen. If thescreen is smaller than the smallest image, the smallest image will be resized (with loss) to the width ofthe screen. Sample usage: logos, banner ads.

When data-bk-src-XXX attributes are used, URI set in the src attribute will be ignored by WOPE.

Image with multiple sources

9

3.2.2.2. Preview

3.2.2.3. UsageOptimize the quality of the rendering of an image can be achieved by adding some data-bk-src-XXX attributes (where XXX represents the screen size in pixels) to your <img> tag.

Table 3.1. How to give multiple sources to an <img>

Attribute name Attribute value

data-bk-src-115px <115 pixels width image URL>




3.2.2.4. Code example

<div> <img src="/img/html5-310px.png" alt="html5" data-bk-src-115px="/img/html5-115px.png" data-bk-src-160px="/img/html5-160px.png" data-bk-src-220px="/img/html5-220px.png" data-bk-src-310px="/img/html5-310px.png"/></div>


10

3.2.3. Image resizing

3.2.3.1. DescriptionWOPE lets you to resize easily an image to a given percentage of the screen width.

3.2.3.2. Preview

Image floating

11

3.2.3.3. UsageResizing an image can be done by adding the data-bk-resize attribute on your <img> element.

Table 3.2. How to resize an <img>


data-bk-resize Integer value

Example: 30 to resize to 30% of the screenwidth.


<img src="/img/html5-310px.png" alt="html5" data-bk-resize="30"/>

3.2.4. Image floating

3.2.4.1. DescriptionWOPE allows you to easily float an image.


12

3.2.4.2. Preview

3.2.4.3. UsageFloating an image can be achieved by adding a class to your <img> element.

Table 3.3. How to float an <img>


class bk-float-left

bk-float-right


<img src="/img/gallery/ferrari.jpg" alt="ferrari" class="bk-float-right" />

<form>

13

3.3. <form>

3.3.1. Generalities

3.3.1.1. Definition

3.3.1.1.1. Preview

3.3.1.2. UsageTable 3.4. <form> children tags

Name Mandatory Description

<fieldset> true This tag is used to group relat-ed elements in a form.


14

Name Mandatory DescriptionIt draws a box around the relat-ed elements.

Table 3.5. <fieldset> children tags

Name Mandatory Description

<label> false This tag defines a label for an<input> element.

<input> false This tag specifies an input fieldwhere the user can enter data.

<select> false This tag is used to create adrop-down list.

<textarea> false This tag defines a multi-line textinput control.

Note

<fieldset> and <label> tags can contain any inline tag.

Table 3.6. <input> : possible values of the type attribute

Type attribute value Description

text Display a field in which the user can enter text.

password A variation on the text type. The only differenceis that the input characters are masked, typicallyby a series of asterisks, to protect sensitive infor-mation from onlookers.

checkbox Provide switches that can be turned on and offby the user.

radio Provide switches that can be turned on and offby the user.

Radio buttons are grouped (by specifying thesame name attribute on each <input> ) so thatonly one radio button in a group can be selectedat any time.

hidden Allows authors to include form data without hav-ing it rendered to the user.

date calls a JavaScript calendar on compliant deviceswhen clicked on.

number Display the numeric keyboard when clicked on.

email Display the email keyboard when clicked on.

submit Defines a button for submitting the form.

image Specifies a graphical submit button.

Generalities

15


<form action="form.html" method="get" id="my_id"> <fieldset> <label><b>Text:</b></label> <br/> <input type="text" name="text" class="bk-fill-parent"/> </fieldset> <fieldset> <label><b>Password:</b></label> <br/> <input type="password" name="password" class="bk-fill-parent"/> </fieldset> <fieldset> <label><b>Number:</b></label> <br/> <input type="number" name="number" class="bk-fill-parent"/> </fieldset> <fieldset> <label><b>Date:</b></label><br/> <input type="date" name="date" class="bk-fill-parent"/> </fieldset> <fieldset> <label><b>Checkbox:</b></label><br/> <input type="checkbox" id="checkbox3" name="checkbox1" value="value1" /> <label for="checkbox3">Checkbox 1</label> <br/> <input type="checkbox" id="checkbox4" name="checkbox2" value="value2" checked="checked"/> <label for="checkbox4">Checkbox 2</label> </fieldset> <fieldset> <label><b>Radio:</b></label> <br/> <input type="radio" id="radio3" name="choice" value="value1" /> <label for="radio3">Radio 1</label> <br/> <input type="radio" id="radio4" name="choice" value="value2" checked="checked"/> <label for="radio4">Radio 2</label> </fieldset> <fieldset> <label><b>Select:</b></label> <br/> <select name="select" class="bk-fill-parent"> <option value="option1">Option 1</option> <option value="option1">Option 2</option> </select> </fieldset> <fieldset> <label><b>Textarea:</b></label> <br/> <textarea name="textarea" class="bk-fill-parent">A textarea</textarea> </fieldset> <fieldset style="text-align:center;"> <input type="submit" name="submit" value="Submit" class="button"/> </fieldset></form>


16

3.3.2. Submit

3.3.2.1. How to specify an animation ?WOPE allows you to specify a animation on a form submission using the data-bk-transition at-tribute.

By default, a fade animation is applied.

Example 3.1. Submit a form with a slide transition with a submit button

<input type="submit" name="submit" value="Submit" data-bk-transition="slide"/>

Example 3.2. Submit a form with a flip transition with an image button

<input type="image" name="submit" src="submit.png" data-bk-transition="flip"/>

3.3.2.2. How to avoid sending data after the user hits the navigator backbutton ?By default, on a back action (after a form submission) after the user hits the navigator back button.

Sometimes, for security reasons, this behaviour can be disabled by using the data-bk-submit-on-back="false" attribute.

Example 3.3. Avoid sending data on back

<input type="submit" name="submit" value="Submit" data-bk-submit-on-back="false"/>

3.3.2.3. How to send data using original method after the user hits thenavigator back button ?By default, on a back action (after a form submission) data is sent by using GET method to avoid un-wanted double POST.

You can tell WOPE to send data using the original method by using the data-bk-pre-serve-method-on-back="true" attribute.

Example 3.4. Preserve original method on back

<input type="submit" name="submit" value="Submit" data-bk-preserve-method-on-back="true"/>

3.3.3. Calendar

3.3.3.1. DescriptionThis input field opens a JavaScript calendar on compliant devices when clicked on.

Calendar

17

The fall-back is a simple field on the rest of devices which will allow only 8 digits to be typed in.


18

3.3.3.2. Preview

Calendar

19

3.3.3.3. Syntax

<input type="date" name="date" lang="fr-FR"/>

3.3.3.4. Look and feelIn order to display the calendar, you need to copy files from the ResourcesClient-5.0.24.zip archive de-livered with WOPE to your Web application's root.

This archive contains the CSS style sheet wope.css and the graphical elements used to display thecalendar.

This style sheet allows you to customize the calendar. You can specify:• calendar launch image button (max size: 34x20 px)

• closing button (30x30 pixels)

• next month and previous month buttons (30x30 px)

• colors for backgrounds, borders and foreground text

3.3.3.5. InternationalizationThe lang attribute sets the language of the calendar. The value follows the RFC 17661 rules. The de-fault value is American English (en-US).

The user input date format is set by the lang attribute. Posted data will be translated into ISO format-ted date if valid (example : December 31 2011 is written as 2011-12-31).

Note

For users whose devices do not display the JavaScript calendar, we recommend displaying atext describing the expected input format. For example if lang="en-US", write mmddyyyy; iflang="fr-FR", write jjmmaaaa.

Table 3.7. How to internationalize your calendar


lang According RFC 17662 rules

3.3.3.6. Title customizationCustomize your calendar title can be achieved by adding a data-bk-title attribute.

Table 3.8. How to customize your calendar title

Attribute name Attribute type

data-bk-title string

1 http://www.ietf.org/rfc/rfc1766.txt2 http://www.ietf.org/rfc/rfc1766.txt

http://www.ietf.org/rfc/rfc1766.txt





20

3.4. <video>The <video> tag uses the HTML5 syntax and allows to view a video on most devices.

3.4.1. SyntaxThe <video> tag is an "inline" tag. Therefore, it must be nested inside a block tag (for exemple :<div> or <p> )

<div> <video controls="controls" poster="poster.jpg"> <source src="avc1_480x268.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"/> <source src="h263_176x144_amr.3gp" type="video/3gp; codecs='h263, amr'" /> <span style="color:#ff0000">Video <b>not supported</b></span>. </video></div>

Table 3.9. <video> tag attributes

Name Mandatory Value Description

controls no controls Displays the nativecontrols of the videoplayer if the deviceis compatible withHTML5.

poster no URL URL of an image filethat the browser canshow while no videodata is available.WOPE delivers an im-age by default if this at-tribute is not specified.

Only <source> tags and inline text are allowed as children of the <video> tag.

Table 3.10. <source> tag attributes


src yes URL Path to a video file.

type yes text Technical description ofthe video: MIME type,audio and video codecused.

3.4.2. OperationAdaptation scenario on different devices:

1. The device supports HTML5 as expected : WOPE will return the <video> HTML5 tag as such. Itis therefore the browser that will choose the right video to display.

2. The device supports HTML5 partialy: WOPE will return the <video> HTML5 tag keeping only thesuported video.

3. The mobile does not support HTML5 but can display at least one of the videos listed in the<source> tag: WOPE will return a link to the video which codec is supported by the device.

Recommendations regarding video formats

21

The order of the <source> tag is important. We recommend placing the best quality formats first.

4. The device supports neither HTML5 video tag nor any of the video formats listed in the <source>tags: WOPE will display the text in the <video> tag.

type attribute of the <source> tag

WOPE uses the informations set in the type attribute. Must therefore always be set properly:• Video MIME type (e.g.: video/mp4;)

• Codecs used (i.e.: codecs='avc1.42E01E, mp4a.40.2')

3.4.3. Recommendations regarding video formatsTo view a video on most devices, we strongly recommend the presence of at least the 3gp and themp4 formats.

Table 3.11. Recommended video formats

3gp mp4

Notes Compatible with older phones Compatible with most recentmobile

Extension 3gp mp4

MIME type video/3gp video/mp4

Video codec h263 level 0 profile 10, 15 FPS,QCIF size

avc1, Baseline profile H264

Sound codec amr (samr), mono, 8000Hz mp4a (AAC LC) or mp3

Type attribute type="video/3gp; codecs='h263,amr'"

type="video/mp4;codecs='avc1.42E01E,mp4a.40.2'"

Note

Make sure the server hosting the videos will always return the correct video files MIME type.

3.5. <audio>The <audio> tag uses the HTML5 syntax and allows to play a sound on most devices.

3.5.1. SyntaxThe <audio> tag is an "inline" tag. Therefore, it must be nested inside a block tag (for exemple :<div> or <p> )

<div> <audio controls="controls">


22

<source src="music.aac" type="audio/x-aac"/> <source src="music.mp3" type="audio/mpeg"/> <span style="color:#ff0000">Audio <b>not supported</b></span>. </audio></div>

Table 3.12. <audio> tag attributes


controls no controls Displays the nativecontrols of the au-dio player if the de-vice is compatible withHTML5.

Only <source> tags and inline text are allowed as children of the <audio> tag.

Table 3.13. <source> tag attributes


src yes URL Path to a audio file.

type yes text Technical description ofthe audio: MIME type

3.5.2. OperationAdaptation scenario on different devices:

1. The device supports HTML5 as expected : WOPE will return the <audio> HTML5 tag as such. Itis therefore the browser that will choose the right audio file to display.

2. The device supports HTML5 partialy: WOPE will return the <audio> HTML5 tag keeping only thesuported audio.

3. The device does not support HTML5 but can display at least one of the videos listed in the<source> : WOPE will return a link to the audio file which codec is supported by the device.

The order of the <source> tag is important. We recommend placing the best quality formats first.

4. The device supports neither HTML5 audio tag nor any of the audio formats listed in the <source>tags: WOPE will display the text in the <audio> tag.

type attribute of the <source> tag

WOPE uses the informations set in the type attribute. Must therefore always be set properly:• audio MIME type (e.g.: audio/mpeg ou audio/x-aac;)

• The codecs used are optional

3.5.3. Recommendations regarding audio formatsTo play an audio file on most devices, we strongly recommend the presence of at least the mp3 andthe aac formats.

Recommendations regarding audio formats

23

Table 3.14. Recommended audio formats

mp3 aac amr

Extension mp3 aac amr

MIME type audio/mpeg audio/x-aac audio/3gpp

Sound codec mp3 128kb/s AAC LC amr

Type attribute type="audio/mpeg" type="audio/x-aac" type="audio/3gpp"

Note

Make sure the server hosting the audio files will always return the correct audio files MIME type.

24

Chapter 4.

25

UI Widgets

4.1. DescriptionWOPE enhances the standard tags with HTML5 data-* attributes and CSS classes to allow develop-ers to easily include powerful features on their mobile sites (Ajax, easy user input, degraded graphicalrendering, etc.).

These optimizations are primarily designed to maximize the size of the screen area responding totouch. The size of the area depends on the screen resolution and the browser.

Most of the UI widgets described below are based on the ul tag with a data-bk-role attribute de-scribing the role of the widget.

For example, to add a navlink to your page you would use a ul tag with a data-bk-role attribute.

4.2. Gallery of images

4.2.1. DescriptionThis UI Widget allows images to be displayed as a gallery of two or three columns.

Chapter 4. UI Widgets

26

4.2.2. Preview

4.2.3. UsageDisplay a gallery of images on your page can be achieved using a <ul> with the data-bk-role at-tribute.

Table 4.1. How to display a gallery of images

Tag Attribute name Attribute value

ul data-bk-role gallery-columns-x2

gallery-columns-x3

Note

The images gallery is always displayed in two columns on small screens.

4.2.4. Code example

Tabs

27

<ul data-bk-role="gallery-columns-x3"> <li> <a href="#aston_martin"> <img src="/img/gallery/aston_martin.jpg" alt="aston martin"/> <br/><small><i>Aston Martin</i></small> </a> </li> <li> <a href="#ferrari"> <img src="/img/gallery/ferrari.jpg" alt="ferrari"/> <br/><small><i>Ferrari</i></small> </a> </li> <li> <a href="#lamborghini"> <img src="/img/gallery/lamborghini.jpg" alt="lamborghini"/> <br/><small><i>Lamborghini</i></small> </a> </li></ul>

4.3. Tabs

4.3.1. DescriptionThis UI Widget allows images to be displayed as tabs.


28

4.3.2. Preview

4.3.3. UsageDisplay tabs on your page can be achieved using a <ul> tag with a data-bk-role attribute.

Table 4.2. How to display tabs

Tag Attribute name Attribute value

ul data-bk-role tabs

Recommendations

29

Note

Tabs are displayed as links on basic phones. Link label corresponds to alt attribute value.

4.3.4. Recommendations1. Take care as to the width of the images used. The sum of the widths of the images should not be

greater than 220 pixels.

2. It is recommended to add a white or transparent border around the images in order to visually sep-arate the tabs.

3. On basic phones, take care to not set the "color" attribute to the same color as the backgroundcolor.

4.3.5. Code example

<ul data-bk-role="tabs"> <li> <a href="#tab1"> <img src="/img/tabs/onglet-1_off.gif" alt="Tab1"/> </a> </li> <li> <a href="#tab2"> <img src="/img/tabs/onglet-2_off.gif" alt="Tab2"/> </a> </li> <li> <img src="/img/tabs/onglet-3_on.gif" alt="Tab3"/> </li></ul>

4.4. Link list

4.4.1. DescriptionThis UI Widget allows you to define a list of clickable items optimized for navigation on touch screenphones using a <ul> tag.


30

4.4.2. Preview

4.4.3. UsageDisplay an optimized link list can be achieved using a <ul> tag with a data-bk-role attribute.

Table 4.3. How to display a link list

Tag Attribute name Attribute value Description

ul data-bk-role link-list Enables link list look-and-feel on <ul>

a data-bk-icon <Icon URL> Icon that will be dis-played in front of thelinks.

It should be 30x30 pix-els in GIF or PNG8 for-mat.

a data-bk-link-icon <Icon URL> Icon that will be dis-played on the right ofthe links.

It should be 20 pixelswidth max.

It will not appear on ba-sic phones.

Code example

31

4.4.4. Code example

<ul data-bk-role="link-list"> <li> <a href="#" style="color:black">basic</a> </li> <li> <a href="#" data-bk-link-icon="/img/arrow.gif"> With a touch icon </a> </li> <li> <a href="#" data-bk-icon="/img/icon.gif"> With a link icon </a> </li> <li> <a href="#" data-bk-link-icon="/img/arrow.gif" data-bk-icon="/img/icon.gif"> With a link icon </a> </li></ul>

4.5. Navigation links

4.5.1. DescriptionThis UI Widget is used to display optimized "previous" and "next" links.


32

4.5.2. Preview

4.5.3. UsageWOPE makes it easy to display navigation links to your page using a <ul> tag with a data-bk-roleattribute.

Table 4.4. How to display navigation links


ul data-bk-role navlink Enables navigationlinks look-and-feel on<ul>

li data-bk-role navlink-left Enables optimizedlook-and-feel on the leftnavigation link

li data-bk-role navlink-right Enables optimizedlook-and-feel on theright navigation link

a data-bk-link-icon <Icon URL> Icon that will be dis-played on high-resolu-tion devices (screensgreater than 200 pixelswide)

Code example

33

4.5.4. Code example

<ul data-bk-role="navlink"> <li data-bk-role="navlink-left"> <a data-bk-link-icon="/img/navlink_left.gif" href="#previous"> Previous car </a> </li> <li data-bk-role="navlink-right"> <a data-bk-link-icon="/img/navlink_right.gif" href="#next"> Next car </a> </li></ul>

4.6. Headline

4.6.1. DescriptionThis UI Widget is used to display an optimized clickable component on touchscreen phones.

4.6.2. Preview

4.6.3. UsageDisplay a headline in your page can be achieved using a <ul> tag with a data-bk-role attribute.


34

Table 4.5. How to display a headline


ul data-bk-role headline Enables headline look-and-feel on <ul>

a data-bk-link-icon <Icon URL> Icon that will be dis-played on the right ofthe optimized clickablecomponent.

It will not appear on ba-sic phones.

4.6.4. Code example

<ul data-bk-role="headline"> <li> <a href="#ferrari" data-bk-link-icon="/img/arrow.gif"> <img alt="ferrari" src="/img/gallery/ferrari.jpg" class="bk-float-left" data-bk-resize="40"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at sem magna. Donec sed nunc non tortor aliquam consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </a> </li></ul>

Chapter 5.

35

Using JavaScript and AjaxWOPE sends JavaScript and Ajax to supported browsers. Developers only need to write the pagesonce, WOPE automatically downgrades the JavaScript and optimizes the layout according to thebrowser's capabilities.

5.1. Default behaviorWOPE automatically converts relative links into Ajax links.

Expected behavior:• User clicks on a link

• The spinner shows up on supported devices

• The targeted page loads in background

• The spinner fades out and the targeted page fades in on supported devices

If the page contains a header and/or footer, these elements will remain on the page during the Ajaxrequest. Upon completion of the Ajax request, these elements will be replaced by the header and/orfooter of the targeted page.

If the browser does not support Ajax, WOPE sends a regular HTTP request using the GET method.

The Ajax behavior can be customized using the onclick attribute. Please refer to Section 5.2, “Usingcustom JavaScript and Ajax”

Important

To display the animated loading image, you have to extract the content of the providedResourcesClient-5.0.24.zip archive into the web application's root.

The bk-loader.gif in the img directory can be customized. Please note that since some de-vice (e.g. Android versions prior to 2.2) cannot display the animation of an animated GIF image,WOPE forces the image's rotation.

Browser history

WOPE natively handles the browser's native back button action when in Ajax context.

After a POST form submission, if the back navigation button is clicked, WOPE sends a GET re-quest instead of the original POST request to avoid posting twice the same data.

5.1.1. Choosing the transitionBy default, pages loaded with Ajax appear with a fade effect between the loader and the new content.You can specify the transition to use with the attribute data-bk-transition (For a list of possiblevalues, see paragraph Section 5.2.7, “Animations and effects” ).

Chapter 5. Using JavaScript and Ajax

36

<a href="index.php" data-bk-transition="slide"> My link</a>

5.1.2. Turning off the Ajax linksBy default, WOPE will disable the loading of pages using Ajax in the following cases:• Absolute link

• Tel URI to initiate a phone call

• Media resources

To override the default behavior, use the data-bk-ajax attribute.

<a href="index.php" data-bk-ajax="false"> My link</a>

5.1.3. To mimic the native back buttonIf you use the attribute data-bk-rel="back" on an anchor, any clicks on that anchor will mimic theback button, going back one history entry and ignoring the anchor's default href.

On the devices that do not support JavaScript, the href attribute will be used.

<a href="index.php" data-bk-rel="back"> Back</a>

5.2. Using custom JavaScript and Ajax

5.2.1. General points regarding the use of AjaxWOPE allows the integration of JavaScript code directly in the markup, as with all sites using Ajax.These allow a portion of the page to be updated by means of several predefined methods.

The asynchronous action is triggered by the use of the "onclick" attribute in the HTML code, availableon the link tags (see below).

As with all sites using Ajax, it's imperative that the page be divided into different sections. This is doneby means of the section tag, each of which should be uniquely identified (using the id attribute).The latter defines the page area where the result of the Ajax request will be displayed.

5.2.2. JavaScript degradationWOPE will automatically degrade Ajax functionality as needed, depending on the browser's features.• If the browser supports Ajax: WOPE sends an Ajax request, requesting a fragment of the target

page.

• If the browser does not support Ajax: WOPE sends a simple HTTP request, requesting the entiretarget page.

Sections

37

5.2.3. SectionsSemantic HTML tag that defines a portion of a page. It may contain one or several block elements.

5.2.3.1. Syntax:

<section id="myid"> [...]</section>

5.2.3.2. Attributes:• id: must be unique within the document

• class

5.2.4. Dynamic actions on links: the onclick attributeThe onclick attribute may be used on links. It describes an action written in WOPE script whichgives access to a limited number of JavaScript functions.

When the onclick attribute is used, the href attributes is ignored.

List of tags which support the onclick attribute:• a

• input

5.2.5. JavaScript functionsThe list of JavaScript functions available in WOPE are:• replace()

• submit()

• toggle()

• swap()

Each of these is described in detail later in this document.

5.2.6. Passing parametersJavaScript function arguments are passed as JavaScript objects (JSON syntax).

Example:

replace({content:{from:'refresh_me', to:'remote_section', url:'/page2.html', transition:'slide'}})

5.2.7. Animations and effectsIt's possible to use several different types of animation for content transitions.• slide / slide-backwards : horizontal movement in either direction


38

• flip / flip-backwards : content is flipped

• fade : progressive fade-in/fade-out

• unfold : hide/show

5.2.8. Overriding the "class" attribute of the <section> tag in HTMLpagesThe <section> tag has a "class" attribute, which allows a CSS class to be specified.

There are two types of specific classes which will override the client-side behavior of transitions andsection changes.

5.2.8.1. Modifying the transition used for displaying a remote section: bk-transition-*When the replace() or submit() functions are called, if the remote section has a class that is prefixedby "bk-transition-", the text that follows is interpreted as the name of the transition to be used whendisplaying the section.

List of possible values:• bk-transition-slide / bk-transition-slide-backwards : horizontal slide in either di-

rection

• bk-transition-flip / bk-transition-flip-backwards : section is flipped

• bk-transition-fade : progressive fade-in/fade-out

5.2.8.1.1. ExampleHaving two pages: page1.html and page2.html.

page1.html has a section with the "refresh_me" id which will be replaced by a loader with a "slide"transition; the loader will then be replaced by the content of the "remote_section" section ofpage2.html using a "fade" transition.

Example 5.1. page1.html

[...]<div>

Overriding the "class" attribute of the <section> tag in HTML pages

39

<a onclick="replace({loader:{from:'refresh_me', to:'loader', transition:'slide'}, content:{from:'loader', to:'remote_section', url:'/page2.html', transition:'fade'}})">my link</a></div><section id= "refresh_me" > <p>This area will be refreshed</p></section><section id="loader" hidden="hidden"> <p>Loading in progress...</p></section>[...]


[...]<section id= "remote_section" class="bk-transition-slide-backwards"> <p>Area refreshed</p></section>[...]

To modify the transition used to display the remote section (for example in the case of an error), add aclass prefixed by "bk-transition-[transition name]".

In our example, we replace the "fade" transition declared client-side with a "slide-backwards" transitionby adding the class "bk-transition-slide-backwards".

5.2.8.2. Modifying the section using "bk-to-*"When the replace() or submit() functions are called, if the remote section has a class prefixed with "bk-to-", the text that follows is interpreted as the name of the new section to be displayed.

List of possible values:• bk-to-slide / bk-to-slide-backwards : horizontal slide in either direction

• bk-to-flip / bk-to-backwards : rotated

• bk-to-fade : progressive fade-in/fade-out

5.2.8.2.1. ExampleHaving two pages: page1.html and page2.html.

page1.html has a "refresh_me" section which will be replaced by the "remote_section" section ofpage2.html.


[...]<div> <a onclick="replace({loader:{from:'refresh_me', to:'loader'}, content:{from:'loader', to:'remote_section', url:'/page2.html'}})">my link</a></div><section id= "refresh_me" > <p>This area will be refreshed</p></section><section id="loader" hidden="hidden"> <p>Loading in progress...</p>


40

</section>[...]


[...]<section id= "remote_section" class="bk-to-other"> <p>Section not displayed</p></section>[...]<section id= "other"> <p>Area refreshed</p></section>[...]

In order to use a different section (for example, in the case of an error), one only needs to add a classprefixed by "bk-to-". In our example, we can replace the "remote_section" section, declared client-side,with the "other" section, by adding a "bk-to-other" class to that section.

5.3. Detailed description of JavaScript functions in WOPE

5.3.1. ToggleShow or hide the content of a section of a page, without generating a network request.

5.3.1.1. Syntax

Example 5.5. toggle

<a onclick="toggle({id:'help'});">Change the state of the section</a>

Table 5.1. Arguments of the toggle() function

Name Mandatory Value

id yes Identifier of the section to show/hide

transition no Type of transition (animation)used to display the content.Only the "unfold" transition isused by this function.

5.3.1.2. ExampleThe page page.html contains a help message to be displayed when requested by the user.

Example 5.6. page.html

[...]<div> <a onclick="toggle({id:'help', transition:'unfold'});">Display the help</a>

Swap

41

</div>[...]<section id="help"> Help</section>[...]

5.3.1.3. OperationOnce a link is clicked, the "help" section will be displayed if it is hidden, and vice-versa.

If the browser does not support JavaScript, the entire page will be refreshed, with the "help" sectiondisplayed if it was hidden, and vice-versa.

5.3.2. SwapReplace the content of a section with the content of another section of the page, without generating anetwork call.

5.3.2.1. Syntax

Example 5.7. swap

<a onclick="swap({from:'sectionA', to:'sectionB', transition:'fade', historize: 'true'});">Display the next section</a>

Table 5.2. Arguments of the swap() function


from yes Identifier of the section that willbe replaced.

to yes Identifier of the section to bedisplayed in the place of "from".

transition no Animation used to display thecontent.

hitorize no Put the transition into AJAX his-tory.

5.3.2.2. ExampleA HTML page having a set of data to display.

Example 5.8. page.html

<section id="sectionA"> <div> <a onclick="swap({from:'sectionA', to: 'sectionB', transition: 'slide', historize: 'true'});">Data</a> </div></section><section id="sectionB" hidden="hidden"> <p>My other data</p></section>


42

5.3.2.3. OperationWhen the link is clicked, the "sectionA" section will disappear and be replaced with the "sectionB" sec-tion. This is done completely client-side, without generating a network call. This script requires the"sectionA" section to be displayed and the "sectionB" section to be hidden before the method is called.

If the browser does not support JavaScript, the full page will be reloaded, with the "sectionA" sectionhidden and the "sectionB" section displayed.

5.3.3. ReplaceReplace the contents of a section with the contents of another section from a remote page, called withAjax (via a network call).

5.3.3.1. Syntax

Example 5.9. replace without loading icon

replace({ content:{from:'refresh_me', to:'remote_section', url:'/page2.html', transition:'slide'}, anchorId:'my_anchor'})place({ content:{from:'refresh_me', to:'remote_section', url:'/page2.html', transition:'slide'},

Example 5.10. replace with loading icon:

replace({ loader:{from:'refresh_me', to:'loader', transition:'slide'}, content:{from:'loader', to:'remote_section', url:'/page2.html', transition:'slide'}, anchorId:'my_anchor'})place({ loader:{from:'refresh_me', to:'loader', transition:'slide'}, content:{from:'loader', to:'remote_section', url:'/page2.html', transition:'slide'},

Table 5.3. Arguments of the replace() function


loader no Object describing the loadingicon (see table below)

content yes Object describing the manipu-lation of the content (see tablebelow)

anchorId no Identifier of the anchor of thetarget section

Table 5.4. Arguments of the loader object


from yes Identifier of the section that willbe replaced

to yes Identifier of the section re-trieved from the target page

transition no Type of transition (animation)used to display the content

Replace

43

Table 5.5. Arguments of the content object




url yes URL of the target page


5.3.3.2. ExampleHaving two pages: page1.html and page2.html.

page1.html has a "refresh_me" section which will be replaced by the content of the "remote_section"section of page2.html.

Example 5.11. page1.html:

[...]<div> <a onclick="replace({content:{from: 'refresh_me', to:'remote_section', url: '/page2.html', transition: 'slide'}})" > my link </a></div><section id="refresh_me"> <p>This area will be refreshed</p></section>[...]

Example 5.12. page2.html:

[...]<section id="remote_section"> <p>Area from page 2</p></section>[...]

5.3.3.3. Example using an anchor ( anchorId )In certain instances, it may be preferable to force the positioning of the page so that a particular spotfrom the page is located at the top of the screen.

Using the files page1.html and page2.html:

page1.html contains a "refresh_me" section which will be replaced with the content of the"remote_section" section from page2.html.

The section "anchor_top" will be positioned at the top of the screen after the "my link" link has beenclicked.


44

Example 5.13. page1.xml

[...] <section id="anchor_top"> <div> The anchor will be positioned here after the link below is clicked. </div></section>[...]<section id="refresh_me"> <div> <a onclick="replace({content:{from:'refresh_me', to:'remote_section', url:'anchor_id.php', transition:'slide'},anchorId:'anchor_top'})"> My link </a> </div></section>[...]


[...]<section id="anchor_top"> <div> The anchor will be positioned here after the link below is clicked. </div></section>[...]<section id="remote_section"> <p>Area from page 2</p></section>[...]

Note

On devices that do not support JavaScript, the top of the screen will be positioned on the anchorafter the whole page (page2.html) has been loaded.

5.3.3.4. OperationOnce the link on page 1 has been clicked, the content of the "refresh_me" section from page 1 will bereplaced with the content of the "remote_section" section from page 2.

If the browser is not Ajax compatible, the full page (page2.html) will be automatically fetched and dis-played.

Submit

45

5.3.4. Submit

5.3.4.1. Syntax

Example 5.15. Submit

<form id="myForm" method="get" action="page2.html"> [...] <fieldset> <input type="submit" name="Validate" value="Validate" onclick="submit({loader:{from:'section01', to:'my_loader', transition:'none'}, content:{from:'my_loader', to:'section02', form:'myForm', transition:'none'}});"/> </fieldset></form>

Table 5.6. Arguments of the submit() function


loader yes Object describing the loadingicon (see table below)

content yes Object describing the manipu-lation of the content (see tablebelow)

anchorId no Identifier of the anchor of thetarget section

Table 5.7. Arguments of the loader object





Table 5.8. Arguments of the content object




form yes Identifier of the section that willbe replaced


5.3.4.2. ExampleHaving 2 pages: page1.html (contains the form) and page2.html (contains the content to replace theform). The form on page1.html will be replaced with the content of the section from page2.html.


46

Example 5.16. Page1.html

[...]<section id="formSection"> <form id="myForm" method="get" action="page2.html""> [...] <fieldset> <input type="submit" name="Validate" value="Validate" onclick="submit({content:{from:'formSection', to:'formResult', form:'myForm', transition: 'none'}});"/> </fieldset> </form></section>[...]


[...]<section id="formResult"> <p> The data was successfully posted! </p></section>[...]

5.3.4.3. OperationWhen the "submit" button on page 1 is clicked, the form will be replaced with the content of the "form-Result" section from page2.html.

If the browser is not Ajax compatible, the full page (page2.html) will be automatically fetched and dis-played.

5.4. List of WOPE events

5.4.1. bkPageLoadedWOPE makes use of Ajax to load the contents of each page into the DOM as you navigate. To ex-ecute JavaScript code whenever a new page is loaded and created, you can listen to the bkPage-Loaded event.

The bkPageLoaded event is triggered on the document element when all the external scripts of thepage are loaded (Section 5.4.3, “ bkScriptsLoaded ”) and the DOM is ready (Section 5.4.4, “ bk-TransitionCompleted ”).

Here is the old way to register an event handler to the bkPageLoaded event

Bk.onPageLoaded(function(){ alert("My page is loaded!");});

Here is the new and more concise way to register an event handler to the bkPageLoaded event

Bk.on(Bk.Event.BK_PAGE_LOADED, function(){

bkPageUnloaded

47

alert("My page is loaded!");});

5.4.2. bkPageUnloadedThe bkPageUnloaded event is sent to the document element when the user navigates away fromthe page. This means that the user has clicked on a link to leave the page.

Here is the old way to register an event handler to the bkPageUnLoaded event

Bk.onPageUnloaded(function(){ alert("My page is unloaded!");});

Here is the new and more concise way to register an event handler to the bkPageUnLoaded event

Bk.on(Bk.Event.BK_PAGE_UNLOADED, function(){ alert("My page is unloaded!");});

5.4.3. bkScriptsLoadedThe bkScriptsLoaded event is triggered on the document element when all external scripts thatyou specified in the head of your page are loaded.

Note

This event does not take into account the script loading status.

This means that this event will be fired even if some scripts are in error (caused by a 404 statuscode for example).

WOPE Framework provides you with a method to bind easily this event:

Example 5.18. bkScriptsLoaded

Bk.on(Bk.Event.BK_SCRIPTS_LOADED, function(){ alert("All my scripts are loaded!");});

5.4.4. bkTransitionCompletedThe bkTransitionCompleted event is triggered on the document element when a remote transi-tion (replace, submit) is completed.

Example 5.19. bkTransitionCompleted

Bk.on(Bk.Event.BK_TRANSITION_COMPLETED, function(){ alert("The transition is completed!");});


48

5.4.5. bkPageLoadRequestSucceededThe bkPageLoadRequestSucceeded event is triggered on the document element when page loadrequest has succeeded.

The callback function you provide will be called with a data object argument containing the followingproperty:

xhr : The original XHR object used to load the page.

Example 5.20. bkPageLoadRequestSucceeded

Bk.on(Bk.Event.BK_PAGE_LOAD_REQUEST_SUCCEEDED, function(data){ alert("Ajax request success!"); alert("The responseXML is: " + Bk.Ajax.getXMLResponse(data.xhr));});

5.4.6. bkPageLoadRequestFailedThe bkPageLoadRequestFailed event is triggered on the document element when page load re-quest failed because of an error.

An error is detected as follows:• If the response status code is 200 and one of the following conditions or both are true:

• The received response is empty

• The response content type is not "text/html" nor "application/xml"

• If the response status code is not 200 and we are not in a timeout

Example 5.21. bkPageLoadRequestFailed

Bk.on(Bk.Event.BK_PAGE_LOAD_REQUEST_FAILED, function(){ alert("Ajax request failed!");});

The callback function you provide will be passed as first argument a data object with the followingproperty:


5.4.7. bkPageLoadRequestTimeoutThe bkPageLoadRequestTimeout event is triggered on the document element when page load re-quest failed because of a timeout.

Example 5.22. bkPageLoadRequestTimeout

Bk.on(Bk.Event.BK_PAGE_LOAD_REQUEST_TIMEOUT, function(){ alert("Ajax request failed because of a timeout!");});

The callback function you provide will be passed as first argument a data object with the followingproperty:

bkPageLoadRequestTimeout

49


The abort() function is called on the XHR before triggering this event.

50

Chapter 6.

51

Mobile development with WOPE

6.1. Reserved filenamesThe names of the files listed below are reserved by WOPE and should not be used in your URLs:

• bkproxy-errors

• bkproxy-ressources

• widgets

• images

6.2. Viewing the mobile site as a webapp on iPhoneThe following elements should be taken into account to customize the webapp mode:

• Start-up icon: the icon should be 57px x 57px

<link rel="apple-touch-icon" href="icon.png" />

• Splash screen: it should be 320px x 460px, otherwise it will not be displayed

<link rel="apple-startup-image" href="splash.png" />

• Status bar: the "content" attribute can be set to default, black or black-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

All elements mentioned above are shown in the example below.

<head> <link rel="apple-touch-icon" href="icon.png" /> <link rel="apple-startup-image" href="splash.png" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /></head>

Remark: WOPE injects automatically the meta "apple-mobile-web-app-capable" within the head of thepage.

6.3. PerformanceWOPE natively integrates several performance-related features.

6.3.1. Resources minificationWOPE minifies rendered HTML pages and all JavaScript and CSS resources.

This feature is enabled by default. You can disable it in your .ini configuration file by adding:

target.minimize=false

Chapter 6. Mobile development with WOPE

52

6.3.2. Resources compressionWOPE compressed rendered HTML pages, bk.js and bk.css using gzip algorithm.

The weight of those resources has been reduced by 80%.

This feature is enabled by default. You can disable it in your .ini configuration file by adding:

target.gzip=false

6.3.3. HTTP connection keep aliveWOPE uses the Keep-Alive HTTP request to reuse connections with your application.

6.3.4. RecommendationWe recommend you to limit the number of additional HTTP requests by grouping resources together.

• Put all your styles in one file and reference it the <head> section of your page.

• Put all your scripts in one file.

6.4. The data-* attribute reference

Table 6.1. data- attribute reference

Name Tag Description UI Widget Value

data-bk-role <ul> UI widget type tabs, headline,navlink, list, gallery,gallery-columns-x2,gallery-columns-x3

[String]

tabs, headline,navlink, list, gallery,gallery-columns-x2,gallery-columns-x3

data-bk-resize <img> Resized image ra-tio based on screenwidth in portrait mode

[Number]

Ranging from 0 to100

data-bk-src-115px <img> The uri of the image Logo [URI]




data-bk-transition <a> Animation type [String]

One of: fade, slide,slide-backwards, flip,flip-backwards, fold,unfold

data-bk-link-icon <a> The URI of the touchicon

[URI]

data-bk-icon <a> The URI of the iconbefore the link's text

[URI]

The CSS class properties reference

53

6.5. The CSS class properties reference

Table 6.2. CSS class properties reference

Name Tag Description

bk-float-right All inline tags The element floats to the right.

bk-float-left All inline tags The element floats to the left.

bk-fill-parent <input> Input fields width fill the parent container

bk-transition-* <section> Modify the animation used for displaying a remote section. Exem-ple: bk-transition-slide, bk-transition-slide-backwards, bk-transi-tion-flip, bk-transition-flip-backwards, bk-transition-fade

For more information, see:Section 5.2.8.1, “Modifying the transitionused for displaying a remote section: bk-transition-*”

bk-to-* <section> When the replace() or submit() functions are called, if the remotesection has a class prefixed with "bk-to-", the text that follows is in-terpreted as the name of the new section to be displayed.

For more information, see:Section 5.2.8.2, “Modifying the sectionusing "bk-to-*"”

6.6. Displaying the raw HTML code before it is renderedwith WOPETo see the raw HTML code before it is rendered, you just have to add the X-Bk-Raw header into theHTTP request and set it to true with the ModifyHeaders Firefox extension:

1. Install the ModifyHeaders1 extension in Firefox

2. Enable the extension: Tools / Modify Headers

3. In the top left dropdown menu, choose Add

4. In the first field, enter X-Bk-Raw

5. In the second field, enter true

6. Click on the Save button to the right. The header will appear in the list below.

7. Double click on the new entry to enable (green LED) or disable (red LED) the header.

Warning

If the ModifyHeaders extension window is closed, the header will not be sent. The windowmust remain open (or be minimized).

1 http://modifyheaders.mozdev.org

http://modifyheaders.mozdev.org

http://modifyheaders.mozdev.org


54

6.7. HeadersWOPE transmits a number of HTTP headers which allow the service to fine-tune its response.

Table 6.3. Headers transmitted by default

Name Value

User-Agent Phone user-agent.

BKProxy-Original-Host The name of the host originating the request(HTTP_HOST HTTP header). Note: Deprecat-ed since WOPE 4.1 . Please use the Via headermentioned below.

X-Bk-Original-Ip The IP address originating the request(REMOTE_ADDR or X-FORWARDED-FOR HTTPheaders)

BK-Alias Unique visitor identifier consisting of the name ofthe operator + "-" + the user ID. Possible oper-ator name values: SFR, Orange, ByTel, Free,Unknown.

X-Bk-Secure-Request (optional) If the connection to WOPE is madeover HTTPS, this header will be sent with thevalue "true".

X-Bk-Preferred-Family The phone device family. Values range fromleast to most powerful: basic_xhtml,touch_xhtml.

X-Bk-Session-Id WOPE session identifier.

Via RFC2616 standard HTTP header with the fol-lowing format: protocol received (space)recipient (space) (WOPE/(version))

Example in PHP used to retrieve the operator (for example, to filter content):

$bkalias = explode('-', $_SERVER['HTTP_BK_ALIAS']);$operator = strtolower($bkalias[0]); 1

1 will return Orange, SFR, ByTel, Free or Unknown

6.8. Device capabilitiesWhen you are developing a page, you may want/require to gather your visitor devices capabilities toprovide your users with stronger content matching their devices best capabilities.

This capabilities can be accessed via :• A header. See Section 6.7, “Headers”

• A DIY template. See Chapter 7, Developing your own blocks with WOPE: Do-it-yourself (DIY) mode

Table 6.4. Device capabilities

Name Value Comments

model_name String Model (ex: iPhone)

brand_name String Brand (ex: Apple)

Building the visitor identification mechanism

55

Name Value Comments

mobile_browser WebKit/iPhone, WebKit/An-droid, WebKit/Dolfin-Jas-mine, WebKit/Nokia/NG, We-bKit/BlackBerry, WebKit/we-bOS, IEMobile, Opera, Open-wave, etc

Information about the devicebrowser

mobile_browser_version String Browser version (ex : 3.2.1)

device_os String Information about hosting OS

max_image_width integer Usable screen width (in pixels)when device is held in portraitmode

max_image_height integer Usable screen height (in pixels)when device is held in portraitmode

is_tablet Boolean Tells you if a device is a tablet

bk_google_maps_api_version 3,static_map Google Maps API Support-ed Version. Current ver-sion is 3. Default value isstatic_map. More informationsfrom Google'2

The above list of features is not comprehensive. For a particular need, please contact the WOPE teamby email at [email protected] . We can assist you in determining which WOPE capabilitieswill best meet your needs.

6.9. Building the visitor identification mechanismThe BK-Alias header can be used by the service to uniquely identify a visitor in order to, for exam-ple, customize a page based on user preferences stored in the database.

This header is constructed as follows:

1. Operator detection

• By default, the operator is detected based on the source IP of the connection.

When WOPE is deployed behind a load balancer, if the load balancer sends the X-Forward-ed-For HTTP header to indicate the IP address of the upstream connection, extract-for-warded-for=true must be set in the WOPE.ini file.

The X-Forwarded-For header sent by the load balancer has the following format: X-For-warded-For: ipclient, ipproxy1, ipproxy2, etc.

2. If the operator is recognized as SFR, Orange, ByTel or Free:

• Detection of the user network ID based on the operator

• If the network ID is available, WOPE will store its value (see Table 6.5, “Communication be-tween the operator and the network identifier”)

2 http://code.google.com/intl/fr/apis/maps/articles/mobile_overview_v3.html

http://code.google.com/intl/fr/apis/maps/articles/mobile_overview_v3.html




56

• If the network ID is not available (for example, the WOPE URL is not registered with an opera-tor; a visitor connecting through a WEB APN instead of WAP), WOPE will instead generate aunique UUID identifier using java.util.UUID.

3. If the operator is not recognized (for example, WOPE is accessed over Wifi or a LAN):

• WOPE generates a unique UUID identifier using java.util.UUID.

4. Concatenation of the operator + "-" + the user ID

- sample X-Bk-Alias HTTP header for a visitor (known operator): SFR-123456789123-

- sample X-Bk-Alias HTTP header for a visitor (known operator, network ID unavailable):Orange-15e68-48c54-4a42

- sample X-Bk-Alias HTTP header for a visitor (unknown operator):Unknown-15e68-48c54-4a42

5. If a unique UUID identifier has been generated by WOPE , it is also stored in a "bkalias" cookievalid for 3 years. This allows a visitor who does not have a network operator ID to be identified. Auser without a network ID who uses a phone that does not support cookies will not be identified byWOPE .

Table 6.5. Communication between the operator and the network identifier

Operator detected Network ID used Comments

SFR x-nokia-gid HTTP header n/a

Orange wap-network-info HTTP head-er

Slice the value on "," to obtainthe "mUserAlias:" string

ByTel (Bouygues Telecom) X-Msid HTTP header n/a

Free (Free Mobile) n/a n/a

6.10. RedirectsAll of the redirect URLs sent by a business application (for example, the value of the "Location" head-er), must be absolute and not relative. If an application wishes to perform an internal redirect, such asfrom one HTML page to another HTML page, the domain name used in the "Location" header must bethe same as the domain name defined in the target's target.host property.

Example: if target.host=bkdemo, then the "bkdemo" business application must write the redirect asresponse.sendRedirect("http://bkdemo(:port)/page.jsp")

To simplify the creation of this redirect URL, WOPE grants access to the domain via theHTTP_BKPROXY_ORIGINAL_HOST header.

Example, in PHP, with url being the URL relative to the root:

return sprintf('%s%s%s%s', $protocol, $_SERVER['HTTP_BKPROXY_ORIGINAL_HOST'], '/', ltrim($url, '/'));

Displaying errors

57

6.11. Displaying errors

6.11.1. Displaying errors in debug modeTo facilitate the development of a service, WOPE has a debug mode that displays detailed errorpages.

For browsers that support Ajax, when an error occurs on the targeted page, a red block at the top ofthe page is displayed. This block includes a link to view the details of the error in a new window.

To enable the debug mode, refer to the operating handbook or contact the WOPE support with the fol-lowing mail adress [email protected] in the case of SaaS hosting offer.

Setting the Ajax timeout value

The configuration parameter target.ajaxTimeout sets the response time of the target server forAjax requests (default 10 seconds).

6.11.2. Displaying errors in production modeIn production mode, it is strongly discouraged to keep WOPE setting in debug mode.

Note

By default, debug mode is disabled.

In case of unavailability of the application server or any other type of error, WOPE sends a device opti-mized error page.

WOPE displays two different error pages for the following cases:

• When an application server side error occurs, WOPE transmits the HTTP code (500, 404, 403 and400)

Note

In order to display mobile optimized error pages, change the default error pages of your appli-cation serveur to WOPE HTML and make sure the debug mode is disabled.

• When the connection to the target application is off, the server stops responding or the connectiontimeout has expired.

For browsers that support Ajax, when an error occurs on the target page, the current page will be dis-played.

mailto:[email protected]


58

6.12. Audience measurementWOPE facilitates mobile site tagging by automatically injecting proper AT Internet3 or google analytics4

tags into the pages.

6.12.1. OperationTo enable the audience measurement, the site ID must be added to the configuration of WOPE.Refer to the operating handbook or contact the WOPE support with the following mail [email protected] in the case of SaaS hosting offer.

The pages will be identified by their title (page title attribute).

6.12.2. Configure audience measurement for AT Internet1. Have an active account on AT Internet 5

2. Add the mobile site to your account using the "Analyser NX mobile edition" tool

3. Copy the site ID and the server URL provided by AT Internet in the WOPE's configuration (atIn-ternetSiteId and atInternetServerUrl parameters)

4. View statistics on AT Internet6 using the "Analyser NX" tool.

6.12.3. Configure audience measurement for Google Analytics1. Have an active Google7 account

2. Add the Web site address to Google Analytics8

3. Copy the Google Analytics account ID provided by Google Analytics in the WOPE's configuration(googleAnalyticsAccountId parameter)

Warning

Because this is a mobile dedicated Web site, change the prefix on your Google Analytics ac-count ID from UA- to MO-. For example, if your Google Analytics account ID is UA-12345-67,you would use MO-12345-67.

4. View the statistics on Google Analytics9

3 http://www.atinternet.com/4 http://www.google.com/intl/fr/analytics/5 http://www.atinternet.com/6 http://www.atinternet.com/7 http://www.google.com/8 http://www.google.com/analytics/9 http://www.google.com/analytics/

http://www.atinternet.com/

http://www.google.com/intl/fr/analytics/




http://www.google.com/

http://www.google.com/analytics/



http://www.google.com/intl/fr/analytics/



http://www.google.com/



Chapter 7.

59

Developing your own blocks withWOPE: Do-it-yourself (DIY) mode

7.1. Do-it-yourself (DIY) modeWOPE works with the HTML5 markup language.

Nonetheless, the list of commands may be limiting and not include features or rendering options thatyou would like to include in your mobile site. To address this need, the DIY mode allows you to easilyextend the rendering capabilities of a mobile site using WOPE.

DIY blocks give you full control of the generated HTML, JavaScript and CSS.

7.2. A simple exampleIn this example, the string "hello world!" is displayed with a popup using JavaScript on the iPhone, andis displayed simply as a paragraph of text on other devices.

Example 7.1. In the WOPE HTML page:

<html> <head> <title>Hello World</title> </head> <body> <object data="helloworld.tmpl"/> </body></html>

Note

Here, the "helloworld.tmpl" file is stored in the same place as the WOPE HTML page.

Example 7.2. In the helloworld.tmpl template

#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <body> <script type="text/javascript"> alert ('Hello world !'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <body> <script type="text/javascript"> alert ('Hello world !'); </script> </body> </html>#else  <html data-bk-transcode="true">

Chapter 7. Developing your own blocks with WOPE: Do-it-yourself (DIY) mode

60

<body> <p> Hello world ! </p> </body> </html>

7.3. OperationThe WOPE HTML language uses the standard object tag to include a DIY block in a page.

The page fragment will return:• HTML code, which will be validated and interpreted as is (need the data-bk-transcode at-tibute to be set to true)

• HTML code, which will be sent to targeted devices without validation from WOPE

Note

In practice, in most cases, an HTML page fragment will be output for newer devices having agood browser. A simple degradation using WOPE HTML will allow the page to be rendered on allthe other devices.

The data attribute of the object tag links to the file containing the template, which is stored applica-tion-side.

Note

The template path is relative to the WOPE HTML page.

7.4. How to write a do-it-yourself block

7.4.1. General pointsThe DIY block is a text file that uses the Velocity1 templating engine, allowing powerful logic to be in-cluded in the templates.

7.4.2. Template parametersThe parameters passed to the template from the WOPE page are used by concatenating $param .and the name of the parameter to be retrieved.

Example 7.3. In the WOPE page:

<html>

1 http://velocity.apache.org/engine/devel/user-guide.html

http://velocity.apache.org/engine/devel/user-guide.html

http://velocity.apache.org/engine/devel/user-guide.html

Template Encoding

61

<head> <title>Hello World</title> </head> <body> <object data="helloworld.tmpl"> <param name="MyText" value="Hello world !"/> </object> </body></html>

Example 7.4. In the template:

#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <body> <script type="text/javascript"> alert ('$param.MyText'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> $param.MyText </p> </body> </html>#endiPhone')  <html> <body> <script type="text/javascript"> alert ('$param.MyText'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> $param.MyText </p> </body> </html>

The iPhone will display: "Hello World !" in a JavaScript popup and all other devices will display "HelloWorld !" in a paragraph

7.4.3. Template EncodingYou can use any UTF-8 characters within your DIY template, Arabic, Chinese, etc ... If you do youmust set the content type to UTF-8 when serving the template file.

Example 7.5. In TOMCAT we add the following JSP page directive at the beginning of a templatefile

<%@page contentType="text/html;charset=UTF-8" %>

7.4.4. Writing for all browsersAs a general rule, a specific block will always have a HTML version using WOPE rules. This will allowit to be interpreted by WOPE and displayed on all devices.

In a template, the <html> must have the attribute data-bk-transcode set to true.


62

Example 7.6. WOPE HTML in a template

<html data-bk-transcode="true"> <body> <p> $param.MyText </p> </body></html>transcode="true"> <body> <p> $param.MyText </p> </body></

7.4.5. Writing HTML for specific browsers without WOPE validationThe use of <html> without the data-bk-transcode attribute in the templates will bypass WOPE'sautomatic processing. The HTML will therefore be sent to browsers as is.

A DIY template is a fragment of an HTML page that will be sent to the device. WOPE will injectstylesheets elements as well as JavaScript into the head of the complete HTML page that is sent tothe device. If a DIY block is displayed several times in one page, WOPE will only inject the corre-sponding CSS and JavaScript once, so long as the ID is unique.

7.4.5.1. Using JavaScript

7.4.5.1.1. JavaScript in the head of the pageIn order to uniquely include JavaScript in the <head> of a full page, you must give each <script> taga unique ID. ID syntax: #bkhead('myId') .

Example 7.7. In the template file:

#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <head> <script type="text/javascript" id="#bkhead('myId')"> alert ('Hello world !'); </script> </head> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <head> <script type="text/javascript" id="#bkhead('myId')"> alert ('Hello world !'); </script> </head> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>

7.4.5.1.2. External JavaScript fileIn order to uniquely include a link to a JavaScript file in the head of a full page, you must give eachscript tag a unique ID. ID syntax: #bkhead('myId') .

Writing HTML for specific browsers without WOPE validation

63


#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <head> <script type="text/javascript" src="helloworld-with-ext-js.js" id="#bkhead('myId')"/> </head> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <head> <script type="text/javascript" src="helloworld-with-ext-js.js" id="#bkhead('myId')"/> </head> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>

The path to the file is relative to the WOPE page that calls the DIY block.

Note

By using the same ID within several DIY blocks, it's possible for several DIY blocks to referenceand share the same external JavaScript file.

7.4.5.1.3. Inline script within the bodyIn this case, the script will be executed exactly as is in the body of the full page sent to the device.


#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <body> <script type="text/javascript"> alert ('Hello world !'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <body> <script type="text/javascript"> alert ('Hello world !'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world


64

! </p> </body> </html>

Note

It is strongly recommended to test that the JavaScript executes properly on the target devices.

7.4.5.2. Using CSS stylesheetsIn order to include the CSS only once in the full page, you need to use a unique id for each style tag.Use the following syntax: #bkhead('myId')

Example 7.10. style tag with unique id

<style type="text/css" id="#bkhead('virtualkeyboardCss')"> .vk-bloc{padding:2px;}</style>

Note

Make sure that the display is as expected on your target devices.

Note

Using absolute dimensions and positioning for blocks is strongly discouraged.

7.4.5.2.1. Using CSS in the head of the pageWOPE will inject the stylesheet in the head of the full page sent to the device.


#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <head> <style type="text/css" id="#bkhead('myId')"> .decoration{ background-color:#FF0000; color:#FFFFFF; margin:10px; padding:10px; -webkit-border-radius:5px; } </style> </head> <body> <p class="decoration"> Hello world ! </p> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <head> <style type="text/css"

Writing HTML for specific browsers without WOPE validation

65

id="#bkhead('myId')"> .decoration{ background-color:#FF0000; color:#FFFFFF; margin:10px; padding:10px; -webkit-border-radius:5px; } </style> </head> <body> <p class="decoration"> Hello world ! </p> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>

Note

If the CSS is simple (a few lines), we recommend using this method rather than calling an exter-nal CSS stylesheet, as the page will load more quickly over the mobile network.

7.4.5.2.2. External CSS fileAn external CSS file is injected by WOPE once into the page by means of the tag

Example 7.12. In the template file :

#if($wope.capabilities.mobile_browser == 'WebKit/iPhone')  <html> <head> <link rel="stylesheet" type="text/css" href="helloworld-with-ext-css.css" id="#bkhead('myId')"/> </head> <body> <p class="decoration"> Hello world ! </p> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> Hello world ! </p> </body> </html>#endiPhone')  <html> <head> <link rel="stylesheet" type="text/css" href="helloworld-with-ext-css.css" id="#bkhead('myId')"/> </head> <body> <p class="decoration"> Hello world ! </p> </body> </html>#else  <html data-bk-transcode="true"> <body>


66

<p> Hello world ! </p> </body> </html>

The path to the CSS file is relative to the WOPE page calling the DIY block.

Note

By using a unique ID, it's possible to share the same CSS file between several DIY blocks.

7.4.5.3. Targeting specific devicesThe use of HTML in the templates will bypass WOPE's automatic processing. It is therefore imperativeto target the devices on which the HTML page fragment will be displayed.

WOPE makes all of the information regarding a device's capabilities available to templates. It's there-fore easy to determine the device family, the type of browser, the size of the screen, the video formatssupported, etc.

This information is obtained from WOPE by concatenating $wope.capabilities . with the name ofthe desired capability.

Example 7.13. In the template:

$wope.capabilities.bk_device_family$wope.capabilities.max_image_width$wope.capabilities.mobile_browser

-->$wope.capabilities.bk_device_family$wope.capabilities.max_image_width <html> <body> <script type="text/javascript"> alert ('$param.MyText'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> $param.MyText </p> </body> </html>#endiPhone')  <html> <body> <script type="text/javascript"> alert ('$param.MyText'); </script> </body> </html>#else  <html data-bk-transcode="true"> <body> <p> $param.MyText </p> </body> </html>

Note

Some devices can install more than one browser.

The mobile_browser capability makes it possible to target each browser precisely :

• iPhone, iPod et iPad, default browser : mobile_browser = WebKit/iPhone

• Android, default browser : mobile_browser = WebKit/Android

• Samsung Bada, default browser : mobile_browser = WebKit/Dolfin-Jasmine

• WebOS, default browser : mobile_browser = WebKit/webOS

• Nokia Symbian touch (S60 v5 et S^3), default browser : mobile_browser = WebKit/Nokia/NG

• BlackBerry 6 and 7, default browser : mobile_browser = WebKit/BlackBerry

• Opera mobile : mobile_browser = Opera

7.4.6. Error managementSee the Installation Guide for instructions on how to configure the display of errors.

HTML, JavaScript and CSS will not be validated by WOPE. We recommend testing the display ofthese within the DIY blocks with the target devices.

If the DIY block contains a WOPE syntax error message, the error page will display the type of erroras well as the template which produced the error.

If the DIY block contains a Velocity error, the error page will display the type of Velocity error as well asthe path to the template which produced the error.

7.4.7. Including templates inside templatesIt's possible to reuse code between different templates.


68

In the example below, the HTML without validation is in the file html.tmpl, and the WOPE code inWOPE.tmpl.

Example 7.15. Including two templates in one template

#if($wope.capabilities.mobile_browser == 'WebKit/iPhone') #parse("html_iphone.tmpl")#else #parse("html_wope.tmpl")#endiPhone') #parse("html_iphone.tmpl")#else #parse("html_wope.tmpl")

The path to a template is relative to the placement of the template called with the object tag.

7.4.8. Cache managementBy default, WOPE caches all the templates.

Note

In the development phase, it can be useful to turn template caching off. This procedure is de-scribed in the operating handbook.

Documents

Developer Handbook WOPE 5.0 · • Samsung bada • Chrome, Safari To guarantee proper rendering on all devices, it's recommended to:Progressive enhancement 1. Develop your entire