IBM MPA Best Practices - Lotus

© IBM Corporation 2010

Owner: IBM Software Group Version: 1.0

Subject: Mobile Portal Development/Testing Best Practices Document

Page1 of 41

IBM Software Group

Mobile Portals Development/Testing

MPA - Best Practices

Krishna C kumar

Development/L3 Support, IBM Mobile Portal Acclerator

India Software Lab, Bangalore




Page2 of 41

TABLE OF CONTENTS

1. AUDIENCE ................................................................................................3

2. OBJECTIVE...............................................................................................4

3. SOFTWARE/TOOLS REQUIRED .............................................................5

4. BEST PRACTICES....................................................................................6

4.1 INCLUDE CSS FOR ALL MCS THEMES USED ON THE XDIME PAGE. 6

4.2 CANVAS SETTINGS IN THEME ...............................................................................................7

4.3 WIDTH ATTRIBUTE IN LAYOUT ............................................................................................8

4.4 IMAGE COMPONENT – MULTIPLE FORMATS ...................................................................10

4.5 IMAGE COMPONENT – ATTRIBUTES ..................................................................................11

4.6 IMAGE COMPONENT VARIANTS .........................................................................................13

4.7 GRIDS IN LAYOUT...................................................................................................................14

4.8 USING IMAGES ........................................................................................................................15

4.9 CHECK BOX ALIGNMENTS (AND OTHER FORM CONTROL ALIGNMENTS) ...............16

4.10 SPATIAL ITERATOR................................................................................................................18

4.11 USING MCS FUNCTIONAL EXPRESSIONS ..........................................................................19

4.12 USING SELECT .........................................................................................................................20

4.13 PAGE TITLE ..............................................................................................................................21

4.14 BOOKMARK ICONS FOR IPHONE.........................................................................................22

4.15 DIAL LINK – CLICK TO CALL ................................................................................................22

4.16 FIXED WIDTH TEXT INPUT ...................................................................................................23

4.17 LENGTH OF THE FORM INPUT ELEMENT ..........................................................................24

4.18 IMPORTING POLICIES ............................................................................................................26

4.18.1 USING IMPORTPOLICIES.(BAT/SH) COMMAND................................................................26

4.18.2 USING MCSIMPORT .............................................................................................................26

4.19 <nativemarkup> .....................................................................................................................27 4.20 FONT SIZE AND UNITS ...........................................................................................................27

4.21 TEXT EMPHASIS TAGS...........................................................................................................28

4.22 IMAGE LOCATION ..................................................................................................................28

4.23 GROUPING CSS/STYLES.........................................................................................................29

4.24 PROVIDE INITIAL OR DEFAULT INPUTS ............................................................................30

4.25 MARKUP OPTIMIZATION ......................................................................................................31

4.26 AVOID IMPORTING LAYOUTS/POLICIES INCOMPLETE .................................................32

4.27 MISALIGNMENT DUE TO WRONG ATTRIBUTE NAMES..................................................33

4.28 ON PAGE BOOKMARKS..........................................................................................................34

4.29 NORMAL VIEW MODE FOR MOBILE PORTAL ...................................................................36

4.30 LAYOUT FORMAT OR OTHER ATTRIBUTES......................................................................37

5. TESTING MOBILE PORTAL....................................................................................................38

5.1 TESTING CHALLENGES........................................................................38

5.2 MOBILE TESTING METHODS ................................................................................................38

5.2.1 USER AGENT SWITCHER OF PC BROWSER........................................................................38

5.2.2 DEVICE EMULATORS...........................................................................................................39 5.2.3 REAL DEVICES TESTING .....................................................................................................40 6. REFERENCE ..........................................................................................................................41




Page3 of 41

1. AUDIENCE

The best practices document is targeted for the Mobile Portal Developers using MPA. The target audience are expected to be having the knowledge of the following

� Mobile Portal Development using Mobile Portal Accelerator 6.1 & above

� IBM WebSphere Portal 6.1 and above

� Rational Software Development Platform (RAD/RSA) 7.x

� HTML/XHTML/CSS

� Basic knowledge of Mobile Web User Interface




Page4 of 41

2.OBJECTIVE

The main objective of this document is to share the best practices of using MPA in developing Mobile portal and testing the same. All the best practices are listed in this document are the result of product/solution level support of MPA (formerly WEMP – WebSphere Everyplace Mobile Por-tal)

The objective can be summarized as follows

� Consistent Mobile Portal UI across majority of devices

� Simple Methods which eliminates the UI issues

� Creating High Peformance Mobile Portal Sites

o Less Page size

o Minimum HTTP requests

� Overcoming well known issues arised from the Mobile device Browsers

This document also includes To Do’s and not to do’s in designing and developing the mobile por-tal using the MPA Toolkit (also called as Mobile Portal Toolkit)




