Creating a Console User Interface

Console UI relies on the openUI statement to define which forms and fields are shown on the interface, which variables those forms and fields are bound to, and which actions happen when the user performs tasks in the interface.

Opening and populating a window

The simplest way to create a Console UI is to create a window variable that represents a user interface window and use a function such as consoleLib.displayForm() to open the form in the window.

program basicConsole type BasicProgram 
    
    function main()
        myWindow Window {name = "My Window", 
            position = [1,1]};
        myConsoleRec CustomerConsoleRecord{name = "myForm"};
        
        ConsoleLib.openWindow(myWindow);
        ConsoleLib.displayForm(myConsoleRec);
        
    end
    
end


Record CustomerConsoleRecord type consoleForm 
                        {formSize = [10,40],name = "Customer Record"}
  *        consoleField {position = [1,4], 
                         value = "Welcome to my console."};
  ID       consoleField {fieldLen = 5, position = [3,4], 
                         name="customer_id"};
  Fname    consoleField {fieldLen = 20, position = [4,4], 
                         name="first_name"};
  Lname    consoleField {fieldLen = 20, position = [5,4], 
                         name="last_name"};
  PhoneNum consoleField {fieldLen = 20, position = [6,4], 
                         name="phone"};
end

However, this interface is not very useful because it does not enable the user to interact with the form or window at all. Because this form does not enable any interaction, the window closes as soon as it opens. You need to bind EGL variables to the fields with the openUI statement to make the fields on the interface meaningful and keep the window open while the user works with the interface.

Binding data to the fields in the window

Like many other types of applications with user interfaces, Console UI applications separate the interface from the data being managed by the interface. When you create a Console UI in EGL, you create the interface with parts like consoleForms and then use the openUI statement to connect, or bind, those parts to variables in your program. Then, when the person using the interface changes a value in the consoleForm, the value of the variable changes to match. Conversely, when your code changes the value of the variable, the value in the form changes to match.

The following example expands on the previous example to bind four variables to the four editable fields in the consoleForm:

program basicConsole type BasicProgram 
    
    function main()
        myWindow Window {name = "My Window", position = [1,1]};
        myConsoleRec CustomerConsoleRecord{name = "myForm"};
        
        ConsoleLib.openWindow(myWindow);
        ConsoleLib.displayForm(myConsoleRec);
        
        customer_id int;
        first_name, last_name, phone char(30);

        openUI myConsoleRec
            bind customer_id, first_name, last_name, phone
        end
        
    end
    
end


Record CustomerConsoleRecord type consoleForm 
                        {formSize = [10,40],name = "Customer Record"}
  *        consoleField {position = [1,4], 
                         value = "Welcome to my console."};
  ID       consoleField {fieldLen = 5, position = [3,4], 
                         name="customer_id"};
  Fname    consoleField {fieldLen = 20, position = [4,4], 
                         name="first_name"};
  Lname    consoleField {fieldLen = 20, position = [5,4], 
                         name="last_name"};
  PhoneNum consoleField {fieldLen = 20, position = [6,4], 
                         name="phone"};
end

Now when you run this program, the window stays open so the user can tab through the fields and type values. The line of code that begins openUI myConsoleRec bind customer_id... specifies that the fields in the myConsoleRec are bound to the variables listed in the bind clause.

Responding to events in the window

For your Console UI to react to actions that the user performs in the form, you must define event handlers that tell EGL what to do in response to the action. An event handler contains EGL statements like a function, but it begins with a description of an event, such as a key being pressed or a value being typed in a field. When the user presses a key or types a value in a field, the event handler that is associated with that action is called.

The following example adds an event handler to the previous example. This event handler is called when the user types a value in the customer_id field and moves the cursor out of the field:

program basicConsole type BasicProgram 
    
    function main()
        myWindow Window {name = "My Window", position = [1,1]};
        myConsoleRec CustomerConsoleRecord{name = "myForm"};
        
        ConsoleLib.openWindow(myWindow);
        ConsoleLib.displayForm(myConsoleRec);
        
        customer_id int;
        first_name, last_name, phone char(30);

        openUI myConsoleRec
            bind customer_id, first_name, last_name, phone
            onEvent(AFTER_FIELD:"customer_id")
                if (customer_id == 3)
                    first_name = "John";
                end
        end
        
    end
    
end


Record CustomerConsoleRecord type consoleForm 
                        {formSize = [10,40],name = "Customer Record"}
  *        consoleField {position = [1,4], 
                         value = "Welcome to my console."};
  ID       consoleField {fieldLen = 5, position = [3,4], 
                         name="customer_id"};
  Fname    consoleField {fieldLen = 20, position = [4,4], 
                         name="first_name"};
  Lname    consoleField {fieldLen = 20, position = [5,4], 
                         name="last_name"};
  PhoneNum consoleField {fieldLen = 20, position = [6,4], 
                         name="phone"};
end

To respond when a user chooses an option in a menu, use the MENU_ACTION event handler:

program menuTest type BasicProgram 
    
    function main()
        openUI
        new Menu {labelText = "Choose an option", 
            menuItems = [
            new MenuItem{name = "One",labelText = "Option One"},
            new MenuItem{name = "Two",labelText = "Option Two"},
            new MenuItem{name = "Exit",labelText = "Exit"}
        ]}
        
        onEvent(MENU_ACTION:("Exit"))
            exit openUI;
        onEvent(MENU_ACTION:("One"))
            consolelib.displayAtLine("You chose option One", 5);
        onEvent(MENU_ACTION:("Two"))
            consolelib.displayAtLine("You chose option Two", 5);
        end
        
    end
    
end

In this example, the window provides a feedback message when the user selects one of the first two options and closes when the user selects the "Exit" menu option.

For other kinds of event handlers, see openUI.