メニュー画面は、名刺管理システムの全般的な運営のための画面です。 スクリプトにより作業領域に画面を結合する役割をします。
画面の生成
“画面生成”メニューを選択します。(File > New > Item > Form)
“Create New Form Wizard”画面でファイル名(Name)とセーブ位置(Location)を指定します。
“Create New Form Wizard” 画面で継承(Inheritance)を指定します。
“Create New Form Wizard”画面でサイズ(Position)を指定します。
“Create New Form Wizard”画面でMLM機能を使用するかを指定します。
“Create New Form Wizard”画面でウィジェット機能を使用するかを指定します。
“画面の生成”が完了するとUX-Studioに生成された画面が表示されます。
画面の構成
ボタンにより画面移動ができる機能を持つ画面を作成します。
ボタンの生成
コンポーネントツールバーでを選択し、画面にボタンを生成します。
ボタンのプロパティを次のように変更します。
ボタン | ||
---|---|---|
プロパティ | 値 | 説明 |
id | btn_list, btn_entry, btn_init | 各ボタンのid |
text | Person List, Person Entry, init data | 各ボタンのtext |
スクリプトの作成
名刺管理システムの画面間の移動を助けます。
Person Listのイベントの作成
スクリプトを作成するために“Person List”ボタンを選択し、“Properties” 画面のイベント目録で“onclick”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で生成され、既に同じ名前の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。もしも同じ名前の関数がない時には、スクリプトに関数を作り該当位置に移動します。
Person Listのスクリプトの作成
画面転換機能は、ChildFrameの“formurl”を変更しました。
作成するスクリプトの内容は次の通りです。
function btn_list_onclick(obj:Button, e:ClickEventInfo) { mainframe.HFrameSet0.ChildFrame1.formurl = "Base::person_list.xfdl"; }
Person Entryのイベントの作成
スクリプトを作成するために“Person Entry”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で生成され、既に同じ名前の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。もしも同じ名前の関数がない時には、スクリプトに関数を作り該当位置に移動します。
Person Entryのスクリプトの作成
画面転換機能は、該当ChildFrameの“formurl”を変更しました。 作成するスクリプトの内容は次の通りです。
function btn_entry_onclick(obj:Button, e:ClickEventInfo) { application.mainframe.HFrameSet0.ChildFrame1.formurl = "Base::person_entry.xfdl"; }
init dataのイベントの作成
スクリプトを作成するために“init data”ボタンを選択し、“Properties”画面のイベント目録で“onclick”イベントを探し、入力に対応する関数名を入力して<Enter>キーを押します。また、空欄状態でマウスをダブルクリックすると自動で関数名を登録し、作業領域(Work Area)のスクリプトタブに移動します。この時に自動登録される関数は“[コンポーネント名]_[イベント名]”で生成され、既に同じ名前の関数がある場合にはスクリプトタブの該当関数の位置に入力カーソルが移動します。もしも同じ名前の関数がない時には、スクリプトに関数を作り該当位置に移動します。
init dataのスクリプトの作成
初期データの生成はjsp Serviceによってテスト用データを生成します。 サービスを呼び出す機能は、アプリケーションの“transaction”を使用しました。 作成するスクリプトの内容は次の通りです。
function btn_init_onclick(obj:Button, e:ClickEventInfo) { var svcURL = "datasvc::initdata.jsp"; transaction("init_data", svcURL, "", "", "", "fn_callBack"); }
アプリケーションの“transaction”は、結果に対する処理のためにコールバック関数をあわせて使用します。 作成するスクリプトの内容は次の通りです。 この時、関数名(fn_callBack)はトランザクション引数のひとつであるコールバック引数と同一でなければなりません。
function fn_callBack(svcid,strErrCode,strErrMsg) { if (strErrCode != 0) { alert(strErrCode + " : " + strErrMsg); return; } if (svcid == "init_data"){ alert("data has been initialized"); return; } }