An introduction to HATS mobile device support

Delivering green-screen applications to mobile devices using Rational Host Access Transformation Services

This article summarizes the support provided by IBM® Rational® Host Access Transformation Services (HATS) that allows access to character-based 3270 and 5250 host applications from mobile devices, such as cellular phones, data collection terminals, and personal digital assistants (PDAs). The author assumes that readers have a working knowledge of HATS capabilities and application development tasks.

Share:

Rick Hardison, Consultant, Systems Documentation, Inc. (SDI)

Rick HardisonRick Hardison joined IBM in Raleigh, North Carolina, in 1970 as a junior programmer. In 1992, he moved into technical marketing, providing support for IBM communications clients and servers, Host On-Demand, and Host Access Transformation Services. Rick retired from IBM in 2005 and has since provided consulting services, including technical writing, through Systems Documentation, Inc. (SDI).



25 January 2011

Also available in Chinese Japanese Portuguese

Overview

With IBM® Rational® Host Access Transformation Services (HATS), access to host applications can be modernized and delivered to users without any impact to the existing, proven host applications. HATS does this by dynamically transforming and delivering 3270 applications running on IBM® System z® platforms and 5250 applications running on IBM® i® platforms to web, portal, or rich-client users and by exposing key business processes and data as web services.

Using HATS, you can create web applications and rich-client applications that provide an easy-to-use graphical user interface (GUI) to improve usability and increase reuse of 3270 and 5250 host applications.

You can develop HATS web applications, including portlets, with an interface that matches a company's web or portal GUI standards, and users can access them through their web browsers. HATS web applications can also be developed to provide access to host applications from mobile devices, such as cellular phones, data collection terminals, and PDAs.

Mobile device support

Users can access web applications by using a mobile browser. However, mobile devices have different characteristics than more traditional workstation client devices. These characteristics put different requirements on the web application.

  • A more traditional client device has a relatively large screen size, for example 1024 x 768 pixels. However, the screen size of a typical mobile device is relatively small, for example 320 x 240 pixels.
  • Also, a traditional client device typically supports the use of a mouse or keyboard for user interaction, whereas a mobile device might have only the keys provided on a cellular (cell) phone.
  • Finally, a traditional device generally has more processing power, memory, and a higher-speed connection to the Internet than a mobile device does.

With Rational HATS, you can develop a web application to provide access to 3270 and 5250 host applications from mobile devices. The process is the same as developing any HATS web application, with some considerations for the different characteristics of the mobile device and its web browser.

HATS includes several new functions to aid in developing a web application to meet these requirements. This article describes them, as well as other HATS functions, in the context of explaining two approaches that you can use with HATS to provide access to 3270 and 5250 host applications from mobile devices:

  • With the first approach, you use HATS to develop a web application that dynamically transforms host screens to modern graphical web pages that meet the requirements of mobile devices.
  • With the second approach, you use HATS Integration Objects to access the host applications and create customized web pages to provide access from mobile devices.

Using screen transformations to support mobile devices

HATS screen transformation functions give you the ability to develop HATS web applications to support mobile devices. Version 7.1 supported the Microsoft Internet Explorer Mobile browser; and v7.5.1 extended support to include iPhone OS Safari, so that a HATS application can be accessed by using an Apple iPhone or an Apple iPod touch.

As with any HATS application, you begin development by creating a HATS project.

Create a project

On the first page of the Create a Project wizard, select the check box for Optimize options for mobile devices

Figure 1. Creating a project for mobile devices
Create a Project wizard

Selecting this option initializes the project with options that work best for mobile devices. Some options, such as printing, keyboard, asynchronous update, and others, are not supported for mobile devices. Therefore, they are disabled.

When you optimize a project for mobile devices, the option for selecting a project theme is not provided. In this case, you can think of the mobile device option as being the theme.

Also, only templates optimized for use with mobile devices (see Figure 2) are available for use in the project.

Figure 2. Default templates
Default Template panel

Default project settings

Default rendering

After you create a project that is optimized for mobile devices, you will notice some differences from a project for a typical web application. For example, in the project settings, a second rendering set, named compact, is created and set as the default (Figure 3), and the Use compact rendering option is selected.

Figure 3. Default rendering
Project settings, Default Rendering panel

Larger view of Figure 3.

In general, the default rendering set attempts to preserve the original host screen structure, while extending functionality by automatically adding GUI controls (such as links, buttons, and tables) to improve user productivity. However, so that the default rendering of host screens can be displayed on mobile devices, the Use compact rendering option is supplied to allow a certain amount of compacting. This means that the amount of HTML and blank space is reduced, which might display a different structure of the original host screen.

