developer handbook wope 5.2 · iii preface vii

WOPE 5.2.22

Developer Handbook

Developer Handbook

WOPE 5.2.22 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. XML characters ............................................................................................................ 2

2. Getting started 32.1. Writing your first page .................................................................................................. 32.2. Guidelines for writing HTML5 pages .............................................................................. 3

2.2.1. Block tags ......................................................................................................... 32.2.2. Inline tags ......................................................................................................... 42.2.3. Best practice ..................................................................................................... 4

3. Standard tags 53.1. and ............................................................................................ 5

3.1.1. Fixed and ........................................................................ 53.2. ................................................................................................................. 6

3.2.1. Usage ............................................................................................................... 63.2.2. Code example ................................................................................................... 6

3.3. ..................................................................................................................... 73.4. ......................................................................................................................... 7

3.4.1. Recommendations for images ............................................................................ 73.4.2. Generalities ....................................................................................................... 83.4.3. Image resizing ................................................................................................. 103.4.4. Floating image ................................................................................................. 123.4.5. Image with multiple sources ............................................................................. 14

3.5. ..................................................................................................................... 173.5.1. Generalities ..................................................................................................... 173.5.2. Two columns layout ......................................................................................... 213.5.3. Submit button .................................................................................................. 223.5.4. Calendar .................................................................. 24

3.6. ................................................................................................................... 273.6.1. Usage ............................................................................................................. 273.6.2. Code example ................................................................................................. 283.6.3. Client-side table sorting .................................................................................... 28

3.7. ................................................................................................................... 303.7.1. Syntax ............................................................................................................. 303.7.2. Operation ........................................................................................................ 313.7.3. Recommendations regarding video formats ....................................................... 31

3.8. ................................................................................................................... 323.8.1. Syntax ............................................................................................................. 323.8.2. Operation ........................................................................................................ 323.8.3. Recommendations regarding audio formats ....................................................... 33

4. UI Widgets 354.1. Description ................................................................................................................. 354.2. Responsive Menu ....................................................................................................... 35

4.2.1. Description ...................................................................................................... 354.2.2. Preview ........................................................................................................... 364.2.3. Usage ............................................................................................................. 394.2.4. Code example ................................................................................................. 39

4.3. Carousel .................................................................................................................... 40

Developer Handbook

iv

4.3.1. Description ...................................................................................................... 404.3.2. Preview ........................................................................................................... 414.3.3. Usage ............................................................................................................. 414.3.4. Code example ................................................................................................. 424.3.5. API ................................................................................................................. 43

4.4. Gallery of Images ....................................................................................................... 434.4.1. Description ...................................................................................................... 434.4.2. Preview ........................................................................................................... 444.4.3. Usage ............................................................................................................. 444.4.4. Code example ................................................................................................. 45

4.5. Tabs .......................................................................................................................... 454.5.1. Description ...................................................................................................... 454.5.2. Preview ........................................................................................................... 464.5.3. Usage ............................................................................................................. 464.5.4. Recommendations ........................................................................................... 474.5.5. Code example ................................................................................................. 47

4.6. Links List ................................................................................................................... 474.6.1. Description ...................................................................................................... 474.6.2. Preview ........................................................................................................... 484.6.3. Usage ............................................................................................................. 484.6.4. Code example ................................................................................................. 49

4.7. Navigation Links ......................................................................................................... 504.7.1. Description ...................................................................................................... 504.7.2. Preview ........................................................................................................... 504.7.3. Usage ............................................................................................................. 504.7.4. Code example ................................................................................................. 51

4.8. Headline .................................................................................................................... 524.8.1. Description ...................................................................................................... 524.8.2. Preview ........................................................................................................... 524.8.3. Usage ............................................................................................................. 524.8.4. Code example ................................................................................................. 53

4.9. iPhone look-and-feel navigation bar ............................................................................. 534.9.1. Description ...................................................................................................... 534.9.2. Preview ........................................................................................................... 544.9.3. Usage ............................................................................................................. 554.9.4. Code example ................................................................................................. 55

5. CSS 575.1. Default behavior ......................................................................................................... 575.2. Media queries ............................................................................................................ 58

5.2.1. Inside the ........................................................................................... 585.2.2. Inside the CSS file ........................................................................................... 58

5.3. Vendor-specific behavior ............................................................................................. 595.4. The CSS class properties reference ............................................................................ 615.5. Example .................................................................................................................... 61

5.5.1. Horizontal buttons menu layout ........................................................................ 61

6. Media Queries 656.1. Syntax ....................................................................................................................... 65

6.1.1. Using a logical AND ........................................................................................ 656.1.2. Using a logical OR .......................................................................................... 666.1.3. Using a negation ............................................................................................. 666.1.4. Using an enumeration ...................................................................................... 66

6.2. Usage ........................................................................................................................ 666.3. Code examples .......................................................................................................... 66

v

7. JavaScript and Ajax 697.1. Default behavior ......................................................................................................... 69

7.1.1. Choosing the transition .................................................................................... 697.1.2. Turning off the Ajax links .................................................................................. 707.1.3. To mimic the native back button ....................................................................... 707.1.4. Choosing the section where the animation and the loader image are shown ......... 70

