5.2 GUI画面を作成しましょう

図5-1のGUI画面の例題では,次に示す手順に従って作成します。

  1. 定義を開始します
  2. タイトルと画面に関する情報を定義します
  3. オブジェクトを配置します
    • 得意先コードの欄を定義します
    • 数量の欄を定義します
    • 入金区分の欄を定義します
    • 商品名の欄を定義します
    • 割引特典の欄を定義します
    • グループボックスを定義します
    • プッシュボタンを定義します
  4. 完成したGUI画面を確認します
  5. 定義を終了します
<この節の構成>
(1) 定義を開始します
(2) タイトルと画面に関する情報を定義します
(3) オブジェクトを配置します
(4) 完成したGUI画面を確認します
(5) 定義を終了します
(6) 作成されるファイル
(7) オブジェクトのデータ名に関する注意事項

(1) 定義を開始します

  1. Windowsの[スタート]にあるプログラム一覧から[XMAP3]-[XMAP3 Developer]-[ドロー]を選びます。
    [新規・更新選択]ダイアログが表示されます。

    [図データ]

  2. 「画面・帳票・書式を新規作成する」を選びます。
  3. [OK]ボタンを選びます。
    [新規作成]ダイアログが表示されます。

    [図データ]

  4. 「マップ名」に「JYU1GC」と入力します。
  5. 「定義対象の選択」から「GUI画面(一次)」を選び,「パターンの選択」から「中汎用ウィンドウ」を選びます。「言語種別」が「COBOL」になっていることを確認します。

    [図データ]

  6. [OK]ボタンを選びます。
    GUI画面定義ウィンドウが表示されます。

    [図データ]

(2) タイトルと画面に関する情報を定義します

  1. ツールバーから[図データ]([画面属性]アイコン)を選びます。
    [画面属性]ダイアログが表示されます。
  2. [画面属性]ダイアログで次のように設定します。
    • 画面の縦方向のますに「36」,横方向のますに「48」を入力します。
    • 「ウィンドウ」の背景色から「白」を選びます。
    • 「タイトル」に「受注データ入力」と入力します。

      [図データ]

  3. [メニューバー定義]ボタンを選びます。
    [メニューバー定義]ダイアログが表示されます。
  4. [メニューバー定義]ダイアログで次のように設定します。
    • 「プルダウンメニュー」・・・「終了」
    • 「通知コード」・・・「PF03」

      [図データ]

  5. [OK]ボタンを選んで,[メニューバー定義]ダイアログを閉じます。
    [画面属性]ダイアログが表示されます。
  6. [OK]ボタンを選びます。
    GUI画面定義ウィンドウが表示されます。

    [図データ]

(3) オブジェクトを配置します

オブジェクトを配置する手順について説明します。

説明文中にある「△」は,半角1文字分の空白を示します。

(a) 得意先コードの欄を定義します
  1. ツールボックスから[図データ](固定テキスト(日本語))を選びます。
  2. レイアウト領域の「縦 5」「横 6」にポインタを位置づけてクリックします。
  3. 「得意先コード」と入力したあとで,[Enter]キーを押します。
    「得意先コード」が配置されます。

    [図データ]

  4. ツールボックスの[図データ](入出力テキスト(文字用))を数回クリックして,[図データ](入出力テキスト(英数))を選びます。
  5. レイアウト領域の「縦 5」「横 22」に,ポインタを位置づけてクリックします。
    自動的に横8ます分の入出力テキストが配置されます。

    [図データ]

(b) 数量の欄を定義します
  1. ツールボックスから[図データ](固定テキスト(日本語))を選びます。
  2. レイアウト領域の「縦 28」「横 6」にポインタを位置づけてクリックします。
  3. 「数量」と入力したあとで,[Enter]キーを押します。
    同様に,[図データ](固定テキスト(日本語))を選び,レイアウト領域の「縦 28」「横 29」の位置に定義して,「台」と入力します。
    オブジェクトが次のように配置されます。

    [図データ]

  4. ツールボックスの[図データ](入出力テキスト(数字))を数回クリックして[図データ](入出力テキスト(数値))を選びます。
  5. レイアウト領域の「縦 28」「横 19」にポインタを位置づけてクリックします。
    自動的に横4ます分の入出力テキストが配置されます。

    [図データ]

  6. 定義した入出力テキストをダブルクリックします。
    [入出力テキストボックス]ダイアログが表示されます。
  7. 「空白入力」から「禁止」を選びます。

    [図データ]

  8. [OK]ボタンを選びます。
    GUI画面定義ウィンドウが表示されます。
(c) 入金区分の欄を定義します
  1. ツールボックスから[図データ](固定テキスト(日本語))を選びます。次に,レイアウト領域の「縦 9」「横 6」にポインタを位置づけクリックします。

    [図データ]

  2. 「入△金△区△分」と入力したあとで,[Enter]キーを押します。

    [図データ]

  3. ツールボックスから[図データ](固定ラジオボタン(新規))を選びます。
  4. レイアウト領域の「縦 9」「横 19」にポインタを位置づけ,「縦 10」「横 14」サイズ分ドラッグします。

    [図データ]

  5. いちばん上のラジオボタンのラベルをクリックしたあとで,「現△△△△金」と入力します。
  6. [Enter]キーを押します。

    [図データ]

    同様に,ほかの二つのボタンに「手△△△△形」,「銀行振込」と入力します。

    [図データ]

  7. いちばん上のラジオボタンの領域をダブルクリックします。
    [固定ラジオボタン]ダイアログが表示されます。

    [図データ]

  8. 「動的変更(APから表示属性を変更する)」のチェックボタンをオンにしたあとで,[OK]ボタンを選びます。

    [図データ]

    残り二つのボタンについても,[固定ラジオボタン]ダイアログを表示させて,「動的変更(APから表示属性を変更する)」を設定します。
