Overview of MDAT

MDAT is part of the IBM® WebSphere® Everyplace® Toolkit. It consists of tools to create portlets or Web applications that are accessible from various target mobile devices. The Everyplace Toolkit is a plug-in to Rational® Application Developer V6.

There are over 200 different types of mobile devices, which creates a real challenge for developers trying to develop applications for multiple mobile devices. MDAT is a visual tool that helps developers design and develop a server-based mobile application in a generalized fashion. The application generated by MDAT is implemented as either a portlet or Web application depending on the developer's preference. MDAT allows the developer to design the application once and generate the code necessary to render the requested content on selected target devices. MDAT uses standards-based device profiles that provide the specific device characteristics essential to generating the code for the target devices. Each device profile contains information such as the device markup, the supported browser, and hardware characteristics, including the device color or image capabilities.

Back to top

Use MDAT to Build a Mobile Application

In this exercise, we'll use MDAT to visually create a simple application. The application starts with a log-in view requesting the user enter a user ID and password. Next, the user is presented with a list of gizmos to select from. Once the user selects a gizmo, the details of the selected item are displayed. We'll perform the following activities to create and deploy the application:

1. Create an MDAT Web project to contain the application components.
2. Develop the generic application consisting of the views (user interfaces) and the links between the views, defining the application flow.
3. Generate the application code and customize the application for the selected target devices.
4. Test the application using the WebSphere Test Environment by accessing it from Internet Explorer and a Palm simulator.

Back to top

Create the Web Project

To create a project to contain your MDAT application artifacts complete the following steps:

1. Start Rational Application Developer by selecting Programs => IBM Rational => IBM Rational Application Developer V6.0 => Rational Application Developer.
2. From the workbench menu bar, select File => New => Project.
3. The New Project wizard opens. Expand the Web directory and select Multi-Device Web Project. Click Next.
   
   
   Figure 1. New project
   
   
   
4. From the New Multi-Device Project page, enter GizmoInfo for the Project name and use the default project location.
5. For the first MDAT application, click Show Advanced to verify and access the default selections. Click Next.
6. On the Multi-Device Project Details page, select the devices targeted by this application, as follows:
   1. Expand the Palm entry, select Palm Tungsten C and click Add.
   2. Expand the Microsoft entry, select Microsoft Internet Explorer and click Add.
   3. Click Finish.
      
      Figure 2. Select Multi-Device Project Details
      
      
      The devices are now added to the Selected Target Devices list.
7. On the Confirm Perspective Switch pop-up, click Yes.

   The MDAT perspective is displayed, the GizmoInfo application is created, and the Controller Editor is opened to the controller.xml file for editing. The controller.xml file contains an XML representation of the control flow.

   
   
   Figure 3. New project
   
   
   

More about device profiles

You can select the desired devices when you create the project, as we just did, or during the application development process. You can change, remove, or add target devices from the Targets tab in the Controller Editor. For each target device, a specific version of the application is created when the project is built. The device specific application artifacts are stored in the Generated JSPs directory within a folder named by the unique device ID. The files in this folder are MDAT files used for the specific devices, and have the suffix .sjsp.

Back to top

Develop the generic application

MDAT applications are based on the Model-View-Controller (MVC) pattern. The Model component defines the business logic and the application data, the View component describes the presentation and user interaction elements, and the Controller component defines the application flow.

The first step in the application development is to define the generic application and its flow. This generic application represents the common elements used across all the target devices. We will create these three views:

• The Log-in view allows the user to log in to the application.
• The Gizmo List view provides the user with a list of gizmos to select from.
• The Display Gizmo view shows detailed information about the selected gizmo.

We'll use the Controller Editor to create the generic application. The Controller Editor consists of three editors and a source view, accessed from tabs located at the bottom of the editor view:

• The Visual Design editor is used to lay out the view components and create the application dialog or flow
• The Targets editor is used to define the target devices associated with the application
• The Java Bridge editor is used to define and modify the connections between the flow and view components and the Java™ classes
• The Source view allows you to look at the Controller source code generated by the tool