7.2. Getting further with WOPE Javascript framework .......................................................... 717.2.1. General points regarding the use of Ajax .......................................................... 717.2.2. JavaScript degradation ..................................................................................... 717.2.3. Sections .......................................................................................................... 717.2.4. Dynamic actions on links: the onclick attribute ............................................... 727.2.5. JavaScript functions ......................................................................................... 727.2.6. Passing parameters ......................................................................................... 727.2.7. Animations and effects ..................................................................................... 727.2.8. Overriding the "class" attribute of the tag in HTML pages ..................... 73

7.3. Detailed description of JavaScript functions in WOPE ................................................... 757.3.1. Toggle ............................................................................................................. 757.3.2. Swap .............................................................................................................. 757.3.3. Replace .......................................................................................................... 767.3.4. Submit ............................................................................................................ 79

7.4. Events ....................................................................................................................... 817.4.1. bkPageLoaded ............................................................................................... 817.4.2. bkPageUnloaded ........................................................................................... 817.4.3. bkScriptsLoaded ......................................................................................... 817.4.4. bkTransitionCompleted ............................................................................. 827.4.5. bkPageLoadRequestSucceeded ................................................................... 827.4.6. bkPageLoadRequestFailed ......................................................................... 827.4.7. bkPageLoadRequestTimeout ....................................................................... 83

8. Do-It-Yourself (DIY) 858.1. What is the DIY mode ? ............................................................................................. 858.2. A simple example ....................................................................................................... 858.3. Operation ................................................................................................................... 868.4. How to write a DIY block ............................................................................................ 86

8.4.1. General points ................................................................................................. 868.4.2. Template parameters ....................................................................................... 868.4.3. Template Encoding .......................................................................................... 878.4.4. Writing for all browsers .................................................................................... 878.4.5. Writing HTML for specific browsers without WOPE validation .............................. 888.4.6. Error management ........................................................................................... 938.4.7. Including templates inside templates ................................................................. 938.4.8. Cache management ......................................................................................... 94

9. Hybrid 959.1. Hybrid context detection ............................................................................................. 959.2. Navigation and Tab bars ............................................................................................. 95

9.2.1. Preview ........................................................................................................... 959.3. Native navigation bar .................................................................................................. 96

9.3.1. Preview ........................................................................................................... 979.3.2. Code example ................................................................................................. 989.3.3. Usage ............................................................................................................. 98

9.4. Native Tab Bars ......................................................................................................... 989.4.1. Preview ........................................................................................................... 999.4.2. Code example ............................................................................................... 1009.4.3. Usage ........................................................................................................... 100

Developer Handbook

vi

10. WOPE Box 10310.1. What is a WOPE Box ? .......................................................................................... 10310.2. iOS ........................................................................................................................ 103

10.2.1. Application packaging procedure ................................................................... 10310.2.2. Package the application ............................................................................... 10310.2.3. Submitting your app to the Apple App. Store ................................................. 104

10.3. Android .................................................................................................................. 10410.3.1. Application packaging procedure for Android 4.0 and later .............................. 10410.3.2. Creating a developer account on the Android Market to publish apps ............... 107

11. Mobile development with WOPE 10911.1. Reserved filenames ................................................................................................ 10911.2. Viewing the mobile site as a webapp on iPhone ....................................................... 10911.3. Performance ........................................................................................................... 109

11.3.1. Caching of resources ................................................................................... 10911.3.2. Resources minification ................................................................................. 11111.3.3. Resources compression ............................................................................... 11111.3.4. HTTP connection keep alive ......................................................................... 11111.3.5. Recommendation ......................................................................................... 111

11.4. The data-* attribute reference .................................................................................. 11111.5. Displaying the raw HTML code before it is rendered with WOPE ................................ 11311.6. Headers ................................................................................................................. 11311.7. Device capabilities .................................................................................................. 11411.8. Building the visitor identification mechanism ............................................................. 11511.9. Redirects ................................................................................................................ 11611.10. Displaying errors ................................................................................................... 116

11.10.1. Displaying errors in debug mode ................................................................. 11611.10.2. Displaying errors in production mode ........................................................... 117

11.11. Audience measurement ......................................................................................... 11711.11.1. Operation ................................................................................................... 11811.11.2. Configure audience measurement for AT Internet ......................................... 11811.11.3. Configure audience measurement for Google Analytics ................................. 118

11.12. Geolocation .......................................................................................................... 11911.12.1. Description ................................................................................................. 11911.12.2. Usage ........................................................................................................ 11911.12.3. Code exemple ............................................................................................ 12011.12.4. Using Geolocation in your JavaScript .......................................................... 120

11.13. Browser supporting ajax page loading .................................................................... 121

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

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/1345http://chrispederick.com/work/user-agent-switcher/https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmghttps://addons.mozilla.org/fr/firefox/addon/1345http://chrispederick.com/work/user-agent-switcher/https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

Chapter 1. Introduction to mobile development

2

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

• >: >

•

Chapter 2.

3

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:

Having fun with WOPE Hello World!

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