Page5 of 41

3.SOFTWARE/TOOLS REQUIRED Listed below are the tools required for performing this best practices

� IBM Rational Application Developer or Rational Software Architect 7.5.2 (until 7.5.5)

� IBM WebSphere Portal Server 6.1.0.1 (with necessary APARs)

� IBM Mobile Portal Toolkit 6.1 (as a part of IBM MPA license)

� Mozilla Firefox browser with User Agent Switcher

� Device Emulators (described in the Testing section)




Page6 of 41

4.BEST PRACTICES

Following listed best practices involves making use of Layouts, themes, Image components in an optimal way inorder to increase the performance of the mobile portal site and consistent look and feel across all devices.

4.1 INCLUDE CSS FOR ALL MCS THEMES USED ON THE XDIME PAGE.

Some of the devices fail to render the CSS generated from the themes, so it is good to use the CSS in the form of including CSS.jsp’s or as CSS enclosed by <style> tags. This behaves as highly available styling rules for the pages generated and it ensures the good rendering on the device browsers.

Example:

For a theme selector

Add the equivalent CSS can be as follows

<style type=”text/css”>

p.styleFont {

font-family: Arial;

font-size: 12px;




Page7 of 41

font-weight: bold;

}

</style>

4.2 CANVAS SETTINGS IN THEME

Set the canvas box width to 100% for all the layouts. This setting makes sure that the rendered page covers the entire width of the device browsers. It is very effective in solving UI issues like page covering half-width of the browsers, etc.

But it is good practice to use a theme class selector for the canvas as follows

<canvas layoutName=”/test.mlyt” class=”Width100”>

. . .

</canvas>

Here ‘Width30’ is the custom style class selector created using Theme/CSS.




Page8 of 41

4.3 WIDTH ATTRIBUTE IN LAYOUT

Use the column width instead of pane width for the layout settings.

The width on grid column specifies the width of the cells in that column. The width on pane speci-fied the width of the pane in relation to the cell in which it is contained. Typically the pane should be set to 100%. Refer the following illustration attached and provided in the example scenario.

For example, in order to format the grid cells enclosing the panes A, B, C as below the settings layout settings are in the following table




Page9 of 41

Layout settings (to be set using Layout Format Attributes)

Note:

Few devices might have problem in rendering the layout with correct pane/column width. To overcome the challenge, follow the below steps

a) Add a new custom class selector to the Theme (*.mthm) component with required Box width (style properties) For instance, if column widths are 20%, 60% and 20% for the 3 panes enclosed by 1 x 3 grid in the layout settings, create a custom class selector .sample20, .sample60 with 'Box Width' under Box width 20% and 60% respectively. b) If required, enable "Align Content" option for the Spatial Iterator enclosing the appropriate pane/grid. This aligns the cells in the final device-specific markup [Optional]. c) Add the specifc theme class selector created to the appropriate panes elements in the XDIME JSP for e.g. . . . <pane name='<%="name." + i %>' class="field sample20"> <span><%= name[i] %></span> </pane> <pane name='<%="emp_id." + i %>' class="field sample60"> <span><%= empId[i] %></span> </pane> <pane name='<%="rank." + i %>' class="field sample20"> <span><%= rank[i] %></span> </pane> . . .

Even existing class selector itself can be added with box width settings, instead of creating new style class selector.




Page10 of 41

4.4 IMAGE COMPONENT – MULTIPLE FORMATS

“ALWAYS CREATE IMAGE COMPONENTS WITH MULTIPLE IMAGE FILE FORMATS”

Different devices support various image formats. For example there are mobile devices which support only GIF, few others support only PNG and certain devices support all kind of image for-mats. Image component provides a flexibility to add multiple image formats and MPA engine de-termines the suitable device format for the page requesting device.

Note: Make sure all the images formats are in available in the location referred. No implicit image format conversions are performed here in image component.




Page11 of 41

4.5 IMAGE COMPONENT – ATTRIBUTES

“1. AVOID MODIFYING THE RESOLUTION/IMAGE DIMENSIONS IN THE MIMG”

It is a good practice to use the original image dimensions of the image. Overriding or tying to scale the image causes the delay in the device browser rendering the page.

“2. AVOID MODIFYING THE IMAGE FORMAT IN THE MIMG COMPONENT”

Following screen illustrates the practice recommended.

BAD PRACTICE




Page12 of 41

RECOMMENDED PRACTICE

“3. WIDTH HINT IN GENERIC VARIANT SHOULD BE KEPT ZERO”

Width Hint is used to notify the percentage of the image to be occupied on the pane. It is al-ways a good practice to use images as original to avoid overload of conversions. This improves the speed of rendering of the page on the mobile device browser.




Page13 of 41

