全体画面構成のためのDivと、上段メニュー、左側メニューを作ります。
(サンプルのデザインは、使うテーマによって異なることもあります。)

• 実習目的

• 実装機能

  次の段階に従って画面を構成して、コンポーネントを生成してデータセット(Dataset)とバインドします。

  • 画面構成(1) : 全体の画面構成とメニュー構成

  • 画面構成(2) : Menu,Div 実装

画面構成(1) : 全体画面の構成とメニュー構成

全体画面構成のためのDivを作って、上端メニューの機能を確認します。

全体画面作り

画面(Form) 作成

"プロジェクトの生成"を参照して、Formを作ります。
“Create New Form Wizard”に使ったオプションは、次の通りです.

Formの titletextプロパティ値を “顧客照会”に指定します。

左側メニューと画面領域の2つディビジョン(Div)を [図] のように配置して、属性を変更します。

メニュー構成

顧客管理システムを実行すれば、上端に全体メニューと左側にフォームメニュ－が表示されます。上端メニューと左側にあるフォームメニュ－は、登録、照会画面の呼び出し機能を持っています。

画面構成(2) : Menu 実装

上端メニュー作り - メニュー : Menu

メニュー(Menu)は、階層的Menuを構成することができます。 メニュー(Menu)の各itemはEnabel/Disableを指定することができ、Check状態の表現も可能です。コンポーネントツールバーから を選択し、div_top 上に作ってバインドするデータセット(Dataset) dsMenuを追加します。dsMenu カラムの内容は、次の通りです。

メニューとデータセットをバインドすれば、メニュー属性の指定が可能な “Inner Bind Dataset” ウィンドウが開きます。

指定されたメニュー属性は、次の通りです。

メニュー(Menu)をクリックし、“Properties”ウィンドウイベント(Event) 項目の中で “onmenuclick”を選択します。連結する関数を登録します。

mnuTopの“onmenuclick”に登録される“mnuTop_onmenuclick”関数の内容

function mnuTop_onmenuclick(obj:Menu, e:MenuClickEventInfo)
{
	if (e.id == "list") {
		var row = findRow(dsMenu, "id", e.id);
		var url = dsMenu.getColumn(row, "url");
		divMain.url = url;
	} else if (e.id == "entry") {
		var row = findRow(dsMenu, "id", e.id);
		var url = dsMenu.getColumn(row, "url");
		divMain.url = url;
	}
}
function findRow(ds, columnName, value)
{
	var count = ds.rowcount;
	for (var i = 0; i < count; i++) {
		if (ds.getColumn(i, columnName) == value) {
			return i;
		}
	}
	return -1;
}

HTML5のQuickViewメニューを利用した実行画面です。

左メニュー作成

左側ディビジョン(Div)上にスタティック(Static)を生成します。textがある二つのスタティック(Static)と一緒に、空のスタティック(Static)を三つ追加して作ります。それぞれの属性は、次の通りです。

スタティック(Static)をクリックして、 “Properties”ウィンドウイベント(Event) 項目の中で“onclick”を選択します。 関連付けする関数を登録します。

“顧客リスト照会”スタティックと、“顧客詳細照会”スタティックとの“onclick”に登録される、“divLeft_sttList_onclick”関数の内容

function divLeft_sttList_onclick(obj:Static, e:ClickEventInfo)
{
	if (obj.name == "sttList") {
		divMain.url = "Base::list.xfdl";
	} else if (obj.name == "sttEntry") {
		divMain.url = "Base::entry.xfdl";
	}
}

コンパイル及び実行

HTML5メニューの中で、Compile File及びQuickViewメニューを使用した実行画面です。