表紙

EasyServlet V2 EsScreenEditorを 利 用 した Webアプリケーション 作 成 株 式 会 社 システムズリサーチ

1.1 EsScreenEditor 概 要 第 1 章 概 要 本 章 では EasyServletの 画 面 作 成 ツールであるEsScreenEditorの 概 要 について 説 明 します EasyServletは 本 来 Excelで 記 述 されたインタフェース 仕 様 書 を 記 述 することで Servletの 画 面 ソースで あるJSPソースを 自 動 生 成 しますが EsScreenEditorを 利 用 することで よりインタラクティブにEasyServlet の 画 面 を 作 成 することができます 1

1.1 EsScreenEditor 概 要 1.1 EsScreenEditor 概 要 EsScreenEditorは インタフェース 仕 様 書 で 記 述 された 画 面 定 義 を 読 み 込 んで レイアウトを 変 更 する レ イアウトモード 新 規 に 画 面 を 作 成 しインタフェース 仕 様 書 に 記 述 されたビジネスロジックとのインタフェー スと 画 面 項 目 を 関 連 付 ける エディットモード の2つのモードがあります 2つのモードには それぞれ 以 下 の 特 徴 があります レイアウトモード エディットモード インタフェース 仕 様 書 の 画 面 オプション 以 外 を 記 述 し 画 面 オプシ ョン 部 分 に 相 当 するセル 幅 等 の 調 整 を 実 際 に 画 面 を 見 ながら 調 整 するこ とが 可 能 です レベル 番 号 による エントリ 形 式 一 覧 形 式 等 のコンポーネント 配 置 ポリシーに 従 って コンポーネントを 配 置 します インタフェース 仕 様 書 を 記 述 していない 状 態 でも 画 面 をインタラクティ ブに 作 成 することが 可 能 です インタフェース 仕 様 書 で 表 現 不 可 能 な タイルレイアウト セル 縦 連 結 等 を 使 用 した 画 面 を 作 成 することができます レベル 番 号 による エントリ 形 式 一 覧 形 式 等 のコンポーネント 配 置 ポリシーに 従 いません 画 面 作 成 後 インタフェース 仕 様 書 の 項 目 と 画 面 項 目 を 関 連 付 けることで アプリケーションを 作 成 します またEsScreenEditorは Ajax 技 術 によりJavascript+HTMLで 構 築 されているため EsScreenEditor 作 成 され た 画 面 と 実 際 に 動 作 する 画 面 が 異 なるということがありません EsScreenEditorによる 画 面 作 成 時 EsScreenEditorにより 生 成 されたHTML 画 面 2

1.2 レイアウトモード 1.2 レイアウトモード インタフェース 仕 様 書 の 画 面 オプション 以 外 の 部 分 を アプリケーション 作 成 ガイド 第 3 章 インタ フェース 仕 様 書 定 義 に 従 い 記 述 し プレビューボタンを 押 下 することにより EsScreenEditorレイアウトモ ードを 起 動 することができます レイアウトモードの 起 動 インタフェース 仕 様 書 を 記 述 し シートチェックを 行 い プレビューボタンを 押 すこと で 起 動 マウス 操 作 等 により インタラクティブに 画 面 部 品 のサイズ 調 整 等 が 可 能 3

1.2 レイアウトモード レイアウトモードで 編 集 された 画 面 の 保 存 レイアウトモードで 編 集 された 画 面 イメージを 保 存 することで インタフェース 仕 様 書 の 画 面 オプション 等 の 部 分 に 反 映 することが 可 能 です レイアウトモードで 編 集 され た 画 面 イメージを 保 存 します 保 存 された 情 報 は 画 面 オプ ション 等 のインタフェース 仕 様 書 の 対 応 する 項 目 に 反 映 されます 変 更 された 部 分 を 再 度 インタフェース 仕 様 書 の シートチェック を 行 い 自 動 生 成 を 実 行 します 4