In the compact rendering set, notice that the Drop-down (selection) widget, rather than the Link widget, is used in default rendering for selection lists. This is to preserve space on what is presumed to be a small-screen mobile device. For example, the selection list on the host screen in Figure 4 is transformed, by default, to a drop-down list.

Figure 4. Selection list on host screen
i5/OS Main Menu host screen

Notice the drop-down widget for the selection list in Figure 5.

Figure 5. Default rendering of selection list as a drop-down widget
Drop-down widget on iPhone screen

When the drop-down widget is selected, the items in the selection list are displayed in a drop-down list, as Figure 6 shows.

Figure 6. Default rendering of drop-down menu selections
Drop-down list selections on iPhone screen

Also, in the compact rendering set, notice that recognition and transformation of dialogs is activated. In the host screen shown in Figure 7, the area contained within the simulated box is recognized as a dialog.

Figure 7. Host screen dialog
Specify Collection or Library i5/OS host screen

By default, only the dialog area of the screen is transformed for display on the device.

Figure 8. Default dialog transformation
Default dialog transformation on iPhone screen

Application keypad

Additional options have been added to both the Application Keypad and Host Keypad settings. By default, the application keypad is displayed as a set of icons in mobile device projects (see the drop-down menu in Figure 9).

Figure 9. Application keypad settings
Project settings, Application Keypad panel

Figure 10 shows the default application keypad displayed as a set of icons in the top-right corner.

Figure 10. Default application keypad displayed as icons
Default application keypad on iPhone screen

Host keypad

By default, the host keypad is displayed as a drop-down list. You can select which keys to display. At a minimum, include the Enter key for the default transformation and all custom transformations, because keyboard support is disabled in mobile projects.

Figure 11. Host keypad settings
Project settings, Host Keypad panel

Larger view of Figure 11.

Figure 12 shows the default host keypad displayed as a drop-down list with a Submit button.

Figure 12. Default host keypad displayed as a drop-down menu with a Submit button
Host keypad drop-down widget on iPhone screen

When you select the host keypad drop-down list widget, the host keys that you defined for the default transformation are displayed in a drop-down list, as shown below.

Figure 13. Host keypad drop-down menu
Host keypad keys displayed on iPhone screen

Widget settings

Next, notice the project settings for the Field widget (Figure 14). A new Layout setting allows two options: Table or Separated:

  • Select Table to render the output in a table, with the goal of preserving the layout of the original host screen. This is the default for web applications not optimized for mobile devices.
  • Select Separated to render the output using inline span tags to differentiate between fields, with the goal of reducing the amount of HTML and blank space. This is the default for web applications optimized for mobile devices.
Figure 14. Field widget
Project settings, Field widget panel

In addition, you can use the setting, Enable cursor positioning option on input fields, to allow the user to switch from data input mode to cursor positioning mode for input fields. When in data input mode, the user can enter data into the input field as shown below in the User field.

Figure 15. Data input mode
User ID input field with user ID of MYIDBAD

To switch to cursor positioning mode, the user activates the link, designated by the asterisk (*), following the input field.

Figure 16. Switching to cursor positioning mode
User ID field with asterisk seleted

When in cursor-positioning mode, the user can tab to, or position the cursor on, any character in the input field. Figure 17 shows the cursor positioned at the letter B in the MYIDBAD user ID.

Figure 17. Cursor positioning mode
User ID field with B in MYIDBAD highlighted

To switch back to data input mode, the user activates the link, which is designated by the asterisk (*) following the input field.

Figure 18. Switch to data input mode
User ID field with asterisk seleted

Figure 19, shows the input field after switching back to data input mode.

Figure 19. Data input mode
User ID field in data input mode

Now, if the user submits a Field exit key, for example, the data from the cursor location to the end of the field is deleted, and the cursor moves to the next field, as you see in Figures 20 and 21.

Figure 20. Submit Field exit from the host keypad
Host keypad with Field exit selected
Figure 21. Field exit to the next input field
User ID field with MYID, password field selected

This setting is useful for mobile devices that do not have other cursor-positioning capabilities. It is available for the Field, Popup, Subfile (check box), Subfile (drop-down), Subfile (pop-up), Table, and Text input widgets.

To aid in displaying table data on a mobile device, Rational HATS provides the Columns placement function for the Table, Subfile (check box), Subfile (drop-down), and Subfile (pop-up) widgets. This function allows the arrangement and exclusion of columns from the display, and it also allows expandable detail columns so that the table can fit into a smaller horizontal space.

