View-Section-Componentの関係
このセクションでは、管理画面を構成するView, Section, Componentの関係について説明します。
簡単に言えば、Viewは画面、Sectionは画面中の段落、Componentは段落の中の部品という位置付けです。
View
Dashcombが提供しているViewとはHTMLのページや画面に相当しています。ViewはDashcombが提供しているサブメニューと紐付けていますので、サブメニューをクリックすると、該当のViewが表示されています。
共通
オブジェクト
ビューオジェクトの変数名です。
サブメニューを作成すると、そのViewオブジェクトが自動的に View と名付けられます。
View オブジェクトのプロパティの値は、{{ View.プロパティ名 }} で参照することができます。
View オブジェクトが保持しているプロパティとその値は、インスペクター メニューで確認できます。
他のコンポ―ネントと異なり、View オブジェクトの変数名は変更できません。
データ
タイトル
画面上に表示される、タイトルのテキストです。初期値として、 title が自動で設定されます。
入力欄に設定したテキストが、作成する管理画面のタイトルとして一番上に表示されます。
任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}} を利用して、動的に設定することができます。
{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。
（例）title を {{currentUser.name}} に書き換えると、タイトルとしてログイン中のユーザー名が表示されます。
トグルスイッチをOff にすると、タイトルは非表示になります。
概要説明
ページの概要を説明するテキストです。初期値として、 description が自動で設定されます。
入力欄に設定したテキストが、作成する管理画面の概要としてタイトルの下に表示されます。
任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}} を利用して、動的に設定することができます。
（例）description を {{currentUser.name}}の作業画面です。に書き換えるえると、ユーザー画面にはユーザーの名前が表示されます。
パラメータ
管理画面が受け取るパラメータを設定できます。
画面パラメータの追加
新たに追加した画面パラメータ名は、自動的に keyName0, keyName1 ... と名付けられます。
画面パラメータ名は、任意の文字列に変更できます。画面パラメータ名に利用できるのは半角英数字のみです。 {{}} 構文は利用できません。
ここでは画面パラメーターの変数名だけを設定します。画面パラメーターの値は、他の画面から取得します。
必須設定
画面パラメータの削除
メニュー
表示名称
Viewが所属しているサブメニュー名です。値を変更すると、サブメニューの名前も連動して変更されます。利用できるのは半角英数字のみです。 {{}} 構文は利用できません。
パス定義
この画面を表示するためのURLのパスです。初期値は、自動生成されたハッシュ値です。任意の値に変更することができます。利用できるのは半角英数字のみです。 {{}} 構文は利用できません。
非表示
トグルスイッチをONにすると、当該画面と、対応するサブメニューがユーザー画面上に表示されなくなります。
外部リンク
トグルスイッチをONにすると、サブメニューが外部リンクになります。メニューをクリックした際に、管理画面を開く代わりに入力欄に設定したURLへ遷移します。
URL入力欄は、 {{ }} 構文を利用できません。
Section
Dashcombが提供しているSectionとはHTMLの <section> や <div> に相当しています。SectionはDashcombが提供しているViewに依存しますので、ViewにSectionやComponentをドラッグ＆ドロップすることでセクションが作成されます。また、一つのページの中で複数のSectionはお互いにより独立な意味か機能を持っていますので、それぞれにアクション指定やバリデーション作動させることもできます。
Component
Dashcombが提供しているComponentは画面レイアウトや内容を実装する際に使います。<input>、<button>、<table> などHTMLの主なタグに機能的に似ていますが、Dashcombはそれらよりもっと使いやすく便利なコンポーネントを提供しています。ComponentはDashcombが提供しているViewやSectionに依存しますので、ViewやSectionにComponentをドラッグ＆ドロップすることでコンポーネントが作成されます。
最終更新