4.6 IMAGE COMPONENT VARIANTS

“KEEP THE IMAGE VARIANT UNDER GENERIC VARIANT CRITERIA”

Only when there is an explicit need to have a different image for a set of Targeted devices, create an image variant for targeted device groups. If there is a Targeted image variant then the MPA engine chooses the specific one first or else “GENERIC” variant.




Page14 of 41

4.7 GRIDS IN LAYOUT

“SIMPLE GRID STRUCTURE RESULTS CONSISTENT RENDERING”

Grids are essential parts of layout component for placing panes/Forms/etc. When MPA processes the layout, grids are generally converted to tables or similar markup snippets to place information for the final device based markup. So it is must to avoid unnecessary or extensive nested grids as much as possible. This eliminates the alignment issues of the mobile portal pages various range off devices.

In the following screen, the layout shows there are two grids bounding the 3 column of panes, which could cause alignment issues in many devices like iPhone.

Following is the modified version of the above layout grid structure, which largely eliminates the alignment issues on the real devices

The restructuring of the layout involves removal of one extra grid (1 Row, 1 Column).




Page15 of 41

4.8 USING IMAGES

“KEEP IMAGE SIZE SMALL”

Mobile device has limited memory capacity compared to PC so it is always good to consider im-age size small (very small is good), if the image is big it can be split accordingly. Later tiles of im-age components can be used to combine the same.

There are devices which have good memory but it is the size of the single component handled by the image is limited. For example, a mobile device can render 5 images of size 0.3KB. When a single image of 1.2KB is used in the mobile portal, the image may not be rendered at all. The reason is the size of the single component handled by the device is limited.

Note: MPA addresses this rendering this scenario efficiently; when the image size of the device cannot be handled by the device it won’t render the image tag. This is to make sure that there is final markup generated with the components which are available. Otherwise the markup might have a snippet pointing to a non-available image and results in bad look and feel.




Page16 of 41

4.9CHECK BOX ALIGNMENTS (AND OTHER FORM CONTROL ALIGNMENTS)

“USE BACKGROUNDCOLOR FOR CHECK BOX CONTROLS”

Setting the background color for the controls (like checkbox) eliminates the device specific issues. Many the real device browsers (for e.g. Nokia-5300) are not able to handle the empty style tag and throw the Unknown File Format exception.

<style type=”text/css”></style>

This can be eliminated by a setting some background color in the theme only for xfmuselect class selector. Since checkbox background won’t be visible at any case, color set as checkbox bkgnd will affect the look and feel of the page.

“CHECK BOX MIS-ALIGNMENT IN CERTAIN DEVICES”




Page17 of 41

a) When using <xfoption> in XDIME/JSP, both entryPane, a captionPane are to be included.

b) "entryPane" and "captionPane" should not be use the same Pane. (in checkbox only)

> entryPane - to pointed to the Pane where the checkbox-control( ) should be placed.

> captionPane - to be pointed to the Pane where the checkbox's caption is populated. In case if there is no caption for checkbox, caption parameter can be caption="".

If the captionPane is not specified explicitly, entryPane is used as default to populate the check-caption which results in the appearance of the <br/> tag and becomes the prime cause for mis-alignment.

Following screens show the check box mis-alignment and corrected version.




Page18 of 41

4.10 SPATIAL ITERATOR

“MINIMIZE THE USE OF SPATIAL ITERATOR”

Limited use of spatial Iterator speeds up the process of MPA processing the layouts and XDIME/JSP to generate the final device specific markup.

The following two scenarios the spatial Iterator can be used in the layout design

1. When the layout components have to be created to accommodate the dynamic data 2. When there are uniform panes repeating on the layout several times consecutively

Following layout design shows that there are 3 spatial Iterators which iterates using a single loop

This can be modified as follows (results with same effect) with ONLY ONE spatial Iterator

The above design can still be optimized by removing the outer-most grid of Row-1, Column-1




Page19 of 41

4.11 USING MCS FUNCTIONAL EXPRESSIONS

“USE MCS EXPRESSIONS TO GET THE DEVICE PROPERTIES”

Use of MCS functional expressions is the easiest ways of getting device properties, for example you can use functional expression for conditional rendering of a pane or any XDIME element.

Example:

RENDERING A PANE CONDITIONALLY

In the following example the pane “sample_pane” will be processed by MPA when the MCS ex-pression is true. Here it checks for the ‘click to dial’ support for the page requesting device. If the requesting device doesn’t support the click to dial, then the particular pane wont be processed by MPA.

<canvas layoutName="/sample_layout.mlyt" type="portlet">

<pane name="sample_pane" expr="device:getPolicyValue('dial.link.supported') = 'true'">

<phonenumber fullNumber="1234567890">Call me</phonenumber>

