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
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 project settings
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
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
Notice the drop-down widget for the selection list in Figure 5.
Figure 5. Default rendering of selection list as a drop-down widget
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
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
By default, only the dialog area of the screen is transformed for display on the device.
Figure 8. Default dialog transformation
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
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
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
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
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
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
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
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
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
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
Figure 19, shows the input field after switching back to data input mode.
Figure 19. 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
Figure 21. Field exit to the next input field
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
For example, in Figure 23, notice a table with four columns on the host screen:
Figure 23. Host column 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
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
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
Figure 27. Web transformation of host screen
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.
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
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.
- Create a HATS macro to provide programmed navigation through the host screens that make up your host transaction.
- 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.
- 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
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
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
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
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
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
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
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
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
Migrating and testing mobile projects
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:
- Create a new HATS project and select this option: Optimize options for mobile devices.
- Copy all of the screen captures, screen customizations, and macros from the existing project to the new mobile project.
- Create new screen transformations in the mobile project to support the requirements of your mobile devices.
- Modify the screen customizations to apply the appropriate new screen transformations.
- 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.
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.
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.
- Visit the Rational HATS page on developerWorks for information, downloads, demos, and more.
- See Enterprise Modernization for more about all of the relevant IBM software and services.
- Check out the IBM Enterprise Modernization Sandbox, where you can evaluate the IBM Enterprise Modernization solutions (including HATS) for System z and IBM i through practical, hands-on experience.
- Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products.
- Check the Rational training and certification catalog, which includes many types of courses on a wide range of topics. You can take some of them anywhere, any time, and many of the "Getting Started" ones are free.
Get products and technologies
- Download a trial version of the IBM Rational HATS Toolkit.
- Evaluate IBM software in the way that suits you best: Download it for a trial, try it online, use it in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement service-oriented architecture efficiently.
- 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.
Dig deeper into Rational software on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Experiment with new directions in software development.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.