AiSee Webの開発作成手順書
第1版
株式会社ベータ・ネット |
作成者: |
西川 季輝 |
|
作成日: |
2020/02/15 |
目次
3 サンプル AiSee プロジェクトの 1 画面分の作業・確認手順
3.2.1.1 クーポン画面の初期化処理シナリオの作成(準備処理)
3.2.1.2 クーポン画面の初期化処理シナリオの作成(メイン処理)
3.2.1.3 追加イベントのデータリンクを作成(準備処理)
3.2.1.4 追加イベントのデータリンクを作成(メイン処理)
3.2.1.5 更新イベントのデータリンクを作成(準備処理)
3.2.1.6 更新イベントのデータリンクを作成(メイン処理)
3.2.1.7 削除イベントのデータリンクを作成(準備処理)
3.2.1.8 削除イベントのデータリンクを作成(メイン処理)
3.5 指定したイベント割り当て情報に従ってJavaBeanを生成する
4.2.3 HTML・JavaソースをNetBeansへ反映
この文書は、AiSeeによるWebアプリケーション作成のデモプロジェクトの作成手順の紹介です。
基本的なアプリケーションの作成を通じて、AiSeeの構成、ワークフロー、IDEの使用方法などを学ぶ事ができます。
デモプロジェクトのでは以下のような手順で説明します。
1) 作業プロジェクトの作成
アプリケーションに対応したプロジェクトを作成します。
2) 処理シナリオの作成
Webページのイベント発生時に実行する処理シナリオを作成します。
① 画面初期化シナリオ
Webページが表示されるタイミングで実行する処理シナリオです。
② 追加ボタンイベントシナリオ
Webページの追加ボタンを押した時に実行する処理シナリオです。
③ 更新ボタンイベントシナリオ
Webページの更新ボタンを押した時に実行する処理シナリオです。
④ 削除ボタンイベントシナリオ
Webページのテーブル行にある削除ボタンを押した時に実行する処理シナリオです。
3) HTML変換ルールの作成
HTMLをDynamicHTMLに変換するためのルールを作成します。
手動変換、自動変換、ルール削除、フォーム名・フィールド名変更などの操作を紹介します。
4) HTMLのイベントと処理シナリオの紐づけ
処理シナリオとDynamic HTMLを紐づける作業です。
5) HTMLファイルの変換
変換ルールや処理シナリオの紐づけ情報をソース変換サーバーへアップロードして、変換結果を受け取ります。
6) 動作確認ソース変換結果であるDynamic HTML、ManagedBeanをTomcatのプロジェクトに反映、実行してWebページや処理シナリオの動作確認を行います。
AiSeeでは、Java Server Faces(JSF)フレームワークとISeeエンジンを組み合わせてWebアプリケーションの作成を構築します。
WebアプリケーションのユーザーインタフェースをJSFの「DynamicHTML」で作成し、機能の処理をISeeService上で動作する「処理シナリオ」で作成します。
「DynamicHTML」と「処理シナリオ」は、「ManagedBean」を介してデータの受け渡しをします。
これから、実際開発の具体例を通じて、AiSeeWebの使用手順を細かく紹介します。
Webプロジェクトの作成処理シナリオを作成するための準備作業について紹介します。
詳細な手順は、別紙「AiSee Webの詳細操作説明書.docx」を参照してください。
l ISeeIDEのインストール:ISeeで作業を行うためにインストールを行います。
l プロジェクトの作成:サーバー処理を管理するプロジェクトを作成します。
l フォルダ作成:処理シナリオ等を処理毎に分類するためのフォルダを作成します。
l 空の処理シナリオの作成:処理を指定する準備として空の処理シナリオを作成します。
l Web用パラメータの指定:Webページ情報の取得用パラメータを指定する必要があります。
l Webページへの値の反映:処理シナリオの結果の値をWebページに反映を指定します。
l 共通シナリオのインポート:共通シナリオをプロジェクトに取り込みます。
サーバープログラムのISeeプロジェクトを作成する手順を紹介します。
処理のまとまりを定義する「処理シナリオ」の作成方法を紹介します。
画面を初めて表示するときに動作するシナリオの画面情報(FormData)からの取得方法やデー
タベースへの接続情報の作成方法を詳しく紹介します。
1) 「Initialize」フォルダの下に「初期化」シナリオを作成します。
2) 右クリックしてメニューを表示し「修正」をクリックします。
3) リレーションマネージャ画面が表示されます。
4) Webページ情報を変数へ格納するためのリレーションを作成します。
l リレーション情報
タイトル |
フィールド名 |
変数 |
画面情報からassetsを取得する |
assets |
assets |
画面情報からunitを取得する |
unit |
unit |
画面情報からunitListを取得する |
unitList |
unitList |
画面情報からsettlementを取得する |
settlement |
settlement |
画面情報からsubBeanを取得する |
subBean |
subBean |
画面情報からuserNameを取得する |
userName |
userName |
5) データベースへの接続を行うシナリオを呼び出すリレーションを作成します。
l リレーション情報
種類 |
内容 |
シナリオパス |
DBAccess/データベースの接続を開始する |
タイトル |
「データベースの接続を開始する」を実行する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
DBConnection |
パラメータ1 |
定数 |
SampleDatabase.db |
パラメータ2 |
定数 |
true |
画面を初めて表示するときに動作するシナリオのメイン処理を詳しく紹介します。
1) 資産単位コンボボックス用リストを作成するためのリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
新しいリストを作成して返す |
タイトル |
画面の資産単位の取得結果を保持する器を作成する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
unitList |
パラメータ1 |
|
|
パラメータ2 |
|
|
2) 資産単位をデータベースから検索するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
データベーステーブルを、テーブル名、カラム名と条件値のマップを用いて検索して返す。 |
タイトル |
画面の資産単位の取得結果を保持する器を作成する。 |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
RecordSet |
パラメータ1 |
変数 |
DBConnection |
パラメータ2 |
定数 |
UnitTable |
パラメータ3 |
定数 |
UnitValue |
パラメータ4 |
|
|
パラメータ5 |
定数 |
AND |
パラメータ6 |
|
|
パラメータ7 |
定数 |
UnitValue |
パラメータ8 |
定数 |
ASC |
3) 画面左のツリーで右クリックしてメニューを表示し「新規作成(下へ)>ループ」をクリックします。
4) ループ指定画面が表示されます。
5) 集合選択ボタンを押します。
6) ローカル変数選択画面で「RecordSet」を指定します。
7) 繰返し変数のローカル変数選択ボタンを押します。
8) ローカル変数選択画面で「Record」を追加して指定します。
9) タイトルに「検索結果が複数であるため下記の処理を繰返し行う」と入力します。
10) 画面右下の確定ボタンを押します。
11) 画面で右クリックしてメニューを表示し「新規作成>リレーション」をクリックします。
12) レコードから単位を取得するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
ISeeマップから、キーをもとにバリューを取得して返す |
タイトル |
検索結果から、一つの単位を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
unit |
パラメータ1 |
変数 |
Record |
パラメータ2 |
定数 |
UnitValue |
13) 資産単位リストに単位を格納するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
ISeeリストに要素を追加する |
タイトル |
資産単位の器に取得した単位を追加する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
unitList |
パラメータ2 |
定数 |
unit |
14) ループノードをクリックします。
15) 決済結果の置き換えシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/更新内容をデータベースから取得する |
タイトル |
チェック状態に応じた決済結果を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
subBean |
パラメータ2 |
変数 |
DBConnection |
16) データベースの切断シナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
DBAccess/データベースの接続を終了する |
タイトル |
データベースの接続を終了する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
DBConnection |
パラメータ2 |
定数 |
TRUE |
17) Webページへ反映するマップを作成するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
画面の器に取得した単位とテーブルデータをセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
ResultMap |
パラメータ1 |
|
|
パラメータ2 |
定数 |
subBean |
パラメータ3 |
変数 |
subBean |
18) 追加ボタンを 2 回押します。
19) 追加したパラメータに値を指定します。
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ4 |
定数 |
unitList |
パラメータ5 |
変数 |
unitList |
20) 画面右下の登録ボタンを押します。
21) リレーションマネージャ画面でリレーションが追加されたことが確認できます。
22) Web ページへ ResultMap をセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
戻り値を設定してデータリンクを終了する |
タイトル |
画面の器を返す |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ |
変数 |
ResultMap |
23) リレーションマネージャ画面右下の確定ボタンを押します。
1) 業務ロジック処理の作成を参考に「event」フォルダを作成します
2) 「event」フォルダに「追加」シナリオを作成します。
3) Webページ情報を変数へ格納するためのリレーションを作成します。
l リレーション情報
種類 |
フィールド名 |
変数 |
画面情報からassetsを取得する |
assets |
assets |
画面情報からunitを取得する |
unit |
unit |
画面情報からunitListを取得する |
unitList |
unitList |
画面情報からsettlementを取得する |
settlement |
settlement |
画面情報からsubBeanを取得する |
subBean |
subBean |
画面情報からuserNameを取得する |
userName |
username |
4) データベースへの接続を行うシナリオを呼び出すリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
DBAccess/データベースの接続を開始する |
タイトル |
「データベースの接続を開始する」を実行する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
DBConnection |
パラメータ1 |
定数 |
SampleDatabase.db |
パラメータ2 |
定数 |
true |
1) 今日の日付を取得するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
現在のシステム日付を取得して返す |
タイトル |
今日の日付を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
transactionDate |
パラメータ1 |
定数 |
yyyy/MM/dd |
2) 決済結果の置き換えシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/チェック状態に応じた決済結果を取得する |
タイトル |
チェック状態に応じた決済結果を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
settlement |
パラメータ |
変数 |
FormData |
3) 画面データを登録マップに設定するシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/画面のデータを器にセットする |
タイトル |
画面のデータを器にセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
InsertMap |
パラメータ1 |
変数 |
FormData |
パラメータ2 |
変数 |
Settlement |
4) 登録マップの情報をデータベースへ登録するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
データベースのテーブルへ、カラム名と内容のマップを用いて挿入する |
タイトル |
データベースに器の値を追加する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
DBConnection |
パラメータ2 |
定数 |
SampleTable |
パラメータ3 |
変数 |
InsertMap |
5) データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/更新内容をデータベースから取得する |
タイトル |
更新内容をデータベースから取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
subBean |
パラメータ |
変数 |
DBConnection |
6) データベースの最新情報をResultMapにセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
画面のデータに更新内容をセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
ResultMap |
パラメータ1 |
|
|
パラメータ2 |
定数 |
subBean |
パラメータ3 |
変数 |
subBean |
7) データベースの切断シナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
DBAccess/データベースの接続を終了する |
タイトル |
データベースの接続を終了する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
DBConnection |
パラメータ |
定数 |
TRUE |
8) WebページへResultMapをセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
戻り値を設定してデータリンクを終了する |
タイトル |
画面のデータに更新内容をセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ |
変数 |
ResultMap |
9) リレーションマネージャ画面右下の確定ボタンを押します。
1) 「event」フォルダに「更新」シナリオを作成します。
2) Webページ情報を変数へ格納するためのリレーションを作成します。
l リレーション情報
種類 |
フィールド名 |
変数 |
画面情報からassetsを取得する |
assets |
assets |
画面情報からunitを取得する |
unit |
unit |
画面情報からunitListを取得する |
unitList |
unitList |
画面情報からsettlementを取得する |
settlement |
settlement |
画面情報からsubBeanを取得する |
subBean |
subBean |
画面情報からuserNameを取得する |
userName |
userName |
3) データベースへの接続を行うシナリオを呼び出すリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
DBAccess/データベースの接続を開始する |
タイトル |
「データベースの接続を開始する」を実行する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
DBConnection |
パラメータ1 |
定数 |
SampleDatabase.db |
パラメータ2 |
定数 |
true |
1) 今日の日付を取得するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
現在のシステム日付を取得して返す |
タイトル |
今日の日付を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
transactionDate |
パラメータ |
定数 |
yyyy/MM/dd |
2) 決済結果の置き換えシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/チェック状態に応じた決済結果を取得する |
タイトル |
チェック状態に応じた決済結果を取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
Settlement |
パラメータ |
変数 |
FormData |
3) 画面データを更新マップに設定するシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
ISee関数 |
Common/画面のデータを器にセットする |
タイトル |
画面のデータを器にセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
UpdateMap |
パラメータ1 |
変数 |
FormData |
パラメータ2 |
変数 |
settlement |
4) 更新マップの情報でデータベースを更新するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
データベーステーブルのレコードを更新(Update)する |
タイトル |
データベースのデータを器で更新する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
DBConnection |
パラメータ2 |
定数 |
SampleTable |
パラメータ3 |
変数 |
UpdateMap |
パラメータ4 |
|
|
パラメータ5 |
定数 |
AND |
5) 更新条件マップを作成するリレーションパラメータを設定します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
WhereMap |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
|
|
パラメータ2 |
定数 |
username |
パラメータ3 |
変数 |
userName |
6) データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
シナリオ |
Common/更新内容をデータベースから取得する |
タイトル |
更新内容をデータベースから取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
subBean |
パラメータ |
変数 |
DBConnection |
7) データベースの最新情報を ResultMap にセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
画面のデータに更新内容をセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
ResultMap |
パラメータ 1 |
|
|
パラメータ 2 |
定数 |
subBean |
パラメータ 3 |
変数 |
subBean |
8) データベースの切断シナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
シナリオ |
DBAccess/データベースの接続を終了する |
タイトル |
データベースの接続を終了する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ1 |
変数 |
DBConnection |
パラメータ2 |
定数 |
TRUE |
9) Web ページへ ResultMap をセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
戻り値を設定してデータリンクを終了する |
タイトル |
データリンクの戻り値として画面にデータを返す。 |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ |
変数 |
ResultMap |
1) 「event」フォルダに「削除」シナリオを作成します。
2) Web ページ情報を変数へ格納するためのリレーションを作成します。
l リレーション情報
種類 |
フィールド名 |
変数 |
画面情報から assets を取得する |
assets |
assets |
画面情報から unit を取得する |
unit |
Unit |
画面情報から unitList を取得する |
unitList |
unitList |
画面情報から settlement を取得する |
settlement |
Settlement |
画面情報から subBean を取得する |
subBean |
subBean |
画面情報から userName を取得する |
userName |
userName |
3) データベースへの接続を行うシナリオを呼び出すリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
DBAccess/データベースの接続を開始する |
タイトル |
「データベースの接続を開始する」を実行する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
DBConnection |
パラメータ 1 |
定数 |
SampleDatabase.db |
パラメータ 2 |
定数 |
true |
1) データベースを削除するリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
データベーステーブルのレコードを削除(Delete)する |
タイトル |
データベースのデータを器で削除する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ 1 |
変数 |
DBConnection |
パラメータ 2 |
定数 |
SampleTable |
パラメータ 3 |
変数 |
UpdateMap |
パラメータ 4 |
|
|
パラメータ 5 |
定数 |
AND |
2) 更新条件マップを作成するリレーションパラメータを設定します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
WhereMap |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ 1 |
|
|
パラメータ 2 |
定数 |
userName |
パラメータ 3 |
変数 |
userName |
3) データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
シナリオ |
Common/更新内容をデータベースから取得する |
タイトル |
更新内容をデータベースから取得する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
subBean |
パラメータ |
変数 |
DBConnection |
4) Web テーブル情報を Web ページ情報へセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
テーブルの内容を更新する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
mainBean |
パラメータ 1 |
|
|
パラメータ 2 |
変数 |
subBean |
パラメータ 3 |
定数 |
subBean |
5) Web ページ情報を ResultMap にセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
マップを作成して返す。初期値の指定が可能 |
タイトル |
画面のデータに更新内容をセットする |
l 戻り値、パラメータ
種類 |
型 |
内容 |
戻り値 |
変数 |
ResultMap |
パラメータ 1 |
|
|
パラメータ 2 |
変数 |
mainBean |
パラメータ 3 |
定数 |
mainBean |
6) データベースの切断シナリオを呼び出すリレーションを作成します。
l サブシナリオ情報
種類 |
内容 |
シナリオ |
Common/更新内容をデータベースから終了する |
タイトル |
更新内容をデータベースから終了する |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ 1 |
変数 |
DBConnection |
パラメータ 2 |
定数 |
TRUE |
7) Web ページへ ResultMap をセットするリレーションを作成します。
l リレーション情報
種類 |
内容 |
ISee関数 |
戻り値を設定してデータリンクを終了する |
タイトル |
データリンクの戻り値として画面にデータを返す。 |
l 戻り値、パラメータ
種類 |
型 |
内容 |
パラメータ |
変数 |
ResultMap |
作成した処理シナリオの動作を確認するために処理シナリオを単独実行する機能を使用したテスト手順を紹介します。
1) テスト対象のシナリオを選択します。
2) 右クリックしてメニューを表示し「修正」を選択します。
3) リレーションマネージャ画面でキーボードの「F5」を押します。
4) テストパターンの定義画面が表示されます。
5) 画面右にある追加ボタンをクリックします。
6) テストパターン名に「成功パターン」と入力して OK ボタンを押します。
7) パターン詳細内容の設定画面が表示されます。
8) 入力パラメータの修正ボタンを押します。
9) 値の設定画面が表示されます。
10) タブの「マップ型」をクリックします。
11) タブの「マップ型」内の KEY テキストフィールドに「userName」と入力します。
12) 追加ボタンを押します。
13) 別画面として再度、値の設定画面が表示されます
14) タブの「直値指定」の文字列ラジオボタンが選択された状態で、隣のテキストフィールドに「Test」と入力します。
15) 画面右下の確定ボタンを押します。
16) 手順 11~15 を繰り返し必要なデータを登録します。
Key |
Value |
unit |
Dd |
assets |
200 |
settlement |
true |
17) 確定ボタンを押下する
18) 期待値の修正ボタンを押下する
19) 手順 11~13 と同様の手順でマップに Key「subBean」のデータを追加します。
※テーブル情報の作成
20) タブの「リスト型」をクリックし、追加ボタンを押します。
21) 新たに表示された値の設定画面でマップタブを選択します。
※テーブル行データの作成
22) 手順 11~15 と同様に以下の内容を登録します。
Key |
Value |
assets |
200 |
asset |
200 Dd |
transactionDate |
yyyy/MM/dd 形式で当日日付を入力 |
user |
Test |
settlement |
true |
23) 確定ボタンを押します。
24) 値の設定画面(リストタブ選択中)で、さらに確定ボタンを押します。
25) 値の設定画面(期待値)で、さらに確定ボタンを押します。
26) 実行ボタンを押します。
27) 実行結果が確認できます。
※期待出力値と結果値が一致する場合に判別が ”〇”で表示されます。
動的HTMLへと変換する機能での作業手順を詳しく紹介します。
1)
プロジェクトマネージャ画面でプロジェクトを選択して、右クリックしてメニューを表示し
「WebHTMLのスマート変換」をクリックします。
2) (初回限定)作業プロジェクトを作成するために、プロジェクト名を入力します。
3) (初回限定)作業プロジェクトのフォルダパスを設定します。
変換するHTMLを登録する手順について紹介します。
1) HTMLファイル登録ボタンを押します。
2) 登録するHTMLファイルを選択します。
3) 「Web HTML のスマート変換」画面のテーブルに追加されます。
デモプロジェクトの静的HTMLを動的HTMLへ変換するルールの作成手順を詳しく紹介します。
Htmlファイルの手動変換の指定方法を詳しく紹介します。
1) 変換対象の HTML を選択し「HTML の変換」ボタンをクリックします。
2) 左上のツリーでテーブルタグをクリックして変換ボタンを押します。
3) 変換後のタグ選択画面が表示されるので、「h:dataTable」をクリックします。
4) 確定ボタンを押します。
5) HTMLのTABLE変換ルール編集画面が表示されます。
Bean 名、フィールド名、サブ Bean 名を入力して確定ボタンを押します。
項目名 |
値 |
備考 |
Bean 名 |
mainBean |
|
フィールド名 |
subBean |
サブ Bean 名と同じ値にする事 |
サブ Bean 名 |
subBean |
フィールド名と同じ値にする事 |
6) タグが変換されます。
7) Table タグ配下の span タグをすべて選択し変換ボタンを押します。
※Ctrl+クリックで複数選択ができます。
8) 手順 2~4 と同様の手順で「h:outputText」を選択し確定ボタンを押します。
9) タグが変換されます。
Html ファイルの自動変換の指定方法を詳しく紹介します。
1) 自動変換ボタンを押します。
2) 自動変換範囲の選択画面が表示されます。
3) 「可能性が高い」を選択して確定ボタンを押します。
4) しばらく待っていると自動変換が完了して、HTML の変換ルール編集画面が更新されます。
ノードの色 |
意味 |
暗いオレンジ色 |
可能性が高い |
青色 |
可能性がやや高い |
緑色 |
可能性がやや低い |
黒色 |
可能性が低い |
赤色 |
変換後 |
灰色 |
コメント |
Html ファイルの自動変換で不要な変換ルールが作成された場合の削除方法を紹介します。
1) タグの変換ルールテーブルで「削除ボタン」の行を選択します。
※Ctrl+クリックで複数選択ができます。
2) 画面右下の削除ボタンを押します。
3) 対象の変換ルールが削除されます。
※同様の手順で不要なタグの変換ルールを削除してください。
Htmlファイルの自動変換で不要な変換ルールが作成された場合の削除方法を紹介します。
1) 名称一括変換ボタンを押してメニューを表示し、「Edit BeanName」をクリックします。
2) Bean 名一括変換画面が表示されます。
3) Bean 名が「myBean」となっているすべての行でチェックを入れます。
4) 画面右上のコンボボックスで「mainBean」を選択し反映ボタンを押します。
5) 確定ボタンを押します。
6) Bean名が変換されたことが確認できます。
7) 名称一括変換ボタンを押してメニューを表示し、「Edit FieldName」をクリックします。
8) フィールド名一括変換画面が表示されます。
※コンボボックスで Bean を選択することで切り替え可能
9) 変更後名称をダブルクリックして変更後の名称を入力します。
10) すべての変更を入力出来たら確定ボタンを押します。
※変更しない場合は入力しない
11) フィールド名が変換されたことが確認できます。
12) 変換ルールの指定が完了したら閉じるボタンを押します。
動的 HTML へのイベント割当機能の作業手順を詳しく紹介します。
1) 変換対象のHTMLを選択します。
2) 「イベントの割り当て」ボタンをクリックします。
3) 画面コントローラ設定画面が表示されます。
4) デフォルト設定ボタンを押します。
5) デフォルト設定画面が表示されます。
6) プロジェクトパスを指定します。
※実行可能プロジェクトを設置したパスを指定します。
「テスト用プロジェクトの設置」を参照
7) その他の項目も設定し、確定ボタンを押します。
種類 |
値 |
IP アドレス |
localhost |
ポート番号 |
8080 |
実行時の言語 |
JAPANESE |
待機時間 |
6000 |
8) 画面左のテーブルの mainBean の行をクリックします。
9) パッケージ名称に「jp.test」と入力します。
10) スコープを「RequestScoped」に変更します。
11) 「ページ初期化の設定を表示する」チェックボックスにチェックを入れます。
12) ページ初期化のシナリオの選択ボタンを押します。
13) 呼び出すシナリオ「初期化」を選択します。
14) 反映ボタンを押します。
15) 手順 8~10,14 と同様の手順で subBean の情報をセット、反映します。
項目名 |
値 |
パッケージ名称 |
jp.test |
スコープ |
RequestScoped |
1) 画面左のテーブルの eventAddの行をクリックします。
2) シナリオパスの選択ボタンを押します
3) 呼び出すシナリオ「追加」を選択します。
4) 反映ボタンを押します。
5) 手順 1~4 と同様の手順で eventUpdate も指定します。
6) 画面左のテーブルの subBean の行をクリックします。
7) 手順 1~4 と同様の手順でeventDeleteも指定します。
8) 関連ページ情報のリストで mainBean を選択し、追加ボタンを押します。
9) 反映ボタンを押します。
※関連ページ情報の追加機能について
基本的にイベント処理中にメイン Bean 以外の他の Bean へのアクセスは出来ませんが、この機能
を使用することでイベント処理中に他の Bean の情報を同時にアクセスする事が可能になります。
下のリストから追加したい Bean を選択し、追加ボタンを押すことで引き継ぎクラスとして使用できるようになります。
処理シナリオで関連ページ情報を取得するには FormData から Bean 名をキーとして取得して使用する事が出来ます。
Web サーバーで使用できるように Dynamic HTML を生成する必要があります。
そのために HTML ファイルの変換ルールからファイル生成作業について詳しく紹介します。
1) 保存ボタンをクリックします。
2) (ログイン前)AiSeeへのログインを行います。 ※ログイン後の2回目以降は省略されます。
3) 使用ポイントを確認して、支払暗証番号を入力してOKボタンをクリックします。
4) 任意の出力先を指定します。
5) 指定した出力先にファイルが出力されます。
Web サーバーで使用できるように Managed Bean を生成する必要があります。
そのために HTML イベントの割り当て情報からManagedBean の生成作業について詳しく紹介します。
1) 「イベントの割り当て」ボタンをクリックします。
2) 保存ボタンをクリックします。
3) (ログイン前)AiSeeへのログインを行います。 ※ログイン後の2回目以降は省略されます。
3) 使用ポイントを確認して、支払暗証番号を入力してOKボタンをクリックします。
4) 任意の出力先を指定します。
5) 指定した出力先にファイルが出力されます。
この手順では今までに生成した ISee プロジェクトや Dynamic HTML、Managed Bean を Web サーバーに設置してブラウザから実行して確認を行います。
WebサーバーやISeeServiceなどの実行環境を構築し、ISeeプロジェクトを実行可能プロジェクトに変換して設置します。その後にNetBeansからWebプロジェクトを実行して想定通りに動作する事を確認します。
JSF を利用することで簡単に高性能な Web アプリケーションの作成が可能となります。
そのための実行環境である Web サーバー環境の構築について紹介します。
このサンプルでは Web サーバーは、Tomcat を使用します。
Tomcat は、NetBeans に組み込まれたものを使用し、サーバーの起動、停止、及び Web アプリケーションの配備は、NetBeans の機能を利用します。
NetBeans をインストールします。インストーラからインストールしてください。
詳細な手順は、別紙「AiSee IDE 設置手順書 開発環境版_v1.docx」の「5 JSF 用の NetBeans 設置手順」を参照してください。
1) NetBeansのインストーラをダブルクリックで起動します。
2) インストーラ画面に従ってインストールを行います。
3) ショートカットアイコンをダブルクリックして、NetBeans が起動することを確認します。
1) ダウンロードした変換結果の圧縮ファイルを解凍します
2) Java ソースを NetBeans の src フォルダに格納します。
3) XHTML ファイルを NetBeans の web フォルダに格納します。
Web サーバーから ISee シナリオを実行するための環境の構築について紹介します。
Webサーバーから呼びされた処理シナリオは、ISeeService上で動作します。
そのため、ISeeService上で実行できるプロジェクトへと変換する必要があります。
ISeeServiceをインストールします。
詳細な手順は、別紙「AiSeeIDE設置手順書開発環境版_v1.docx」の「4 ISeeServiceの設置手順」を参照してください。
1) インストーラをダブルクリックして起動します。
2) インストーラ画面に従ってインストールを行います。
3) サービス画面に「ISeeService」が登録されたことを確認します。
ISeeIDE のプロジェクトを ISee Service に配備するために、プロジェクトをテスト用プロジェクトへ変換します。
1) プロジェクトノードを選択します。
2) 右クリックしてメニューを表示します。
3) 「テスト用プロジェクト生成」を選択します。
4) 出力先フォルダを選択します。
5) 指定したフォルダに対象プロジェクト名の圧縮ファイルが出力されます。
1) 「C:\Temp\AiSeeProject」フォルダにテスト用プロジェクトファイルをコピーします。
※「画面表示初期化イベントの割り当て」で指定したパスと同じになるように配置します。
2) 右クリックしてメニューの「すべて展開」をクリックします。
3) 任意のフォルダにテスト用プロジェクトファイルを解凍します。
実行に必要な ISee Service や Tomcat の設置状況を確認します。
ISeeServiceがインストールされているか、ISeeServiceが動作しているかを確認します。
1) Windows メニューの「Windows 管理ツール」をクリックし「サービス」をクリックします。
2) 表示されたサービス画面に「ISee Service」の状態が「実行中」であるか確認します。
3) 実行中以外の場合、「サービスの開始」をクリックします。
NetBeansプロジェクトから実行することで連携しているTomcatへのデプロイと起動、さらにブラウザの起動を一度のアクションで行ってくれます。
1) NetBeans プロジェクトの「Web ページ」「ソース・パッケージ」「ライブラリ」にファイルが設置されている事を確認します。
作成、設置したISeeプロジェクトやDynamicHTMLなどが想定通りに動作するか、実際にNetBeansプロジェクトを実行してブラウザでの動作を確認します。
1) NetBeansプロジェクトでプロジェクトメニュー「実行」をクリックします。
2) プロジェクトが実行できると Web ページが表示されます。
3) Web ページで動作を確認します。
※1 空の処理シナリオを作成する手順は、別紙:AiSee Web の詳細操作説明書の「2.3 空の処理シナリオの作成」
を参照
※2 Web 用処理シナリオのパラメータの指定する手順は、別紙:AiSee Web の詳細操作説明書の「3.4 Web ページの呼び出しシナリオの必須パラメータ」を参照
※3 画面情報から値を取得する手順は、別紙:AiSee Web の詳細操作説明書の「3.6 Web ページの情報から項目の値を取得する」を参照
※4 サブシナリオ呼び出しのリレーションの作成する手順は、別紙:AiSee Web の詳細操作説明書の「3.2 サブシナリオの作成」を参照
※5 リレーションの作成する手順は、別紙:AiSee Web の詳細操作説明書の「3.1 リレーションの作成」を参照 ※6 パラメータで ISee 関数を指定する手順は、別紙:AiSee Web の詳細操作説明書の「4.2 リレーション・サブシナリオのパラメータの指定」を参照