</pane>

</canvas>

Similar to the above example mcs functional expressions can be used for various XDIME ele-ments.

Reference:

a)http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/topic/com.volantis.mcs.eclipse.doc/wag/wag_mcs_expr.html

b)http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/topic/com.volantis.mcs.eclipse.doc/wag/wag_function_expr.html




Page20 of 41

4.12 USING SELECT

“USE SELECT EXPRESSIONS FOR CONDITIONAL RENDERING”

The best example is selecting and including the XDIME as per the properties of the requesting devices.

<select precept="matchfirst"> <when expr="number(device:getPolicyValue('pixelsx'))< 100"> <include href="XDIME_240.jsp" parse="xml"/> </when> <when expr="number(device:getPolicyValue('pixelsx'))>= 240 and num-ber(device:getPolicyValue('pixelsx'))< 480"> <include href=" XDIME_1.jsp" parse="xml"/> </when> <otherwise> <include href="XDIME_Default.jsp" parse="xml"/> </otherwise> </select>

Note: In the XDIME/JSP

Use > for > Use < for < Use >= for >= Use <= for <=

The above example can be used in getting the device attributes in utilizing different components. For example

<select precept="matchfirst"> <when expr="number(device:getPolicyValue('pixelsx')) > 100"> <img src=”/logoA.mimg” alt=”Logo” />

</when> <when expr="number(device:getPolicyValue('pixelsx')) >= 240 and num-ber(device:getPolicyValue('pixelsx'))< 480"> <img src=”/logoB.mimg” alt=”Logo” /></when> <otherwise> <img src=”/logo_default.mimg” alt=”Logo” /></otherwise> </select>

Reference:

http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/topic/com.volantis.mcs.eclipse.doc/xdime/xdime_select.html




Page21 of 41

4.13 PAGE TITLE

“ALWAYS PROVIDE PAGE TITLE FOR MOBILE PORTAL SITE”

In Mobile Portals page title can be set from the aggregator canvas and the same title will be re-flected to all the portlets.

pageTitle="Title comes here"

is the attribute to be added to the <canvas> element of the Default.jsp's of the icon, tree, pdaview of the Aggregator.

Location:

<WP_PROFILE_ROOT>\installedApps\<localhost>\wps.ear\wps.war\themes\xdime

Modify the Default.jsp of above view folders (annotated). So after modification, it looks as follows

. . .

<canvas xmlns:pipeline="http://www.volantis.com/xmlns/marlin-pipeline" layout-Name="<mwp:vpMapper name="/wp_default.mlyt" nlsSensi-tive="<%=getLocaleIsBidi(request)%>"/>" theme="<mwp:vpMapper name="/wp_styles.mthm" nlsSensitive="true"/>" pageTitle="MOBILE PORTALS-TREE VIEW" type="portal" xml:base="<%=URLUtil.getFileURLPath(pageContext)%>" <%=extendedCanvasAttrs%>>

. . .

This results in the mobile portal page with a tile “MOBILE PORTALS-TREE VIEW”

PageTitle is set for the canvas type “PORTAL”, once it is set in the aggregator canvas (which is portal type); it is universal for all the pages of that View. Following is not allowed

<canvas xmlns:pipeline="http://www.volantis.com/xmlns/marlin-pipeline" layout-Name="<mwp:vpMapper name="/wp_default.mlyt" nlsSensi-tive="<%=getLocaleIsBidi(request)%>"/>" theme="<mwp:vpMapper name="/wp_styles.mthm" nlsSensitive="true"/>" pageTitle="MOBILE PORTALS-TREE VIEW" type="portlet" >




Page22 of 41

4.14BOOKMARK ICONS FOR IPHONE

“CREATING BOOKMARK ICONS FOR IPHONE”

When an iPhone user creates a bookmark for your portal page they are given an opportunity to save that bookmark to the desktop. By default the icon used is a very small image of the web page. You can override this with your own special icon.

Create an icon that is 57 x 57 pixels and save it as a png image in your portlet. Then in the portlet enter the following code after the <canvas /> tag: (these tags are for XDIME only not XDIME2)

<nativemarkup targetLocation="html.head" expr="true()"> <link rel="apple-touch-icon" href="/wps/PA_MyDemoApp/images/Icon.png"/> </nativemarkup>

Replace the href with the URI to your icon Now when your iPhone user bookmarks that page and saves the bookmark to the desktop it will be with the icon you created.

4.15 DIAL LINK – CLICK TO CALL

One of the main objectives of the Mobile Portals involves making the user task simple, because since mobile device doesn’t have a full fledged set of features similar to PC. It is always good to leverage the device capabilities to the maximum extent to render a richer and highly interactive UI.

“USE CLICK TO CALL”

