スキンおよびスキン テーマを作成する

• スキンを作成するには
• スキン テーマを作成するには

1. ポータル アプリケーションが WebLogic Workshop Platform Edition で開いている状態で、ポータル Web プロジェクト内の既存のスキン ディレクトリを複製します。たとえば、<project>¥framework¥skins¥default ディレクトリを右クリックして、[複製] を選択します。
   
   表示される新しいスキン ディレクトリの名前の末尾に番号が追加されます。
2. 新しいスキン ディレクトリの名前を変更します。
3. 使用する予定のないスキン サブディレクトリを削除します。
4. images サブディレクトリで、必要に応じてボタン アイコンを修正します。JSP またはスケルトン JSP に含まれている名前を変更せずに、ファイル名だけ変更しないでください。
5. css サブディレクトリに、作成した新しい CSS ファイルを追加します。BEA から提供されているデフォルトのスタイルや CSS ファイルの名前は、一切変更しないでください。これらのスタイルは、スケルトン JSP やレイアウト ファイルなどで、スタイル表示に使用されます。
   
   モバイル機器でマルチ レベル メニューをサポートするには、book.css ファイルの「display: none;」という行を削除します。
6. js サブディレクトリで、必要に応じて JavaScript を修正します。
   
   スキンにはビジネス ロジックを含めないでください。ビジネス ロジック用には別個の JSP を作成し、これらの JSP を (デスクトップのヘッダまたはフッタの) ポータル シェルまたはポートレットのいずれかで表面化します。
7. ルート スキンおよび任意のサブ スキンの skin.properties ファイルを修正します。
   
   skin.properties ファイルには、画像、テーマ、スタイルシートのリンク、JavaScript スクリプト エントリ、スケルトン依存関係などへの参照情報が含まれます。これは、ファイル修正プロセスを指示するために、自動的にドキュメント化されます。
   
   skin.properties のすべての参照を入力することが重要です。これらの参照は、ポータルが表示されるときに HTML の冒頭に挿入されます。参照情報が不足していると、スキンの表示が正しく行われません。
   
   注意 : skin.properties と同じディレクトリに、skin_custom.properties というファイルを作成することもできます。skin_custom.properties は、作成したカスタムの CSS および JavaScript ファイルを一覧表示するか、skin.properties 内の設定をオーバライドする目的で使用します。skin_custom.properties ファイルはカスタム エントリに役立ちます。これは、カスタマイズ内容を上書きすることなく skin.properties を新しい製品リリースで置換できるためです。
8. ルック アンド フィール ファイルを開くまたは作成して、スキンをそのルック アンド フィールと関連付けます。「ルック アンド フィールのファイルを作成する」を参照してください。
9. ポータルのスキンを使用するには、WebLogic Workshop Platform Edition でポータルを開き、[ドキュメント構造] ウィンドウで [デスクトップ] アイコンを選択し、プロパティ エディタの [ルック アンド フィール] フィールドでルック アンド フィールを選択します。
10. スキンで参照されている CSS ファイルを修正するには、ルック アンド フィール エディタを使用します。「ルック アンド フィール エディタを使用する」を参照してください。

Portal Designer でデスクトップのルック アンド フィールを選択すると、ポータルでデフォルトのルック アンド フィール設定が行われます。ポータル管理者およびエンド ユーザは、デスクトップに使用されるルック アンド フィールを変更できます。

スキン テーマを作成するには

テーマは、スキンおよびスケルトン間で共有される単一の .theme ファイルで表されます。たとえば、ポートレットに対して「alert」というテーマを選択すると、ポータル フレームワークは「alert」というスキンおよびスケルトン サブディレクトリを探します。

1. ポータル アプリケーションが WebLogic Workshop Platform Edition で開いている状態で、ポータル Web プロジェクト内の既存のテーマ ファイルを複製します。たとえば、<project>¥framework¥markup¥theme¥alert.theme ディレクトリを右クリックして、[複製] を選択します。
   
   新しいテーマ ファイルが、名前の末尾に番号を付されて表示されます。
2. 新しいテーマ ファイルの名前を変更します。必ず拡張子 .theme を維持してください。
3. 新しいテーマ ファイルが開いている状態で、<netuix:theme> 要素の次の属性を修正します。
   
   

   name	必須。テーマのリソースをブック、ページ、またはポートレットに適用するときにポータル フレームワークによって検索されるテーマ ディレクトリの名前。
   title	必須。Portal Designer や WebLogic Administration Portal で、ブック、ページ、およびポートレットのプロパティに表示される [テーマ] ドロップダウン リストに値を入力するために使用。
   description	テーマの説明 (省略可能)。
   markupName	必須。markupName は、ポータル Web プロジェクト内の他のテーマ間で固有である必要がある。markupName は名前と同じにすることを推奨。

   
   注意 : テーマの markupType 属性は、必ず "Theme" にする必要があります。
4. テーマ ファイルを保存します。

次に、テーマのリソースを作成します。

5. スキン ディレクトリで、テーマと同じ名前のサブディレクトリを作成します。
6. テーマ用に変更するスキンのファイルがある場合は、どのファイルを変更するかを決定し、これらを新しいテーマ ディレクトリにコピーします。この際、サブディレクトリ構造は保持します。
7. テーマのリソースに必要な変更を行います (skin.properties あるいは JSP またはスケルトン JSP に含まれている名前を変更せずに、ファイル名だけ変更しないでください)。
8. テーマを使用するすべてのスキンの skin.properties ファイルで、次のタイプのエントリを使用して、ファイルの「THEME IMAGES DIRECTORIES」セクション内でテーマを参照します。
   
   theme.alert.search.path: alert/images, images
   
   テーマ名はプロパティ名の 2 番目の項目であることに注目してください。
9. 変更したファイルをすべて保存します。
10. 他のスキンでテーマを使用できるようにする場合は、テーマ ディレクトリをスキン ディレクトリにコピーし、それぞれの skin.properties の「THEME IMAGES DIRECTORIES」セクションに適切なエントリを追加します。

使用できるテーマ (.theme ファイルによって識別) はすべて、スキンに含まれているかどうかに関係なく、ブック、ページ、およびポートレット用に選択可能です。デスクトップ用に選択されたルック アンド フィールが上記の手順でまとめたように skin.properties ファイルで選択されたテーマを含まないスキンを参照している場合は、使用されるテーマはありません。

独自のスタイル シート クラスを作成する

独自の CSS スタイルをスキンに追加するには、次の手順に従います。

1. BEA の提供する CSS ファイルに独自のスタイルを追加すると、これらのファイルが製品の更新によって上書きされてしまうおそれがあるため、追加するクラス数が少ない場合でも、独自の CSS ファイルを作成します。
2. 作成した CSS のパスとファイル名を、スタイルを使用するスキンの skin_custom.properties ファイルにある「Link Entries」セクションに追加します。場合によっては、skin_custom.properties ファイルを、skin.properties と同じディレクトリに作成する必要があります。この処理により、ポータルで使用されるあらゆる JSP または HTML で CSS スタイルを使用できるようになります。これは、CSS 参照が skin.properties ファイルから、表示される HTML に自動的に挿入されるためです。
   
   注意 : カスタム CSS エントリを skin.properties に追加することもできますが、将来の製品リリースによって skin.properties ファイルが上書きされるおそれがあります。
3. スタイルをスケルトン JSP ファイル内で使用して、ポータル コンポーネントを表示する場合は、これらのスタイルを該当する JSP 内にインラインで追加します。スタイルがどのように実装されるかは、既存のスケルトン JSP を開いて確認できます。