DENIMでは、サイトデザインに併せたカスタム・コンポーネントを追加することができます。
独自のナビゲーションメニューやコントロールをUI widgetとして作成しておくと、何度も同じものを作ったりしなくて済みます。
また、作成したコンポーネントはエクスポートしておくことで他のサイトなどで再利用することも可能です。
カスタム・コンポーネントを作るには、Pie Menuを呼び出して File→Component→Create を選びます。
すると別窓でコンポーネント・エディタが立ち上がりますので、再利用したいコンポーネントを自由に作ってください。
Name欄には、後でわかるようにコンポーネントの名前をつけておきます。
Save & Closeボタンを押すと、その名前でコンポーネント・リポジトリ内に保存されます。
カスタム・コンポーネントをページ上に挿入するには、やはりPie Menuを用います。
配置したいページ上でMenuを呼び出し、Insert→Component を選択します。
するとコンポーネント・リポジトリのダイアログボックスで現れますので、この中から差し込みたいものを選択して Insert ボタンを押します。
コンポーネントのステータスを変更するには、貼り付けたコンポーネントの上でPie Menuを呼び出し、そのコンポーネント名のメニュー(右下にあるはずです)→Change Status を選びます。
また、チェックボックスやラジオボタンなどの組み込みコンポーネントについても、同様の操作でステータスを変更することが出来ます。
一度作ったコンポーネントは、いつでも編集することができます。
Pie Menuを呼び出し、File→Component→Edit を選択して下さい。
コンポーネント・リポジトリのダイアログが表示されますので、編集したいコンポーネントを選んで Edit を押せば、コンポーネント・エディタが起動します。
不要になったコンポーネントをリポジトリから削除するには、File→Component→Delete を選択します。
リポジトリのダイアログが現れますので、削除したいものを選んで Delete を押して下さい。
他のサイトやプロジェクトでも利用したいコンポーネントについては、独立したDENIMコンポーネントファイル(拡張子.dnl)として保存しておくことが可能です。Pie Menuで File→Component→Exportを選択し、自由に名前をつけて保存して下さい。
こうして保存しておいたカスタム・コンポーネントは、Pie Menuで File→Component→Importと選択することでインポートし、再利用することができます。
複数の.dnlファイルをインポートすると、それらは全てリポジトリに登録されます。
その状態でエクスポートすれば、複数のコンポーネントファイルをひとつにまとめることができます。
例えば独自のグローバルヘッダをコンポーネントとして作成した場合、ロゴのクリックは常にトップページに飛ばしたいと思うでしょう。
そういった場合、コンポーネントにグローバルリンクを埋め込むことができます。
コンポーネント・エディタ上のリンクを貼りたいオブジェクトの上で Pie Menu を呼び出してください。
左上に出る Add Global Link を選択すると、エディタではなくメインのcanvas上にあるページを選択することのできるダイアログが表示されます。
コンポーネントは常に、ここで選択されたページへのリンクを提供します。
練習
サイトのロゴを持ったヘッダを、カスタム・コンポーネントとして作成してみましょう。
そのヘッダを、全てのページに貼り付けます。
また、サイトのロゴをクリックするとHomeに戻るようグローバルリンクを設定してみて下さい。
☜ Webサイトの使い勝手を試す | 条件分岐を使用する ☞