1.2 レイアウトモード レイアウトモードによる 画 面 作 成 の 流 れ 1インタフェース 仕 様 書 シートの 作 成 レベル 番 号 による 画 面 項 目 の 段 組 を 考 慮 し インタフェース 仕 様 書 を 記 述 しま す 画 面 オプションで 指 定 する 部 分 の 細 かな 部 品 位 置 等 のレイアウトに 関 して は レイアウトモードで 調 整 するため 記 述 する 必 要 はありません 2レイアウトモードの 起 動 インタフェース 仕 様 書 の シートチェック を 行 い プレビューボタンを 押 下 することでレイアウトモードを 起 動 します 3レイアウトモードによる 部 品 位 置 等 の 調 整 レイアウトモードにより 部 品 位 置 等 をインタラクティブに 調 整 し 完 成 イメ ージを 保 存 します 4 自 動 生 成 の 実 行 レイアウトモードにより 保 存 されることにより 対 応 するインタフェース 仕 様 書 の 記 述 が 変 更 されるため インタフェース 仕 様 書 の シートチェック を 行 い 自 動 生 成 を 実 行 します 5

1.3 エディットモード 1.3 エディットモード インタフェース 仕 様 書 を 作 成 せずに 画 面 作 成 を 新 規 に 行 うことができます 最 終 的 にインタフェース 仕 様 書 とエディットモードにより 配 置 した 画 面 項 目 の 関 連 付 けを 行 い 自 動 生 成 を 実 行 することでEasyServletに 組 み 込 むことが 可 能 です エディットモードで 使 用 するインタフェース 仕 様 書 は レイアウトモードのインタフェ ース 仕 様 書 と 違 い レベル 番 号 による 画 面 項 目 の 段 組 を 意 識 して 記 述 する 必 要 はありません また 先 にインタフェース 仕 様 書 を 記 述 し 配 置 モードによる 部 品 のドラッグ&ドロップを 行 うことにより 画 面 項 目 の 関 連 付 け インタフェース 仕 様 書 に 記 述 された 項 目 サイズに 基 づく 部 品 サイズ 自 動 調 整 イ ンタフェース 仕 様 書 に 記 述 された 属 性 値 の 関 連 付 けを 一 度 に 行 い 配 置 することもできます エディットモードの 起 動 スタート すべてのプログラム EasyServlet ScreenEditor ScreenEditor を 実 行 す ることで 起 動 します コンポーネント 一 覧 から 画 面 項 目 の 配 置 エディットモード 画 面 の 左 上 の コンポーネント 一 覧 から 画 面 部 品 をドラッグ&ドロ ップで 配 置 し 画 面 作 成 を 行 います 6

1.3 エディットモード インタフェース 仕 様 書 項 目 と 画 面 項 目 の 関 連 付 け コンポーネント 一 覧 から 配 置 した 画 面 項 目 には ビジネスロジックで 扱 うインタフェース 仕 様 書 項 目 と 関 連 付 けがされていないので インタフェース 仕 様 書 を 読 み 込 み 画 面 項 目 との 関 連 付 けを 行 います 配 置 モードによる 画 面 項 目 の 作 成 予 め 作 成 したインタフェース 仕 様 書 を 読 み 込 み 配 置 モードによりドラッグ&ドロップで 画 面 項 目 を 配 置 します 配 置 モードで 配 置 されたコンポーネントはインタフェース 仕 様 書 で 記 述 された 表 現 形 式 サイズ で 配 置 され 関 連 付 けや 属 性 の 有 無 を 後 で 設 定 する 必 要 はありません 7

