当講座を開発担当した株式会社ソルクシーズ吉田です。

本連載は、今年開催しました「ノーツ新任担当者向けワークショップ(開発者編)」の内容を再編集をしてお届けします。

前回は、ビュー(データの一覧画面)の作成まで行いました。

第4回は、フレームセット(画面レイアウト)の作成です。

「実際に操作をしながら学びたい」と思われた方は、来年度に開催する予定のワークショップにぜひご参加ください。

 

 

ステップ4:フレームセットの作成

 

 

フレームセットを作成することでより自由度のあるデザインにできます。

今回は、標準的な左側にメニュー(ビューの切り替え)、右側にビューを表示するためのフレームセットを作成します。

 

完成イメージ

 

 

基本構成は下図のようになります。

 

 

 

ステップ4-1:アウトラインの作成

メニューのリスト(リンク)部分となるアウトラインを作成します。

 

画面左の設計要素一覧から「共有要素-アウトライン」をダブルクリックして選択します。

画面中央にアウトラインの一覧が表示されます。(この時点ではアウトラインが存在しないため空欄です)

画面上部のボタン「新規アウトライン」をクリックします。

ダイアログ「新規アウトライン」が表示されます。

 

 

各項目に下表の値を設定します。

アウトライン
名前 メニュー 日本語の名前
別名 menu

プログラムで使用する名前

(半角英数字)

 

ボタン「OK」をクリックすると、アウトラインが作成されます。

 

画面上部のボタン「デフォルトアウトラインの作成」を使うと自動ですべてのビューとフォルダのメニューが作成されます。

今回はこの機能を使ってアウトランを作成します。ボタン「デフォルトアウトラインの作成」をクリックしてください。

 

保存して閉じます。

 

 

ステップ4-2:ページの作成

メニューの背景部分となるページを作成します。

画面左の設計要素一覧から「ページ」をダブルクリックして選択します。

画面中央にページの一覧が表示されます。(この時点ではページが存在しないため空欄です)

画面上部のボタン「新規ページ」をクリックします。

ダイアログ「新規ページ」が表示されます。

 

 

各項目に下表の値を設定します。

ページ
名前 メニュー 日本語の名前
別名 menu

プログラムで使用する名前

(半角英数字)

 

ボタン「OK」をクリックすると、ページが作成されます。

 

前述で作成したアウトラインをこのページに埋め込みます。

アウトラインを埋め込みたい位置にカーソルを移動して、メニューバー<作成-埋め込み設計要素-アウトライン>を選択します。

ダイアログ「埋め込みアウトラインの挿入」が表示されます。

 

 

先ほど作成したアウトライン「メニュー」を選択して、ボタン「OK」をクリックします。

ページにアウトラインが埋め込まれます。

 

 

背景を変更したい場合、ページのプロパティのタブ「背景」の「色」で好きな色に設定できます。

 

 

 

ステップ4-3:フレームセットの作成

それでは、今まで作成してきた「ビュー」「ページ(アウトラインを含む)」を組み合わせてフレームセットを作成します。

 

画面左の設計要素一覧から「フレームセット」をダブルクリックして選択します。

画面中央にフレームセットの一覧が表示されます。(この時点ではフレームセットが存在しないため空欄です)

画面上部のボタン「新規フレームセット」をクリックします。

ダイアログ「新規フレームセット」が表示されます。

 

 

各項目に下表の値を設定します。

フレームセット
名前 メインフレームセット 日本語の名前
別名 mainFrameset

プログラムで使用する名前

(半角英数字)

フレーム数 2 フレームの数
配置 (左端) フレームのレイアウト

 

ボタン「OK」をクリックすると、フレームセットが作成されます。

 

 

 

ステップ4-4:フレーム(左側:メニュー)の設定

フレームセットの左側のフレームにページ「メニュー」を設定します。

 

フレームセットの左側のフレームを選択して、右クリックから「フレームのプロパティ」のタブ「基本」を開きます。

注意:「フレームセットのプロパティ」ではなく、「フレームのプロパティ」です。

 

 

各項目に下表の値を設定します。

フレームのプロパティ:タブ「基本」
名前 frame_menu
内容-種類

名前付き設計要素

ページ

内容-値 メニュー *1
フレーム内のリンクのデフォルト対象 frame_view *2

*1 右側のフォルダのアイコン  から設定

*2 メニューのリスト(リンク)をクリックした時、右側のフレームにビューを表示するために使用します。(後述する右側のフレームの名前を設定)

 

 

タブ「フレームサイズ」を開きます。

 

 

各項目に下表の値を設定します。

項目名の通り、フレームの幅の指定です。

フレームのプロパティ:タブ「フレームサイズ」
250
(単位) ピクセル

 

 

ステップ4-5:フレーム(右側:ビュー)の設定

フレームセットの右側のフレームにビュー「すべてのアンケート」を設定します。

 

フレームセットの右側のフレームを選択して、右クリックからフレームのプロパティを開きます。

注意:「フレームセットのプロパティ」ではなく、「フレームのプロパティ」です。

 

 

各項目に下表の値を設定します。

フレームのプロパティ:タブ「基本」
名前 frame_view *2
内容-種類

名前付き設計要素

ビュー

内容-値 すべてのアンケート *1

*1 右側のフォルダのアイコン  から設定

*2 左側のフレームのプロパティの「フレーム内のリンクのデフォルト対象」で指定した名前を設定します。

 

保存して閉じます。

 

 

ステップ4-6:アプリケーションを開いた時に表示する設計要素の設定

前述までの手順でフレームセットは完成しましたが、このままではアプリケーションを開いた時にフレームセットが表示されません。

以下の手順でアプリケーションを開いた時に作成したフレームセットで開くように設定します。

 

画面左の設計要素一覧から「アプリケーション構成-アプリケーションのプロパティ」をダブルクリックして選択します。

画面中央にアプリケーションのプロパティが表示されます。

補足:今までのプロパティ(フォームやビュー)と表示方法が違いダイアログでは表示されません。

タブ「起動」を開きます。

 

 

各項目に下表の値を設定します。

アプリケーションのプロパティ:タブ「起動」
起動 指定したフレームセットを開く
フレームセット メインフレームセット

 

 

保存して閉じます。

 

 

ステップ4-7:動作確認

作成したフレームセットを確認してみましょう。

ノーツクライアントを起動して、アプリケーションを開きます。

フレームセットが表示されることを確認します。

 

 

 

以上が、フレームセット(画面レイアウト)の作成の手順です。

 

次回は最終回、エージェント(マクロ)の作成です。お楽しみに!

(株式会社ソルクシーズ 吉田武司)

■過去のブログはこちら:

第01回ブログ⇒

第02回ブログ フォームの作成⇒

第03回ブログ ビューの作成⇒