Sap-ui5-theming

提供:Dev Guides
移動先:案内検索

SAP UI5-テーマ

UIテーマデザイナは、SAPが提供するテーマテンプレートの1つを変更することでテーマを開発できるブラウザベースのツールです。

-カラースキームを変更したり、会社のロゴを追加したりできます。 このツールは、設計中にテーマのライブプレビューを提供します。

企業のブランディングを適用し、SAP UIテクノロジーで構築されたアプリケーションに注目してください。 UIテーマデザイナーは、クロステーマシナリオ用のブラウザーベースのツールです。 SAPが提供するテーマテンプレートの1つを変更することにより、コーポレートアイデンティティテーマを簡単に構築できます。 たとえば、配色を変更したり、会社のロゴを追加したりできます。 このツールは、開発者、ビジュアルデザイナー、管理者など、さまざまなユーザーグループを対象としています。

サポートされているプラ​​ットフォーム

  • ABAPとしてのSAP NetWeaver(UIアドオン1.0 SP4経由)
  • SAP NetWeaver Portal(7.30 SP10以降のバージョン)
  • SAP HANAクラウド(計画中)
  • SAP NetWeaver Portal(7.02予定)

主な機能と利点

  • ブラウザベースのグラフィカルWYSIWYGエディタ-テーマパラメータの値を変更し、選択したプレビューページの視覚化にどのように影響するかをすぐに確認します。
  • 組み込みのプレビューページ-組み込みのプレビューページを選択して、カスタムテーマがアプリケーションに適用されたときの外観を確認します-
  • アプリケーションのプレビュー(例:注文承認、SAP Fioriラウンチパッド)
  • プレビューの制御
  • テーマの異なるレベル-
  • クイックテーマ(基本的なクロステクノロジーのテーマ設定)
  • エキスパートテーマ(テクノロジー固有のテーマ設定)
  • 手動のLESSまたはCSS編集
  • 再利用のためのカラーパレット-企業のブランディングを定義する主要な色の値を持つパラメータのセットを指定します。
  • クロステクノロジーテーマ-さまざまなSAP UIクライアントおよびテクノロジーに適用される一貫したテーマを作成します-
  • SAPUI5標準ライブラリ(SAP FioriアプリケーションおよびSAP Fiori Launchpadを含む)
  • 統合レンダリングテクノロジー(Web Dynpro ABAPやFloorplan Managerなど)
  • SAP NetWeaver Business Client
SAP UI Client UI parts can be themed
Web Dynpro ABAP

You can theme applications that do not use the following UI elements:

  • HTMLIsland
  • HTMLContainer
  • チャート
  • フラッシュアイランド
  • SilverlightIsland
  • BusinessGraphics

SAP NetWeaver 7.0 EHP2以降のWeb Dynpro ABAPアプリケーションのUIテーマデザイナで作成されたテーマのみを使用できます。

Floorplan Manager for Web Dynpro ABAP (FPM) You can theme applications that do not use HTMLIslands or Chart UIBBs
SAPUI5 You can theme SAP Standard libraries. Custom SAPUI5 libraries cannot be themed
SAP NetWeaver Business Client (NWBC)

NWBC for Desktop (4.0 or higher): You can theme NWBC shell and overview pages (index page, new tab page, service map).

NWBC for HTML(3.6):サービスマップのテーマを設定できます。 シェルをテーマにすることはできません。

SAP Fioriでテーマデザイナーを呼び出す方法

ステップ1 *-SAP Fioriフロントエンドサーバーにログインします。 *T-Code:Theme Designer を使用するか、次のスクリーンショットに示すようにショートカットを使用してログインできます。

SAP Easy Access

  • ステップ2 *-ログインすると、テーマデザイナ用にSAPが提供するすべてのデフォルトテンプレートが用意されます。 デフォルトのテーマを選択して、「開く」をクリックします。

SAP ALL

  • ステップ3 *-Fioriラウンチパッドリンクとアプリケーションの名前を入力し、[追加]をクリックします。

ターゲットコンテンツの追加 SAP UI5ターゲット

  • ステップ4 *-画面パネルの右側から、色、フォント、画像、その他のプロパティを選択できます。 次のスクリーンショットに示すように、色を編集できます。

画像:/sap_ui5/images/custom_blue_crystal.jpg [カスタムブルークリスタル]画像:/sap_ui5/images/preview.jpg [プレビュー]

  • ステップ5 *-テーマを保存するには、次のスクリーンショットに示すように、保存アイコンをクリックします。 保存オプションとビルドオプションもあります。

テーマの保存

[保存してビルド]をクリックすると、保存が開始され、完了すると、確認メッセージ[保存してビルドが完了しました]が表示されます。

保存してビルド

  • ステップ6 *-このカスタムテーマのリンクを取得するには、次のスクリーンショットに示すようにTコードを使用します-

Fiori Server

  • ステップ7 *-作成したテーマを選択し、[情報]タブをクリックします。

情報タブ

  • ステップ8 *-Ctrl + Yを使用して画面からURLをコピーし、これを書き留めます。

スクリーン

サポートされているテーマ

これらはUI5に同梱されているデフォルトのテーマです-

  • ブルークリスタル
  • ゴールドリフレクション
  • モバイルビジュアル識別
  • ハイコントラストブラック

サポートされているテーマ

チャートタイプ

sap.viz.ui5チャートライブラリには、ビジネスデータを表すために使用できるさまざまなチャートタイプがあります。 以下は、列、バブル、ライン、パイなどのいくつかのCVOMチャートタイプです。

画像:/sap_ui5/images/chart_types.jpg [グラフの種類]画像:/sap_ui5/images/cvom_charts.jpg [CVOMグラフ]