With HATS, you can create Web applications and Rich client applications that provide an easy-to-use graphical user interface (GUI) for your 3270/5250 applications.

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

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

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

To make transformed host screen data fit the available browser window without losing data alignment, additional customization has to be done on the HATS web project by deriving the font size, width, and height for the HTML element which has host screen data on the web. By deriving a new font size according to window height, default transformation can be made fit to available window size without losing alignment and readability.

                                                        Figure 1: Default transformation fit to window with alignment issue

Resizable Default Transformation on window resize:

When the browser window is resized, apply new font size, width, and height to the HTML element to fit the resized browser window. New font size, width and height has to be derived by determining the browser window height after resizing.

New font size can be derived by using parameters:

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

On change of browser window height, font size can be calculated by using a custom formula where we use window height, zoom level, and derive a ratio for font scaling, and scale the font accordingly.

To fit web-transformed host content to a bigger monitor, the same approach can be used and apply it after the page loads on the browser.

                                                                                        Figure 2: Resized Default transformation when the window is maximized
                            

                                                                    Figure 3: Resized Default Transformation when the window is minimized

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 popup window on the customized modernized screens.

With the help of libraries like Bootstrap, we can make the Default Transformation content to be presented in a pop-up referred to as Modal. Further, if the user desires to view the pop-up in a size as per their choice we can make the Modal resizable by the user by providing Draggable Handles (  ) with 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 resize

                                                                                                                        Figure 6: Default Transformation Modal after resizing
In Figure 5, we have a smaller Default Transformation modal and on hover at the either left or right edge of the modal we see a handle ( ). Dragging the handle the modal expands both in height and width maintaining a certain aspect ratio and the font size is dependent 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 font size and scaling factors of the default transformation to fit the Modal space. Font size can be calculated by using a custom formula where we use window height, zoom level, and derive a ratio for font scaling, and scale the font accordingly.

New font size can be derived by using the following parameters:
1.   Modal height
2.   Modal width
3.   Zoom level

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