クライアント側メニュー・コンポーネント
この章では、クライアント側メニュー・システムを使用して Zen ページのより “ネイティブなアプリケーション” の外観と使用感を容易に描画できるようにするために設計された組み込み Zen コンポーネントについて説明します。これらのメニュー・コンポーネントはクライアント側での JavaScript の簡単な後処理メカニズムを提供するので、その概観およびレイアウトをクライアント側のユーザの処理に対応させることができます。
従来のメニュー・コンポーネントのスタイルの多くは、CSS と HTML で定義されていますが、JavaScript の後続の後処理のオプションはありません。それらのコンポーネントの詳細は、"Zen コンポーネントの使用法" の “ナビゲーション・コンポーネント” の章を参照してください。
<csMenuBar>
<csMenuBar> コンポーネントは、あらゆるグループ・コンテナの中で記述できます。<csMenuBar> 要素は、水平メニュー・バーを定義し、その直接の子である各 <csMenuBarItem> に対して 1 つの選択肢を含みます。<csMenuBar> には、メニュー・バーの選択肢を定義するために必要な数の兄弟の <csMenuBarItem> コンポーネントを記述できます。<csMenuBar> の例は、“クライアント側メニューの構築” を参照してください。
<csMenuBar> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <csMenuBar> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
<csMenuBarItem>
<csMenuBarItem> コンポーネントは、<csMenuBar> コンテナ内でのみ記述できます。各 <csMenuBarItem> では、メニュー・バーの 1 つの選択肢を定義します。その例は、“クライアント側メニューの構築” を参照してください。
<csMenuBarItem> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <csMenuBarItem> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
caption |
このメニュー選択肢と関連付けるテキスト・ラベル この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。 |
contextKey | 定義されている場合、contextKey は caption テキスト内の 1 文字を表し、この文字のキーを押すとメニュー選択肢の機能を実行できます。contextKey では、大文字と小文字は区別されません。caption のテキストが表示されているときは、contextKey の文字は下線付きになります。 |
<contextMenu>
<contextMenu> コンポーネントは、<csMenuItem>、<vgroup>、<hgroup>、<form> などを含む、あらゆるグループ・コンテナのタイプの中で記述できます。
グループには、<contextMenu> の他に別の要素を含めることができますが、他の要素を <contextMenu> と共にグループ内で記述するには、それを含むグループの layout 属性を "none" に設定する必要があります。以下の例では、<contextMenu> の他に <button> があるので、<form> の layout は "none" に設定します。
<form height="600" width="400" layout="none" >
<button caption="MyButton"/>
<contextMenu id="cm1">
<csMenuItem caption="context"/>
<csMenuItem caption="menu"/>
<csMenuItem caption="1"/>
</contextMenu>
</form>
<contextMenu> を使用してさまざまなメニューのタイプを指定する方法について理解を深めるには、“クライアント側メニューの構築” および “ポップアップ・メニューまたはコンテキスト・メニュー” の例を参照してください。
<contextMenu> コンポーネントには、メニューの個々の選択肢の定義および編成に必要なだけ兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。
<contextMenu> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <contextMenu> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
<csMenuItem>
<csMenuItem> コンポーネントは、<contextMenu> コンテナ内でのみ記述できます。<contextMenu> には、メニューの選択肢を定義および整理するために必要な数の兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。
<csMenuItem> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <csMenuItem> には、メニュー項目としての機能に加えて、その他の Zen グループと同じスタイルとレイアウトの属性があります。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
altCaption | ユーザがメニュー項目を切り替える場合など、代替条件の下でメニュー項目に表示されるテキスト。通常の altCaption の代替は、caption になります。 |
altIcon |
ユーザがメニュー項目を切り替える場合など、代替条件の下で caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。 altIcon="images/cut.png" 通常の altIcon の代替は、icon になります。使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。 |
altKey | 定義されている場合、altKey は、ユーザがメニュー項目を切り替えるときなどの代替状況下でメニュー項目の機能を実行できるキーボード・ショートカットです。altKey の通常の代替は key です。 |
caption |
通常の条件でメニュー項目に表示されるテキスト。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。 |
contextKey |
定義されている場合、contextKey は caption テキスト内の 1 文字を表し、この文字のキーを押すとアクティブ状態のメニュー項目の機能を実行できます。contextKey では、大文字と小文字は区別されません。 caption のテキストが表示されているときは、contextKey の文字は下線付きになります。詳細な例は、“ドロップダウン・メニュー” を参照してください。 |
icon |
通常の条件で caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。 icon="images/cut.png" 使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。 |
iconDisabled |
メニュー項目が無効でもなおかつ表示 (“グレー表示”) される場合に、caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。 iconDisabled="images/cut.png" 使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。 |
key |
定義されている場合、key は、マウス・クリックなしでアクティブ状態のメニュー項目の機能を実行できるキーボード・ショートカットです。 詳細な例は、“ドロップダウン・メニュー” を参照してください。 |
onclick |
このメニュー項目をユーザがマウスでクリックするたびに実行されるクライアント側 JavaScript 式。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。 この属性に値を指定する場合、値を囲むには二重引用符を使用し、JavaScript 式内では一重引用符を使用します (必要な場合)。次に例を示します。 <csMenuItem onclick="alert('HEY');"/> JavaScript 式には、Zen #()# 実行時式を記述できます。 |
toggleMode |
定義されており、かつ True の場合は、チェックマークがメニュー選択肢の切り替え状態を示します。チェックマークが表示されるのは、toggleMode が True の場合です。toggleMode の既定値は False です。 toggleMode で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "True" または "False"、サーバ側コードでは 1 または 0、クライアント側コードでは True または False です。 |
<csMenuSeparator>
<csMenuSeparator> コンポーネントは、<contextMenu> コンテナ内でのみ記述できます。<contextMenu> には、メニューの選択肢を定義および整理するために必要な数の兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。<csMenuSeparator> は、メニューの選択肢をグループ分けするための水平線を提供します。
<csMenuSeparator> コンポーネントには属性がありません。次に例を示します。
<csMenuSeparator />
詳細な例は、“ドロップダウン・メニュー” を参照してください。