2 社員一覧画面の作成

社員テーブルの情報を表示する画面を作成します。

●ページの作成

Webブラウザーで表示される画面は「ページ」で作成します。

1 [作成]→[ページ]をクリックします。

2 ナビゲーションウィンドウでページ名を変更します。

自動的に作成されたページ名を右クリックして[名前の変更]をクリックして新しい名前を入力します。
ここでは「社員一覧画面」と入力して【Enter】キーを押します。

note
..\..\Media\pict-note.png

ページ名をシングルクリックしたりページ名を選択して【F2】キーを押して名前を変更することもできます。

 

note
..\..\Media\pict-note.png

[タイトルの設定]でページのタイトルを設定することができます。タイトルはアプリケーション実行時にWebブラウザーのタブ上に表示される文字列のことです。


3 ページを編集します。

ここでは「社員一覧画面」という見出しを入力してみます。
ページの編集ではExcelと同様にセルへの文字列入力、文字サイズ変更、背景色設定、セルの結合などで行います。

●リストビューの作成

テーブルのデータを一覧表にして表示する場合は、表示する領域を「リストビュー」として設定します。

リストビューの2行目(※)は「行テンプレート」と呼ばれ、リストビューに表示するフィールドを指定します。
行テンプレートに設定されたフィールドのレコードデータが3行目(※)以降に表示されます。
ページ編集画面ではレコードデータは表示されませんが「デバッグ」を実行してWebブラウザーで表示して確認することができます。
※列ヘッダーを非表示にした場合は、1行目のセルが行テンプレートになります。


1 リストビューを設定する領域を範囲選択します。

社員一覧テーブルのデータが表示できるように大きめの範囲を選択します。

2 [ホーム]→[リストビューとして設定]をクリックします。

3 リストビューに関連付けるテーブルを選択します。

ここでは「社員テーブル」を選択して[OK]をクリックします。

選択した範囲がリストビューに設定されます。

4 行テンプレートを設定します。

リストビューに表示するフィールドを行テンプレートに設定します。

1) セルの結合を使ってフィールドのデータが表示できるようにセル幅を確保しておきます。


2) ナビゲーションウィンドウで「社員テーブル」左の三角マークをクリックしてフィールドを展開します。


3) 表示するフィールド名をナビゲーションウィンドウから行テンプレートにドラッグ&ドロップします。
これによりテーブルのフィールドがリストビューの行テンプレートに連結されます。


4) 表示するすべてのフィールドを連結します。


5) 表示設定をします。
行テンプレートの書式を設定すると表示されるレコードデータの書式も変更されます。
ここでは「生年月日」と「雇用開始日」の書式を変更します。
行テンプレートの[生年月日]と[雇用開始日]を右クリックして[セルの書式設定]をクリックして、セルの書式設定ダイアログの「表示形式」タブの[日付]で年月日の型式(2001年3月14日)を選択します。

 

tip
..\..\Media\pict-tips.png

Ctrlキーを押しながらクリックすることで、複数のセルを選択可能です。この状態から右クリックして[セルの書式設定]をクリックすることで、同じ書式を複数のセルに対して一度に設定できます。


5 デバッグ機能で実際の表示を確認します。

[ホーム]→[  (デバッグ)]をクリックします。

note
..\..\Media\pict-note.png

[開始(デバッグ)]をクリックするとWebブラウザーの種類を選択してデバッグすることができます。

Webブラウザーに作成した画面が表示されます。


<次は社員情報入力画面の作成