6.2 CUI画面を作成しましょう

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

  1. 定義を開始します
  2. タイトルを定義します
  3. オブジェクトを配置します
    • 得意先コードの欄を定義します
    • 入金区分の欄を定義します
    • ファンクションキーのガイダンスを定義します
  4. 完成したCUI画面を確認します
  5. 文字色を変更します
  6. 定義を終了します
<この節の構成>
(1) 定義を開始します
(2) タイトルを定義します
(3) オブジェクトを配置します
(4) 完成したCUI画面を確認します
(5) 文字色を変更します
(6) 定義を終了します
(7) 作成されるファイル
(8) オブジェクトのデータ名に関する注意事項

(1) 定義を開始します

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

    [図データ]

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

    [図データ]

  4. 「マップ名」に「JYU1CC」と入力します。
  5. 「定義対象の選択」から「CUI画面」を選び,「パターンの選択」から「フリー」を選びます。「言語種別」が「COBOL」になっていることを確認します。

    [図データ]

  6. [OK]ボタンを選びます。
    [画面属性]ダイアログが表示されます。

    [図データ]

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

    [図データ]

(2) タイトルを定義します

  1. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  2. レイアウト領域の「3行」「27列」にポインタを位置づけクリックします。
  3. 「受注データ入力」と入力したあとで,[Enter]キーを押します。

    [図データ]

  4. [受注データ入力]をダブルクリックします。
    [固定フィールド]ダイアログが表示されます。

    [図データ]

  5. 「文字の拡大」から「倍角」を選びます。

    [図データ]

  6. [OK]ボタンを選びます。

    [図データ]

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

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

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

(a) 得意先コードの欄を定義します
  1. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  2. レイアウト領域の「7行」「11列」にポインタを位置づけてクリックします。
  3. 「得意先コード△:△( 」と入力したあとで,[Enter]キーを押します。
    「:」と「( 」は半角文字で入力します。

    [図データ]

  4. ツールボックスの[図データ](入出力フィールド(日本語))を数回クリックして[図データ](入出力フィールド(英数))を選びます。
  5. レイアウト領域の「7行」「28列」にポインタを位置づけてクリックします。
    8列分の入出力フィールドが配置されます。

    [図データ]

  6. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  7. レイアウト領域の「7行」「37列」にポインタを位置づけクリックします。
  8. 「 )」と入力して[Enter]キーを押します。
    「 )」は半角文字で入力します。同様に,「商品コード」,「数量」の欄を定義します。

    [図データ]

注※1
入出力フィールド(英数)は,クリックすると8列分の領域が配置されます。領域を8列より多く,または少なく取りたい場合は,必要な分だけドラッグしてください。ここでは,5列分をドラッグします。
注※2
入出力フィールド(数字)は,クリックすると4列分の領域が配置されます。領域を4列より多く,または少なく取りたい場合は,必要な分だけドラッグしてください。ここでは,4列分の領域を配置します。
[図データ]
(b) 入金区分の欄を定義します
  1. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  2. レイアウト領域の「10行」「11列」にポインタを位置づけてクリックします。
  3. 「入△金△区△分△△:△( 」と入力したあとで,[Enter]キーを押します。

    [図データ]

  4. ツールボックスから[図データ](入出力フィールド(英数))を選びます。
  5. レイアウト領域の「10行」「28列」にポインタを位置づけ,1列分ドラッグします。
  6. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  7. レイアウト領域の「10行」「30列」にポインタを位置づけてクリックします。
  8. 「 )△△△( △1=現金△2=手形△3=銀行振込△) 」と入力したあとで,[Enter]キーを押します。

    [図データ]

    同様に,「割引特典」の欄を定義します。

    [図データ]

    [図データ]

(c) ファンクションキーのガイダンスを定義します
  1. ツールボックスから[図データ](固定フィールド(日本語))を選びます。
  2. レイアウト領域の「23行」「11列」にポインタを位置づけてクリックします。
  3. 「F2△△:△△次入力△△△△△△△△△△F3△△:△△終了」と入力し,[Enter]キーを押します。

    [図データ]

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

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

    [図データ]

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

(5) 文字色を変更します

  1. ツールバーから[図データ](文字色)を選び,タイトルの「受注データ入力」をクリックします。
  2. ツールボックスから[図データ](文字色(空色))ボタンを選びます。
    タイトル「受注データ入力」の表示色が空色に変わります。

    [図データ]

  3. ツールバーから[図データ](レイアウトへ戻る)を選びます。
    CUI画面定義ウィンドウに戻ります。再度テスト表示して全体のバランスを確認しましょう。

(6) 定義を終了します

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

    [図データ]

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

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

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

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

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

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

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

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

[図データ]