The detail columns, when expanded, are displayed directly below the row that contains the primary columns of data. When a particular row is expanded by the user, the detail columns are displayed in a format that flows down the screen rather than to the right. This enables the user to view an arbitrary number of columns on small displays without resorting to horizontal scrolling.

Figure 22. Columns placement
Columns placement

For example, in Figure 23, notice a table with four columns on the host screen:

  • PART_NUMBER
  • PART_NAME
  • SALES_PRICE
  • PRODUCT_CATEGORY
Figure 23. Host column data
Host screen with four columns of data

As Figure 24 shows, when the project is optimized for mobile devices, the Table widget displays only the first two columns as primary columns.

Figure 24. Primary columns
Table widget showing first two columns of data

When the user expands the row to display the detail columns (Figure 25), they are displayed vertically below the primary columns.

Figure 25. Detail columns
Table widget showing detail columns below primary

You can also select the option to Keep detail columns on the server. This allows for a reduction, in some cases, of the amount of data transferred, because unwanted detail data is never sent over HTTP to the end device. Only the details that are specifically requested by the user are retrieved on-demand and sent to the browser.

Screen customizations and transformations

The HATS screen customization and transformation functions help you create a truly usable and optimized application for mobile devices. You can create an easy-to-use web browser interface that makes only necessary functions available and hides the rest. You can transform host screens like the one in Figure 26 into web pages that are much easier to read and navigate, such as the one shown in Figure 27.

Figure 26. Complex host screen
Host screen with cryptic, complex interface
Figure 27. Web transformation of host screen
Simple drop-down list with value values to select

You can limit what information is displayed and collect results from multiple screens and display them on a single, scrollable web page. With HATS, you can hide the complex interface from the user, prompt for only required fields, and supply drop-down lists of valid values. And you can display results using different HTML widgets, thereby making results much easier to read and understand.

The Rational HATS ability to combine screens, skip unnecessary screens, enter information and run macros for the end user streamlines transactions by reducing the number of keystrokes and workflow steps needed to complete the transaction. These streamlined transactions with graphical user interfaces make it possible to extend use of host application functions to users with mobile devices.

Preferences

When you first create a blank screen transformation in a web project, HATS might or might not include a free layout table in the transformation. By default, if the project is optimized for mobile devices, HATS does not include a free layout table. This option is selectable in the HATS Toolkit preferences.

You can access the preferences from the Rational menu bar by selecting Window > Preferences. One of the preferences allows you to specify whether to include a free layout table in each blank transformation that you create in a web project. By default, if the project is optimized for mobile devices, HATS overrides this option by using the Except when the project is optimized for mobile devices option.

Figure 28. Preferences view
Preferences, HATS Transformation panel

Using Integration Objects to support mobile devices

You can use the powerful HATS macro and Integration Object capabilities to build predefined transactions for the user. Using Model 1, Struts, JavaServer Faces (JSF) web pages, or web services as the interface, these predefined transactions can prompt the user for input, such as an account number or a part number. Then, on behalf of the user, HATS drives the host application to complete the transaction. This capability enables the information to be externalized for access by mobile devices, but it controls what the user is allowed to see and do. You can also use it to develop HATS applications for mobile devices that support web browsers other than those supported by HATS screen transformation capabilities.

If a transaction is performed by multiple host applications, HATS can combine interaction with all of them through a single web interface. For example, you might have one host application that processes new order information and another that processes customer account or history information. With HATS, you can provide communication with both applications through a single web interface. Users never know that they are using two different applications.

To implement a HATS web-driven host transaction, just follow these steps:

  1. Create a HATS macro to provide programmed navigation through the host screens that make up your host transaction.
  2. Next, from that macro, generate a HATS Integration Object (IO), which is a Java bean that encapsulates and provides a programming interface to execute the macro.
  3. Then generate web pages through which users can invoke the IO from their mobile devices.

Creating HATS macros

You can easily create macros by using the HATS Toolkit. You record a macro by using the Host Terminal wizard as you navigate through host screens using a live host connection. By using the macro, you can program HATS to prompt the user for input to a host screen input field, navigate through other screens, and extract data from screens to return to the user's mobile browser.

Figure 29. Recording a HATS macro by using the Host Terminal
Host Terminal with Macro Navigator and host screen

After recording, you can edit your macros by using the same Host Terminal wizard or by using either the Macro Editor or the Advanced Macro Editor supplied with the HATS Toolkit.

HATS also includes a Visual Macro Editor (VME). The VME is a tool for visually developing HATS macros, thus enabling you to build macros more easily and to find logic problems within macros more easily at development time (see the diagram in Figure 30). It combines many of the features of the HATS Host Terminal, Macro Editor, and Advanced Macro Editor into one tool and allows for offline development of macros. It provides optional, automatic capture of screens as a macro is being recorded in the Host Terminal. It also allows flows to be copied between macros and provides drag-and-drop support for adding new screens.