1.3 エディットモード エディットモードによる 画 面 作 成 の 流 れ(コンポーネント 一 覧 からの 配 置 ) 1エディットモードの 起 動 スタート すべてのプログラム EasyServlet ScreenEditor ScreenEditor を 実 行 することで 起 動 します 2エディットモードによる 画 面 編 集 コンポーネント 一 覧 から 配 置 する 部 品 を 選 択 し 画 面 編 集 領 域 にドラッグ&ド ロップしながら 画 面 イメージを 完 成 させ 保 存 します 3インタフェース 仕 様 書 項 目 の 関 連 付 けと 画 面 書 き 出 し ビジネスロジックで 扱 う 項 目 の 定 義 を 記 述 したインタフェース 仕 様 書 を 作 成 読 み 込 みし 画 面 項 目 との 関 連 付 けを 行 います 関 連 付 けが 終 了 したなら 画 面 書 き 出 し を 行 います エディットモードで 使 用 するインタフェース 仕 様 書 は レイアウトモードのインタフェース 仕 様 書 と 違 い レベル 番 号 による 画 面 項 目 の 段 組 を 意 識 して 記 述 する 必 要 はありません 4 自 動 生 成 の 実 行 自 動 生 成 を 実 行 します 8

1.3 エディットモード エディットモードによる 画 面 作 成 の 流 れ( 配 置 モードからの 配 置 ) 1エディットモードの 起 動 スタート すべてのプログラム EasyServlet ScreenEditor ScreenEditor を 実 行 することで 起 動 します 2インタフェース 仕 様 書 の 作 成 と 読 み 込 み ビジネスロジックで 扱 う 項 目 の 定 義 を 記 述 したインタフェース 仕 様 書 を 作 成 し 読 み 込 みます エディットモードで 使 用 するインタフェース 仕 様 書 は レ イアウトモードのインタフェース 仕 様 書 と 違 い レベル 番 号 による 画 面 項 目 の 段 組 を 意 識 して 記 述 する 必 要 はありません 3エディットモードによる 画 面 編 集 配 置 モードにより 読 み 込 んだインタフェース 仕 様 書 項 目 を 画 面 編 集 領 域 にド ラッグ&ドロップしながら 画 面 イメージを 完 成 させ 保 存 します 4 自 動 生 成 の 実 行 自 動 生 成 を 実 行 します 9

第 2 章 Webアプリケーション 作 成 EsScreenEditorエディットモードを 利 用 して Webアプリケーションを 作 成 します 10

2.1 簡 単 な 画 面 の 作 成 EsScreenEditorのエディットモードを 使 用 して 以 下 のような 簡 単 な 画 面 を 作 成 します ログイン 画 面 閉 じるボタンでブラウザ 終 了 ログインボタンで 発 注 検 索 画 面 に 遷 移 発 注 検 索 画 面 検 索 ボタンで 発 注 検 索 画 面 を 再 表 示 戻 るボタンで ログイン 画 面 に 遷 移 11

2.1.1 コンポーネント 一 覧 からの 画 面 作 成 EsScreenEditorのエディットモードを 利 用 した コンポーネント 一 覧 から 画 面 を 作 成 する 手 順 について 説 明 します 2.1.1.1 ログイン 画 面 の 作 成 EsScreenEditorのエディットモードの 起 動 スタート すべてのプログラム EasyServlet ScreenEditor ScreenEditor を 実 行 す ることで 起 動 します 12

ログインフォームの 作 成 ログイン 画 面 のログインフォームに 使 用 する エントリ 形 式 を 作 成 します コンポーネント 一 覧 から エントリ 形 式 を 左 クリックし エディットフレームにマウスを 移 動 します その 際 マウスアイコンが になるのを 確 認 し エディットフレーム 上 の 描 画 開 始 位 置 で 左 クリックし ドラッグを 行 って 描 画 エリアを 決 定 します 1 エントリ 形 式 を 左 クリック 2 描 画 開 始 位 置 で 左 クリックし ドラッグを 行 って 描 画 エリアを 決 定 ログインフォームの 描 画 エリアを 決 定 すると セル 設 定 ダイアログが 表 示 されます ここでは 列 2: 行 :2 のログインフォームを 作 成 します 13

セル 設 定 が 完 了 すると 以 下 のような エントリ 形 式 が 描 画 されます 14

次 に ユーザIDをテキスト 入 力 する 左 にキャプションを 設 定 します キャプション 化 したい エントリ 形 式 上 のセルを Ctrl+ 左 クリック を 実 行 して セル 文 字 入 力 設 定 ダイアログを 表 示 します セル 文 字 入 力 設 定 ダイアログの Caption 設 定 にチェックし キャプション 文 字 列 を 入 力 部 分 に 入 力 し 設 定 ボタンをクリックします 15

