画面・帳票サポートシステム　XMAP3　入門

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

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

1. 定義を開始します
2. タイトルと画面に関する情報を定義します
3. オブジェクトを配置します
   
   • 得意先コードの欄を定義します
   • 数量の欄を定義します
   • 入金区分の欄を定義します
   • 商品名の欄を定義します
   • 割引特典の欄を定義します
   • グループボックスを定義します
   • プッシュボタンを定義します
4. 完成したGUI画面を確認します
5. 定義を終了します

＜この節の構成＞

(1)　定義を開始します

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

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

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

(5)　定義を終了します

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

(1)　定義を開始します

1. ［スタート］−［プログラム］−［XMAP3］から［ドロー］アイコンを選びます。
   「新規・更新選択」ダイアログボックスが表示されます。
   

   

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)　オブジェクトを配置します

(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　レイアウト定義の基本操作を紹介します」を参照して修正してください。
   

   

2. テスト表示されたGUI画面から［終了］のプッシュボタンを選びます。
   任意のファンクションキー，または［Enter］キーを押してテスト表示を終了することもできます。
   

3. ツールバーから（論理マップ表示）を選び，論理マップを確認します。
   

   

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

(5)　定義を終了します

1. ツールバーから（ドローの終了）を選びます。またはメニューバーの［ファイル］−［ドローの終了］を選びます。
   

   

2. レイアウト定義の保存を問い合わせるダイアログボックスから［はい］ボタンを選びます。
   「名前を付けて保存」ダイアログボックスが表示されます。
   

3. ファイル名を確認して［保存］ボタンを選びます。
   自動的に論理マップと物理マップが生成されます。
   

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

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

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

製品添付のCOBOLプログラムをそのまま使用する場合には，ドローのレイアウト定義画面から，メニューバーの［属性］−［データ名］を選んで「データ名」画面を表示し，データ名を修正する必要があります。

サンプルで設定しているデータ名を次に示します。データ名が異なる場合は，次の内容に合わせて修正してください。なお，データ名とオブジェクト名の対応については「付録A　例題プログラムの論理マップ」を参照してください。

[目次][前へ][次へ]

All Rights Reserved. Copyright (C) 2001, 2004, Hitachi, Ltd.