フォーム・スタイルのカスタマイズ

Zen コンポーネントでは、スタイルの制御に Cascading Style Sheets (CSS) を使用します。コンポーネントには独自の既定のスタイルがあります。ユーザ独自の CSS スタイル定義を提供して、これらのスタイルをオーバーライドすることができます。Zen アプリケーションには、アプリケーション全体、個々のページ、または個々のコンポーネントの既定のスタイルをオーバーライドするためにスタイル情報を配置できる場所が他にも多数あります。ここでは、このページ上でのみ既定のスタイルをオーバーライドするために、HomePage.cls にスタイル情報を配置します。

フォームのスタイルをカスタマイズするために、いくつかの CSS スタイル定義を HomePage.cls の XData Style ブロックに追加します。以下の CSS スタイル定義を、HomePage.cls の XData Style ブロックにある既存のスタイル定義に追加します。


XData Style
{
<style type="text/css">          
 
...

/*fieldSet styles*/
.fieldset{
     background: #FFFFFF;
     border: solid 5px #C5D6D6;
     color: #000000;
     font-size: 1em;
     font-family: arial;
}
/*text control styles*/
.text
{  
    font-size: .8em;
    font-family: arial;
    color: #000000;
    background-color: #ffffff;
    padding: 2px;
    border: solid 1px grey;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 25px;
}
/*dataCombo styles*/
.comboboxInput  {
    font-size: .8em;
    font-family: arial;
    color: #000000;  
    padding: 2px;
    border: solid 1px grey;
    margin-right: 0px;
    margin-bottom: 0px;
    height: 20px;
 }

これらのスタイル定義により、fieldSet、text、および dataCombo コンポーネントのスタイルが設定されます。