同 様 に パスワードのキャプションを 設 定 します 16

次 に ユーザIDのテキスト 入 力 部 分 を エントリ 形 式 に 配 置 します コンポーネント 一 覧 から テキスト を 左 クリックし エディットフレームにマウスを 移 動 します その 際 マウスアイコンが になるのを 確 認 し エントリ 形 式 内 の 配 置 したいセル 内 で 左 クリックし ドラッグを 行 って 描 画 エリアを 決 定 します 同 様 に コンポーネント 一 覧 から パスワード を 左 クリックし パスワードを 配 置 します 17

エントリ 形 式 の 位 置 サイズ セル 幅 の 調 整 はレイアウトモードと 同 様 の 操 作 で 行 うことができます ただし セル 幅 の 調 整 はレイアウトモードと 違 い 同 じセル 幅 にレイアウトされたセルは 同 時 に 動 きます 同 じセル 幅 にレイアウトされたセルは 同 時 に 動 きます 行 単 位 で 個 別 にセル 幅 調 整 を 行 いたい 場 合 は Ctrl+ドラッグ することで 個 別 にセル 幅 調 整 することが できます セル 内 に 配 置 されたテキスト 部 品 等 は 対 象 となる 部 品 を 左 クリック で 選 択 し 十 字 キーにより 移 動 し ます また Ctrl+ 十 字 キー で 移 動 することによりピクセル 単 位 で 移 動 することが 可 能 です 対 象 となる 部 品 を 左 クリック で 選 択 し 十 字 キーで 移 動 させる 18

テキスト 部 品 のサイズを 変 更 する 場 合 は 対 象 となる 部 品 を 左 ダブルクリック で 選 択 し プロパティ 表 示 させて 文 字 数 サイズ を 変 更 することで COBOL 等 ビジネスロジックから 通 知 されてくる 文 字 のバ イト 数 に 合 わせることができます 対 象 となる 部 品 を 左 ダブルクリック で 選 択 し プロパティフレーム 表 示 19

プロパティの 文 字 数 サイズ を 変 更 することで COBOL 等 ビジネスロジックから 通 知 されて くる 文 字 のバイト 数 に 合 わせる プロパティ 値 を 変 更 する 際 には 値 を 入 力 しEnterキーを 入 力 しなければ 値 が 有 効 とならないため 注 意 してください 20

エントリ 形 式 上 で 一 旦 中 クリック し エントリ 形 式 の 周 りがオレンジの 枠 で 表 示 されている 状 態 で 左 クリック のエディットメニューを 表 示 させ プロパティを 選 択 します エントリ 形 式 の プロパティ グループタイトル に ログイン 情 報 を 入 力 し タイトルを 変 更 します エディットモード 画 面 は 上 部 に 配 置 された メニューバー ツールバー 左 上 部 に 配 置 された コンポー ネント 一 覧 /インタフェース 仕 様 書 取 り 込 み 左 下 部 に 配 置 された プロパティ/スタイルシート 中 央 部 に 配 置 された エディットフレーム 下 部 に 配 置 された メッセージフレーム とレイアウトフレーム 上 で マウス 右 クリックすることでポップアップする エディットメニュー で 構 成 されています プロパティ グループタイトル でタイトルを 変 更 21

ボタンの 配 置 ログイン 画 面 に 使 用 するボタンを 配 置 します コンポーネント 一 覧 から ボタン を 左 クリックし エディットフレームにマウスを 移 動 します その 際 マウスアイコンが になるのを 確 認 し エントリ 形 式 内 の 配 置 したいセル 内 で 左 クリックし ドラッグを 行 って 描 画 エリアを 決 定 します 22

