Zen のスタイル
“Zen のレイアウト” の章では、ページに Zen コンポーネントを配置する方法について説明しています。このためには、ページ・クラスで XData Contents ブロックを指定し、Zen コンポーネントを表す XML 要素をそのブロックに記述します。
この章では、Zen コンポーネントのスタイルの指定方法について説明します。それには、以下の操作を行います。
-
XData Contents ブロックに XML 要素を配置してスタイル属性を設定する。
-
XData Style ブロックにカスケーディング・スタイル・シート (CSS) のスタイル定義を適用する。
-
さまざまな方法で外部 CSS ファイルを参照する。
コンポーネントのスタイル属性
すべての Zen コンポーネントは、次のテーブルにある XML 属性を提供します。これらの属性により、コンポーネントを、その所属先グループでどのように表示するかを制御します。コンポーネントの動作を制御する属性については、“Zen コンポーネントの概念” の章の “動作” を参照してください。
属性 | 説明 |
---|---|
align | 指定できる値は、"left"、"right"、または "center" です。これは、生成された HTML の子コンポーネントに記述される <td> 要素が持つ align 値になります。 |
condition | このコンポーネントをページ・コンポーネントのセットに追加できる条件を指定するサーバ側の式 (式が True のときに条件成立)。このサーバ専用の属性は、クライアント側では定義できません。 |
containerStyle |
親グループの cellStyle をオーバーライドし、生成された HTML の子コンポーネントに記述される <td> 要素で、追加埋め込みまたは配置を表す値を指定します。 containerStyle は、次のような CSS スタイル文を含む文字列です。 "color:red; background: yellow;" |
enclosingClass | CSS スタイル・クラスの名前。このグループのレイアウト時には、このコンポーネントのエンクロージング <div> 要素にこのスタイルが適用されます。 |
enclosingStyle |
次のような CSS スタイル文を含む文字列。 "color:red; background: yellow;" このグループのレイアウト時には、このコンポーネントのエンクロージング <div> 要素にこのスタイルが適用されます。 |
height | CSS の長さを表す値 (整数または割合)。これは、生成された HTML の子コンポーネントに記述される <td> 要素が持つ height 値になります。 |
hidden |
True の場合 、このコンポーネントはページには配置されますが、表示されなくなります。コンポーネントのステータスが非表示の場合、ラベルのテキストがあればそれも表示されなくなります。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。 hidden の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 |
hint |
hint 属性は、コンポーネントの下に表示される補足テキストを提供します。hint テキストのスタイルは、hintClass 属性と hintStyle 属性を使用して設定できます。 この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから label プロパティに値を代入する際に $$$Text マクロを使用できるようになります。 |
hintClass | hint に適用する CSS クラス。 |
hintStyle | hint に適用する CSS スタイル。 |
id | この値は、コンポーネントの CSS スタイル定義を選択するために使用できます。これは、このコンポーネントのエンクロージング <div> 要素が持つ id 値になります。 |
import |
このコンポーネントにクライアント側で定義する必要のある追加のコンポーネント・クラスのコンマ区切りリストです。 元のオブジェクト・ツリーに直接定義されていないクラスをクライアントが必要としている場合は、import を使用します。 import 文字列を作成する場合は、リストの各クラスに完全なパッケージおよびクラス名を使用します。リストのアイテム間には空白文字を入れないでください。正しい形式は以下のとおりです。 import="ZENDemo.Component.demoMenu,ZENTest.customComponent" このサーバ専用の属性は、クライアント側では定義できません。 |
label |
コンポーネントのテキスト・ラベル。コンポーネントは単にラベルのテキストを提供するにすぎません。このラベルのレイアウトのスタイル処理は、コンポーネントの親グループで実行する必要があります。この処理の詳細は、このセクションの showLabel の説明を参照してください。 この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから label プロパティに値を代入する際に $$$Text マクロを使用できるようになります。 |
labelClass | CSS スタイル・クラスの名前。このグループをレイアウトするとき、Zen はこのコンポーネントに表示されるラベルに、このスタイルを適用します。 |
labelStyle |
次のような CSS スタイル文を含む文字列。 "color:red; background: yellow;" このグループをレイアウトするとき、Zen はこのコンポーネントに表示されるラベルに、このスタイルを適用します。 |
name | コンポーネントの名前を指定します。通常、これはフォーム内でコントロールを識別するために使用されます。"Zen コンポーネントの使用法" の “Zen のフォーム” の章を参照してください。 |
resource |
このコンポーネントをページ・コンポーネントのセットに追加できる条件を指定するサーバ側の式。 このサーバ専用の属性は、クライアント側では定義できません。 resource 値が指定されている場合、現在のユーザはこのリソースに対して USE 特権を持つ必要があります。この特権がない場合、コンポーネントはページ・コンポーネントのセットに追加されません。Caché リソースに精通していない場合は、"Caché セキュリティ管理ガイド" の “アセットおよびリソース” の章を参照してください。 |
showLabel |
True の場合 、このコンポーネントの label が表示されます。False の場合 は表示されません。既定値は True です。showLabel 属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。 showLabel とコンテナ・グループの対話の詳細については、このテーブルの後の説明を参照してください。 |
slice | slice は、このコンポーネントの親グループの cellSize 値が "stretch" であるときに使用し、同じグループにある他のコンポーネントに対するこのコンポーネントのサイズを相対的に整数で示します。このサイズは、このコンポーネントの slice 値を、同じグループに属するすべての子コンポーネントの slice 値の合計で除算することにより求められます。slice の最小値は 0 です。 |
title |
ユーザがこのコンポーネント (またはそのラベル) の上にマウスを置いたときに、ツールのヒントとして表示されるヘルプ・テキスト。"hint" 属性も参照してください。 この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから title プロパティに値を代入する際に $$$Text マクロを使用できるようになります。 |
valign | 指定できる値は、"top"、"bottom"、または "middle" です。これは、生成された HTML の子コンポーネントに記述される <td> 要素が持つ valign 値になります。 |
width | CSS の長さを表す値 (整数または割合)。"*" も指定できますが、その場合は、この要素がレイアウト・テーブルの残りのスペースすべてを占めることを表します。これは、生成された HTML の子コンポーネントに記述される <td> 要素が持つ width 値になります。 |
コントロールなどのコンポーネントがフォームなどのグループ内に表示されている場合、コンポーネントの label および showLabel 属性は、グループの layout、labelPosition、および cellStyle 属性と対話します。
次のようなグループがあるとします。
-
layout が "vertical" (既定) に設定されている
-
labelPosition が "left" に設定されている
-
cellStyle にいくつかの CSS スタイル定義が指定されている
<form labelPosition="left" cellStyle="padding: 4px;">
<text label="Name" hint="Last Name, First"/>
Enter your city using the field below:
<text label="City"/>
<button caption="Save"/>
</form>
この場合、Zen レイアウト・マネージャはページをレイアウトするときに、子コンポーネントの label に割り当てられたスペースを、グループ内のコンポーネントで使用可能な合計幅に追加します。グループの cellStyle のすべてのスタイル情報は、コンポーネントの label のレイアウト用に予約されているテーブル・セルにも適用されます。
これは、そのコンポーネントの showLabel が False に設定されている場合 (つまり、そのコンポーネントで使用可能なスペースに実際にはラベルが表示されない場合) でも適用されます。これを使用すると、グループ内にさまざまな領域をレイアウトする際にメリットがあります。
layout、labelPosition、および cellStyle の詳細は、“Zen のレイアウト” の章の “グループのレイアウトとスタイルの属性” を参照してください。
XData Contents ブロックにコンポーネントを配置して、そのコンポーネントにスタイル属性を適用できます。次の例では、スタイル属性 valign、height、および width を、Zen コンポーネントの <vgroup> と <spacer> に適用します。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page xmlns="http://www.intersystems.com/zen" title="HelpDesk">
<html id="title">My Title</html>
<hgroup>
<vgroup valign="top">
<pane paneName="menuPane"/>
</vgroup>
<spacer width="20"/>
<vgroup width="100%" valign="top">
<pane paneName="tablePane"/>
<spacer height="20"/>
<pane paneName="detailPane"/>
</vgroup>
</hgroup>
</page>
}
エンクロージング <div> 要素
CSS スタイルおよび動的な HTML を使用しやすくするために、Zen ページに配置した Zen コンポーネントはそれぞれ、生成された HTML ページでは <div> 要素内にエンクロージングされます。これは、そのコンポーネントのエンクロージング <div> です。
このコンポーネントの id 属性に特定の値を割り当てると、それはエンクロージング <div> の HTML id になります。この規約により、CSS スタイル・シートから、このエンクロージング要素を直接選択できます。例えば、以下のようにボタンを定義するとします。
<button id="myButton" caption="Press Me" onclick="zenPage.btnClick();"/>
その後、XData Style ブロックで以下の CSS 定義を使用して、このボタンの色を設定できます。
XData Style
{
<style type="text/css">
#myButton input {
color: red;
}
</style>
}
複合コンポーネントを構成するコンポーネントの場合、HTML id を作成する規約は若干異なります。コンポーネントに使用する名前の前に、複合コンポーネントの id の文字列が付加されます。複合コンポーネントに id がない場合は、ページでのコンポーネントのインデックス番号に id の文字を付加した識別子が生成されます。
また、コンポーネントのエンクロージング <div> をプログラムで操作することも可能です。コンポーネントはそれぞれ、Zen でコンポーネントのエンクロージング <div> として使用される、HTML の <div> 要素を返すクライアント側 getEnclosingDiv メソッドを持っています。以下の例では、div の値を取得するために、まずクライアント側関数 zen を、コンポーネント定義で指定された id を使用して呼び出してから、クライアント側コンポーネント・メソッド getEnclosingDiv を呼び出します。
ClientMethod GiveMyButtonStyleToAbc() [ Language = javascript ]
{
var comp = zen('abc');
var div = comp.getEnclosingDiv();
// div is an HTML div element
div.className = 'myButton';
}
XData Style
Zen のコンポーネント・クラス、ページ・クラス、またはアプリケーション・クラスはすべて、CSS スタイルを定義する XData Style ブロックを提供します。“Zen チュートリアル” の章では、新規 Zen アプリケーション・ウィザードで生成された、骨格となるクラスを表示する場合の XData Style を紹介しました。以下はその例です。
Class MyApp.MyNewApp Extends %ZEN.application
{
/// This is the name of this application.
Parameter APPLICATIONNAME = "My New Zen Application";
/// This is the URL of the main starting page of this application.
Parameter HOMEPAGE = "";
/// This Style block contains application-wide CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}
}
上記のアプリケーション・クラスのスタイルを定義するには、<style type="text/css"> タグと、終了の </style> タグの間に CSS 文を追加します。
次の例は、ページ・クラスにある XData Style ブロックを表しています。このクラスは、この XData Style ブロックでスタイルを定義し、コンポーネントで id 属性を使用して、XData Contents からこれらのスタイルを参照します。次の例は、スタイル title、vg1、および vg2 を定義し、参照します。
Class MyApp.MyNewPage Extends %ZEN.Component.page
{
/// Class name of application this page belongs to.
Parameter APPLICATION = "MyApp.MyNewApp";
/// Displayed name of this page.
Parameter PAGENAME = "My Home Page";
/// Domain used for localization.
Parameter DOMAIN = "";
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
#vg1 {
border-right: 1px solid black;
background: #E0E0FF;
height: 600px;
}
#vg2 {
}
</style>
}
/// This XML block defines the contents of this page.
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page xmlns="http://www.intersystems.com/zen" title="My Page">
<html id="title">Title</html>
<hgroup width="100%">
<vgroup id="vg1" width="200px">
</vgroup>
<vgroup id="vg2" width="*">
</vgroup>
</hgroup>
</page>
}
}
スタイルの継承
以下のテーブルでは、XData Style でのクラス継承の効果について説明します。
親が XData Style を定義 | 子が XData Style を定義 | 結果 |
---|---|---|
はい | いいえ | 子は親から XData Style を継承します。 |
はい | はい | 子は、親クラスの XData Style ブロックで定義されたすべてのスタイルを継承します。子クラスでこのいずれかのスタイルが再定義された場合、子クラスのスタイル定義が優先されます。 |
いいえ | はい | 子は自分の XData Style 定義を使用します。 |
いいえ | いいえ | 両クラスの親の中には、XData Style を定義しているものがあると考えられます。定義されていなければ、ブラウザ独自のスタイルの既定値が適用されます。 |
クラスの継承がない場合は、スタイルの継承も行われません。<page> はコンポーネントですが、実際に <page> を継承するコンポーネントはありません。したがって、アプリケーションのページに表示されるコンポーネントは、ページ・クラスやアプリケーション・クラスの XData Style ブロックのどのスタイル定義もオーバーライドしません。このコンポーネント・クラス、ページ・クラス、およびアプリケーション・クラスにより提供される XData Style ブロックはすべて、“スタイルのカスケード” の説明にある規則に従って共存します。
スタイルのカスケード
Zen ページは自分自身を構成するときに、ページ上の各コンポーネントに指定されている CSS スタイル情報をすべて収集し、コンポーネントに適用します。この情報ソースには、ページ・クラス、アプリケーション・クラス、コンポーネント・クラスなど多数あります。Zen では、こういったソースからの情報は以下の順序で適用されます。ただし、この順序で競合が発生する場合は、最後に定義されたスタイルが優先されます。
-
Zen コンポーネント・ライブラリの CSS ファイルにより定義されたスタイル。ファイル名の形式は ZEN_Component_*.css となります。
-
ベース・コンポーネント・クラスにより定義されたスタイル。
組み込み Zen コンポーネントの既定のスタイルは、対応する %ZEN.Component クラス (または、その親の 1 つ) に属する XData Style ブロックを介して提供されます。組み込みの Zen コンポーネントのスタイルを変更する必要がある場合は、該当のクラスを直接編集しないようにします。コンポーネントのサブクラスを構成してカスタム・コンポーネントを作成するか、ページ・クラスまたはアプリケーション・クラスの中で、対応するスタイル定義をオーバーライドします。
-
ベース・コンポーネント・クラスのサブクラス (カスタム・コンポーネント) で定義されるスタイル。
%ZEN.Component.componentOpens in a new tab のサブクラスはすべて、XData Style ブロックを提供できます。この子に XData Style ブロックがある場合、これにより親クラスから得られた XData Style が置き換えられます。このブロックが存在しない場合、子は親から XData Style を継承します。
-
現在のアプリケーションのアプリケーション・クラスで定義されたスタイル。これらのスタイルは、以下のソースのいずれかから得られます。各ソースから得られたスタイルは、以下に示す順序で評価されます。
-
CSS 文を記述した XData Style ブロック
-
CSSINCLUDES パラメータを使用した、外部 CSS ファイルへの参照
-
-
テンプレート・ページ・クラスで定義されたスタイル (現在のページのテンプレート・ページ・クラスが存在する場合)。これらのスタイルは、以下のソースのいずれかから得られます。各ソースから得られたスタイルは、以下に示す順序で評価されます。
-
CSSINCLUDES パラメータを使用した、外部 CSS ファイルへの参照
-
CSS 文を記述した XData Style ブロック
-
XData Contents のスタイル属性。個々のコンポーネントについて、以下が指定されます。
-
HTML 属性の単純な値 (height の "300" など)。
-
リテラル CSS 文 ("color:red; background:yellow;" など)。
-
スタイルのカスケードのどこかで定義されている CSS スタイルの名前。
-
-
-
ページ・クラス内で定義されたスタイル。以下はその例です。
-
CSSINCLUDES パラメータを使用した、外部 CSS ファイルへの参照
-
CSS 文を記述した XData Style ブロック
-
XData Contents のスタイル属性。個々のコンポーネントについて、以下が指定されます。
-
HTML 属性の単純な値 (height の "300" など)。
-
リテラル CSS 文 ("color:red; background:yellow;" など)。
-
スタイルのカスケードのどこかで定義されている CSS スタイルの名前。
-
-
次の図は、スタイルの取得元に関する概念を示しています。詳細は、前の一覧を参照してください。
この優先順位により、一貫性のある “外観や使用感“ を容易にアプリケーションに確保できます。スタイル定義をオーバーライドできる範囲は、アプリケーション・クラス (アプリケーション全体でスタイルをオーバーライド)、テンプレート・ページ・クラス (複数ページの組み合わせで値をオーバーライド)、または通常のページ・クラス (特定ページで値をオーバーライド) です。
ただし、Zen で表示用のページを構成するときは、この優先順位は、これらのオブジェクトの階層構造と必ずしも一致しません。この説明と図を、“Zen アプリケーションの概念” の章の “Zen アプリケーション” と比較してください。
組み込みスタイルのオーバーライド
例えば、<tablePane> などの組み込み Zen コンポーネントのスタイルをオーバーライドするとします。この作業には何も要件はありませんが、このテーブルをページに取得した後で、その外観の変更が必要になることがあります。その場合は、<tablePane> の CSS スタイルをオーバーライドする必要があります。これを実行するには、以下のことを把握しておく必要があります。
-
変更する CSS スタイル定義名
-
スタイルのカスケードで、このスタイルに変更を挿入する場所
-
スタイルに変更を適用する方法として、次のいずれを採用するか
-
Zen クラスから外部 CSS ファイルを参照
-
Zen クラスの中に XData Style ブロックを記述
-
以下の XData Style ブロックでは、table.tpTable という CSS ルールでの背景色、境界線のスタイル、およびフォント・ファミリの選択内容を変更します。開発者は、どのようにしてこのルールを選択し、変更するのでしょうか。この XData Style ブロックは、どのようにしてスタイルのカスケードに適合するのでしょうか。また、開発者はなぜ、外部 CSS ファイルではなく XData Style ブロックを記述することを選択したのでしょうか。以下の数セクションで、この答えを示します。
XData Style
{
<style type="text/css">
table.tpTable {
background: green;
border: 1px solid red;
font-family: courier new;
}
</style>
}
CSS スタイル名の特定
特定の Zen コンポーネントについて、オーバーライドする CSS ルールを特定するには、以下の手順に従います。
-
各 Zen コンポーネントの継承ツリーのどこかに、そのコンポーネントで使用する CSS ルールを定義している XData Style ブロックがあります。正しいルールを見つけるには、通常、コンポーネント・クラスの継承に関する多少の知識が必要です。例えば、%ZEN.Component.tablePaneOpens in a new tab は %ZEN.Component.simpleTablePaneOpens in a new tab から継承されます。これは関連する XData Style ブロックを含む simpleTablePane クラスです。tablePane クラスには XData Style ブロックはありません。
クラスのオンライン・ドキュメントを使用して継承を追跡できます。以下のいずれかの方法で、このドキュメントを参照します。
-
スタジオから、[ツール]→[クラス・ブラウザ] を選択します。%ZEN.Component パッケージから目的のクラスを見つけます。クラス名を右クリックし、[ドキュメント] を選択します。
-
InterSystems のオンライン・ドキュメントを開きます。ページの上部にあるナビゲーション・バーで [クラスリファレンス] を選択します。%SYS ネームスペースおよび %ZEN.Component パッケージを選択します。クラス名をクリックします。
目的のクラスのドキュメント・ページを見つけ、そのクラスが別の Zen コンポーネント・クラスから継承されているかどうかを確認します。継承されている場合、目的の XData Style ブロックは親クラスに存在する可能性があります。親クラスの名前をクリックすると、そのドキュメント・ページに移動できます。
-
-
調査対象となるコンポーネントのクラス名がわかっている場合は、その CSS スタイル定義を表示する必要があります。このためには、以下のいずれかを実行します。
-
スタジオで、Zen スタイル・ウィザードを実行し、そのコンポーネントまたはそのコンポーネントの親がリストに挙げられているかどうかを確認します。スタイルを変更する一番簡単な方法は、Zen スタイル・ウィザードを使用することです。このウィザードでは、すべてのスタイルが用意されているわけではありませんが、変更対象として一般的なスタイルがリストに挙げられています。リストには simpleTablePane があり、エントリは次のとおりです。
table.tpTable
また、以下の説明が付けられています。
Main table for tablePane
-
スタジオの %SYS ネームスペースおよび %ZEN.Component パッケージで、目的のコンポーネント・クラスを開いて表示します。このコンポーネント・クラスの XData Style ブロック、またはその親の XData Style ブロックを探し、そこで指定されている CSS ルールを確認します。
-
Zen コンポーネント・ライブラリの CSS ファイルを調べます。このファイルは次の場所にあります。ここで、C:\MyCache はインストール先ディレクトリです。
C:\MyCache\CSP\broker\。ファイル名の形式は ZEN_Component_*.css となります。アンダースコアの後に続くテキストで、調べるファイルが決まります。
コードのコメントからコンポーネント名を探します。そこから次のコンポーネント名までの記述が、そのコンポーネントのスタイルです。以下はその例です。
/* %ZEN.Component.simpleTablePane */ /* table */ table.tpTable { background: white;; border: 1px solid black; font-family: arial; width: 100%; table-layout: fixed; empty-cells: show; }
-
CSS スタイル・ルールのオーバーライド
外観を変更するコンポーネントに適用される CSS ルールを特定すれば、次の 2 つのいずれかの方法で、その CSS ルールをオーバーライドできます。
-
Zen アプリケーションまたはページ・クラスから外部 CSS ファイルを参照
-
Zen アプリケーション、ページ、またはカスタム・コンポーネント・クラスに XData Style ブロックを記述
変更の結果を効果的に予測するには、“スタイルのカスケード” で説明した優先順位規則の順序に注意してください。以下のテーブルでは、これらの規則と実現しようとする結果の関係を改めてまとめています。
得られる結果 | スタイルの変更を挿入する箇所 |
---|---|
アプリケーション全体のスタイル規則。テンプレート・ページまたは個々のページ・クラスで、これらのスタイルをオーバーライドできます。 | 改訂した CSS ルールを外部 CSS ファイルに記述し、CSSINCLUDES クラス・パラメータを使用してアプリケーション・クラスから参照します。 |
アプリケーション・クラスに XData Style ブロックを記述し、改訂した CSS ルール定義をそこで指定します。ルール構文を XData Style に入力できるほか、Zen スタイル・ウィザードを使用して簡単にスタイルを編集することもできます。アプリケーションで XData Style と CSSINCLUDES の間にスタイルの競合がある場合、XData Style が優先されます。 | |
アプリケーションにあるページのグループに適用するスタイル。個々のページ・クラスで、これらのスタイルをオーバーライドできます。 | テンプレート・ページ・クラスを作成します。一貫性のあるスタイルを必要とするすべてのページを、必ずこのテンプレート・ページのサブクラスにします。 |
改訂した CSS ルールを外部 CSS ファイルに記述し、CSSINCLUDES クラス・パラメータを使用して、テンプレート・ページ・クラスから参照します。 | |
テンプレート・ページ・クラスに XData Style ブロックを記述し、改訂した CSS ルール定義をそこで指定します。ルール構文を XData Style に入力できるほか、Zen スタイル・ウィザードを使用して簡単にスタイルを編集することもできます。テンプレート・ページ・クラスで XData Style と CSSINCLUDES の間にスタイルの競合がある場合、XData Style が優先されます。 | |
アプリケーションにある 1 つのページのみに適用するスタイル。 | 改訂した CSS ルールを外部 CSS ファイルに記述し、CSSINCLUDES クラス・パラメータを使用して、ページ・クラスから参照します。 |
ページ・クラスに XData Style ブロックを記述し、改訂した CSS ルール定義をそこで指定します。ルール構文を XData Style に入力できるほか、Zen スタイル・ウィザードを使用して簡単にスタイルを編集することもできます。ページ・クラスで XData Style と CSSINCLUDES の間にスタイルの競合がある場合、XData Style が優先されます。 | |
特定のコンポーネントのすべてのインスタンスに適用するスタイル。 | アプリケーション・クラスまたはページ・クラスで定義されたスタイルはすべて、コンポーネント・クラスで定義されたスタイルを自動的にオーバーライドします。したがって、スタイルの統一と制御を目的とした変更は、コンポーネント・クラスよりも、カスケードの最後に近いアプリケーション・クラスまたはページ・クラスで行うようにします。 |
ただし、必要に応じて、スタイル変更の対象とする組み込み Zen コンポーネントのサブクラスとなるカスタム・コンポーネントを作成することもできます。このカスタム・コンポーネント・クラスに XData Style ブロックを記述し、改訂した CSS ルール定義をこの XData Style の中で指定します。ルール構文を XData Style に入力できるほか、Zen スタイル・ウィザードを使用して簡単にスタイルを編集することもできます。 | |
いずれの場合も、組み込み Zen コンポーネント・クラスまたはその親の XData Style ブロックは編集しないでください。組み込みスタイルシート・ファイルは編集しないでください。これらのファイル名の形式は ZEN_Component_*.css となります。Caché サーバのバージョンをアップグレードすると、このような変更は失われます。 |
新しいスタイルの適用
これまでのトピックでは、組み込み Zen コンポーネントで既に使用されているスタイルを変更する方法を説明しました。まったく新しい CSS スタイルを (新しい名前で) 定義し、そのスタイルをコンポーネントに適用する場合は、実行する手順が増えます。その場合、コンポーネントのサブクラスを作成し、CSS スタイルを定義するだけでなく、そのコンポーネントを HTML としてページに表示するサブクラスの中から、その CSS スタイルを参照する必要があります。これらの手順の詳細は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。