IBM Mobile Portal Accelerator Enablement

Transcription

1 IBM Mobile Portal Accelerator Enablement Hands-on Lab Exercise on XDIME Portlet Development Prepared by Kiran J Rao IBM MPA Development kiran.rao@in.ibm.com Jaye Fitzgerald IBM MPA Development jaye@us.ibm.com

2 IBM Mobile Portal Accelerator - XDIME Portlet Development Lab This lab uses a sample portlet to demonstrate the creation, development and deployment of mobile portlets within Rational Application Developer (RAD). Pre-Requisites: Rational Application Developer WebSphere Portal installed at C:\IBM\WebSphere Mobile Portal Toolkit installed at C:\IBM\MPTK Creating a new Workspace: This step is optional but recommended so that you have clean distinction between workspaces of various projects. 1. Start Rational Application Developer. 2. In the Workspace Launcher Dialog, click Browse and create a new workspace. For example, c:\mpa_lab 3. Click Ok from the Directory Chooser and Ok again from Workspace Launcher. You now have a new workspace for this Lab. Creating a new Project: 1. Click File New Project Portlet Project. Note: If you get a dialog box about enabling capabilities, select Yes. (Figure 1) 2

3 Figure 1 2. Type XDIMELab in the Name field, set Target Runtime to WebSphere Portal 6.1, Portlet API to JSR 286 Portlet and Portlet Type to Mobile Portlet and click Next. (Figure 2) 3

4 Figure 2 3. Accept the default settings in the Portlet Settings Dialog and click Finish. (Figure 3) 4

5 Figure 3 A new project named XDIMELab has been created. You can explore the folder structure in the Project Explorer or Project Navigator views. 5

6 Project Hierarchy: Note that a new Portlet has been created in the com.ibm.xdimelab package in the Java Resources : src directory. This portlet has been named XDIMELabPortlet.java. Also note the WebContent folder. The sub-folders of interest in this folder are mcspolicies and _XDIMELab There are 2 folders within _XDIMELab/jsp, namely, html and xdime. Note that these 2 folders contain JSP files with the same names. When the Portal server gets a request from a PC browser, the JSP in the html folder is rendered. On the other hand, if the request is from a mobile device which has been configure for XDIME, then the JSP in the xdime folder is rendered. The mcs-policies will hold the device-dependent aspects of your mobile portal, e.g., the various policies like layouts, themes, components and assets etc. A sample layout has been created by RAD. Creating the Layout policies: 1. Delete the sample_layout.mlyt file from mcs-policies folder. 2. Right-click on mcs-policies and click New Other MCS Layout. Enter the name as FormLayout. Ensure that the parent folder is XDIMELab/WebContent/mcspolicies. Click Next. 3. If you are asked for the device repository file, choose C:\IBM\MPTK \DeviceRepository\devices.mdpr and click Finish. 4. In the Overview tab of the Layout Editor, select New. Ensure that Device Layout Type is Canvas. Under Selection Criteria, select Default and click Finish. 5. Now switch to the Design Tab. You will see an empty canvas. Right click anywhere on this and select Add Grid 3 Rows. (Layout elements can also be added by right clicking on the appropriate parent element in the Outline view). 6. In the top empty Row, right click and select Add Grid N by M. Enter 2 for rows and 1 for columns. 7. Of these newly created rows, right click the top row and select Add Pane Pane. Name this pane as pane_image (this is done in the Format Attributes View). Similarly create a pane in the second newly created row and name it pane_header. At his stage, your layout editor should look somewhat similar to the screenshot C:\Labs \DynMenuLabMaterial\screenshot1.jpg. 6

7 8. Continue as above and create layout elements as follows: a. In the Row 2 Column 1, add a Form and name it form_elem. b. Within this Form, add a grid of 2 rows and 1 column. c. Add a pane in both these rows, the top one should be named pane_textfield, the bottom one pane_button. d. Add a pane to the bottom-most empty row and name it pane_result. 9. Similar to this, you have to now create a layout variant for Tablet devices. a. Switch to Overview tab and click New. Select Targeted and click Next. b. In the Device List tab, Type Tablet in the filter text box c. Check the check-box against Tablet and click Finish. 10. Create form elements for Tablet as shown in C:\Labs\DynMenuLabMaterial \Screenshot2.jpg. a. Save and close the.mlyt file. You have now created the layout policy. Note that the pane names and form names are exactly the same in the canvas for Default and for Tablet. This is the key to writing device independent XDIME markup. Creating Image policies: 1. Right click on WebContent and create a new Folder named images. 2. Copy the 3 image files (Redbooks.gif, Redbooks.jpg, and Redbooks.wbmp) from the images folder supplied with this lab into this newly created folder. 3. Right click on mcs-policies and select New Other MCS Image Component. 4. Name it samplimg and click Finish. 5. In the Assets section, click New. Supply the images folder that you created in step 1 as the Image root path. Select all 3 images that are listed and click Finish. 6. You will now see 3 assets in the Assets section. In the asset Value section, prefix / images/ to the Value field for all 3 assets. 7. Select the GIF image. In Variant Selection Criteria, select Targeted, then the Browse button. (Figure 4) Click on the Device Tree tab, expand the tree and check the box next to Mobile. Click OK. 7

8 Figure 4 8. Select the JPG image. In Variant Selection Criteria, select Generic, and give Width Hint as Select the WBMP image. In Variant Selection Criteria, select Targeted, then the Browse button. (Figure 4) Click on the Device Tree tab, expand the tree and check the box next to WAP_Handset. Click OK. 10. Save and close. 11. Figure 5 shows the images in the samplimg.mimg policy. 8

9 Figure 5 Writing the XDIME JSP: Replace the content of the JSP file in the WebContent/_XDIMELab/jsp/xdime folder with contents of snippet1.txt. Notice the tags used in the XDIME JSP. These refer to layout elements which we created in the FormLayout.mlyt file. Depending on the device which has requested the page, the same layout element would appear in different positions on the screen. For example, for tablet devices (like iphone), the image will be to the right of the header text (pane_header), at the top of the page. For other devices, the image will be displayed on the first row on the top of the screen (pane_image). Similarly, notice the way images are referred to. The code just refers to samplimg.mimg. Depending on the device, the suitable concrete image will be rendered. Writing the HTML JSP: The HTML page designer can be used to create HTML pages. By default, when you create the portlet, RAD creates a sample form for you in the HTML version of the JSP. You can view this HTML code by opening the XDIMELabPortletView.jsp in the WebContent/ _XDIMELab/jsp/html folder. 9

10 Running the Project: Clean and build the project and ensure that there are no errors. Please note you may have warnings because the XDIME tags are not recognized by the JSP Validator. Ignore the warnings related to XDIME tags. Now right click on the project and select Run Run on Server. If a Server configuration has not been defined, then RAD will ask you to create one. If you are asked to create a Server configuration, choose WebSphere Portal v 6.1. The internal browser will be launched and since this is a PC browser, the HTML should be rendered. Now, using any of the simulators/emulators, open the URL :9081/wps/myportal. You will be able to see the differences in the way the portal is rendered. 10