次 に ボタンの 表 示 文 字 を 変 更 します 対 象 のボタンを Ctrl+ 左 クリック を 実 行 して ボタン 値 入 力 設 定 ダイアログを 表 示 し ボタン 表 示 値 を 入 力 し 設 定 します このままでは ボタン 高 さが 足 りないため 全 ての 文 字 が 表 示 されませんので 対 象 となるボタンを 左 ダ ブルクリック で 選 択 し スタイルシート 表 示 させて height を 変 更 することで ボタン 高 さを 変 更 す ることができます スタイルシート height でボタン 高 さを 変 更 23

次 に ログインボタンをコピーして 閉 じるボタンを 作 成 します ボタンが 選 択 されている 状 態 で 右 クリック のエディットメニューを 表 示 させ コピー を 選 択 します エディットフレーム 上 の 空 き 領 域 にマウスを 移 動 し 右 クリック でエディットメニューを 表 示 させ 貼 り 付 け を 選 択 します 24

ログインボタンと 同 様 に ボタンの 表 示 文 字 を 変 更 します 対 象 のボタンを Ctrl+ 左 クリック を 実 行 し て ボタン 値 入 力 設 定 ダイアログを 表 示 し ボタン 表 示 値 を 入 力 し 設 定 します 25

ログインボタンと 閉 じるボタンの 高 さを 合 わせます 2つのボタンを 囲 むようにドラッグを 行 い 選 択 状 態 に します ツールバーの 高 さ 揃 え を 実 行 しログインボタンの 高 さに 合 わせます ツールバーの 高 さ 揃 え を 実 行 26

また ログインボタンの 左 位 置 をログインフォームの 左 側 に 合 わせます 一 旦 画 面 上 の 全 ての 項 目 を 選 択 状 態 にします 閉 じるボタンのみを 選 択 状 態 から 解 除 します Shift+ 左 クリック で 閉 じるボタンを 選 択 します 27

ツールバーの 左 揃 え を 実 行 しログインフォームの 左 にログインボタンを 合 わせます ツールバーの 左 揃 え を 実 行 あとは 閉 じるボタンを 選 択 し 十 字 キーにより 位 置 調 整 を 行 います 28

ファイルの 保 存 メニュー ファイル 名 前 を 付 けて 保 存 で 作 成 したファイルを 保 存 します 本 例 では ディスクトップの LOGIN という 名 前 で 保 存 しています 保 存 が 完 了 すると 指 定 されたフォルダ 配 下 に LOGIN.ess ファイルが 出 力 されます 29

2.1.1.2 発 注 検 索 画 面 の 作 成 画 面 の 新 規 作 成 ログイン 画 面 に 引 き 続 き 発 注 検 索 画 面 の 作 成 を 行 います メニューバー ファイル 新 規 作 成 を 実 行 します 30

画 面 タイトル 作 成 発 注 検 索 画 面 の 画 面 タイトルを エントリ 形 式 で 作 成 します コンポーネント 一 覧 から エントリ 形 式 をセル 設 定 列 :1 行 :1 で 配 置 します エントリ 形 式 上 のセルを Ctrl+ 左 クリック を 実 行 して セル 文 字 入 力 設 定 ダイアログを 表 示 し 画 面 タイトルの 文 字 列 を 入 力 し Caption 設 定 をチェックします セル 文 字 入 力 設 定 の 下 部 に 配 置 されているツールバーを 操 作 し 背 景 色 フォント 色 当 を 変 更 すること も 可 能 です 31

エントリ 形 式 の プロパティ グループタイトル の 文 字 列 を 消 去 することでタイトルを 削 除 しま す 32

検 索 条 件 フォームの 作 成 発 注 検 索 画 面 の 検 索 条 件 フォームに 使 用 する エントリ 形 式 を 作 成 します コンポーネント 一 覧 から エントリ 形 式 をセル 設 定 行 :2 列 :1 で 配 置 します 左 セルにキャプション 設 定 を 行 い 右 セルには 発 注 番 号 を 入 力 するテキスト 検 索 ボタンを 配 置 します 次 に 絞 込 み 条 件 を 配 置 します コンポーネント 一 覧 から 枠 線 を 配 置 します 33