(d) 商品名の欄を定義します
  1. ツールボックスから[図データ](固定テキスト(日本語))を選びます。
  2. レイアウト領域の「縦 19」「横 6」にポインタを位置づけクリックします。
  3. 「商△品△名」と入力したあとで,[Enter]キーを押します。

    [図データ]

  4. ツールボックスから[図データ](リストボックス(単一選択))を選びます。
  5. レイアウト領域の「縦 21」「横 6」にポインタを位置づけ,「縦6」「横26」サイズ分ドラッグします。

    [図データ]

  6. 定義したリストボックスをダブルクリックします。
    [単一選択リストボックス]ダイアログが表示されます。
  7. プレーンの行に「6」と入力します。

    [図データ]

  8. [OK]ボタンを選びます。
    GUI画面定義ウィンドウが表示されます。
(e) 割引特典の欄を定義します
  1. ツールボックスから[図データ](固定テキスト(日本語))を選びます。
  2. レイアウト領域の「縦 31」「横 6」にポインタを位置づけクリックします。
  3. 「割引特典」と入力したあとで,[Enter]キーを押します。

    [図データ]

  4. ツールボックスから[図データ](固定チェックボタン(単独/追加))を選びます。
  5. レイアウト領域の「縦 31」「横 18」にポインタを位置づけクリックします。

    [図データ]

  6. 配置されたチェックボタンをダブルクリックします。
    [固定チェックボタン]ダイアログが表示されます。
  7. 「ラベル」に「割引あり」と入力します。

    [図データ]

  8. [OK]ボタンを選びます。
(f) グループボックスを定義します
  1. ツールボックスから[図データ](グループボックス(枠あり))を選びます。
  2. レイアウト領域の「縦 3」「横 3」にポインタを位置づけ,「縦 32」「横 31」サイズ分ドラッグします。

    [図データ]

(g) プッシュボタンを定義します
  1. ツールボックスから[図データ](プッシュボタン(複数))を選びます。
  2. レイアウト領域の「縦 4」「横 36」にポインタを位置づけ,「縦 7」「横 11」サイズ分ドラッグします。

    [図データ]

  3. 上のプッシュボタンをダブルクリックします。
    [プッシュボタン]ダイアログが表示されます。
  4. 「テキスト」に表示されている「OK」を削除して,「次入力」と入力します。また,「通知コード」に「PF02」を設定します。

    [図データ]

  5. [OK]ボタンを選びます。
    同様に,[キャンセル]のプッシュボタンをダブルクリックします。表示された[プッシュボタン]ダイアログで,「テキスト」の「キャンセル」を削除したあとで,「終△△了」と入力します。また,「通知コード」に「PF03」を設定します。

    [図データ]

(4) 完成したGUI画面を確認します

  1. ツールバーから[図データ](テスト表示)を選びます。
    実際に画面上で表示されるレイアウトを確認します。気になる部分があれば,「2.2.5 レイアウト定義の基本操作を紹介します」を参照して修正してください。
    テスト表示・印刷をするためには,XMAP3 Server RuntimeまたはXMAP3 Client Runtimeをインストールする必要があります。
    [図データ]
  2. テスト表示されたGUI画面から[終了]のプッシュボタンを選びます。
    任意のファンクションキー,または[Enter]キーを押してテスト表示を終了することもできます。
  3. ツールバーから[図データ](論理マップ表示)を選び,論理マップを確認します。

    [図データ]

  4. [閉じる]ボタンを選びます。
    GUI画面定義ウィンドウが表示されます。

(5) 定義を終了します

  1. ツールバーから[図データ](ドローの終了)を選びます。またはメニューバーの[ファイル]-[ドローの終了]を選びます。

    [図データ]

  2. レイアウト定義の保存を問い合わせるダイアログから[はい]ボタンを選びます。
    [名前を付けて保存]ダイアログが表示されます。
  3. ファイル名を確認して[保存]ボタンを選びます。
    自動的に論理マップと物理マップが生成されます。

(6) 作成されるファイル

レイアウト定義を保存してドローを終了すると,レイアウト定義を保存したフォルダに次のファイルが作成されます。なお,ファイル名は,指定したマップ名によって異なります。ここでは,例題どおりマップ名を「JYU1GC」と指定した場合のファイル名を示します。

(7) オブジェクトのデータ名に関する注意事項

定義した画面の各項目に対応するデータ名(COBOLプログラムで参照・更新するデータ領域の名称)は,XMAP3が適当な名称を仮定します。通常の開発手順では,仮定されたデータ名を参照しながらコーディングを行います。

ただし,サポートサービスで提供するCOBOLプログラムのコーディングサンプルをそのまま使う場合には,各項目のデータ名は,コーディングサンプルで参照・更新している領域名に合わせておく必要があります。

サポートサービスで提供するCOBOLプログラムをそのまま使用する場合には,ドローのレイアウト定義画面から,メニューバーの[属性]-[データ名]を選んで「データ名編集」画面を表示し,データ名を修正してください。

サンプルで設定しているデータ名を次の画面に示します。データ名が異なる場合は,次の画面の「データ名」に合わせて修正してください。なお,データ名とオブジェクト名の対応については,「5.2(6) 作成されるファイル」を参照してください。

[図データ]