Many mobile devices browsers have the capability to CLICK to DIAL. Mobile user clicks the link which points to the number and the phone starts dialing the number instead of typing in each and every digit from the web site.

MPA offers a <phonenumber> tag which can be used in the xdime/jsp for utilizing this feature. Following is the sample XDIME to shows the use of phonenumber tag for using call invoke from the mobile pages

SAMPLE-1


<pane name="sample_pane" expr="device:getPolicyValue('dial.link.supported') = 'true'">


</pane>

</canvas>

Or




Page23 of 41

SAMPLE-2


<pane name="sample_pane">


</pane>

</canvas>

Note: Not all devices support this feature.

In SAMPLE-1, the use of MCS expressions which results in the final device markup with call-invoke capability only when the requesting device supports or else that particular pane itself won’t be rendered for final page.

4.16 FIXED WIDTH TEXT INPUT

Always use MAXLENGTH Attribute to limit the length of the user input; this minimizes the server side validation. For example the maxlength Attributes can be used for setting the number of char-acters user can input to the input element.

<xftextinput name="account_no" caption="ACCOUNT NO." captionPane="account_caption" entryPane="account_input" maxLength="12" />

The above <xftextinput> element generates a tag and renders on the device browser, where the user can input the text length which is less than or equal to 12 characters.




Page24 of 41

4.17 LENGTH OF THE FORM INPUT ELEMENT

“USE CLASS SELECTOR SETTINGS FOR FORM INPUT ELEMENT WIDTH”

- Theme Settings.

- In the theme editor select the class selector (here ".textbox")

- Choose FORM in the Style Properties

- Set the appropriate value for the COLUMN attribute ( if column value is set to '3' then the width will be 3 characters in size - refer the simulator Output)

- (optional-tip), in the same way for multi-line input in the textbox, use the ROW Setting (if row value is 10, the text box height will be of 10 characters in size, accepting multi-line input)

Below attached screens which shows the same.

1. Input box width set to 3 characters, and rendered on the BB 8800 simulator

2., Screen which shows the theme setting for Input box width




Page25 of 41




Page26 of 41

4.18 IMPORTING POLICIES

One the policies are created or modified it is always good to use appropriate commands to import the policies to the MCS JDBC database. It is recommended to import only the modified policy instead of import entire set of policies. This speeds up the import duration

In MPA, ImportPolicies command is used to import the policies into the JDBC repository.

4.18.1 USING IMPORTPOLICIES.(BAT/SH) COMMAND

Importing a specific layout

ImportPolicies.sh -project <project_name> -devicerepository /usr/IBM/devicerepo/devices.mdpr -layout new_sample_layout.mlyt -updateall -enableundo

Importing a specific theme

ImportPolicies.sh -project <project_name> -devicerepository /usr/IBM/devicerepo/devices.mdpr -theme new_sample_theme.mthm -updateall –enableundo

a. use of -updateall option overwrites the existing polices without a notice. If it is not used, every time the user is prompted with the input to overwrite or not.

b. enableundo – is used to rollback all the changes when the import activity is disrupted.

c. project is the project name under which the project is imported into the database. E.g. mobile-portal

The other way of importing the policies is using mcsImport command,

4.18.2 USING MCSIMPORT

Importing a specific layout

mcsImport -vendor oracle -host myhost.in.ibm.com -port 1521 -source mcs -user mcsadmin -password mcsadmin123 -project mobile-portal -devicerepository /usr/IBM/devicerepo/devices.mdpr -layout new_sample_layout.mlyt -updateall -enableundo

Importing a specific theme

mcsImport -vendor oracle -host myhost.in.ibm.com -port 1521 -source mcs -user mcsadmin -password mcsadmin123 -project mobile-portal -devicerepository /usr/IBM/devicerepo/devices.mdpr -theme /new_sample_theme.mthm -updateall -enableundo

It is good to use the ImportPolicies since all the DB details are configured internally while installa-tion of the MPA itself. This reduces the problem of incorrect results.

Important note: Run the setupCmdLine.sh command from the <APP_SERVER>/bin to set the JAVA_HOME before running the import policies. Make sure the database is up and running be-fore running the mcsImport or ImportPolicies command.




Page27 of 41

4.19 <nativemarkup>

“MINIMIZE THE USE OF NATIVEMARUP TAG”

Nativemarkup tag should be minimized. It is always a good practice to mimize the use of native-markup, one of the main reasons involves that the MPA doesn’t process the styles classes inside the nativemarkup results in the content on the nativemarkup tag is not styled when rendered on the device browser.

Nativemarkup can be used in the situations where we need to add some special tags (like <meta> tags) which are essential for devices like iPhone, Windows Mobile etc. So that the result-ing markup has the same tag as it is and gives a better rendering.

For example

<nativemarkup expr="true()" targetLocation="head">