枠 線 内 に ラジオ を 配 置 します 静 的 データ 設 定 で ラジオの 値 を 入 力 します 枠 線 各 ラジオの 項 目 の スタイルシート に fontweight を 追 加 し bold を 設 定 します また 各 ラジオの 項 目 の スタイルシート color に red or blue を 設 定 します デフォルトの スタイルシート 存 在 しない スタイルを 追 加 する 場 合 は スタイルシートフレーム の 最 下 部 に 表 示 されている スタイル 追 加 項 目 を 追 加 したいスタイルを 入 力 してEnterを 押 すことで 追 加 されま す 新 規 スタイルが 追 加 される 34

検 索 結 果 フォームの 作 成 発 注 検 索 画 面 の 検 索 検 索 フォームに 使 用 する 一 覧 形 式 を 作 成 します コンポーネント 一 覧 から 一 覧 形 式 をセル 設 定 行 :4 列 :10 で 配 置 します また 一 覧 形 式 の プロパティ 一 覧 ページ 情 報 リスト 設 定 のチェックを 外 すことで 一 覧 形 式 の 上 部 に 表 示 されている 部 品 を 非 表 示 にすることもできます 35

一 覧 形 式 の 上 部 にあるキャプション 部 分 を Ctrl+ 左 クリック を 実 行 して セル 文 字 入 力 設 定 ダイ アログを 表 示 し 各 一 覧 の 項 目 キャプションを 入 力 します 一 覧 形 式 の 各 カラムに ラベル を 配 置 します コンポーネント 一 覧 から ラベル を 選 択 し 一 覧 形 式 の1 行 目 に 配 置 します また 最 右 カラムには ラベル を2つ 配 置 します 一 覧 形 式 の の1 行 目 に 配 置 する 36

一 覧 形 式 の 最 右 カラムの 調 整 を 行 います 右 の ラベル を 選 択 し Enterを 入 力 することで 次 の 行 にラベルが 移 動 します 更 にコンポーネント 一 覧 から 区 切 り 線 を 配 置 し ラベル 間 に 挿 入 するため 区 切 り 線 をドラッグ し 2つ 目 の ラベル と 位 置 を 入 れ 替 えます あとは 一 覧 内 のラベル 等 のコンポーネントを 選 択 し 十 字 キーで 移 動 します 区 切 り 線 をドラッグし 2つ 目 の ラベル と 位 置 を 入 れ 替 えます 37

合 計 金 額 フォームの 作 成 発 注 検 索 画 面 の 合 計 金 額 フォームに 使 用 する エントリ 形 式 を 作 成 します コンポーネント 一 覧 から エントリ 形 式 をセル 設 定 列 :1 行 :2 で 配 置 します キャプション 部 分 の 設 定 や 一 覧 形 式 から ラベル 区 切 り 線 をコピー ペースト 等 を 行 い 部 品 を 配 置 していきます 38

戻 るボタンの 作 成 コンポーネント 一 覧 から ボタン を 配 置 し 戻 るボタンを 作 成 します ファイルの 保 存 メニュー ファイル 名 前 を 付 けて 保 存 で 作 成 したファイルを 保 存 します 本 例 では ディスクトップの SCH という 名 前 で 保 存 しています 保 存 が 完 了 すると 指 定 されたフォルダ 配 下 に SCH.ess ファイルが 出 力 されます 39

2.1.1.3 インタフェース 仕 様 書 の 作 成 DevelopmentFactoryプロジェクトの 新 規 作 成 DevelopmentFactoryツールバー プロジェクト プロジェクトの 新 規 作 成 で プロジェクトを 新 規 作 成 します 40

インタフェース 仕 様 書 シートの 新 規 作 成 (ログイン 画 面 用 ) ログイン 画 面 用 のインタフェース 仕 様 書 を 新 規 に 作 成 します DevelopmentFactoryツールバー 仕 様 書 インタフェース 仕 様 書 シートの 新 規 作 成 を 行 います 作 成 したインタフェース 仕 様 書 シートに 対 して 以 下 を 記 述 し アクティブシートチェック を 実 行 します ユーザID パスワードには 属 性 値 が 設 定 されています 属 性 値 も 関 連 付 けに 必 要 な 項 目 となっています 41

