カスタム・コンポーネントの利用

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を選択し、自由に名前をつけて保存して下さい。

この時、エクスポートはコンポーネント1つずつの単位ではなく、リポジトリ単位で行われることに注意して下さい。

こうして保存しておいたカスタム・コンポーネントは、Pie Menuで File→Component→Importと選択することでインポートし、再利用することができます。
複数の.dnlファイルをインポートすると、それらは全てリポジトリに登録されます。
その状態でエクスポートすれば、複数のコンポーネントファイルをひとつにまとめることができます。

グローバルリンクの作成

例えば独自のグローバルヘッダをコンポーネントとして作成した場合、ロゴのクリックは常にトップページに飛ばしたいと思うでしょう。
そういった場合、コンポーネントにグローバルリンクを埋め込むことができます。
コンポーネント・エディタ上のリンクを貼りたいオブジェクトの上で Pie Menu を呼び出してください。
左上に出る Add Global Link を選択すると、エディタではなくメインのcanvas上にあるページを選択することのできるダイアログが表示されます。
コンポーネントは常に、ここで選択されたページへのリンクを提供します。

この情報は、エクスポートされたファイルには残っていないことに注意して下さい。

練習

サイトのロゴを持ったヘッダを、カスタム・コンポーネントとして作成してみましょう。
そのヘッダを、全てのページに貼り付けます。
また、サイトのロゴをクリックするとHomeに戻るようグローバルリンクを設定してみて下さい。




Webサイトの使い勝手を試す | 条件分岐を使用する

 
/home/nao58/www/it-freak/data/pages/denim/tutorial/custom-components.txt · 最終更新: 2007/10/04 00:35 by nao58     文書の先頭へ