Use the Controller Editor Visual Design editor to create the generic Web application, as follows:

1. Select the View icon from the palette and click in the canvas. A view component displays.
2. Change the default name from View1 to Login. Click OK.
   
   Figure 4. Login view
   
   
   
3. Repeat this step to create two more view components, called GizmoList and Display. We now have the three views defined in the Controller Editor's canvas.
   
   Figure 5. Application views in the Controller Editor
   
   
   

The next step is to define the transitions that allow users to navigate through the views. The transitions are visually represented as arrows. Near the center of each drawn transition is a branch node. A branch node identifies the decision points and is visually represented as a black box located on the associated arrow (transition).

We need to define the following transitions:

• Login view to the GizmoList view
• GizmoList view to the Display view
• Display view to the GizmoList view

Complete the following steps to create the transitions:

1. To create a transition between the Login view and the GizmoList view, select Transition from the palette, then select the source view Login and the target view GizmoList. This is the default transition and is taken when a successful log-in occurs.
2. In the Transition Properties wizard, do the following:
   1. Select Create and use a new Submit element in the source View. This creates a Submit button on the Login view to trigger the transition from the Login view.
   2. Enter doLogin in the Submission Request name field.
   3. Select Connect to action to process from submission on default branch. This enables you to create an action method to process the log-in information submitted from the Login view.
   4. Click Next.
      
      Figure 6. Define transition
      
      
      
3. On the Transition action for the default branch page:
   1. Select Call a Java method, and define a new Java Bridge for its class.
   2. Enter Controller in the Action Java Bridge field and processLogin in the Action method name field.
   3. Click Next.
      
      Figure 7. Select Transition actions
      
      
      
4. On the Java Bridge Definition page, do the following:
   1. Leave the Java Bridge ID value set to Controller.
   2. Set Bean Class to gizmoInfo.Controller.
   3. For Bean Usage Scope, select application.
   4. Click Finish.
   The transition between Login and GizmoList is created.
   
   Figure 8. Login to GizmoList transition
   
   
   
5. Next, we'll provide validation of the log-in by adding a conditional transition from the branch node to the Login view, which is used when the log-in is unsuccessful. A conditional transition is traversed if the condition is met, otherwise the default leg is taken. To create the transition, do the following:
   1. Select Transition from the palette.
   2. Select the branch node of existing transition.
   3. Select the Login view.
6. The Transitional Properties: Conditional Transition wizard displays. Do the following:
   1. Select Use an existing Java Bridge to access the conditional method.
   2. Select Controller from the Condition Java Bridge menu.
   3. Enter isLoginNotValid for the Condition method name.
   4. Click Finish.

So far we have two transitions created: Login to GizmoList and branch node to Login, as shown below:

Now, we need to create the transitions between the GizmoList and the Display view. Create these two transitions using the following steps:

1. Select Transition from the palette, then select the GizmoList view and the Display view. In the Transition Properties wizard, do the following:
   1. Select Create and use a new Submit element in the source view.
   2. Enter showDetails in the Submission Request name field.
   3. Select Connect to action to process form submission on default branch and click Next.
   4. Select Call a Java method using an existing Java Bridge.
   5. Enter Controller in the Action Java Bridge field.
   6. Enter getDetails in the Action method name field, and click Finish.
2. To create the transition between the Display and the GizmoList, select Transition from the palette, then select Display and GizmoList. In the Transition Properties wizard, do the following:
   1. Select Create and use a new Submit element in the source view.
   2. Enter goBack in the Submission Request name field.
   3. Select Connect to action to process form submission on default branch and click Next.
   4. Select Call a Java method using an existing Java Bridge.
   5. Enter Controller in the Action Java Bridge field.
   6. Enter refreshGizmoList in the Action method name field, and click Finish.
      
      Figure 10. All transitions defined
      
      
      