インタフェース 仕 様 書 シートの 新 規 作 成 ( 発 注 検 索 画 面 用 ) 発 注 検 索 画 面 用 のインタフェース 仕 様 書 を 新 規 に 作 成 します DevelopmentFactoryツールバー 仕 様 書 インタフェース 仕 様 書 シートの 新 規 作 成 を 行 います 作 成 したインタフェース 仕 様 書 シートに 対 して 以 下 を 記 述 し アクティブシートチェック を 実 行 します 42

2.1.1.4 インタフェース 仕 様 書 の 関 連 付 け(ログイン 画 面 ) ファイルを 開 く EsScreenEditorエディットモードを 起 動 し ファイル 開 く で 保 存 したログイン 画 面 を 開 きます インタフェース 仕 様 書 を 取 り 込 む インタフェース 仕 様 書 取 り 込 みフレームに 切 り 替 えて I/F 選 択 ボタンをクリックし 関 連 付 け 対 象 となる インタフェース 仕 様 書 を 選 択 します インタフェース 仕 様 書 は DevelopmentFactory プロジェクト \Interface-Spec 配 置 にあります 43

インタフェース 仕 様 書 の 取 り 込 みが 完 了 してから 画 面 ID のコンボボックスで 表 示 されているシート ロ グイン 画 面 を 選 択 します インタフェース 仕 様 書 シートの 選 択 を 行 うと インタフェース 仕 様 書 取 り 込 みフレーム にインタフェース 仕 様 書 で 定 義 された 項 目 の 一 覧 が 表 示 されます 44

画 面 項 目 の 関 連 付 け インタフェース 仕 様 書 取 り 込 みフレーム の 配 置 モードを 関 連 付 け して エディットフレーム 上 のユ ーザIDを 入 力 するテキストを 選 択 します 1 関 連 付 け をチェック 2 関 連 付 けを 行 う 画 面 項 目 を 選 択 3インタフェース 仕 様 書 シート 上 で 対 応 する 項 目 の 選 択 をクリック 45

関 連 付 けが 完 了 すると プロパティ 名 前 にインタフェース 仕 様 書 の 項 目 が 入 力 され メッセージフ レームに 関 連 付 けを 行 いました[ユーザID] が 表 示 されます また ユーザID パスワードにはインタフェース 仕 様 書 シートで 属 性 値 が 定 義 されているため プロパテ ィ 属 性 値 にチェックを 付 けます 46

同 様 の 手 順 で パスワード ログインボタン 閉 じるボタン に 関 連 付 けを 行 います 以 下 に 対 応 付 けるインタフェース 仕 様 書 項 目 を 示 します ユーザID パスワード ログインボタン 戻 るボタン 47

また 後 で 関 連 付 けを 確 認 したい 場 合 は インタフェース 仕 様 書 シートで 定 義 された 項 目 の 選 択 をクリ ックすることで 対 応 する 項 目 が 通 知 されます 1インタフェース 仕 様 書 シ ートで 定 義 された 項 目 の 選 択 をクリック 2 関 連 付 けされた 画 面 項 目 を 通 知 48

カーソル 遷 移 順 の 設 定 関 連 付 けが 完 了 すると カーソルの 遷 移 順 番 を 設 定 することができます これは Webアプリケーションとし て 動 作 する 際 に 十 字 キーを 使 用 した 画 面 項 目 移 動 の 際 フォーカス 遷 移 順 番 を 決 定 するものです デフォルトだと 配 置 したコンポーネントの 順 番 となっているため ツールバー 表 示 カーソル 順 設 定 でカーソル 順 番 を 設 定 します カーソル 設 定 表 示 をクリック 49

カーソル 設 定 表 示 をクリックすることで デフォルトの 画 面 遷 移 順 が 表 示 されます 十 字 キー クリックし を 指 定 す ることで 対 応 する 画 面 項 目 を 通 知 50