Figure 30. Using the Visual Macro Editor for macro development
Visual Macro Editor view of host screens and flow

Larger view of Figure 30.

Creating Integration Objects

Creating an IO for a macro, creates a Java programming interface to run the macro that will accept the input expected by the macro, drive the macro, and return output supplied by the macro. When you have created a macro, it is easy to create an IO by simply right-clicking on the macro in the HATS Projects view and selecting Create Integration Object. In the HATS preferences, you can indicate that IOs are to be created automatically whenever you save a macro.

Figure 31. Creating an Integration Object from a macro
Project view, Create Integration Object menu item

Creating web pages

The next step in developing your IO application for mobile devices is to create web pages that allow the mobile device user to submit input and receive output from the host application by driving the IO and, ultimately, the macro. To do this, simply right-click on the Integration Object (see Figure 32), and select any of these options: Create Model 1 Web Pages, Create Struts Web, Pages, or Create JSF Web Pages.

Figure 32. Creating a web page to drive an Integration Object
Project view, create web page menu items

In the Create Web Pages wizard, you can specify which input properties to display on the web page and the input controls to use. You can also specify which output properties to display, including output controls.

Figure 33. Defining input properties displayed on the web page
Define input property panel

Because 3270 and 5250 host applications are connection-oriented, you might want to use connection pooling in conjunction with Connect and Disconnect macros to optimize performance and response time when running your IO. When you specify connection pooling in your application and specify that HATS use Connect and Disconnect macros, HATS maintains a pool of host connections that are already signed on and ready to run your IO upon request. Using this technique eliminates constant signing on and off of the host system when running your IO.

After you deploy your application, users can simply use their mobile device browsers to access the URL for your web page and enter whatever input you have allowed for.

Figure 34. Web page that drives the HATS Integration Object
Web page for Integration Object on iPhone

When the user submits input on the web page (Figure 34), this allocates a connection from the connection pool and drives the IO, which in turn drives the macro and the host application.

Figure 35. Host macro driven using input submitted by the user
Host screen showing input submitted by the user

Using the input submitted by the user, the macro navigates the host application and extracts the requested output.

Figure 36. Data extracted to return to the user
Host screen showing results requested by the user

The IO then passes the extracted output back to the user's mobile web browser, and the connection is returned to the connection pool to wait for another input request.

Figure 37. Host data returned to the mobile device web browser
Web page showing results on iPhone

Migrating and testing mobile projects

Migrating

As you begin to modernize access to your 3270 and 5250 host applications, it is likely that you will have different HATS applications for traditional web browser users than for mobile browser users. However, if you develop a HATS web application for traditional users, and you want to use the same application for mobile users or a similar one, you must manually develop a separate HATS project for mobile use.

One approach for creating a HATS web application for mobile use, which is similar to an existing traditional HATS web application, is to follow these steps:

  1. Create a new HATS project and select this option: Optimize options for mobile devices.
  2. Copy all of the screen captures, screen customizations, and macros from the existing project to the new mobile project.
  3. Create new screen transformations in the mobile project to support the requirements of your mobile devices.
  4. Modify the screen customizations to apply the appropriate new screen transformations.
  5. If you use Integration Objects (IOs), regenerate the IOs from the macros that you copied, and recreate the web pages that drive the IOs to support the requirements of your mobile devices.

Testing

You can test your HATS mobile device applications the same way that you test traditional HATS web applications, using the internal test servers provided with Rational SDP. You can use either the internal web browser provided or external web browsers. It is best to also use mobile device emulators to create a more realistic mobile device testing environment. Be sure to test with real mobile devices, too.


Summary

With Rational HATS, you can now more easily develop HATS web applications that provide screen transformation access to your 3270 and 5250 host applications from mobile devices, such as cellular phones, data collection terminals, and personal digital assistants (PDAs). In addition, you can use the robust HATS macro and Integration Object support to provide access to predefined host transactions from mobile devices. By using these functions, you can improve the productivity of your increasingly mobile workforce, broaden your customer base, and improve your level of service.

Resources

Learn

Get products and technologies

Discuss

  • Follow developerWorks on Twitter.
  • Join the HATS HotSpot developerWorks group for discussions, documents, and blog posts.
  • Get involved in the developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups such as the Rational Café, and product-specific Rational wikis.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, Mobile development
ArticleID=619152
ArticleTitle=An introduction to HATS mobile device support
publish-date=01252011