Introduction

WebSphere Everyplace Mobile Portal extends WebSphere Portal software with technology to meet the requirements of mobile and wireless service providers. With Mobile Portal, you can develop content independent specific devices using a special markup called XDIME (XML Device Independent Markup Extension). This enables you to create content or services once, and present them on many different devices without any additional rework.

Most of the time, the default themes and styles provided by the XDIME aggregator are sufficient. But you can also create custom themes to apply to mobile portlets.

This article assumes you have completed Develop Mobile Portlets with WebSphere Everyplace Mobile Portal -- Part 1: Create an interactive XDIME portlet.

The sample portal we'll create consists of two text fields and a Submit button as shown in Figure 1. We'll apply a custom color to the body of the screen. This is the final output after completing the steps in this article.

Before you begin, complete the steps in Part 1 to set up the environment and create XDIME resources.

Back to top

Create a custom theme

To create a custom theme to apply styles to the portlet you created in Part 1, complete the following steps:

1. Right-click mcs-policies and select New => Other, and then MCS => Theme, then click Next.:
   
   Figure 2. Create theme dialog
   
   
2. Enter the theme name myTheme and click Next.
3. In the New Device Theme window, select Mobile as shown in Figure 3.
   
   Figure 3. New device theme dialog
   
   
4. Click Finish. The myTheme.mthm file is opened in the design mode.
5. Select Mobile as shown in Figure 8 and switch to the design mode by clicking on the Design tab.
   
   Figure 4. Click Design tab
   
   
6. In the Selectors section, click New.
7. Select xfform in the Element field. Click Add, then Finish.
8. Repeat steps 6 and 7 for the element xftextinput. You should see a screen that looks like this:
   
   Figure 5. Design for Mobile
   
   
9. Now click xfform, then select Background in the Style Properties section.
10. Select the color for the background as shown in Figure 6.
    
    Figure 6. Selectors and Style Properties
    
    
11. Now click xftextinput in the Selectors section, then select Font in the Style Properties section.
12. Select italic for the style.

Edit the XDIME JSP

Now that we've created a layout and a custom theme, we need to apply the layout and theme to the display.

1. With the source editor, open the MobileLoginPortletView.jsp in the WebContent/mobilelogin/jsp/xdime folder of the project.
2. Using the source editor, open the JSP file in the WebContent/<project_name>/jsp/xdime folder of the project, where <project_name> is the name of the portlet project.
3. Edit the code as shown below:

   <%-- keep JSP page compiler from generating code that accesses the session --%> <%@ page session="false" contentType="text/xml; charset=ISO-8859-1" %> <!-- load WPS portlet tag library and initialize objects --> <%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %> <portletAPI:init /> <%-- Create a layout policy for your portlet. Specify the layout name as the value for the layoutName attribute of the canvas element below. --%> <canvas layoutName="/login.mlyt" type="portlet" theme="/myTheme.mthm"> <xfform name="loginForm" action="<portletAPI:createReturnURI> <portletAPI:URIAction name='Submit'/> </portletAPI:createReturnURI>" method="post"> <xftextinput name="userId" type="text" caption="User ID : " captionPane="useridPane" entryPane="useridPane" initial=""/><br/> <xftextinput name="password" type="password" caption="Password : " captionPane="passwordPane" entryPane="passwordPane" initial=""/><br/> <xfaction name="Submit" type="submit" caption="Submit" captionPane="submitPane" entryPane="submitPane"/> </xfform> </canvas>

   
   Note that we've used the following XDIME elements in the code:

   Table 1. XDIME elements

   XDIME Element	Equivalent HTML Element	Description
   <xfform>	<form>	The form in the page
   <xftextinput type="text"t>	<input type="ttext"t>	Text field
   <br/>	<br>	Line break
   <xfaction>	<input type="submit">	Action button

   For more information on XDIME elements, see Resources .

   You can also see that the different elements are assigned to the different panes in the login layout, which is referred to in the <canvas> tag in the code.

Back to top

Test the application

Now that we've completed the required configuration and development, let's test the application. We'll test the application using the Firefox browser with an appropriate User Agent enabled.

To test the XDIME portlet, complete the following steps:

1. Create a test server for WebSphere Portal and configure it for the portlet project.
2. Start the test server.
3. Open the Firefox browser.
4. Select a user agent by selecting Tools => User Agent Switcher.
5. Access the portal from http://<host>:<port>/wps/myportal, where <host> is the IP or name of the machine and the <port> is the port at which the test server is configured.
6. Figure 7 shows the Log-in window of the portal with the user agent Sanyo enabled.
   
   Figure 7. Portal Log-in
   
   
7. Log in with a valid Portal user ID.
8. You should see something like Figure 8.
   
   Figure 8. Select portlet
   
   
9. Click MobileTheme portlet. You should see a screen like that shown in Figure 9.
   
   Figure 9. Portlet log-in
   
   You can see that the background color of the form and the font style of the text fields are applied as we defined them in the custom theme.
   

   We've now successfully applied custom syles to our mobile portlet!

Back to top

Summary

In this article, you have created and tested a custom theme for the portlet you created in Part 1, including editing the JSP to define the custom layout and custom theme.

Resources

Learn

• Develop Mobile Portlets with WebSphere Everyplace Mobile Portal -- Part 1: Create an interactive XDIME portlet
  
  
• Overview of wireless technologies
  
  
• Product documentation on Multi-Channel Server and Layouts
  
  
• XDIME Element Reference
  
  
• WebSphere Everyplace Service Delivery product documentation
  
  
• WebSphere Everyplace Mobile Portal -- Part 2: Developing a Mobile Portal Enabled XDIME Portlet
  
  

Get products and technologies

• Wireless with WebSphere zone
  
  
• IBM home page
  
  
• IBM developerWorks
  
  

About the author

Mohan K Jadhav is a Software Engineer in IBM India Software Labs, Bangalore. He is currently working on Java™ middleware and server-side technologies.

Rate this article

Comments

Back to top

Table of contents

• Introduction
• Create a custom theme
• Test the application
• Summary
• Resources
• About the author
• Comments

Next steps from IBM

• Try: WebSphere Portal Express
• Briefing: WebSphere flexible business processes
• Buy: WebSphere Portal Express

Dig deeper into WebSphere on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers