Web UI フレームワークでの UI ブランディング
Web UI フレームワークでは、UI ブランディングを企業のロゴなどの独自のブランド名に変更できます。 Ext JS プラグインを使用してルック・アンド・フィールをカスタマイズできます。
テーマその他の項目を変更することもできます。 サンプル・アプリケーションは、次の 2 つの部分に分けられます。
- テーマ
- レイアウト
テーマ
Web UI フレームワークで使用されるすべてのテーマでは、次の方法による指定変更が可能な CSS ファイルが使用されます。
- 指定変更される項目をディレクトリーに配置します。 カスタム CSS ファイルは任意の場所に配置できます。
IncludeCSS タグを使用して CSS ファイルの指定を変更します。 IncludeCSS タグは、ロケールをサポートします。 該当するロケール用 CSS のローカライズされたファイルを使用します。 そのローカライズされたファイルを、CSS の指定変更に使用できます。
例:<scuitag:includeCSS path="/sfs/resources/default/css/sfs-core.css" /> - 認証後実装 (ISCUIPostAuthenticationProvider) を使用します。
レイアウト
これは、アプリケーションが開始点として使用可能なサンプル・レイアウトです。 独自のカスタム・レイアウトの設計を選択することもできますが、このタイプのレイアウト構造を推奨します。
画面レイアウトは、次のような 5 つの異なる部分に分けられます。
| 画面レイアウト図のセクション | 画面レイアウトの各部 | 説明 |
|---|---|---|
| A | ヘッダー | アプリケーション名、企業ロゴ、スタティック・リンク、ログイン・ユーザーの情報、および背景イメージで構成されます。 |
| B | メニュー | Web UI フレームワークでは、メニューを画面に組み込むことができます。 ユーザーは、メニューをレンダリングする HTML 要素の ID を渡すことによって、 JavaScript 関数を呼び出すことができます。 メニュー項目は、ログインしたユーザーに対して getUserHierarchy API から取り出されます。 |
| C | ページ・ヘッダー | ページ・タイトルと 1 つ以上のパネルから構成されます。 |
| D | ページまたは画面 | 1 つ以上のパネルから構成されます。 |
| E | フッター | スタティック・リンクと著作権情報から構成されます。 |