An important note about HTML5 markup validation

HTML5 is a living standard as per the WHATWG spec (http://www.whatwg.org/specs/web-apps/current-work/) : some tags or attributes may not yet be allowed by default by WOPE, either be-cause they are too recent and need to be adapted for all devices, or because they have not beenfully tested yet for proper device support.

WOPE also includes parts of the HTML4 Strict Schema (http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd) to prevent developers from using such a tag or attribute by throwing a validation errorthat will show the markup part which generated the parsing error.

For use cases when the developer wants to avoid markup validation and provide its own customcontent adaptation, a DIY mode providing device detection features (brand, model, operating sys-tem, features, ...) is available.

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 composed of block tags. These occupy the width of the screen and arestacked one on top of the other.

Example: , ,

, , , etc.

http://www.whatwg.org/specs/web-apps/current-work/http://www.whatwg.org/specs/web-apps/current-work/http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsdhttp://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd

Chapter 2. Getting started

4

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: , , , , etc.

Note

Inline elements can only contain other inline elements.

2.2.3. Best practice

Progressive enhancement

To guarantee proper rendering on all devices, it's highly recommended to:

1. Develop your entire service without using any external CSS files nor JavaScript. Use thestyle attribute within the tags to set the colors for texts,links and backgrounds. This willguarantee a user friendly layout on all devices (including the basic ones).

2. Then, add your styles with the external CSS file and JavaScript using WOPE framework totarget selected devices.

Chapter 3.

5

Standard tags

3.1. and 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.

Example 3.1. Header

This is my header!

Example 3.2. Footer

This is my footer!

3.1.1. Fixed and WOPE allows you to easily fix the header on top of the screen and the footer at the bottom of thescreen.

Use the data-bk-position="fixed" attribute in the and the .

Example 3.3. Fixed header and footer

Fixed header footer Fixed header

Lorem ipsum dolor ...

Fixed footer

The fixed position is available on the following browsers :

Chapter 3. Standard tags

6

• Desktop browsers : Firefox, Chrome and Safari

• Webkit/iPhone browser on iOS 5 version and above

• Webkit/Android browser on Android 4 and above

3.2. The tag represents a generic document or application section.

3.2.1. UsageThe tag is solely composed of block tags.

Content of the The can be displayed only on selected browsers using the data-bk-me-dia attribute (Chapter 6, Media Queries).

Table 3.1. Attributes of the tag

Attribute name Attribute value Description

id Optional

class Optional

data-bk-media Chapter 6, Media Queries Optional

3.2.2. Code example

Example 3.4. Section

My Page

Lorem ipsum...

Nullam erat...

Example 3.5. Different content on iPad only

My Page [...]

This block is displayed only on the iPad.

7

This block is displayed on all devices but the iPad.

[...]

3.3. Used to display a responsive menu. See Section 4.2, “Responsive Menu”.

3.4.

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

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

See : Section 3.4.2, “Generalities”, Section 3.4.3, “Image resizing” and Section 3.4.4, “Floating image”

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

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 tag and the data-bk-src-* attributes): 115px, 160px, 220px and 310px. For more informa-tion, see: Section 3.4.5, “Image with multiple sources”

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


8

We recommend using GIF or PNG8 for all devices. PNG24 images can be used on high definitionscreens.

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

The vast majority of recent mobile devices handle transparency correctly (GIF or PNG8 format).

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 and 60x60 pixels for high definition screens.For more information, see: Section 4.6, “Links List”

3.4.2. Generalities

3.4.2.1. DescriptionThe tag is an in-line tag.

By default, WOPE resizes images to fit the device screen width if the image is bigger than the screen.

3.4.2.2. Usage• Full screen image

To display full screen image on all devices, make sure the image width is bigger than the widest tar-geted screen.

For better image quality on high definition screens, use the data-bk-src-hd attribute. WOPE willresize the image according to the actual definition of the screen.

Note that if the image referenced with the src attribute is large enough, this same image can alsobe used for the data-bk-src-hd attribute.

• Small image (smaller than the screen width)

For better image quality on high definition screens, use the data-bk-src-hd attribute and thewidth attribute.

For best results the high definition image must be twice the size of the one for regular definitionscreen.

Generalities

9

How to set the correct width value ?

The width attribute is the actual width of the image as displayed on a regular definitionscreen.

Exemple: let's say we want to display a 50x50 pixels icon on all screens :• Regular definition screen:

image size: 50x50 pixel

On the device's screen, the image is displayed as 50x50 pixels

• High definition screen:

image size: 100x100 pixel

width attribute value: 50 pixel

On the device's screen, the image is displayed as 50x50 pixels but with twice the definition

Table 3.2. attributes


src [URI] Mandatory

data-bk-src-hd [URI] URI of the image for high defini-tion screens (Optional)

alt [STRING] Mandatory

width [INTEGER] Image width in pixels. Usedwith the data-bk-src-hd at-tribute

3.4.2.3. Code example

Example 3.6. Full screen image

Example 3.7. Full screen image also optimised for high definition screen

Example 3.8. Small image


10

Example 3.9. Small image also optimised for high definition screen

3.4.3. Image resizing