デフォルトでは 以 下 のような カーソル 順 設 定 となっています 1 行 1 番 目 ユーザID 2 行 1 番 目 パスワード 3 行 1 番 目 ログインボタン 4 行 1 番 目 閉 じるボタン このため 見 た 目 が ログインボタン 閉 じるボタン が 隣 接 しているのにも 関 わらず ログインボタン が3 行 目 閉 じるボタン が4 行 目 と 認 識 されているため 閉 じるボタン で 十 字 キー 上 を 押 しても パス ワード に 遷 移 せずに ログインボタン に 遷 移 します 上 下 で 設 定 されているため 左 右 の 関 係 がない 51

以 下 のような カーソル 順 設 定 とし ログインボタン と 閉 じるボタン を 隣 接 し 左 右 キーで 項 目 移 動 ができるようにします 4 行 1 番 目 にある をドラッグして3 行 2 番 目 に 移 動 します 1 行 1 番 目 ユーザID 2 行 1 番 目 パスワード 3 行 2 番 目 閉 じるボタン 3 行 1 番 目 ログインボタン 1 2 3 4 デフォルトのカーソル 順 右 キーを 押 し 続 けた 時 1 2 3 4 下 キーを 押 し 続 けた 時 1 2 3 4 左 キーを 押 し 続 けた 時 4 3 2 1 上 キーを 押 し 続 けた 時 4 3 2 1 カーソル 順 設 定 後 のカーソル 順 右 キーを 押 し 続 けた 時 1 2 3 4 下 キーを 押 し 続 けた 時 1 2 3or4 左 キーを 押 し 続 けた 時 4 3 2 1 上 キーを 押 し 続 けた 時 3or4 2 1 52

画 面 の 書 き 出 し 関 連 付 けの 終 わった 画 面 を ツールバー ファイル 画 面 の 書 き 出 し でEasyServletに 組 み 込 み 可 能 な 形 式 にします 確 認 ダイアログが 表 示 されます OKをクリックします 53

画 面 ID 確 認 ダイアログが 表 示 されます 関 連 付 けられたインタフェース 仕 様 書 シートの 画 面 IDと 一 致 してい ることを 確 認 してOKをクリックします 画 面 書 き 出 しが 完 了 したダイアログが 出 力 されます OKをクリックします 重 要 画 面 書 き 出 しが 完 了 した 画 面 ファイル(.ess) は DevelopmentFactory プロジェクト \GuiRelateFiles\ess 配 下 で 管 理 されます ファイル 書 き 出 しを 行 った 画 面 のメンテナンスは 本 フ ァイルを 対 象 に 行 ってください 54

2.1.1.5 インタフェース 仕 様 書 の 関 連 付 け( 発 注 検 索 画 面 ) 画 面 項 目 の 関 連 付 け ログイン 項 目 と 同 様 の 手 順 で 画 面 項 目 の 関 連 付 けを 行 います 以 下 に 対 応 付 けるインタフェース 仕 様 書 項 目 を 示 します 発 注 番 号 検 索 ボタン 検 索 結 果 絞 込 み 単 価 製 品 番 号 製 品 名 数 量 単 価 税 込 み 合 計 金 額 戻 るボタン 合 計 金 額 税 込 み 一 覧 形 式 の 場 合 インタフェース 仕 様 書 項 目 の 表 現 形 式 一 覧 形 式 に 設 定 したグループ 項 目 に 設 定 す る 必 要 があります カーソル 遷 移 順 の 設 定 ログイン 項 目 と 同 様 の 手 順 で カーソル 遷 移 順 の 設 定 を 行 います 画 面 の 書 き 出 し ログイン 項 目 と 同 様 の 手 順 で 画 面 の 書 き 出 しを 行 います 55

2.1.1.6 自 動 生 成 DevelopmentFactory 画 面 から 画 面 遷 移 を 設 定 して 自 動 生 成 を 行 います 画 面 遷 移 自 動 生 成 の 実 行 56