バージョン7.0から、Curl は、スタイル シートの利用をサポートします。Curl のスタイル シートは、概念的には、HTMLと共に使用されるカスケーディング スタイル シート(CSS)と同様です。アプレットの外観の制御をアプレットの実装から分離させることが出来ます。このことは、スタイル シートを実装するだけで、様々な外観を作成することが出来ることを意味しています。6.0のアプレットでは、スタイル シートとスキンが適用できるコントロールは、外部ライブラリを通じてサポートされます。
Curl のスタイル シートは、
Visual オブジェクトに適用されるルールのコレクションです。ルールのパターンの部分が、オブジェクトにマッチすると、ルールからプロパティの設定が適用されます。スタイル ルールは、
Visual オブジェクト上で、”オプション”と表現されるプロパティを設定します。
Curlのスタイル シートは、
StyleSheet クラスのインスタンスです。スタイル シートには、
StyleRule や他のスタイルシートを組み込むことが出来ます。どんなスタイル シートにおいても、ネストしたスタイル シートは、スタイル ルールの前、かつ、前のルールを書き換えるルールの後に記述しなければなりません。
このセクションは、スタイル シートの作成と使用を説明します。詳細に入る前に、ここでは、スタイル シート処理で必要とされるクラスの概要を示します。
既定のスタイル シートは、Curlのスキンが適用できるコントロールの既定の外観を定義するのに使用され、
get-default-style-sheet を呼び出すことで取得することが出来ます。GUI ツールキット コントロールのスタイル化についての詳細は、次の章、
スタイル コントロール で説明します。本章の残りでは、スタイル シートの一般的な使用法を説明します。
Visual.style-element プロパティは、オブジェクトの型かまたは、オブジェクトを作成するマークアップに対応する文字列です。例えば、
Table.style-element は、"Table"です。
blockquote を呼び出した結果の Visual の style-element は、"blockquote"です。
Visual.style-class プロパティは、選択する文字列です。それは、単語のコレクションとして、または、スペースで区切られたタグとして解釈されます。これらのタグは、次のサンプルで示されるようにスタイル シートの中で使用されます。
この簡単なスタイル シートでは、最初のルールは、style-element が"Table"である全てのオブジェクトに適用されます。2番目のルールは、style-element が"blockquote"で、style-class が"important"であるオブジェクトに適用されます。
| 例:
簡単なスタイル シート |
 |
{def ss =
{StyleSheet
{StyleRule "Table",
border-width = 1in/300, border-color = "black",
horizontal-line-width = 1in/300,
vertical-line-width = 1in/300,
cell-margin = 2px
},
{StyleRule "blockquote.important",
font-style = "italic",
font-size = 1.1em
}
}
}
{Table
columns = 2,
background = "#fcfefd",
style-manager = {BasicStyleManager ss},
"George Washington",
{blockquote
Worry is the interest paid by those who borrow trouble.
},
"Thomas Jefferson",
{blockquote style-class = "important",
I find that the harder I work, the more luck I seem to have.
},
"Abraham Lincoln",
{blockquote
I destroy my enemies when I make them my friends.
}
}
| |
ここで示したように、いつでも
StyleManager を作成することが出来ますが、現実には、大抵スタイル シートは、別のファイルに置いたほうがよいです。Curlのスタイル シートは、ファイルの最後の式が、
StyleSheet オブジェクトを返す Curl コードを含むファイルです。最後の式までは、ファイルは、スタイルを実装するのに必要ないかなる Curl コードも含めることが出来ます。特に、スタイル シートを実装する為に、
CURL.GUI.STANDARD のようなパッケージをインポートする必要があるかもしれません。
アプレットに、インクルードまたはインポートする他のファイルと同じように、スタイル シートは、アプレットの一部です。アプレットと同じ特権モードで動作します。スタイル シートにシンタックス エラーが含まれている場合には、アプレットは実行されません。また、スタイル シートを使用するアプレットと共にスタイル シートをデプロイする必要があります。
スタイル シートは、通常、URL で参照されます。(
Url から自動的に
StyleSheet 変換されます。) それは、通常、普通の URL（しばしば、アプレットとの相対位置で記述されます。）であるか、プロジェクトに適切なコンポーネントを追加した場合には、
manifest-url になります。マニフェストURLを使用する為には、プロジェクトのマニフェストに以下のようなコンポーネントを追加してください。
{component file CUSTOM-STYLESHEET,
location = "custom-styles.scurl"
}
これはマニフェスト内で、CUSTOM-STYLESHEET の定義を提供します。スタイル シートは、以下の式を使って、アプレットから参照されます。
{manifest-url "file" "CUSTOM-STYLESHEET"}
このテクニックの利点は、マニフェストを変更するだけで、異なるスタイル シート切り替えることが出来ます。アプレットそのものは、何も変更する必要がありません。
このドキュメントでは、サンプル スタイル シートを提供します。それは、Curl コントロールの既定のスタイルを定義したものに似ています。このスタイル シートは、 default-style.scurl と dss-defs.scurl に定義されており、これらのファイルは、d:\automated-build-temp\build\win32-atom\ide\gui\controls\styled-controls ディレクトリにあります。これらのファイルの内容を学習すると、スタイルの作成の仕方を学ぶことが出来ます。
以下のコードは、d:\automated-build-temp\build\win32-atom\docs\default\support\typewriter-style.scurl 内で見られるサンプル スタイル シートを定義しています。CURL.GUI.STANDARD パッケージをインポートしています。なぜなら、一般的にそこで定義されている型と定数を必要とするからです。（この簡単なスタイル シートはそのようにしていませんが）。これに、3つのルールの簡単なスタイル シートが続きます。
StyleRule は、複数のパターン文字列とそれに続く複数のキーと値のペアで構成され、パターン文字列そのものは、ドット(.)で区切られた2つのコンポーネントを含んでいることに注意してください。ドットの前の部分は
Visual.style-element の値とマッチさせる為に使われ、ドットの後ろの部分は、
Visual.style-class の値にマッチされます。空のパターン文字列は、全てにマッチします。ですから、パターン".xyz"は、単語".xyz"を含む
style-class 値を持つ全てのオブジェクトにマッチします。
{import * from CURL.GUI.STANDARD}
{StyleSheet
{StyleRule "text", "paragraph",
font-family = "Courier New",
font-size = 9pt
},
{StyleRule "paragraph",
paragraph-first-line-offset = .25in,
paragraph-after-spacing = .125in
},
{StyleRule "paragraph.centered",
paragraph-first-line-offset = 2in,
paragraph-left-indent = 2in
}
}
最初のルールは、style-element が、"text" または "paragraph" であるCurl コンテンツにマッチします。2番目のルールは、全ての段落（paragraph）だけに、幾つかの追加のオプションを設定します。最後のルールは、style-class = "centered" である全ての段落に適用されます。何故なら、（ファイルの後ろの方書かれているだけではなく）より詳細に記述されており、このルールが適用される場所では、前のルールを上書きします。以下が出力の例です。
| 例:
typewriter-style.scurl の使用 |
 |
{def letter =
{Frame
background = "ivory",
width = 5in, margin = .5in,
{text
{paragraph style-class = "centered",
20 April 2008{br}
Cambridge, Massachusetts
}
{paragraph paragraph-first-line-offset = 0in,
Dear Sir,
}
{paragraph
In about a month we will be going on a long vacation
and we would like you to suspend the delivery of our
newspaper as of 27 April 2008.
When we return, we will contact you to let you know
you can restart delivery. Thank you.
}
{paragraph style-class = "centered",
Sincerely,{br}
A Customer
}
}
}
}
{install-style-sheet-on-Graphic
letter,
{url "../../default/support/typewriter-style.scurl"}
}
{value letter}
| |
このサンプルでは、以前に示したスタイル シートを含むファイルの url で
install-style-sheet-on-Graphic を呼び出して、カスタム スタイル シートをインストールしています。スタイル シートを参照する
Url は、自動的に
StyleSheet に変換されます。多くの場合、アプレット全体にスタイル シートをインストールする為には、
install-style-sheet を呼び出します。しかし、幾つかの場合では、ここで示すように、コンテナに異なるスタイル シートをインストールするのが便利です。
以下のサンプルは、幾つかのテキスト プロシージャのスタイル ルールを説明しています。1つのスタイル ルールで、幾つかの style element のプロパティを設定できることに注意してください。後続のルールは、以前のルールによって、設定されたプロパティを元に戻す事無く、element を修正できることにも注意してください。この場合、後続のルールは、以前のルールで設定されたフォント サイズを変えることなしに "enumerate" の色を設定しています。
| 例:
スタイルが適用されたテキスト プロシージャ |
 |
{def sm =
{BasicStyleManager
{StyleSheet
{StyleRule "itemize", "enumerate",
font-size = 8pt
},
{StyleRule "enumerate",
color = "green"
},
{StyleRule "superscript", "subscript",
font-style = "italic",
font-weight = "bold"
},
{StyleRule "hrule",
height = 2px,
color = "green"
},
{StyleRule "paragraph",
font-size = 18pt
}
}
}
}
{VBox
spacing = 6pt,
style-manager = sm,
{itemize
{item
First Item
}
{item
Second Item
}
{item
Third Item
}
},
{hrule},
{enumerate
{item
First Item
}
{item
Second Item
}
{item
Third Item
}
},
{paragraph
This is a superscript{superscript alpha}, and this is a
subscript{subscript beta}.
}
}
| |
以下の表は、style element を持ち、スタイル シートで使用できるテキスト プロシージャの一覧です。
Copyright © 1998-2019 SCSK Corporation.
All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation.
that are registered in the United States. Surge
Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE)
logo are trademarks of SCSK Corporation.