<meta … />

</nativemarkup>

In the above example the <meta> tag will be placed within the “<head>” of the generated final markup.

4.20 FONT SIZE AND UNITS

“USE PIXELS or EM for FONT SIZE”

Font size can be mentioned using the Pixels or FONT size. Avoid using POINTS or percentage for the fonts always.

“ALWAYS USE VERY COMMONLY USED FONTS”

Design the styles using fonts of PC type may not be a suitable across various range of devices. For example, setting the font as “HELVITA” may be good looking on the browsers of PC and the same look cannot be expected on the device which doesn’t support that particular font.

Make sure to use very generic and commonly used fonts.




Page28 of 41

4.21 TEXT EMPHASIS TAGS

“ALWAYS AVOID EMPHASIS TAG FOR STYLING”

Use only Styling via themes/CSS for styling fonts. Since different browsers handle the emphasis tags in a different way especially in look and feel and size, it is good to style the fonts with CSS styling or with theme selectors.

Avoid the use of XDIME tags like bold <b>, italics - <e>, underline <u> …etc.

4.22 IMAGE LOCATION

Following points are to be taken into account when creating a Image component.

� Make sure the image location pointed by the MIMG component is available. � Use Forward slash for the image location (/images/logo.gif) instead of backward slash. Many

devices don’t render images correctly when the “\” is used. For example only GIF image will be rendered on some Blackberry devices when the MIMG compoenet uses image location with “/”, using forward slash solves this issue.




Page29 of 41

4.23 GROUPING CSS/STYLES

“REUSE STYLES”

CSS/Styles selectors can be used effectively when we use the inheritance of the style properties of the CSS’s. This saves the reuse of style information to maximum extent.

For instance

Example-1

.style1 {

background-color: white;

color: black;

}

.style2 {

background-color: inherit;

color: inherit;

font-weight: normal;

}

<div class="style1">

<p class="style2">

MPA Styling Best practices

</p>

</div>

The background color of the <div> element is white, because the background-color property is set to white. The background color of the paragraph is also white, because the background color property is set to inherit, and the background color of the parent element (the div) is set to white.

Example-2

.style1 {

background-color: white;

color: black;

}




Page30 of 41

.style2 {

font-weight: normal;

}

<div class="style1">

MPA Styling Best practices - 1

</div>

<div class="style1 style2">

MPA Styling Best practices – 2

</div>

In the above example we can see that the second <div> element is styled by combing both the style1, style2 together. Creating style selector generic and reuse makes the size of the theme component small and easy to maintain.




Page31 of 41

4.24 PROVIDE INITIAL OR DEFAULT INPUTS

“PROVIDE DEFAULT VALUES”

Provide default values wherever possible. XDIME provides many form elements have “initial” attribute that can be used to set the Default Value for the user input page.

4.25 MARKUP OPTIMIZATION

Markup Optimization is "to optimize complex table’s structures". It is one of the Format Attributes of the Layout and can be found on the format attributes settings panel when the layout is opened using the Layout Editor using Mobile Portal Toolkit on RAD/RSA. It is defined on the Layout defi-nition and one of the three options can be used:

* Never - it is a default option and it means that MCS will not optimize the tables

* Always - this option do optimization always when the table structure is complex

* Little impact - this option means that the markup transformation can change the appearance of that part of the layout but should avoid it as much as possible

Note: MPA takes care of creating the final markup, it is not the point that it should create <table> or use <div> tags. Optimization makes sure that the render’able markup is Optimal. Sometimes it is with <div> or other with <table>.

Important Note: Many of the Alignment and space/gap in the layout issues on the real device ren-dering can be solved with effective use of Markup Optimization.




Page32 of 41

4.26 AVOID IMPORTING LAYOUTS/POLICIES INCOMPLETE

When designing a layout, it is very important to keep the layout complete fully. Incomplete ele-ments may not cause problems while using the xml-repository (or devices.mdpr as archive). This will cause problem when the layout (or other policies) is imported to the MCS JDBC repository.

Following is a sample which illustrates the same.

In general, the below mentioned exception shows that the problem is with the grid layout in the one of the MLYT files used to import.

The import has failed. java.lang.ArrayIndexOutOfBoundsException: 1 at com.volantis.mcs.layouts.Grid.createSubComponent(Grid.java:359) at com.volantis.mcs.accessors.LayoutBuilder.createSubComponent(LayoutBuilder.java:196) at com.volantis.mcs.accessors.xml.jdom.XMLDeviceLayoutAccessor.readSubComponent(XMLDeviceLayoutAccessor.java:683) at com.volantis.mcs.accessors.xml.jdom.XMLDeviceLayoutAccessor.readSubComponents(XMLDeviceLayoutAccessor.java:640)

. . .

