With ZIETrans, you can create Web applications that provide an easy-to-use graphical user interface (GUI) for your 3270 applications running on IBM® System z® platforms and your 5250 applications running on IBM I operating system platforms. ZIETrans can access 5250 applications without requiring Online Transaction Processing (OLTP) capacity.

The host application can be swiftly transformed into a web application using the ZIETrans Default Transformation capabilities without changing the Host application and without any customization.

In a typical ZIETrans web-based application, Host screen contents are transformed into an HTML page on the web browser with the Default rendering rules provided by ZIETrans.

Host screen data has a layout with a fixed row, and column length and data are aligned accordingly. With default transformation in ZIETrans, host data is rendered on a web browser with a similar layout as the host screen. The transformed host screen on the web has a fixed font size, width, and height.

It is necessary to adjust the font size, width, and height for the HTML element that has the host screen data on the web for transformed host screen data to fit the available browser window without losing data alignment. This way, the default transformation can fit the available window size without losing alignment and readability.

Figure 1: Default transformation fit to window with an alignment issue

Resizable Default Transformation on window resize:

Apply new font size, width, and height to the HTML element when the browser window resizes. After resizing the browser window, a new font size, width, and height need to be derived.

The following parameters derive the new font size:

1. Browser window height
2. Browser window width
3. Zoom level

Using a custom formula, we can calculate font size using window height, zoom level, and font scaling ratio and scale the font accordingly on changing browser window height.

Users can use the same approach to fit web-transformed host content to a bigger monitor after the browser loads the page.

Figure 2: Default transformation for a maximized window

Figure 3: Default transformation for the minimized window

Draggable Handles on Modal with Default Transformation

What we saw in the previous section is for the browser resize. In this section, we’ll see how a default transformation content can be shown as a pop-up window on the customized modernized screens.

With the help of libraries like Bootstrap, we can make the Default Transformation be content presented in a pop-up referred to as Modal.

Further, suppose the user desires to view the pop-up in size per their choice. In that case, we can make the Modal resizable by the user by providing Draggable Handles ( ) with the help of libraries like jQuery UI at the edges/corners, as shown in Figure 4 below:

Figure 4: Default Transformation Modal with draggable handles

With the help of these handles, the end-users can easily resize the Modal by dragging them, as illustrated in Figure 5 and Figure 6.

Figure 5: Default Transformation Modal before resizing

Figure 6: Default Transformation Modal after resizing

In Figure 5, we have a smaller Default Transformation Modal, and we see a handle hovering at either the left or right edge of the Modal. Dragging the handle (represented in the image), the Modal expands in height and width, maintaining a certain aspect ratio and the font size depends on the browser height.

On change of Modal height, the default transformation content has to fit the new Modal space. It can be achieved by changing the font size and scaling factors of the default transformation to fit the Modal space. We can calculate font size using a custom formula based on window height and zoom level, derive a font scaling ratio, and scale the font accordingly.

The following parameters derive the new font size:

1. Modal height
2. Modal width
3. Zoom level

The result will be an enlarged modal, as illustrated in Figure 6.

For further information on Automation, Services offerings, or technical details in HCL ZIE, please contact HCL Mainframe Lab Services at zio@hcl.com.