IBM Mobile Portal Accelerator Mobile Portal Optimization Approach & Techniques Version 0.3 KRISHNA C KUMAR, PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE
HIGH LEVEL APPROACH Identify the screens for different device categories 3 Different variants of UI created for different categories of devices Create a Global Styles (to be included in most of the pages portlets). This is NOT THEME File Identify styles that should go into <nativemarkup> for <nativemarkup> wrapped code Identify generic global styles as CSS Create ViewPort.jsp for including in the portlet JSPs for devices which supports viewports (This is needs to be included at the Aggregator JSP Level) Modify/Create MCS Artifacts Add/Modify Portlet JSPs/java Classes [Avoid any device/model specific Conditions ] Modify Default XDIME Aggregator JSPs/Themes
GLOBAL STYLES
Creating Global Styles - I 1. In what format the Global Styles to be created? JSP format as Style/CSS.jsp, which can be included in the required portlet jsp pages 2. Why globalstyles.jsp to be used instead of Global Theme based on MCS Themes? By default, WEMP has global themes which comes out of box with XDIME Aggregator as wp_styles.mthm wp_styles.mthm takes care of rendering Aggregator related themes/styles Every XDIME/JSP or the canvas can be styled using a single mcs theme file (*.mthm file) In case if we place all the styles configured globally in a single theme, it is not be possible add local themes (themes for minor changes which is specific for a particular page) as a layout canvas element of XDIME cannot have more than one theme file. 3. Where this should be included? To be included within Common.jsp or default.jsp of the XDIME Aggregator 4. Contents of the Global Styles? <style type= text/css >.. </style> With CSS Styles with ID Selectors and Class Selectors Identified common styles across all pages
Creating Global Style - II 6. Global Styles & Nativemarkup? It is a good practice to include Nativemarkup rendering as a separate JSP, say nativecss.jsp and include 7. Types of Contents of nativecss.jsp <nativemarkup targetlocation= html.head expr= true() ><style type= text/css >..</style></nativemarkup> <nativemarkup targetlocation= html.head expr= device:getpolicyvalue( layoutengine ) = Webkit ><style type= text/css >..</style></nativemarkup> Use Correct MCS expressions in the expr attribute of nativemarkup element, this will save the page from unneccssary CSS rendering from nativemarkup on the final markup on the device 8. Global Styles Fonts Set the font properties globally in the style jsp and include the same in the required pages. Say body{ font-family: RonniaBasicLight; font-size:110% } Set the font-size as body selector e.g. body{ font-size: 100% }, this will ensure all the font-size globally is the default browser font size rendering. Locally these font-size can be handled when there is a reduction in size or increase in font size Any variations over the font style or settings needs to be handled locally in theme files for the specific XDIME/JSPs
Creating Global Style - III 9. Global Styles Colors & Background Colors Maximum used Colors, Font colors, background colors, background images (both image components or images) needs to be added to the Global Styles jsp Examples : Grey and White background, Green backgrounds, Maximum used Font colors, Heading Text Color, Button Styling, Form controls, etc. 10. Identify the common styling across all pages and create Global Styles jsp and for elements which occurs every page uniformly. Say button styled red on all pages Sample globalstyles.jsp <style type= text/css > body{margin:0;padding:0;font-family:ronniabasiclight,sans-serif; font-size:100% }.stylered{color:red;}.black{color:#000000;}.white{color:#ffffff;}.blue{ color:#000000;}.grey{ background:grey;}.white{background:#ffffff;}.itembkgroundg{}.itembkgroundw{}.buttongrey{} #numvalidate{-wap-input-required:true;-wap-input-format:nnnnnnnnnn;} adimage{ width:100%; display:block } podimage{ width:100%; display:block }.inputboxstyle{ }.marqueestyle{ } </style>
Creating Global Style - IV 11. Conditional handling of Global Styles for variants Using globalstyles_240px.jsp, Using globalstyles_320px.jsp Using global styles conditionally w.r.t to device screen size can be an example to handle well coarse grained styling for different styling variants Sample nativeglobalstyles.jsp /*here <nativemarkup> comes within the XDIME JSP */ <style type= text/css > table{border-collapse:collapse;} </style> Sample nativeglobalstyles.jsp OR <nativemarkup expr= true() targetlocation= html.head > <style type= text/css > table{border-collapse:collapse;} </style> </nativemarkup> <nativemarkup expr= device:getpolicyvalue( pixelsx ) >= 240 targetlocation= html.head > <style type= text/css > table{border-collapse:collapse;} </style> </nativemarkup>
VIEWPORTS
Considering Viewports - I 1. What is viewport.jsp? For information on what is viewport, refer Apple Documentation (http://developer.apple.com/library/ios/#documentation/appleapplications/refer ence/safariwebcontent/usingtheviewport/usingtheviewport.html) Similar to global themes inclusion as JSP, viewports needs to be included in the Aggregator level JSPs This exists for only highend devices only It is a simple meta tag element with viewport configured. Different vendors follow different view port standards. So kindly refer vendor specific sites. Following are the vendors uses viewport for rendering/controlling the rendering on their high resolution devices Include viewport conditionally for All Apple products, Windows Mobile 5, 6, Windows Phone OS 7/7.5, Blackberry, Android Device specific configuration is unavoidable as viewport is proprietary Certain level of generalization can be performed using mcs-functional expressions effectively 2. Where should we use viewport.jsp? Aggregator level (include as JSP based on conditions using mcs-expressions) 3. Is this must to use? YES. Mandatory 4. What if viewport settings are not used? Pages will look inappropriate to the size of the screen and rendering will look small
Considering Viewports - II 5. How should we include viewports? 5. Include viewports using nativemarkup and mcs-expressions 6. Example Code Viewports.jsp <nativemarkup targetlocation= html.head expr= device:isinstanceof( Apple ) > <meta name= viewport width= device-width /> </nativemarkup> <nativemarkup targetlocation= html.head expr= device:isinstanceof( RIM-OS ) > <meta name= viewport width= device-width; user-scalable= no /> </nativemarkup> <nativemarkup targetlocation= html.head expr= device:isinstanceof( Windows PhoneOS 7.5 ) > <meta name= viewport width= device-width; user-scalable= no /> </nativemarkup> 7. This file can be modified if there is any new viewport setting is recommended by device manufacturers.
LAYOUTS
Creating Layouts - I 1. Can we use global layouts? NO, It is not possible 2. Points to be remembered while creating layouts Create layouts without empty grids Avoid using unnecessary nested grids (for e.g. using 1 X 1 Grid for adding a pane) Use style classes required for grid/panes in Format Attributes Avoid Variants of layouts (unless required) Create generic variants with default variant For different class of UI different layout can be created. Say homepagesimple.mlyt, homepagemedium.mlyt, homepagecomplex.mlyt for simple, medium and complex page variants of a home page respectively Conditionally use the layouts in the portlet jsp as follows <canvas layoutname= <%= layoutname %> type= portlet > </canvas> Identify common patterns and use it as layouts and its contents. This will reduce the size of the layouts Make sure column width is set correctly for the grids Try to avoid not include static panes within Form of the layout Do not use any Spacer panes
Creating Layouts - II 3. Using Spatial Iterators Row-wise or column-wise iteration should be handled using spatial iterator settings instead of separate panes with two iterations Use :odd & :even pseudo class selectors for alternate row styling (background, fonts, foreground etc.) 4. Using regions Use of regions in layouts enables reuse of layout. Identify common patterns and use regions to plugin the layout patterns on the pages Do not use too much of regions. Use regions if the layout pattern is quite big, for small patterns like 1 or 2 panes do not use regions, instead of reducing complexity it increases meaninglessly 5. Customizing Aggregator Layouts Optimize the aggregator layouts By default the aggregator layouts have spatial iterators in the header for displaying multiple levels of headers. In case if the implementation doesn t need multiple headers remove the same. Maintain Single Variant (or single set of layouts) for Aggregator Layouts, as the aggregator generally renders a logo in header and footer with some default text on all pages
MCS THEMES FOR PORTLETS
Using Local Themes 1. What are local themes? Themes added to the portlet JSP in the canvas element for theme= attribute is termed as local theme Local theme affects only the particular canvas on the specific XDIME/JSP only A single theme file can be reused on multiple JSP canvas 2. Scenarios where local themes has to be used? In general, restrict all styling to the global themes/css If there is a specific change only for a particular page, then use the local mcs theme for incorporating the changes Example: If the overall font family to be displayed is Arial, and for a particular page, specifically for a heading if the font-family has to Verdana create a class selector in the local theme and add the font-family as verdana and use the same in the JSP. In this case, that particular heading will be styled with font-family from the local theme/css, since local theme has more preference than global A single theme file can be reused on multiple JSP canvas 3. Any alternate to local themes? <style> elements with or without <nativemarkup> can be included in any XDIME page When using <nativemarkup> make sure the rendering is not going to happen for all pages unnecessarily, i.e. use right conditions- otherwise whether the styles will be used or not it will be rendered on to the final device specific markup and increases the page size unnecessarily
IMAGE COMPONENTS
Creating Image Components - II 1. How to create image components? Since different screen sizes are capable of rendering different image sizes, it is recommended to create image components generic for different sizes For example, logo_240.mimg, logo_320.mimg This needs to be conditionally handled based on the screen usable width from the device repo (similar to handling layouts) Every image component should be created with image pointed to generic variant 2. Points to be noted in creating image components? Add alt= attribute with suitable text, if there is no text required at least empty string for the alt attribute in the <img> xdime tag should be used (MANDATORY) Use forward slash (/images/test.jpg) to point the images in the image component, by default it adds with backward slash Make sure the image file is browsed and located for image component. This will avoid wrong format/dimensions/etc. In every image component, use generic variant for 3 types of image formats to suit all devices (png, jpg, gif) MPA will choose the best image for the device runtime 3. Don'ts in creating image components 1. Do not edit image components with text editor use always GUI editor 2. Do not use variants 3. Do not use backward slash to point to the image file 4. Do not manually change the file format listed in the image component after pointing to the image 5. Do not change the file extension of image and set it as a different file format
Creating Image Components - II 4. Using images (without image components) When using images directly from a remote server, creating image component may not be applicable. So use <img> with url attribute instead of src Use alt attribute When the remote server image is static and fixed (which is not going to change at all) image components can be used with settings as image Location set to Remote Server or URL Context locate the same in the Image component editor
Some Important Tips 1. For Tables 1. In general, unlike PC in mobile web, the table border is not much used because of size restrictions. So always use border-collapse style for table with CSS selector 2. <nativemarkup> can be used to render the border-collapse on all the pages (set this in nativeglobalstyles.jsp once. 3. Do not set this in local themes/css 4. Important While using Tables with percentage, old nokia devices rendering is not perfect because of XHTML MP handled by nokia browsers in a mysterious way. So try to use % for low end device when required (say device usable Width less than 240px) 2. Image within Table 1. Do not use any text-align property for images as it will cause gaps above and below images on certain devices 2. Use img { display:block } to avoid white spaces above and below images when used within tables td element 3. Dynamic Style parameters 1. Use <style> element for dynamic style parameters 2. Say if you want to pass percentage dynamically use as follows <style type= text/css > div.header{ height:<%= headerheight %>px }</style>
Thank You