ArrayIndexOutOfBoundException: 1 in the exception shows that there is a layout which uses the grid in a wrong way (esp. a gridLayout which has the number of rows="1")

Following screen-shot from the Layout Editor (on MPTK), shows that layout has a grid which is empty as shown below. Either the developer has to use a pane to fill the grid cell or remove the 1 x 2 Grid and add a pane to the row.

IMPORTANT NOTE: It is advised to check the similar kind of incomplete layouts in all the layouts.




Page33 of 41

4.27 MISALIGNMENT DUE TO WRONG ATTRIBUTE NAMES

Sometimes typos could result in the misalignment of the UI elements. So it has to be checked properly if there is any error in providing the pane names as attributes. Following is a common scenario observed in many support situations.

The misalignment of xform elements is due to the use of invalid attribute called entryPanel in-stead of entryPane in the <xftextinput> tag.

<xftextinput

name="<portlet:encodeNamespace value='a' />"

caption="Required? "

captionPane="c.0"

entryPanel="e.0"

initial=""

validate="N:#####"

maxlength="5"

/>

<xftextinput

name="<portlet:encodeNamespace value='b' />"

caption="Optional? "

captionPane="c.1"

entryPanel="e.1"

initial=""

/>

After changing the 'entryPanel' to 'entryPane' in the XDIME/JSP, the alignment of the xform ele-ments are proper, find below the screen shot of the test-output.




Page34 of 41

4.28 ON PAGE BOOKMARKS

“USE PER PAGE BOOKMARKS TO MOVE TO THE PARTICULAR PAGE SECTION”

Use of sections and bookmarks takes the user directly to the particular section of the mobile por-tal page. This reduces the vertical scroll especially on the pages where the data on the page is very large.

This feature is can be implemented with the similar convention as that of the regular XHTML or HTML markup we use. Here is the sample code attached.

Sample Snippet:

<pane name="intro">

<h1>Introduction</h1>

<a href="#S4">Jump to Section 4.</a> <br/>

<a href="#S7">Jump to Section 7.</a><br/>

. . .

<h2>Section 2</h2>

<p>This Section explains ba bla bla</p>

<h2>Section 3</h2>


<h2 id="S4">Section 4</h2>


<h2>Section 5</h2>


<h2>Section 6</h2>


. . .

</pane>

Note: Here we can see that XDIME is very closely associated with the conventaionl (X)HTML notations. XDIME tags share tags with XHTML and other markups. This can be verified from the MPA Infocenter's XDIME Reference Section

Screen shots




Page35 of 41

Click on the Link "Jump to Section 4" in the above page renders following




Page36 of 41

4.29NORMAL VIEW MODE FOR MOBILE PORTAL

For normal mode view of the mobile portlets, following settings can be used

STEPS

1. Stop the Portal Server

2. Edit the mwp.properties located in the <WP_PROFILE_ROOT>\PortalServer\wp.mobile\wp.mobile.mwp\shared\app\config direc-tory

#****************************************************************

# Portlet Nomal Mode Properties

#****************************************************************

# Specifies the default mode for portlets (normal/maximized)

mwp.portlet.default.mode=maximized

# Enables a horizontal rule between normal mode portlets and navigation (true/false)

mwp.portlet.normal.mode.hr.enable=true

# Enables the use of normal mode portlets in the standard tree view (true/false)

mwp.tree.normal.mode.enable=true

# Enables the use of normal mode portlets in the wml tree view (true/false)

mwp.tree.wml.normal.mode.enable=true

# Enables the use of normal mode portlets in the pagination tree view (true/false)

mwp.tree.pagination.normal.mode.enable=true

# Enables the use of normal mode portlets in the icon view (true/false)

mwp.icon.normal.mode.enable=true

# Enables the use of normal mode portlets in the pda view (true/false)

mwp.pda.normal.mode.enable=true

#****************************************************************

Note: make sure the above settings are replicated in your environment. RED color shows the changed values (from 'false' (default) ---> ‘true’)

This setting won’t affect the regular Maximized mode rendering capabilities.




Page37 of 41

3. Restart the Portal Server

4. Add a portal Page XDIME enabled with 3-4 mobile portlets

5. Enable the portlets' rendering mode as NORMAL MODE

4.30 LAYOUT FORMAT OR OTHER ATTRIBUTES

“ALWAYS USE NON-NEGATIVE VALUES FOR THE ATTRIBUTES”

When there is a mis-alignment in the UI elements it is always a practice for the Web developers to use negative values for the attributes, especially the border width, margin values are set to negative. This is not recommended in case of mobile portals because in the target browsers not one or two. It is approximately equal to number of devices in the market. Use of negative values might solve problem on one device and cause adverse effects in others.

Following CSS style or similar theme setting has to be “avoided”.

.c {background:#ff8040;font:8pt 'Verdana','Arial','Helvetica',sans-serif;margin:5px -2px -7px 9px}




Page38 of 41

5. TESTING MOBILE PORTAL Testing is a mobile portal page is one of the challenging tasks after designing the pages. Since it is very important to keep the consistant look and feel (with well rendered User interface), the pages have to be tested thoroughly. Following are the objectives for testing the mobile portal UI.

� Functionality

� Ease of Page Navigation & Interactiveness

� Ease of User Input

� Consistent look and feel across devices

5.1 TESTING CHALLENGES

It is not a simple task to maintain the consistency in look and feel of the page across all the de-vices.

Following are the obvious reasons

1. There are thousands of devices available in the mobile device market

2. Hundred of browsers variants (incl their versions).

3. Every day new images with different capabilities are released in the market.

These challenges not only make the developer/designer of the mobile portal pages job difficult, but also the testers. Following are the interesting ways which can be used to manage these diffi-culties arised out of the above chalellenges

5.2 MOBILE TESTING METHODS

5.2.1USER AGENT SWITCHER OF PC BROWSER

PC based Browsers like Mozilla Firefox, Apple Safari offers the user to configure the userAgent of the any type. By setting the required user-agent the mobile portal pages can be tested easily. Below listed testing can be performed

� Functional Flow

� Page Navigation Flow

� Rendering styles, Look and Feel (although look and feel can be tested using the useragent switching options, only relying on this option might cause the problem of look and feel when the pages are rendered on real devices).

Note: Approximately correlation of test output of testing the pages on UserAgent switchers with real device can be around 65 - 70%.

MOZILLA FIREFOX – USER AGENT SWITCHER PLUGIN - Widely used for Mobile portal test-ing.

https://addons.mozilla.org/da/firefox/addon/59?lang=en-US




Page39 of 41

APPLE SAFARI – This is not used widely, but it is very effective in emulating the features of the iPod Touch or iPhone UI. So it is a good idea to use this browser to test the iPhone rendering.

http://www.apple.com/safari/download/

5.2.2 DEVICE EMULATORS

Device Emulator are the second best choice for testing the developed Mobile portal pages. In general device emulators released from the device manufacturers (E.g. RIM’s Blackberry simula-tors, Nokia SDKs …) offer as a very high similarity in the UI rendering to real devices.

It is to be noted that not all devices have simulators/emulators, but relying on the emulators are worth very much. Randomly testing on different class of device emulators ensures the consistant page rendering on wide range of devices.

Following are the list of emulators that are free to use.

NOKIA DEVICE EMULATORS

Nokia S60 Emulator/SDK - 5th Edition or N97 version - http://www.forum.nokia.com/info/sw.nokia.com/id/6e772b17-604b-4081-999c-31f1f0dc2dbb/S60_Platform_SDKs_for_Symbian_OS_for_Java.html

Nokia S40 Emulator/SDK - http://www.forum.nokia.com/info/sw.nokia.com/id/cc48f9a1-f5cf-447b-bdba-c4d41b3d05ce/Series_40_Platform_SDKs.html

BLACKBERRY DEVICE EMULATORS

Contains emulators for all BB devices seperatly (**Sign in required to download)

https://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477

ANDROID EMULATOR

http://developer.android.com/sdk/index.html

PHONEGAP SIMULATOR

Emulates High end devices like Android, iPhone, Palm Pre

http://phonegap.com/download

WINDOWS MOBILE EMULATOR

Windows Mobile 6

http://www.microsoft.com/downloads/details.aspx?FamilyID=06111A3A-A651-4745-88EF-3D48091A390B&displaylang=en

Windows Mobile 5




Page40 of 41

http://www.microsoft.com/downloads/details.aspx?familyid=83A52AF2-F524-4EC5-9155-717CBE5D25ED&displaylang=en

5.2.3 REAL DEVICES TESTING

Ofcourse real device testing is very important to ensure that the pages are perfect. Since it is dif-ficult to test on all the real devices, selected real devices covering various ranges of devices can be used for testing the page output.

Note: make sure all the real devices are of different types. For example testing can be done with various criteria

� High end/ Mid Range or Lowend

� Browsers

� Operating Systems

� Memory Capacity

� Screen size …

Testing with "BOTH" emulators and Real devices promises the best mobile page for the actual system.




Page41 of 41

6. REFERENCE

1. IBM Mobile Portal Accelerator Information center - http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/index.jsp

2. IBM Mobile Portal Accelerator Wiki - http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Mobile%20Portal%20Accelerator

3. W3C Mobile Web Initiative – Mobile Web Best practices - http://www.w3.org/2005/MWI/BPMG

----------- End of Document ---------------

Documents

IBM MPA Best Practices - Lotus