コンソール・ユーザー・インターフェースの作成

コンソール UI では openUI ステートメントを使用して、 インターフェースに表示するフォームやフィールド、それらのフォームやフィールドが バインドされる変数、およびユーザーがインターフェースでタスクを実行した際に 行われるアクションを定義します。

ウィンドウのオープンとデータの取り込み

コンソール UI の最も簡単な作成方法は、ユーザー・インターフェース・ウィンドウを表わすウィンドウ変数を作成し 、consoleLib.displayForm() などの関数を使用して、ウィンドウ内でフォームを 開く、という方法です。
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

ただし、このインターフェースは、あまり便利とは言えません。 ユーザーが、フォームまたはインターフェースと一切対話できないからです。 このフォームではいかなる対話も行うことができないので、 開いたウィンドウはすぐに閉じてしまいます。 インターフェース上のフィールドに意味を持たせて、ユーザーがインターフェースで作業している間はウィンドウを開いておくようにするには、openUI ステートメントを使って、フィールドに EGL 変数をバインドする必要があります。

ウィンドウ内のフィールドへのデータのバインディング

ユーザー・インターフェースを持つ、他のタイプのアプリケーションと同様に、 コンソール UI アプリケーションでは、インターフェースとインターフェースが 管理するデータとを分離しています。 EGL でコンソール UI を作成する際は、consoleForms などのパーツを使用して インターフェースを作成した後に、openUI ステートメントを 使用して、それらのパーツをプログラム内の変数に接続、つまりバインド します。 その後、インターフェースを使用しているユーザーによって consoleForm の値が 変更されると、それに応じて変数の値が変化します。 反対に、コードによって変数の値が変更された場合は、 それに応じてフォーム内の値が変更されます。

次の例では、前出の例を拡張して、consoleForm 内の 4 つの 編集可能フィールドに 4 つの変数をバインドしています。
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

このプログラムを実行すると、ウィンドウが開いたままとなり、 ユーザーがフィールドを選択して値を入力できるようになります。コード内の openUI myConsoleRec bind customer_id... で始まる行では 、myConsoleRec 内のフィールドを bind 節にリストされている変数に バインドするよう指定しています。

ウィンドウ内のイベントへの応答

フォーム内でユーザーが 実行したアクションにコンソール UI を応答させるには、アクションへの応答方法を EGL に指示する イベント・ハンドラー を定義する必要があります。 イベント・ハンドラーには、関数などの EGL ステートメントが含まれていますが、 最初にイベント (押されるキーやフィールドに入力される値など) が記述されています。 ユーザーがキーを押したり、フィールドに値を入力したりすると、そのアクションに関連付けられた イベント・ハンドラーが呼び出されます。

次の例は、前出の例にイベント・ハンドラーを追加したものです。 ユーザーが customer_id フィールドに値を入力して、 フィールド外にカーソルを移動させると、このイベント・ハンドラーが呼び出されます。
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
ユーザーがメニューでオプションを選択した場合に応答するには、 以下のように MENU_ACTION イベント・ハンドラーを使用します。
program menuTest type BasicProgram 
    
    function main()
        openUI
        new Menu {labelText = "オプションを選択してください",
            menuItems = [
            new MenuItem{name = "One",labelText = "オプション 1"},
            new MenuItem{name = "Two",labelText = "オプション 2"},
            new MenuItem{name = "Exit",labelText = "終了"}
        ]}
        
        onEvent(MENU_ACTION:("Exit"))
            exit openUI;
        onEvent(MENU_ACTION:("One"))
            consolelib.displayAtLine("オプション 1 を選択しました", 5);
        onEvent(MENU_ACTION:("Two"))
            consolelib.displayAtLine("オプション 2 を選択しました", 5);
        end
        
    end
    
end

この例では、ユーザーが最初の 2 つのオプションのいずれかを選択すると、 ウィンドウにフィードバック・メッセージが表示され、ユーザーが「終了」メニュー・オプションを 選択すると、ウィンドウが閉じます。

その他の種類の イベント・ハンドラーについては、openUIを参照してください。


フィードバック