Like many 5250 terminal tools, we also support UI modernization. Being web based with powerful ETL engine, it is very easy to create modern responsive web interface on top of web terminal without any additional server software installation.
Process is very similar to example shown in blog Spool to Html Template where ETL driver converts spool data into interactive web page.
Every screen requires JSON mapping definition which will convert screen JSON data into generic JSON data structure. Combininig web renderer framework like EctJS with Bootstrap and jQuery, we can easily create beautiful responsive web interface that is also mobile friendly.
How does it looks like see in this short video.
Modernization is not enabled by default but can be enabled with following example code...
Tn5250.Application.toggleModernizer();
How does it work?
Similar to ETL spool driver, web terminal will load screen detection definitions from server. When screen is matched to the existing mapping definition, ETL process will be triggered automatically.
ETL engine will inject rendered page into main page #ui element as an IFRAME object. As this is another page completely isolated from web terminal we can do anything we like without interfering web terminal itself.
To call web terminal API, modernized web page have to send window messages that will be processed at web terminal side.
The whole process is very simple, all what is needed are fields values to populate and remote command to send to the terminal.
var cmd = "ENTER";
var data = [{id:1, val:'QSECOFR'}];
parent.postMessage({cmd:'ui', data:data, action:cmd}, '*');
Variable data is an array containing field id and field value to be set while cmd is 5250 command. List of available commands can be found in Tn5250.keyboard.COMMANDS.
Experienced web developer can create powerful responsive web interfaces on top of web terminal which can be used on browser and mobile devices.
Combining headless API approach and modernization feature, integration into other web applications is possible even without web terminal user interface. This feature is great to create simplified user interfaces for mobile devices or to convert green screen terminals into effective presentations for management.
Examples shown in video are located at our GitHub repository here.