| Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド リリース5.1 E83810-03 |
|
 前 |
 次 |
テーマとテーマ・スタイルを使用して、アプリケーションの作成時に生産性を向上させることができます。テーマは、アプリケーションのレイアウトとスタイルを定義するテンプレートのコレクションです。テーマにテーマ・スタイルが含まれる場合、開発者はテーマ・ローラー・ユーティリティを使用してアプリケーションの外観を変更できます。
トピック:
テーマは、アプリケーション全体のレイアウトおよびスタイルを定義できるテンプレートのコレクションです。テーマにはテンプレートの完全なセットが用意され、アプリケーションに必要となる可能性があるすべてのUIパターンが提供されます。テンプレートはまず、テンプレート・タイプ別に分類され、次にテンプレート・クラス別に分類されます。テンプレート・タイプには、ページ、リージョン、レポート、リスト、ボタン、ラベルおよびポップアップ値リスト(LOV)があります。
各テンプレート・タイプには、多くのテンプレート・クラスがあります。テンプレート・クラスによって、テンプレート・タイプ内でのテンプレートの用途が定義されます。たとえば、リージョン・テンプレートは、フォーム・リージョン・テンプレート、レポート・リージョン・テンプレートなどとして分類できます。このような分類によって、Oracle Application Expressではテーマ間でのテンプレートのマッピングが可能になり、アプリケーション全体のルック・アンド・フィールを簡単に変更できます。
Oracle Application Expressには、広範なテーマ・リポジトリが同梱されています。管理者は、次のようにテーマをテーマ・リポジトリに追加できます。
ワークスペース・テーマ - ワークスペース管理者は、ワークスペース内のすべての開発者が使用できるテーマを作成できます。ワークスペース・テーマの管理を参照してください。
パブリック・テーマ - インスタンス管理者は、Oracle Application Express管理サービスに追加することでパブリック・テーマを作成できます。追加すると、これらのパブリック・テーマはインスタンス内のすべてのワークスペースですべての開発者が使用できます。詳細は、『Oracle Application Express管理ガイド』のパブリック・テーマの管理に関する説明を参照してください。
ユニバーサル・テーマ - 42やモバイル - 51などの新しいテーマには、テーマ・スタイルが含まれています。テーマ・スタイルは、ベースCSSに追加されるCSSスタイルシートです。開発者は、テーマ・ローラー・ユーティリティを使用してテーマ・スタイルを変更することによって、アプリケーションの外観を変更できます。
関連項目:
レスポンシブ・デザインにより、ページを表示するデバイス(たとえば、デスクトップ・コンピュータ、ラップトップ・コンピュータ、タブレットまたはスマートフォン)にかかわらず、レイアウトを使用可能スペースに適合させるようなWebページを設計できます。レスポンシブ・デザインを実装することによって、ユーザーは大きい画面では完全な操作性を取得できます。スマートフォンやタブレットでも、レイアウトは特定のデバイスのサイズに調整されます。このサイズ変更のプロセス中に、要素の位置やサイズが変わったり、非表示になったりします。レスポンシブ・デザインの目的は、可能なすべての画面サイズで、すべての重要なコンテンツをユーザー・フレンドリな方法で表示することです。ユニバーサル・テーマ - 42は、レスポンシブ・ユーザー・インタフェース・テーマの例です。
レスポンシブ・デザインは単なる1セットのテンプレートの選択の問題ではありません。アプリケーション開発者として、テーマのテンプレートの使用に責任を負い、本当にレスポンシブ・デザインを促進するページを設計します。既存のアプリケーションをユニバーサル・テーマに変換するには、すべてのアプリケーション・ページを確認して、適切なテンプレートおよびレイアウトが確実に定義されていることが必要です。
Oracle Application Expressでは、任意の画面サイズに拡大/縮小可能なアプリケーションを構築できるレスポンシブ・ユーザー・インタフェース・テーマが提供されます。ユニバーサル・テーマ - 42は、レスポンシブ・デスクトップ・テーマです。開発者は、このテーマを使用して、様々な画面サイズで正しく機能するアプリケーションを構築できます。
モバイル・テーマ - 51を使用すると、スマートフォンやタブレットなどのモバイル・デバイスでの使用に最適化されたアプリケーションを構築できます。モバイル・テーマを使用して構築されたページは、デスクトップ・ページよりも小さく軽量であり、タッチ・イベントおよび方向の変更がサポートされます。
ヒント:
ユニバーサル・テーマ - 42を使用してアプリケーションを表示するには、パッケージ・アプリケーションの使用を参照してください。
Oracle Application Expressアプリケーションでは、リージョンおよびアイテムのページ上の位置は、グリッド設定を使用して定義されます。テーマ26 - 生産性アプリケーションなどの古いテーマでは、表ベースのグリッドが使用されます。表ベースのテーマでは、複数のリージョンを隣り合せに配置でき、フォームの単一行に複数のアイテムを含めることができます。ユニバーサル・テーマ - 42などの新しいテーマでは、DIVベースのグリッドが使用されます。DIVベースのグリッドを使用するページには、次のような利点があります。
より簡単に維持および更新できます。DIVベースのページはコードが少ないため、複雑さが減少します。
より速くロードされます。DIVベースのグリッドを使用するページは、一般的に、より速くロードされます。
表ベースのテーマからDIVベースのテーマに切り替える場合、テーマの切替えウィザードで「グリッドのリセット」オプション、「固定リージョン位置のリセット」を構成する必要があります。「固定リージョン位置のリセット」を選択すると、既存の設定は削除され、すべてのリージョンおよびアイテムが垂直に積み上げられて表示されます。
関連項目:
ユニバーサル・テーマ - 42やモバイル - 51などの新しいテーマには、テーマ・スタイルが含まれています。テーマ・スタイルは、ベースCSSに追加されるCSSです。開発者は、テーマ・ローラー・ユーティリティを使用してアプリケーションの外観を変更できます。
トピック:
テーマ・スタイルでは、アプリケーションのルック・アンド・フィールを変更するためにベースCSSに追加される、CSSスタイルシートを定義します。ユニバーサル・テーマ - 42やモバイル - 51などの新しいテーマには、ベースCSSファイルに加えてテーマ・スタイルCSSファイルを含めることができます。テーマ・スタイルCSSファイルは、ページ・テンプレート内で#THEME_STYLE_CSS#置換文字列を使用して参照されます。Application Expressエンジンによって、この置換文字列は、テーマ・スタイル属性で定義されているCSSファイル参照と置き換えられます。テーマ・スタイルを使用して、テーマをカスタマイズしたり、別のカラー・スキームに切り替えたり、フラットな外観を適用したり、テーマをレスポンシブにします。1つのテーマに複数のテーマ・スタイルを設定し、その1つのスタイルをアクティブに設定できます。テーマ・スタイルCSSファイルは、テーマ・ローラーを使用して変更できます。
定義後、開発者は次の方法でテーマ・スタイルを選択できます。
アプリケーションの作成ウィザードの実行時に、「テーマ・スタイル」属性を編集します。アプリケーションの作成ウィザードの使用を参照してください。
ユーザー・インタフェースの編集。ユーザー・インタフェース・ページからのテーマ・スタイルの編集を参照してください。
テーマの作成/編集ページへのアクセス。テーマの編集およびテーマ・スタイルの作成を参照してください。
開発者は、実行中のアプリケーションでユーザーがテーマ・スタイルを選択できるようにすることができます。このことを可能にすると、実行中のアプリケーションで、「カスタマイズ」リンクが、通常は左下隅に表示されます。ユーザーが「カスタマイズ」リンクをクリックすると、ポップアップが表示され、使用可能なテーマ・スタイルがリストされます。ユーザーがテーマ・スタイルを選択すると、テーマ・スタイルがユーザー・プリファレンスとして永続的に格納され、将来のセッション中に保持されます。
ユーザーがテーマ・スタイルを選択できるようにするには、次のステップを実行します。
テーマ・ローラーは、開発者がコード行を変更することなく、アプリケーションの色や角丸などの属性を迅速に変更できる、ライブCSSエディタです。テーマ・ローラーは、テーマ・スタイルの少なくとも1つに、「入力パラメータ・ファイルURL」属性が定義されている場合に、実行時開発者ツールバーに表示されます。
ヒント:
テーマ・ローラーの例を参照するには、ユニバーサル・テーマ - 42を使用するパッケージ・アプリケーションをインストールして実行します。パッケージ・アプリケーションの使用を参照してください。
テーマ・ローラーを使用するには、次のステップを実行します。
開発者がデスクトップ・アプリケーションを実行すると、編集可能な実行中のページの下部に、実行時開発者ツールバーが表示されます。
テーマ・ローラーによって、アプリケーションのスタイルがフェッチされ、エディタにロードされます。
アクティブなアイコンおよびメニューの上にカーソルをあわせると、その名前が表示されます。
開発者はテンプレート・オプションを使用して、宣言的な方法でOracle Application Expressのページ上のコンポーネントに様々なスタイルを適用できます。
トピック:
テンプレート・オプションによって、開発者は、ページ、リージョン、レポート、リスト、ブレッドクラム、アイテムおよびボタンに関して選択したテンプレートにCSS修飾子を宣言的に適用できます。CSS修飾子は、CSSスタイルシートで定義されたCSSクラスの参照です。CSS修飾子によって、開発者は同じHTMLマークアップを使用しながら、CSSを適用することでそれを様々なスタイルで表示できます。ボタンの色、リージョンの幅、フォントの設定、アイテム・ラベルのマークアップなどで様々なスタイルを実現するために、ほぼ同一の多数のテンプレートをテーマで定義する必要性が、テンプレート・オプションによって減少します。
開発者は、次に示す例のような方法で、テンプレート・オプションを使用できます。
様々な色またはアクセントの適用
様々な間隔および余白の適用
様々なスタイルでのボタンのレンダリング(アイコンあり/なし)
様々な位置合せでのフォーム・フィールドの表示。
テンプレート・オプションを使用しない場合、これらのバリエーションを適用するには、ほぼ同一の非常に多くのテンプレート、またはCSSに関する詳細な知識が必要になります。テンプレート・オプションがサポートされるコンポーネントには、ページ、リージョン、クラシック・レポート、ブレッドクラム、リスト、アイテム、ラベル、ボタンがあります。
開発者は、テンプレート・オプション・グループに含まれていないテンプレート・オプションを、特定のテンプレートのデフォルトにすることを選択できます。アプリケーション・ビルダーでは、テンプレートを参照するコンポーネントをレンダリングすることによって、デフォルト・テンプレート・オプションを自動的に適用します。デフォルト・テンプレート・オプションは、実際のコンポーネントには書き込まれません。かわりに、#DEFAULT#置換文字列がコンポーネントに対して定義されるため、開発者はテンプレート・オプションのデフォルトを一元的に変更できます。
開発者は、テンプレート・オプションのデフォルトを使用しないことを選択でき、その場合は、#DEFAULT#置換文字列がコンポーネントから削除されます。テンプレート・オプションのデフォルトを無効にすると、開発者は使用可能なテンプレート・オプションをコンポーネントに選択的に適用できます。コンポーネントを編集するときに直接選択したすべてのテンプレート・オプションは、コンポーネントのメタデータに書き込まれ、対応するCSSクラス文字列によって表されます。実行時に、選択されたテンプレート・オプションとデフォルト・テンプレート・オプションはデフォルトの一部であり、コンポーネントのCSSクラス文字列と組み合されてコンポーネントに適用されます。
開発者は、テンプレート・オプション・グループを作成することによって、関連するテンプレート・オプションの用途を定義できます。テンプレート・オプション・グループの例には、ボタン・サイズ、ボタン・スタイル、リストの例、リスト・スタイルおよびフォーム・ラベルの位置があります。開発者は、テンプレート・オプション・グループを作成するときに、テンプレート・レベルでテンプレート・オプションの事前設定を指定できます。たとえば、テンプレート・オプションLargeおよびSmallがあるボタン・テンプレートがあるとします。Smallを事前設定として定義した場合、このテンプレートを参照する新しいボタンには、作成時にテンプレート・オプションSmallが自動的に適用されます。グループに含まれているテンプレート・オプションは、事前設定がテンプレート・レベルで定義されていない場合はオプションです。
テーマ・ページでテーマを管理します。
ヒント:
テーマに選択したデフォルトのテンプレートを、テーマの作成/編集ページで変更できます。テーマの編集を参照してください。
「テーマ」ページにアクセスするには、次の手順を実行します。
この項では、テーマ属性の編集方法について説明します。
この項では、テーマ属性の作成/編集ページ上の属性について説明します。属性の詳細および例を確認するには、フィールドレベル・ヘルプを参照してください。
トピック:
表11-1に、「名前」の属性を示します。
表11-1 名前
| 属性 | 説明 |
|---|---|
カレント・アプリケーションIDを指定します。 関連項目: アプリケーション属性の編集 |
|
テーマの番号を指定します。テーマは、アプリケーションのユーザー・インタフェースを定義するテンプレートのコレクションです。 |
|
テーマの説明的な短い名前を入力します。 |
|
テーマの設計対象のユーザー・インタフェースを指定します。 関連項目: ユーザー・インタフェースの詳細ページ |
|
選択するナビゲーション・タイプを指定します。有効なオプションは、「タブ」または「リスト」です。 |
|
選択するナビゲーション・バー実装を指定します。有効なオプションは、「クラシック」または「リスト」です。 関連項目: ユーザー・インタフェースの詳細ページ |
|
テーマの説明を入力します。 |
このアプリケーションがサブスクライブするテーマを表示します。アプリケーションがテーマにサブスクライブすると、すべてのテーマ属性、サブスクライブされたテンプレート・オプションおよびサブスクライブされたテンプレートは読取り専用に設定されます。
関連項目:
表11-2に、「JavaScriptおよびカスケード・スタイルシート」の属性を示します。
表11-2 JavaScriptおよびカスケード・スタイルシート
| 属性 | 説明 |
|---|---|
すべてのページにロードするコードのJavaScriptのファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列 例を表示するには、フィールドレベル・ヘルプを参照してください。 |
|
すべてのページにロードするカスケード・スタイルシートのファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列 例を表示するには、フィールドレベル・ヘルプを参照してください。 |
表11-3に、デフォルトのテンプレートをコンポーネント・タイプ別に示します。
表 11-3 コンポーネントのデフォルトのテンプレート
| 属性 | 説明 |
|---|---|
ページを表示するためのデフォルトのテンプレートを指定します。開発者が明示的にテンプレートを選択しない場合、Application Expressエンジンは、ここで指定されたテンプレートを使用します。 関連項目: 表示属性 |
|
アプリケーションでナビゲーション・バー・タイプをリストとして定義する場合に使用されるデフォルトのナビゲーション・バー・リスト・テンプレートを指定します。開発者が明示的にテンプレートを選択しない場合、Application Expressエンジンは、ここで指定されたテンプレートを使用します。 関連項目: 表示属性 |
|
デフォルトのナビゲーション・メニュー・リストの位置を指定します。 |
|
ページ上部に表示される新しいリストを作成する場合に使用されるデフォルトのナビゲーション・メニュー・リスト・テンプレートを指定します。 |
|
ページの横に表示される新しいリストを作成する場合に使用されるデフォルトのナビゲーション・メニュー・リスト・テンプレートを指定します。 |
|
ページを表示するためのデフォルトのテンプレートを指定します。開発者が明示的にテンプレートを選択しない場合、Application Expressエンジンは、ここで指定されたテンプレートを使用します。 |
|
オプション。インライン表示されるエラーではなく、個別のページに表示されるエラーに使用するページ・テンプレートを指定します。エラーを表示するように設計されたテンプレートを使用しない場合、この属性は、空白のままにします。この設定は標準ページにのみ適用されます。 |
|
Application Expressエンジンが印刷用モードの場合に使用するテンプレートを指定します。 ページをレンダリングするためにApplication Expressをコールする場合、「はい」または「いいえ」の値で印刷用属性を指定するオプションがあります。「はい」を選択すると、印刷用テンプレートを使用してページが表示されます。Application Expressエンジンは、HTMLフォーム・フィールド内のすべてのテキストをテキストとして表示します。印刷用テンプレートには、 |
|
ブレッドクラムを作成する場合に使用するデフォルトのブレッドクラム・テンプレートを指定します。 |
|
ボタンを作成する場合に使用するデフォルトのボタン・テンプレートを指定します。 |
|
カレンダを作成する場合に使用するデフォルトのカレンダ・テンプレートを指定します。 |
|
新しいラベルを作成する場合に使用するデフォルトのラベル・テンプレートを指定します |
|
新しいラベルを作成する場合に使用するデフォルトのオプションのラベル・テンプレートを指定します。 |
|
テンプレート・オプションによって、カレント・ページ・テンプレートに適用される多くのCSSカスタマイズ設定を選択できます。テンプレート・オプションとそれに対応するCSSクラスは、ページ・テンプレート・レベルで定義されます。ページ・テンプレートには、ページ・ヘッダーまたはボディで定義された置換文字列 |
|
新しいラベルを作成する場合に使用するデフォルトの必須ラベル・テンプレートを指定します。 |
|
リストを作成する場合に使用するデフォルトのリスト・テンプレートを指定します。 |
|
リージョンを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
レポートを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
ヘッダーまたはフッター・ツールバーを含む新しいページを作成する場合に使用する、デフォルトのヘッダー・ツールバー・リージョン・テンプレートを指定します。 |
|
ヘッダーまたはフッター・ツールバーを含む新しいページを作成する場合に使用する、デフォルトのヘッダー・ツールバー・リージョン・テンプレートを指定します。 |
表11-4に、「リージョンのデフォルト値」で使用可能なデフォルトのテンプレートを示します。
表11-4 リージョンのデフォルト値
| 属性 | 説明 |
|---|---|
ブレッドクラムを作成する場合に使用するデフォルトのブレッドクラム・テンプレートを指定します。 |
|
チャートを作成する場合に使用するデフォルトのチャート・テンプレートを指定します。 |
|
フォームを作成する場合に使用するデフォルトのフォーム・テンプレートを指定します。 |
|
リストを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
レポートを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
表形式フォームを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
新しいウィザード・コンポーネントを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します。 |
|
対話モード・レポートを作成する場合に使用するデフォルトのリージョン・テンプレートを指定します |
表11-5に、「ダイアログのデフォルト」で使用可能なデフォルトのテンプレートを示します。
表11-5 ダイアログのデフォルト
| 属性 | 説明 |
|---|---|
ページの作成ウィザードおよびアプリケーションの作成ウィザードを使用してダイアログのコンテンツ・リージョンを作成する場合に使用する、デフォルトのリージョン・テンプレートを指定します。 |
|
ページの作成ウィザードおよびアプリケーションの作成ウィザードを使用してダイアログのボタン・リージョンを作成する場合に使用する、デフォルトのリージョン・テンプレートを指定します。 |
|
モーダルまたは非モーダル・ダイアログ・ページを表示するためのデフォルトのテンプレートを指定します。開発者が明示的にテンプレートを選択しない場合、Application Expressエンジンは、ここで指定されたテンプレートを使用します。このテンプレートは、インライン表示されるエラーではなく、個別のページに表示されるエラーにも使用されます。 |
表11-7に、「アイコン」の属性を示します。
表11-7 アイコン
| 属性 | 説明 |
|---|---|
Oracle Application Expressでページが表示されるときにロードするアイコン・ライブラリを選択します。ライブラリ内のアイコンは、ページ・デザイナ内に実装されるリージョンおよびボタン・アイコンCSSクラスのピッカーにも表示されます。 |
|
すべてのページにロードするカスタム・アイコンのカスケード・スタイルシートのファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列 例を表示するには、フィールドレベル・ヘルプを参照してください。 |
|
ページ・デザイナ内に実装されるリージョンおよびボタン・アイコンCSSクラスのピッカーに表示される、CSSクラス名のカンマ区切りリストを指定します。 |
|
リージョン、ボタンおよびリストに対して定義されたアイコンCSSクラスがアイコン・ライブラリのクラスを使用していない場合に、それらの前に実行時に付けるCSSクラスを指定します。 |
|
タイプ「日付ピッカー」のアイテムが表示される場合に使用されるイメージの名前および場所を入力します。次に例を示します。 #IMAGE_PREFIX#new_cal.bmp |
|
カレンダ・アイコンのイメージ属性を入力します。次に例を示します。 width="16" height="16" alt="Display Calendar" |
現在のテーマで使用できるテーマ・スタイルを表示します。テーマ・スタイルによって、アプリケーションのテーマのCSSが定義され、アプリケーションのユーザー・インタフェースが制御されます。テーマ・スタイルは、ページ・テンプレート内で#THEME_STYLE_CSS#置換文字列を使用して参照されます。現在使用されているテーマ・スタイルには、「カレント」の下にチェック・マークが表示されます。
関連項目:
