5 GUI 画面を作成しましょう
5.2 GUI 画面を作成しましょう
図
5-1
のGUI
画面の例題は，次に示す作成手順に従って作成します。1.
定義を開始します2.
タイトルと画面に関する情報を定義します3.
オブジェクトを配置します• 得意先コードの欄を定義します
• 数量の欄を定義します
• 入金区分の欄を定義します
• 商品名の欄を定義します
• 割引特典の欄を定義します
• グループボックスを定義します
• プッシュボタンを定義します
4.
完成したGUI
画面を確認します5.
定義を終了します（1） 定義を開始します
1.
［スタート］−［プログラム］−［XMAP3］から［ドロー］アイコンを選びます。「新規・更新選択」ダイアログボックスが表示されます。
2.
［画面・帳票・書式を新規作成する］を選びます。4.
［マップ名］に「JYU1GC」と入力します。5.
［定義対象の選択］から「GUI画面（一次）」を選び，［パターンの選択］から「中汎 用ウィンドウ」を選びます。［言語種別］が「COBOL」になっていることを確認しま す。6.
［OK］ボタンを選びます。「GUI画面定義」ウィンドウが表示されます。
（2） タイトルと画面に関する情報を定義します
1.
ツールバーから （［画面属性］アイコン）を選びます。「画面属性」ダイアログボックスが表示されます。
2.
「画面属性」ダイアログボックスで次のように設定します。• 画面の縦方向のますに「36」，横方向のますに「48」を入力します。
•［ウィンドウ］の背景色から「白」を選びます。
•［タイトル］に「受注データ入力」と入力します。
3.
［メニューバー定義］ボタンを選びます。「メニューバー定義」ダイアログボックスが表示されます。
4.
「メニューバー定義」ダイアログボックスで次のように設定します。•［プルダウンメニュー］・・・「終了」
•［通知コード］・・・「PF03」
5.
［OK］ボタンを選んで，ダイアログボックスを閉じます。「画面属性」ダイアログボックスが表示されます。
6.
［OK］ボタンを選びます。「GUI画面定義」ウィンドウが表示されます。
（3） オブジェクトを配置します
（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］キーを押します。ドラッグします。
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 レイアウト定義の基本操作を紹介します」を参照して修正してください。
2.
テスト表示されたGUI
画面から［終了］のプッシュボタンを選びます。任意のファンクションキー，または［Enter］キーを押してテスト表示を終了するこ ともできます。
3.
ツールバーから （論理マップ表示）を選び，論理マップを確認します。4.
［閉じる］ボタンを選びます。「GUI画面定義」ウィンドウが表示されます。
（5） 定義を終了します
1.
ツールバーから （ドローの終了）を選びます。またはメニューバーの［ファイ ル］−［ドローの終了］を選びます。2.
レイアウト定義の保存を問い合わせるダイアログボックスから［はい］ボタンを選び ます。「名前を付けて保存」ダイアログボックスが表示されます。
3.
ファイル名を確認して［保存］ボタンを選びます。自動的に論理マップと物理マップが生成されます。
（6） オブジェクトのデータ名に関する注意事項
定義した画面の各項目に対応するデータ名（COBOLプログラムで参照・更新するデー タ領域の名称）は，XMAP3が適当な名称を仮定します。通常の開発手順では，仮定され たデータ名を参照しながらコーディングを行います。
ただし，製品添付の
COBOL
プログラムのコーディングサンプルをそのまま使う場合にデータ名を修正する必要があります。
サンプルで設定しているデータ名を次に示します。データ名が異なる場合は，次の内容 に合わせて修正してください。なお，データ名とオブジェクト名の対応については「付 録