コンポーネント内に配置された個別コンポーネントは、デフォルトテーマのコンポーネントスタイルを適用します。XCSSファイルとcssclassプロパティを活用して、配布するコンポジットコンポーネントにのみ適用するスタイルを使用することができます。

XCSSファイルを編集して画面に適用

モジュールプロジェクトを生成する際、プロジェクト名でXCSSファイルを自動生成します。生成されたファイルは、Resource Explorerタブで検索できます。

Resource Explorerタブでxcssファイルを選択し、コンテキストメニューで「Edit」項目をクリックしてCSS編集ウィンドウを実行します。

Textタブで下記のようにコードを修正します。Calendarセレクタを追加し、クラスセレクタとしてsimple_moduleという項目を追加します。

.Calendar.simple_module .datepicker .head
{
	background : orangered;
}
.Calendar.simple_module .datepicker .body .weekband
{
	background : orangered;
}
.Calendar.simple_module .datepicker .body
{
	-nexa-border : 1px none transparent;
}

.Calendar.simple_module .datepicker .body .dayitem[userstatus=saturday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=sunday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=saturday]
{
    color : #ffffff;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=sunday]
{
    color : #ffffff;
}
.Calendar.simple_module_purple .datepicker .head
{
	background : #C785C8;
}
.Calendar.simple_module_purple .datepicker .body .weekband
{
	background : #C785C8;
}

CSS編集ウィンドウの機能は、下記のリンクをご参照ください。

XCSS編集

Project Explorerタブでxcdlファイルを選択し、コンテキストメニューで「Edit」項目をクリックして、コンポジットコンポーネントの画面を開きます。

2つのCalendarコンポーネントのcssclassプロパティ値を「simple_module」に指定します。コンポーネントのスタイルが変更されていることが確認できます。

モジュールインストールファイルを生成します。別途の設定しなくても、xcssファイルまで配布されていることを確認できます。

モジュールをインストールして適用されたスタイルを確認

モジュールのインストール段階は、コンポジットコンポーネントを選択する段階まで同様です。その段階で、「Next」ボタンをクリックしてStyleを適用するAppを選択します。

インストールするコンポジットコンポーネント名を確認して「+」ボタンをクリックし、「Next」ボタンをクリックします。

スタイル設定画面で適用するAppオブジェクトを指定します。追加されたxcssファイルは太字で表示されます。

「Install」ボタンをクリックしてモジュールをインストールします。

コンポーネントを配置したForm画面を開くか、新しくFormを作成してコンポジットコンポーネントを配置し、指定したスタイルが適用されているかを確認します。