About Java Bridges and Model Bridges

As stated earlier, MDAT applications are based on the Model-View-Controller (MVC) pattern. The JavaBeans and classes that define the model and implement controller logic are associated with the application components via bridges. MDAT can generate skeleton code for these classes, but the specific implementation is provided by the developer. Java Bridges connect the application to one or more Java classes by creating links to methods. For instance, a transition may be linked to a Java Bridge action method, which processes the submitted form. Model Bridges connect your application to the underlying data model by connecting views to JavaBeans that encapsulate business logic, data access mechanisms, and data.

We've now created the view components and the application flow, via the transitions. Next, SWe'll use the View Editor to define the details of each view and identify the associated data elements. Remember that at this time the views are still device independent, each roughly corresponding to a Web page. The View Editor has three tabs:

• Visual Design allows you to design the presentation, using drag and drop to move elements from the palette to the canvas. Once on the canvas, you can arrange the elements and edit their properties edited.
• Model Bridge contains a list of model bridges for the current view. MDAT automatically creates a model bridge when you create a Submit element in a view. You can add a new model bridge, generate skeleton code for the model, or open a Java editor to complete the model definition.
• Source displays the source code for a view. We don't recommend editing this code unless you have a thorough understanding of the language used.

Before we start to define the Model Bridges, let's look at the classes associated with the application data. The data model has two classes: Gizmo and AppData.

The Gizmo class defines a data instance and contains these elements and methods:

The AppData class creates a Vector containing the instances of the Gizmo class. The class has these methods:

Back to top

Define the user interface for Login view

To define the details of each view, do the following:

1. Double-click the Login view in the Controller Editor to invoke the View Editor, select the Visual Design tab.
2. From the Visual Design tab, add a header element to the view, as follows:
   1. Select <h> Header from the palette and click in the canvas above the doLoginSubmit button.
   2. Enter MyCo Login in the Text field.
   3. Click OK.
      
      Figure 11. Define Login Header
      
      
      
3. To add an input element for the user name, select Input from the palette, and click in the canvas under the Header element.
4. The Input Element dialog displays. Define the element as follows:
   1. Select doLoginModel in the Model Bridge field. This is the Model Bridge created when we created the transition for the Submission Request name of doLogin in the Controller editor.
   2. Enter userName in the Reference to bean property field.
   3. Enter User Name in the Caption field, and click Finish.
      
      Figure 12. Define Login User name
      
      
      
5. Now select Secret from the palette to add a password under the User Name.
6. The Secrect Element dialog appears. Define the password as follows:
   1. Select doLoginModel in the Model Bridge field.
   2. Enter password in the Reference to bean property field.
   3. Enter Password in the Caption field, and click Finish.
      
      Figure 13. Define Login Password
      
      
      
7. Modify the caption on the submit button. You can do this in one of two ways:
   • Select doLoginSubmit in the View Editor. In the Properties view, change the caption value to Login.
     
     Figure 14. Define submit button
     
     
     
   • Or, double-click doLoginSubmit and change the caption value to Login in the Submit Element wizard.

   The submit button is used to trigger the traversal from one page to another. It is normally positioned at the bottom of a view.

8. To improve the layout of the screen, select line break from the palette and insert the line break between the various view elements.
   
   Figure 15. Final login layout
   
   
   
9. Save the changes to this file (Login.dlg), either by selecting the Save icon from the toolbar, or by selecting File => Save.

Back to top

Define the user interface for GizmoList view

To define the details of the GizmoList view, double-click on the GizmoList view in the Controller editor. The GizmoList view is displayed in the View Editor. Define the view details as follows:

1. To add a header, select <h> Header from the palette and click in the canvas above the button.
2. Enter Select Gizmo for more detail in the Text field. Click OK.
3. Create a model bridge named appDataModel to display the list of Gizmos in the GizmoList view by doing the following:
   1. Select the Model Bridge tab on the editor and select Add.
   2. Enter appDataModel in the Model Bridge field.
   3. Select Use this Model Bridge to access instance data in the Specify how the Model Bridge will be used field.
   4. Click Next.
   5. Enter appData in the Instance JavaBean Reference field.
   6. Enter gizmoInfo.AppData in the Instance bean class field.
   7. Select session in the Instance Bean Scope field, and click Finish.
4. Next, select the Visual Design tab for the GizmoList.dlg file, and define the gizmo list, as follows:
   1. Select the Select One element from the palette and click in the canvas under the Header element that was just added. This element contains the list of selectable Gizmos.
   2. Fill in the details of the Select One Element page, as follows:
      1. Select showDetailsModel in the Model Bridge field.
      2. Enter selectedGizmo in the Reference to bean property field.
      3. Select menu from the Selection UI appearance field.
      4. Enter Gizmos in the Caption field.
      5. Click Next.
   3. The Select One Element dialog appears. Select Add Itemset and enter the following Itemset information:
      1. Select appDataModel from the Model Bridge field.
      2. Enter gizmos in the Nodeset Collection field.
      3. Enter gizmoIterator in the Nodeset bean type field.
      4. Enter name in the Caption field.
      5. Enter name in the Value field and click OK.
   4. Click Finish.
5. Right-click the new Submit button and enter Show Details in the Caption field.
6. To improve the layout, add two line breaks between the Gizmo list and the Submit button.
7. Click the Save icon on the toolbar to save these changes.
   
   Figure 16. Final GizmoList view
   
   
   

Back to top

Define the user interface for Display view

The last view we need to customize is the Display view, which will contain the detail information about the gizmo selected from the GizmoList view. To define the details of the Display view, double-click on the Display view in the Controller editor. The Display view is displayed in the View Editor. Define the view details as follows:

1. Select <h> Header from the palette and click in the canvas above the button.
2. Enter Gizmo Info in the Text field, and click OK.
3. To add an Output element for the Gizmo's name, select the Output element in the palette and add it below the header element.
4. In the Edit Properties for Output Element wizard, do the following:
   1. Select Create a Java Bean model Bridge definition and click Next.
   2. Enter gizmoModel in the Model Bridge field.
   3. Select Use this Model Bridge to access instance data and click Next.
   4. Enter gizmoToBeDisplayed in the Instance JavaBean Reference field.
   5. Enter gizmoInfo.Gizmo in the Instance bean class field.
   6. Select request in the Instance Bean Scope field.
   7. Click Next.
   8. Enter name in the Reference to bean property field.
   9. Click Finish.
5. Now we'll add another Output element for the Gizmo price. Select the Output element from the palette and place it below the Gizmo name element.
6. In the Output Element wizard, do the following:
   1. Select gizmoModel in the Model Bridge.
   2. Enter price in the Reference to bean property field.
   3. Click Finish.
7. Now add an Output element for Gizmo availability. Select the Output element from the palette and place it below the price element.
8. In the Output Element wizard, do the following:
   1. Select gizmoModel in the Model Bridge field.
   2. Enter availability in the Reference to bean property field.
   3. Click Finish.
9. Set the caption to Go Back.
10. To improve the layout of the view, add line breaks between the various elements.
11. Click the Save icon on the toolbar to save your changes.
    
    Figure 17. Final Display view
    
    
    

Back to top

Generate the application code

We've finished defining the application flow, the view details, the associated data elements. We've also defined the Model Bridges and the Java Bridges, which connect the application to the JavaBeans and classes that define the data model and the controller logic. Now we'll use the Controller Editor to generate skeleton code for the associated JavaBeans, by doing the following steps:

1. Save all the files created so far by selecting File => Save All. You'll see several problems display in the Problem view, as shown below:
   
   Figure 18. Outstanding problems
   
   
   