Note

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

target.resizeImages=false

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

Image resizing

11

3.4.3.2. Preview

3.4.3.3. UsageResizing an image can be done by adding the data-bk-resize attribute on your element.

Table 3.3. How to resize an


data-bk-resize [Integer] 30 to resize to 30% of thescreen width


12


src [URI] Mandatory




Example 3.10. img

Example 3.11. Handling high definition screens

3.4.4. Floating image

3.4.4.1. DescriptionWOPE allows you to easily float an image.

Floating image

13

3.4.4.2. Preview

3.4.4.3. UsageFloating an image can be achieved by adding a class to your element.

Table 3.4. How to float an

Attribute name Attribute value

class bk-float-left

bk-float-right


14


Example 3.12. Floating image


3.4.5. Image with multiple sources

3.4.5.1. DescriptionBy default, WOPE resizes images to adapt rendering to device screen. This operation can alter imagequality in case of logos, graphics or banners (see Section 3.4.1.2, “Logos and diagrams”)

Sample usage: logos, banner ads, graphics, etc.

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.

src attribute

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

Image with multiple sources

15

3.4.5.2. Preview

3.4.5.3. UsageOptimize the quality of the rendering of an image can be achieved by adding the data-bk-src-XXXattributes (where XXX represents the usable screen width in pixels) to your tag.

For high definition screens, use the data-bk-src-hd with the width attributes.


16

How to set the correct width value ?

The width attribute is the actual width of the image as displayed on a regular definition screen.

Exemple: let's say we want to display a 310x50 pixels logo :• Regular definition smalest screen:

Used data-bk-src-XXX attribute: data-bk-src-115

Image size: 115x50 pixels


• Regular definition QCif screen:




• Regular definition QVGA screen (like bada, low end androids, etc):




• Regular definition screen (like iPhone 3GS, some androids device, etc):




• High definition screen (like iPhone 4S, high end androids device, Windows Phones, etc):

Used data-bk-src-XXX attribute: data-bk-src-hd

Image size: 620x100 pixel

Width attribute value: 310 pixels

On the device's screen, the image is displayed as 310x50 pixels but with twice the definition

Table 3.5. How to give multiple sources to an


data-bk-src-115px [URI]



17





width [INTEGER] Image width in pixels. Usedwith the data-bk-src-hd at-tribute


Example 3.14. tag with multiple sources


3.5.

3.5.1. GeneralitiesThe tag is a block tag.


18

3.5.1.1. Preview

3.5.1.2. Usage


Attribute name Description

method Mandatory

action Mandatory

id Optional

class Optional

style Optional

Generalities

19

Table 3.7. children tags

Name Mandatory Description

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

It draws a box around the relat-ed elements.

Table 3.8. children tags

Name Mandatory Description

false This tag defines a label for an element.

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

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

false This tag defines a multi-line textinput control.

Note

and tags can contain any inline tag.

Table 3.9. : 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 ) 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 optimised keyboard.


20

Type attribute value Description

submit Defines a button for submitting the form.

image Specifies a graphical submit button.


Text:
Password:
Number:
Date:
Checkbox:
Checkbox 1
Checkbox 2 Radio:
Radio 1
Radio 2 Select:
Option 1 Option 2 Textarea:
A textarea

Two columns layout

21

3.5.2. Two columns layout

3.5.2.1. Preview

3.5.2.2. UsageTo enable the two columns layout :1. Add the bk-two-columns property in the class attribute of the tag.

2. Make sure the texts displayed on the left are nested inside a tag.

3. Make sure the input fields displayed on the right are nested inside a tag.

Note

On small screen devices, this layout is displayed as one column only.


Text:


22

Date: Checkbox: Checkbox 1
Checkbox 2 Radio: Radio 1
Radio 2 Select: Option 1 Option 2 Textarea:

3.5.3. Submit button

3.5.3.1. Using image button optimized for high definition screensTo improve image quality on high definition screens, use the data-bk-src-hd and the width attrib-utes. For best results, the high definition image should be twice the size of the one for regular defini-tion screen.

Submit button

23

Example 3.16. 200 pixels width image submit button

3.5.3.2. 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.17. Submit a form with a slide transition with a submit button

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

3.5.3.3. How to avoid sending data after the user hits the navigator backbutton ?By default, data are sent 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.19. Avoid sending data on back with a submit button

Example 3.20. Avoid sending data on back with an image button

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


24

Example 3.21. Preserve original method on back

3.5.4. Calendar

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

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

Calendar

25

3.5.4.2. Preview


26

3.5.4.3. Usage

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

This archive contains the CSS style sheet wope.css.

This style sheet allows you to customize the calendar. You can specify:• Calendar launch image button (size: 68x40 px).

• Calendar controls (closing button, next month and previous month buttons) can be customized usinga web font.

• Colors and background colors.

Calendar size customization

WOPE optimizes the calendar layout for any kind of screen size. Do not set any size in thewope.css stylsheet as you may break the layout on particular devices.

3.5.4.3.2. 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.10. How to internationalize your calendar

Attribute name Attribute value

lang [String]

According RFC 17662 rules

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

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

27

3.5.4.3.3. Title customizationCustomize your calendar title can be achieved by adding a data-bk-title attribute on the tag.

Table 3.11. How to customize your calendar title

Attribute name Attribute type

data-bk-title [String]


Example 3.22. Calendar

[...] [...]

Example 3.23. Calendar for France with a title

[...] [...]

3.6. A table is a block tag to display tabular data.

3.6.1. UsageIt should never be used for page layout purposes.

Note

The images inserted into the table below are not resized to fit the size of the cells (rather, they'resized to fit the screen of the device); this is why small images should be used in a table.



id Optional

class Optional


28


style Optional

3.6.2. Code example

Example 3.24.

# Name Grocery item Price 1 Gonzo Radishes $0.63 2 Ernie Fish $12.09 3 Bert Broccoli $0.79

3.6.3. Client-side table sortingUser can sort the lines of the table on device supporting JavaScript.

Setting the data-bk-sortable attribute to true in the tag enables the user to sort the table byclicking on the header.

Example 3.25. Sorting by #, Grocery item and Price

# Name Grocery item Price 1 Gonzo Radishes $0.63 2 Ernie Fish

Client-side table sorting

29

$12.09 3 Bert Broccoli $0.79

Setting the data-bk-sort-value attribute in the tags enables the user to sort according to ahidden value.

Example 3.26. Sorting by date using ISO date format in the data-bk-sort-value attribute

# Name Grocery item Date 1 Gonzo Radishes 12 juin 2012 2 Ernie Fish 2 aout 2011 3 Bert Broccoli 1er janvier 2012

In order to customize the layout, you need to copy files from the ResourcesClient-5.2.22.zip archivedelivered with WOPE to your Web application's root.

This archive contains the wope.css file.

This style sheet allows you to customize the table:• Header colors.

• Colors of the arrows showing the sorting direction.


30

table size customization

WOPE optimizes the tables layout for any kind of screen size. Do not set any size in thewope.css as you may break the layout on particular devices.

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

3.7.1. SyntaxThe tag is an "inline" tag. Therefore, it must be nested inside a block tag (for exemple : or

)

Video not supported.

Table 3.13. tag attributes

Name Mandatory Value Description

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

poster no [URI] 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 tags and inline text are allowed as children of the tag.



src yes [URI] Path to a video file.

type yes [String] Technical description ofthe video: MIME type,audio and video codecused.

Operation

31

3.7.2. OperationAdaptation scenario on different devices:

1. The device supports HTML5 as expected : WOPE will return the 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 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 tag: WOPE will return a link to the video which codec is supported by the device.

The order of the 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 tags: WOPE will display the text in the tag.

type attribute of the 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.7.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.15. 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.


32

3.8. The tag uses the HTML5 syntax and allows to play a sound on most devices.

3.8.1. SyntaxThe tag is an "inline" tag. Therefore, it must be nested inside a block tag (for exemple : or

)

Audio not supported.



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

Only tags and inline text are allowed as children of the tag.



src yes [URI] Path to a audio file.

type yes [String] Technical description ofthe audio: MIME type

3.8.2. OperationAdaptation scenario on different devices:

1. The device supports HTML5 as expected : WOPE will return the 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 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 : WOPE will return a link to the audio file which codec is supported by the device.

The order of the 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 tags: WOPE will display the text in the tag.

Recommendations regarding audio formats

33

type attribute of the 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.8.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.

Table 3.18. 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.

Chapter 4.

35

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. Responsive Menu

4.2.1. DescriptionA responsive menu is a menu automatically displayed bu WOPE:• As a column (positioned on the left side) on the screens of more than 1024 pixels wide.

• As a slide menu (hidden by default, activated via a button) on the screens of less than 1024 pixelswide.

• As a section (hidden by default, activated via a button that refresh the page) on the screens that donot support JavaScript.

Chapter 4. UI Widgets

36

4.2.2. Preview

4.2.2.1. Column display mode (devices with a screen of more than 1024pixels wide)

Preview

37

4.2.2.2. Slide display mode (devices with a screen of less than 1024 pix-els wide)


38

4.2.2.3. Section display mode (devices that do not support JavaScript)

Usage

39

4.2.3. UsageDisplaying a responsive menu on your page can be achieved by using an element and putinside it the content of your menu.

Table 4.1. How to display a responsive menu

Tag Attribute name Attribute value Description

This section representsthe menu.

It will be displayed as acolumn section on thescreens of more than1024 pixels wide.

It will be displayed as aslide menu (hidden bydefault) on the screensof less than 1024 pixelswide.

data-bk-rel aside Tells WOPE to loadthe remote page intothe main section. Thismeans that the loaderis played into the mainsection during the tran-sition. The header,footer and aside sec-tions are refreshedwithout any transition.

data-bk-role slide-menu-button Identifies the button todisplay on the screensof less than 1024 pixelsand used to open/closethe slide menu.

4.2.4. Code example

Example 4.1. Responsive menu

WOPE

Link 1


40

[...] Link 5

4.3. Carousel

4.3.1. DescriptionDisplay a carousel for images.

Navigation can be done with a left or right swipe on almost all touch screen devices, or by hitting theleft or right arrows.

For browsers that do not support Javascript, Wope automaticaly mimic the Javascript behavior by call-ing the same page and update the carousel section.

Preview

41

4.3.2. Preview

4.3.3. UsageDisplaying a carousel on your page can be achieved using a with the data-bk-role attribute.

In order to display the carousel, you need to copy files from the ResourcesClient-5.2.22.zip archive de-livered with WOPE to your Web application's root.

This archive contains the wope.css file.

This style sheet allows you to customize the carousel:• Next and previous buttons can be customized using a web font.

• Colors, background colors, borders, etc.


42

Carousel size customization

WOPE optimizes the carousel layout for any kind of screen size. Do not set any size in thewope.css as you may break the layout on particular devices.

Table 4.2. How to display a carousel

Tag Attribute name Attribute value

data-bk-role carousel

id attribute

The id attribute on the ul tag is mandatory only when more than one carousel are displayed in apage.

4.3.4. Code example

Example 4.2. Carousel with 3 full screen images

Example 4.3. Carousel with 3 news headlines (floating image and text in a link)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim mauris, varius et tincidunt sit amet, luctus in dui.

API

43

Quisque tincidunt massa ut libero dignissim scelerisque.

4.3.5. APIThe carousel widget exposes a few functions that can be useful for script control of your slider.

prev() // slide to prevnext() // slide to nextgetPos() // returns current slide index positionslide(index, duration) // slide to set index position // (duration: speed of transition in ms)

The carousel object is exposed to you as a property of the Bk.carousels array. For example, to get ac-cess to the carousel with id="my-carousel", use Bk.carousels['my-carousel'] This is explained in thefollowing example using a carousel with id=c1:

Example 4.4. Getting access to the carousel object

var myRightBtn = document.getElementById("my-right-button");Bk.addListener("click", myRightBtn, function(){ Bk.carousels['c1'].next();});

var myLeftBtn = document.getElementById("my-left-button");Bk.addListener("click", myLeftBtn, function(){ if(Bk.carousels['c1'].getPos() > 0){ Bk.carousels['c1'].prev(); }});

4.4. Gallery of Images

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


44

4.4.2. Preview

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

Table 4.3. How to display a gallery of images


data-bk-role gallery-columns-x2

gallery-columns-x3

Note

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

Code example

45

4.4.4. Code example

Example 4.5. Gallery with 3 columns

Aston Martin
Ferrari
Lamborghini


Aston Martin
Ferrari
Lamborghini

4.5. Tabs

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


46

4.5.2. Preview

4.5.3. UsageDisplay tabs on your page can be achieved using a tag with a data-bk-role attribute.

Table 4.4. How to display tabs


data-bk-role tabs

Recommendations

47

Note

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

4.5.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. Take care to not set the "color" attribute to the same color as the background color.

4.5.5. Code example

4.6. Links List

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


48

4.6.2. Preview

4.6.3. UsageDisplay an optimized link list can be achieved using a tag with a data-bk-role attribute.

Table 4.5. How to display a link list


data-bk-role link-list Enables link list look-and-feel on

data-bk-icon [URI] Icon that will be dis-played in front of thelinks.

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

data-bk-icon-hd [URI] Icon that will be dis-played in front of thelinks on high definitionscreens.

It should be 60x60 pix-els in GIF or PNG8 orpng24 format.

Code example

49


data-bk-link-icon [URI] Icon that will be dis-played on the right ofthe links.

It should be 25 pixelswidth max.

It will not appear on ba-sic phones.

data-bk-link-icon-hd

[URI] Icon that will be dis-played on the right ofthe links on high defini-tion screens.

It should be 50 pixelswidth max (double thesize of the data-bk-link-icon).


4.6.4. Code example

Example 4.7. link-list

basic With a touch icon With a link icon With a link icon



50

Link with high definition icones

4.7. Navigation Links

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

4.7.2. Preview

4.7.3. UsageWOPE makes it easy to display navigation links to your page using a tag with a data-bk-roleattribute.

Table 4.6. How to display navigation links


data-bk-role navlink Enables navigationlinks look-and-feel on

Code example

51


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

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

data-bk-link-icon [URI] Icon that will be dis-played on high-resolu-tion devices (screensgreater than 200 pixelswide)

It should be 25 pixelswidth max.


[URI] Icon that will be dis-played on high defini-tion screens.


4.7.4. Code example

Example 4.9. navlink

Previous car Next car


Previous with HD


52

Next with HD

4.8. Headline

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

4.8.2. Preview

4.8.3. UsageDisplay a headline in your page can be achieved using a tag with a data-bk-role attribute.

Table 4.7. How to display a headline


data-bk-role headline Enables headline look-and-feel on

data-bk-link-icon [URI] Icon that will be dis-played on the right ofthe optimized clickablecomponent.

Code example

53

Tag Attribute name Attribute value DescriptionIt will not appear on ba-sic phones.


[URI] Icon that will be dis-played on the right ofthe links on high defini-tion screens.



4.8.4. Code example

Example 4.11. Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at sem magna.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at sem magna.

4.9. iPhone look-and-feel navigation bar

4.9.1. DescriptionThis UI Widget is used to display an iPhone look-and-feel navigation bar.


54

4.9.2. Preview

Usage

55

4.9.3. UsageDisplay an iPhone look-and-feel navigation bar can be done by adding a into your with a data-bk-role="navbar" attribute.

Table 4.8. How to display an iPhone look-and-feel navigation bar


data-bk-role navbar Enable iPhone naviga-tion bar look-and-feel

Title of your navigationbar

4.9.4. Code example

Wope

Chapter 5.

57

CSS

5.1. Default behaviorWOPE 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.

Example 5.1. Adding an external CSS file

My page

Lorem ipsum...

Note

This CSS will only be displayed on the following browser list : Section 11.13, “Browser supportingajax page loading”

To target more browsers, refer to Chapter 6, Media Queries

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.

Chapter 5. CSS

58

5.2. Media queries

5.2.1. Inside the WOPE makes it easy to send a specific CSS file to any device by using extended media queries. SeeChapter 6, Media Queries

An external style sheet can be filtered by using the @data-bk-media attribute on the tag.

Example 5.2. How to target all devices with an external CSS ?

My page

Lorem ipsum...

Example 5.3. How to solely target iOS devices only with an external CSS file ?

My page

Lorem ipsum...

Example 5.4. How to target Webkit based devices and Windows Phone 7.5 with an external CSS ?

My page

Lorem ipsum...

5.2.2. Inside the CSS file

5.2.2.1. Standard media queriesBy default, WOPE transmits all standard media queries to the targeted devices.

A standard media query can be set using the standardized keyword: @media in a CSS file.

Vendor-specific behavior

59

Example 5.5. How to set a specific layout only in portrait orientation using standard media query in aCSS file ?

@media (orientation: portrait) { // Your style rules here} portrait) { // Your style

5.2.2.2. Extended media queriesWOPE makes it easy to send a specific CSS style to any device by using extended media queries.See Chapter 6, Media Queries

An extended media query can be set using the keyword: @bk-media in a CSS file.

Example 5.6. how to solely target iOS devices only with an extended media query ?

@bk-media (mobile_browser: WebKit/iPhone) { // Your style rules here} { // Your style rules

Example 5.7. how to solely target Windows Phone 7.5 device with an extended media query ?

@bk-media (mobile_browser: IEMobile) and (mobile_browser_version: 9) { // Your style rules here}

5.3. Vendor-specific behaviorWope automatically creates vendor-specific CSS attributes given the ones listed in the table below, sothat the developer does not have to write all required vendor prefixes.

Example 5.8. Original CSS, no vendor-specific attribute is needed

#box {border-radius:15px; color:white;}

Example 5.9. Output CSS generated by WOPE for a Webkit-based device (ex: iPhone), withrequired prefixed attribute created by Wope

#box {-webkit-border-radius:15px; border-radius:15px; color:white;}

Example 5.10. Output CSS generated by WOPE for a internet explorer device (ex: WindowsPhone), with required prefixed attribute created by Wope

#box {-ms-border-radius:15px; border-radius:15px; color:white;}

Attributes being rewritten with a vendor prefix:• animation

• animation-delay

Chapter 5. CSS

60

• animation-direction

• animation-duration

• animation-iteration-count

• animation-name

• animation-play-state

• appearance

• background-size

• border-bottom-left-radius

• border-bottom-right-radius

• border-image

• border-radius

• border-top-left-radius

• border-top-right-radius

• box-align

• box-direction

• box-shadow

• box-sizing

• column-count

• column-gap

• filter

• linear-gradient (within background-image:)

• radial-gradient (within background-image:)

• text-size-adjust

• transform

• transform-origin

• transform-style

• transition

• transition-delay

• transition-duration

• transition-property

The CSS class properties reference

61

• transition-timing-function

5.4. The CSS class properties reference

Table 5.1. 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 fields width fill the parent container

bk-transition-* 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 7.2.8.1, “Modifying the transitionused for displaying a remote section: bk-transition-*”

bk-to-* 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 7.2.8.2, “Modifying the sectionusing "bk-to-*"”

5.5. Example

5.5.1. Horizontal buttons menu layout

5.5.1.1. DescriptionIn this example, we are using the "Tabs" UI widget (Section 4.5, “Tabs”) with buttons layout using CSS.

Chapter 5. CSS

62

5.5.1.2. Sources

Example 5.11. HTML page source

My page [...] link 1 Link 2

Horizontal buttons menu layout

63

Link 3 [...]

Note

• The CSS is sent to all Browsers except the basic ones (Chapter 6, Media Queries).

• Use only one class attribute in the tag.

• Links color are set inline using the style attribute in the a tag so that basic devices without ex-ternal CSS support have a fallback design.

Example 5.12. CSS file buttons.css

.tabs-button { padding-left: 5px;}.tabs-button a { outline: none; text-align: center; padding: 5px 10px; margin:5px; text-shadow: 0px 1px 0px #ffffff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #b7b7b7; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed)); background-image: linear-gradient(top, #ffffff, #ededed); background-color: #ededed;}{ padding-left: 5px;}.tabs-button a { outline: none; text-align: center; padding: 5px 10px; margin:5px; text-shadow: 0px 1px 0px #ffffff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.2); border: solid 1px #b7b7b7; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed)); background-image: linear-gradient(top, #ffffff, #ededed); background-color: #ededed;

Chapter 5. CSS

64

Note

• border-radius, box-shadow and linear-gradient CSS3 properties do not need anyvendor prefix (Section 5.3, “Vendor-specific behavior”).

• The -webkit-gradient property is used on older WebKit browsers only.

• We highly recommend to set a background-color when using a gradient.

Chapter 6.

65

Media QueriesWOPE allows you to create powerful media queries using device capabilities.

6.1. SyntaxA media query is a key/value string, separated by a colon, where:• The key (element on the left of the colon) represents the name of the device capability (See Sec-

tion 11.7, “Device capabilities”).

• The value (element on the right of the colon) represents the value of the device capability (See Sec-tion 11.7, “Device capabilities”).

Example 6.1. How to target iPhone device ?

(mobile_browser: WebKit/iPhone)

Table 6.1. data-bk-media possible values list

Key Value Description

Any device capability Corresponding value List available : Section 11.7,“Device capabilities”

max-browser-version String Sets the maximum targetedbrowser version. Example : 4,4.0.1

min-browser-version String Sets the minimum targetedbrowser version. Example : 4,4.0.1

max-os-version String Sets the maximum targeted OSversion. Example : 4, 4.0.1

min-os-version String Sets the minimum targeted OSversion. Example : 4, 4.0.1

max-width Integer Sets the maximum targetedscreen width based on usablescreen width (in pixels) whendevice is held in portrait mode

min-width Integer Sets the minimum targetedscreen width based on usablescreen width (in pixels) whendevice is held in portrait mode

all Target all browser

6.1.1. Using a logical ANDSeveral media queries can be combined using the and keyword to express a logical AND.

Example 6.2. How to target iPhone devices with an OS version: 5.0 ?

(mobile_browser: WebKit/iPhone) and (mobile_browser_version: 5.0)

Chapter 6. Media Queries

66

6.1.2. Using a logical ORSeveral media queries can be combined using the or keyword to express a logical OR.

Example 6.3. How to target iPhone or Android devices ?

(mobile_browser: WebKit/iPhone) or (mobile_browser: WebKit/Android)

6.1.3. Using a negationYou can express the negation in your media queries by using the not keyword.

Example 6.4. How to target non iPhone devices ?

(mobile_browser: not WebKit/iPhone)

6.1.4. Using an enumerationYou can express an enumeration of capabilities values in your media queries by using a comma.

Example 6.5. How to target iPhone, Android and WebOS devices ?

(mobile_browser: WebKit/iPhone, WebKit/Android, WebKit/webOS)

6.2. UsageWOPE allows you to target devices on which to send specific CSS or JavaScript.

This can be achieved by adding the data-bk-media attribute on your or ele-ments.

Table 6.2. How to target devices with CSS or JavaScript ?


data-bk-media A media query. Section 6.1,“Syntax”

data-bk-media A media query. Section 6.1,“Syntax”

6.3. Code examples

Example 6.6. How to target all devices with an external CSS ?

Example 6.7. How to target iOS devices with an external CSS ?

Code examples

67

Example 6.8. How to target Android devices with an external JavaScript ?

Example 6.9. How to target Android devices with ice cream sandwich (4.0.0 version) and above OSversion ?

Chapter 7.

69

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.

7.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 7.2, “Get-ting further with WOPE Javascript framework”

Important

To display the animated loading image, you have to extract the content of the providedResourcesClient-5.2.22.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.

7.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 7.2.7, “Animations and effects” ).

Chapter 7. JavaScript and Ajax

70

My link

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

My link

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

Back

7.1.4. Choosing the section where the animation and the loader im-age are shownIt is possible to target a specific section of the page in which the animations and the loader are shown.The other sections of the page are refreshed as well but do not show any animation nor loader image.

To achieve this, follow this two steps:• Create a with a unique id.

• On a tag outside of this , use the data-bk-target attribute to target the id of the in which the loader and animations are shown.

Example 7.1. A simple example using the tagpage-1.html

[...]

Link to refresh the section with "content" id with page-2.html content

Getting further with WOPE Javascript framework

71

This content will be refreshed with an animation.

[...]

page-2.html

[...]

Page 2

This content has been refreshed with an animation.

[...]

Note

The 's id must be the same across the calling page and the targeted page.

7.2. Getting further with WOPE Javascript framework

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

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

page.

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

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

Chapter 7. JavaScript and Ajax

72

7.2.3.1. Syntax:

[...]

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

• class

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

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

7.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'}})

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

• flip / flip-backwards : content is flipped

• fade : progressive fade-in/fade-out

• unfold : hide/show

Overriding the "class" attribute of the tag in HTML pages

73

7.2.8. Overriding the "class" attribute of the tag in HTMLpagesThe 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.

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

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

developer handbook wope 5.2 · iii preface vii

Documents