Modernize your character application

This guide discusses the modernization process of a legacy COBOL application with character-based user interface.
It demonstrates the necessary steps to transform the character-based user interface into a graphical user interface.

The code snippets used by this guide are taken from the modernization examples installed with isCOBOL in the folder sample/modernization.

For an easy conversion of the user interface, it's good practice to have the user interface management programming separated from the backend processing.
The installed example is an application of this kind, with the user interface in a program called "CUSTOMER.cbl", and the data processing in a separate program called "PCUSTOMER.cbl"

The starting point is a character-based screen whose Screen Section definition is as follows:

   01 s1.
      03 "Customer code:"        line 3 col 2.
      03 using cust-code         col + 2 high prompt.
      03 "First name: "          line 4 col 2.
      03 using Cust-First-Name   col + 2 high prompt.
      ...

   01 s-func.
      03 "F1=Lookup"             line 23 col 2 reverse.
      03 "F3=Delete"             col + 2 reverse.
      ...

And displayed on a window described simply as "display window"

At runtime, the screen shows as follows:

The minimal modification that can be done to the Screen Section in order to convert to a graphical screen is to change text labels and FROM fields to LABEL controls and USING fields to ENTRY-FIELD controls as follows:

   01 s1.
      03 label "Customer code:"              line 3 col 2.
      03 entry-field using cust-code         col + 2 high prompt.
      03 label "First name: "                line 4 col 2.
      03 entry-field using Cust-First-Name   col + 2 high prompt.
      ...

It makes sense also to replace the text that describes an action with graphical PUSH-BUTTON controls as follows:

   01 s-func.
      03 push-button title "F1=Lookup"         line 23 col 2
                     size 9 self-act exception-value 1.
      03 push-button title "F3=Delete"         col + 2 
                     size 9 self-act exception-value 3.
      ...

And these screens need to be displayed on a graphical window, in our case described as:

   display standard graphical window
           background-low
           title "CUSTOMER MAINTENANCE"
           cell size is entry-field font
           size 84
           lines 18
           label-offset 10
           control font fixed-font
           handle h-main

After this modification, the screen appears as follows:

Note - if you wish to assign a special attribute to all the fields, for example if you want all the push-buttons to have the SELF-ACT style, you can use the compiler configuration property

iscobol.compiler.gui.<control-type>.defaults

Even though the screen is graphical it's still not perfect; it doesn't look like a modern and appealing screen. A further effort is suggested in the installed sample in order to fully modernize a screen, such as:

• Reorder the graphical control and put frames around them to better describe the information that they host
• Add icons to the buttons and move them to a tool-bar on top of the screen
• Use different controls where applicable. For example the Gender can be accepted using two radio-buttons instead of an entry-field. This will save you for checking if the user input a valid value.
• Add a status-bar

After these changes, the screen will look like this:

It's a dramatic visual difference between the character and final modernization screens, with a minimal amount of effort.
We hope our modernization samples and this guide help you over the first hurdle of getting started.

Article ID: 327
Created: April 19, 2022
Last Updated: April 19, 2022
Author: Support KB Author

Online URL: https://support.veryant.com/phpkb/article.php?id=327