2. To fix these problems, do the following:
   1. Return to the Controller Editor by selecting the Controller.xml tab.
   2. Select the Java Bridge tab, then select Controller and click Generate skeleton.
      
      Figure 19. Generate skeleton
      
      
      
   3. In the confirmation message pop-up, click OK.
   4. Repeat these steps for appDataModel and gizmoModel as follows:
      1. Select Controller.xml and the Visual Design tab. Double-click on the GizmoList view and select the Model Bridge tab.
      2. Select appDataModel and select Generate skeleton.
      3. In the confirmation message pop-up, click OK.
      4. Select Controller.xml and the Visual Design tab. Double-click on the Display view and select the Model Bridge tab.
      5. Select gizmoModel and select Generate skeleton.
      6. In the confirmation message pop-up, click OK.
      The appropriate Java file is created and opened for each skeleton generation: Controller.java, Gizmo.java and AppData.java. Figure 20 shows the Java source in the MDAT Navigator.
      
      Figure 20. Generated classes
      
      
      
   5. Each class is a skeleton that must be completed. Make the changes prefaced by //*** comment lines in the code below to complete each class.
      

      Example: Controller.java package gizmoInfo; import org.apache.struts.action.DynaActionForm; import javax.servlet.http.HttpServletRequest; import javax.servlet.ServletContext; public class Controller { public boolean processLogin(DynaActionForm form, HttpServletRequest request, ServletContext application) { String userName = (String)form.get("userName"); String password = (String)form.get("password"); //*** add refreshGizmoList () method as follows refreshGizmoList(form, request, application); return false; } public boolean isLoginNotValid(DynaActionForm form, HttpServletRequest request, ServletContext application) { String userName = (String)form.get("userName"); String password = (String)form.get("password"); //*** replace return false with following code to verify User Name if (userName.equals("user")) return false; else if (userName.equals("User")) return false; else if (userName.equals("USER")) return false; else return true; } public boolean getDetails(DynaActionForm form, HttpServletRequest request, ServletContext application) { String selectedGizmo = (String)form.get("selectedGizmo"); //*** add code to get AppData AppData appData = (AppData) request.getSession().getAttribute("appData"); Gizmo gizmoToBeDisplayed = appData.getSelectedGizmo(selectedGizmo); request.setAttribute("gizmoToBeDisplayed", gizmoToBeDisplayed); return false; } public boolean refreshGizmoList(DynaActionForm form, HttpServletRequest request, ServletContext application) { //*** add code to create Gizmo list items AppData appData = new AppData(); request.getSession().setAttribute("appData", appData); return false; } }

      
      
      

      Example Gizmo.java package gizmoInfo; public class Gizmo { private String name; private String price; private String availability; //*** Add the code to create gizmo instance public Gizmo() { } public Gizmo(String name, String price, String availability){ this(); setName(name); setPrice(price); setAvailability(availability); } //*** end code for instance creation public String getName() { return name; //*** replaces return null } public String getPrice() { return price; //*** replaces return null } public String getAvailability() { return availability; //*** replaces return null } //*** Add setter methods public void setName(String string) { name = string; } public void setPrice(String string) { price = string; } public void setAvailability(String string) { availability = string; } ///*** end add setter methods } //* end class

      
      
      

      Example: AppData.java package gizmoInfo; //*** add these imports import java.util.Enumeration; import java.util.Vector; public class AppData { //*** add the following vector definition and methods private Vector gizmos; public AppData() { gizmos = new Vector(); Gizmo gizmo1 = new Gizmo ("iPod SoundDock", "$299", "150 in stock"); Gizmo gizmo2 = new Gizmo ("PalmOne Treo 650", "$499", "200 in stock"); Gizmo gizmo3 = new Gizmo ("Ambient Orb Device", "$149.99", "45 in stock"); Gizmo gizmo4 = new Gizmo ("USB Desktop Aquarium", "$19.99", "80 in stock"); gizmos.add(gizmo1); gizmos.add(gizmo2); gizmos.add(gizmo3); gizmos.add(gizmo4); } public Vector getGizmos() { return gizmos; } public Gizmo getSelectedGizmo (String selectedGizmo) { Enumeration enum = gizmos.elements(); while (enum.hasMoreElements()) { Gizmo gizmo = (Gizmo)enum.nextElement(); if (selectedGizmo.equals(gizmo.getName())) { return gizmo; } } return null; } public void setGizmos (Vector vector) { gizmos = vector; } //*** end code add }

      
      
   6. Save each file.
   7. If the project did not automatically rebuild, right-click the GizmoInfo project in the MDAT Navigator, and select Rebuild Project.

Back to top

Test the Application

We'll test the GizmoInfo Web application using the WebSphere V5.1 Test Environment, which allows us to test the application locally before deployment. The WebSphere Test Environment provides all the function of the WebSphere Application Server runtime environment, but eliminates the dependencies on network connections. We'll dynamically configure and start the server using the following steps:

1. Right-click the GizmoInfo project and select Run => Run on Server.
2. In the Server Selection wizard:
   1. Select Manually define a server.
   2. In the Select the server type field, select WebSphere v5.1 Test Environment.
   3. Select Set Server as project default (do not prompt), and click Next.
3. Accept the default port number in the WebSphere Server Configuration Settings view. Click Next.
4. The GizmoInfoEAR is added to the Configured projects list. Click Finish.
   
   Figure 21. Started Servers
   
   
   

Test using the Internet Explorer

When you configure and starting the server from the Gizmolist project, the application is automatically started in Internet Explorer. The Login view is displayed in the browser.

To run the application, do the following:

1. Enter user as the User Name and any value for the Password. Click Login.
2. The GizmoList view displays. Select iPod SoundDock from the Gizmos field.
   
   Figure 23. Select a gizmo using Internet Explorer
   
   
   
3. Click Show Details.
4. The Display view shows the information for the selected gizmo. To select a different gizmo, click Go Back.
   
   Figure 24. Display gizmo in Internet Explorer
   
   
   

Access the application from a mobile device

Our final test is to access the application using a Palm Simulator (located on the desktop). First, go to the Palm Source web site and download the Palm OS Garnet 5.3 Simulator. Once you have the simulator downloaded and installed, install the associated Web browser. To run the application, start the Palm simulator and complete these steps:

1. Click the Applications icon.
2. Select the Web icon and connect to the internet.
3. Select the Connect icon and enter http://localhost:9080/GizmoInfo, then click Go.
4. In the GizmoInfo Login view, enter user as the User Name and any value for the Password. Click Login.
   
   Figure 25. Display gizmo in Internet Explorer
   
   
   
5. In the GizmoList view, select USB Desktop Aquarium from the Gizmos field, and click Show Details.
   
   Figure 26. Select gizmo in the Palm simulator
   
   
   
6. The Display view shows the information for the selected device. To select a different gizmo, click Go Back.
   
   Figure 27. Display gizmo in the Palm simulator)
   
   
   

Back to top

Conclusion

This article gave you a quick tour of MDAT by showing you how to create a simple application. We created generic views, used transitions to define the application flow, customized the views, and identified the Model and Java bridges to connect the application to business logic and the data source. We generated the application code and added essential code to complete each Java class. After creating an instance of the test server, we tested the application using Internet Explorer and the Palm Simulator.

MDAT makes mobile application development easier by allowing you to start from a single generic version of the application and target it to multiple devices without performing extensive customization.

Resources

• Download the WebSphere Everyplace Toolkit
  
  
• An Authoring Technology for Multi-device Web Applications
  
  
• IBM WebSphere Everyplace Access V5 Handbook for Developers and Administrators, Volumes I-IV
  
  

About the authors

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Overview of MDAT
• Use MDAT to Build a Mobile Application
• Create the Web Project
• Develop the generic application
• Define the user interface for Login view
• Define the user interface for GizmoList view
• Define the user interface for Display view
• Generate the application code
• Test the Application
• Conclusion
• Resources
• About the authors
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community

Dig deeper into WebSphere on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers