SAP UI5-アーキテクチャ

SAP UI5アーキテクチャでは、3つのレイヤーがあります-

最上部はプレゼンテーション層で、UI5コンポーネントはモバイル、タブレット、ラップトップなどのデバイスによって消費されます。
中間層には、テーマと制御のためのSAP UI5ライブラリを含むアプリケーションクライアントがあります。 UI5コントロールライブラリが含まれます
Sap.viz
Sap.ui.commons（テキストフィールドやボタンなどのコントロール）
Sap.ui.table（テーブルの入力コントロール）
Sap.ui.ux3
Sap.m（モバイルデバイスの入力コントロールを含む）
下部にあるのは、オプションサーバーコンポーネントです。これには、ABAP/Java用のSAP NetWeaver Application Server、SAPバックエンド、開発用またはデータベース用のHANA XSエンジンが含まれます。

UI5アーキテクチャ

SAP UI5-主要コンポーネント

SAP UI5には、UI5アプリケーションの独立した再利用可能なオブジェクトである複数のコンポーネントがあります。これらのコンポーネントはさまざまな人が開発でき、さまざまなプロジェクトで使用できます。

アプリケーションはさまざまな場所からコンポーネントを使用できるため、アプリケーションの構造を簡単に取得できます。 SAP UI5開発でさまざまなタイプのコンポーネントを作成できます。

フェースレスコンポーネント

フェースレスコンポーネントは、バックエンドシステムからデータを取得するために使用され、ユーザーインターフェースは含まれていません。

例-クラスsap.ui.core.componentの一部です

UIコンポーネント

UIコンポーネントは、レンダリング機能を追加し、ユーザーインターフェイスの画面領域または要素を表すために使用されます。

例-UIコンポーネントは、いくつかのタスクを実行するための設定を持つボタンにすることができます。クラスの一部です：sap.ui.core.UIComponent

注意-sap.ui.core.componentは、フェースレスおよびUIコンポーネントの基本クラスです。拡張機能を定義するために、コンポーネントは基本クラスまたはUI開発の他のコンポーネントから継承できます。

コンポーネントのモジュール名はパッケージ名と呼ばれ、パッケージ名はコンポーネントコンストラクターに渡されるパラメーターの名前として定義される .component です。

SAP UI5コンポーネントは、システムランドスケープに従って分割することもできます-

クライアント側コンポーネント：これには、
制御ライブラリsap.m、sap.ui.commonなど。
コアJavascript
テストにはHTMLとJavascriptが含まれます
サーバー側コンポーネント
テーマ生成プログラム
Eclipseの制御およびアプリケーション開発ツール
リソースハンドラー

コンポーネントの構造

各コンポーネントはフォルダーの形式で表され、コンポーネントの名前とコンポーネントの管理に必要なリソースが含まれています。

各コンポーネントには、次のファイルが含まれている必要があります-

設計時のメタデータが含まれ、設計時ツールにのみ使用される Component.json ファイル。
Component.js は、ランタイムメタデータを担当するプロパティ、イベント、およびコンポーネントメソッドを定義するために使用されます。

コンポーネントの構造

新しいSAP UI5コンポーネントを作成するには？

新しいコンポーネントを作成するには、新しいフォルダーを作成する必要があります。これを button と名付けましょう。

次に、* component.jsファイルを作成します*

次に、UIコンポーネントの基本クラスsap.ui.core.UIComponent.extendを拡張し、コンポーネントの名前とパッケージパスを入力する必要があります。

後で、新しいコンポーネントを定義するには、次のように require ステートメントで開始する必要があります-

//defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

//new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

次のステップは、次のようにフォルダ内のcomponent.jsonを定義することです-

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

コンポーネントの使用方法

コンポーネントを使用するには、コンポーネントをコンポーネントコンテナにラップする必要があります。 placeAtメソッドを使用して、ページでUIコンポーネントを直接使用することはできません。別の方法は、コンポーネントをcomponentContainerコンストラクターに渡すことです。

placeAtメソッドを使用する

コンポーネントをコンテナに追加し、 placeAt メソッドを使用してコンポーネントをページに配置します。

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

componentContainerコンストラクターの使用

コンポーネントコンテナは特定の設定を保持し、通常のコントロールのライフサイクルメソッドも含みます。次のコードセグメントは、コンポーネントをcomponentContainerコンストラクターに渡す方法を示しています。

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");

SAP UI5-コントロールライブラリ

アプリケーション開発に組み合わせて使用できるさまざまなJavaScriptおよびCSSライブラリがあります。 SAPUI5はこれらのライブラリを組み合わせて使用でき、SAPUI5制御ライブラリと呼ばれます。

共通のSAPUI5制御ライブラリ-

コントロールフィールド、ボタンなどのSap.ui.commons
Sap.mは最も一般的な制御ライブラリであり、モバイルデバイスに使用されます
Sap.ui.tableにはテーブルコントロールが含まれます
Sap.ui.ux3

標準コントロールコントロールライブラリ

注意-SAPUI5制御ライブラリsap.mは最も一般的なライブラリであり、アプリケーション開発に使用されます。これらのライブラリは、他の制御ライブラリと組み合わせることができます。

制御ライブラリの組み合わせ

制御ライブラリsap.mは、他の制御ライブラリ（sap.ui.unified、sap.viz、sap.ui.table、sap.ui.layout、およびsap.suite）と一緒に使用できます。
制御ライブラリ（sap.ui.commons、sap.ui.table、sap.ui.ux3、およびsap.ui.suite）を相互に組み合わせることができます。
制御ライブラリsap.ui.commonsおよびsap.ui.ux3を、sap.ui.core、sap.ui.unified、sap.ui.layout、sap.ui.tableなどの他のライブラリと組み合わせることもできます。
sap.vizを他のすべてのライブラリと組み合わせることができます。

SAP Viz

次の表は、主要なSAPUI5制御ライブラリとその説明を示しています-

sap.m	Library with controls specialized for mobile devices.
sap.makit	SAPUI5 library contains the markit charts.
sap.ui.commons	Common library for standard controls
sap.ui.ux3	SAPUI5 library with controls that implement the SAP User Experience(UX) Guidelines 3.0
sap.viz	SAPUI5 library containing chart controls based on the VIZ charting library.

Sap-ui5-development-kit

SAP UI5-MVCコンセプト

Model-View-Controller（MVC）の概念は、アプリケーションデータをユーザーの操作から分離するためにSAP UI5開発で使用されます。これにより、Webアプリケーションを開発し、アプリケーションに個別に変更を加えることができます。

Model-View-ControllerはUI開発で異なる役割を果たします-

*モデル*は、データベース/バックエンド内のアプリケーションデータを管理します。
View は、ユーザーへのユーザーインターフェイスを定義します。ユーザーがデバイスからリクエストを送信すると、ビューは送信されたリクエストごとにデータビューを担当します。
Controller は、ビューとモデルを更新することにより、ユーザー操作ごとにデータを制御し、イベントを表示するために使用されます。

コントローラー

次の機能を使用して、SAPUI5でModel-View-Controllerの概念を定義できます-

モデル

モデルは、ビューとアプリケーションデータの間のブリッジとして機能します。
モデルは、ビューからリクエストを取得し、ユーザーの入力に従って応答するために使用されます。
モデルはクラスに依存しません。

View

ビューは、ユーザーへの情報表示を管理する責任があります。
ビューはモデルに基づいています。

コントローラ

コントローラーは、デバイスから与えられた入力を取得し、モデル/ビューと通信して正しいアクションをトリガーします。
コントローラはモデルに基づいています。

SAP UI5は、単一ファイルの形式でビューとコントローラーを提供します-

sap.ui.core.mvc.XMLView
sap.ui.core.mvc.JSView
sap.ui.core.mvc.Controller
sap.ui.core.mvc.JSONView

JSONモデル

JSONモデルはクライアント側のモデルであり、小さなデータセットに使用されます。
JSONモデルは双方向バインディングをサポートしています。データバインディングの概念については、このチュートリアルの後半で説明します。
JSONモデルを使用して、コントロールをJavaScriptオブジェクトデータにバインドできます。

XMLモデル

XMLモデルを使用して、コントロールをXMLデータにバインドできます。
XMLはクライアント側モデルでもあるため、小さなデータセットにのみ使用されます。
XMLモデルは、サーバーベースのページングやデルタのロードのメカニズムを提供しません。
XMLモデルは、双方向のデータバインディングもサポートしています。

SAP UI5-ビュー

ビューは、次のようにSAPライブラリを使用して定義されます-

HTML、混合、またはスタンドアロンのXML：Library- sap.ui.core.mvc.XMLView
JavaScript：ライブラリ-sap.ui.core.mvc.JSView
JSON：ライブラリ-sap.ui.core.mvc.JSONView
HTML：ライブラリ-sap.ui.core.mvc.HTMLView

JavaScriptのサンプルを表示

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

HTMLビューのサンプル

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

同様に、sap.ui.core.mvc.JsonViewから派生したJSONビューを作成できます。

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

ビュータイプの比較

次の表に、MVCの概念に関連する主要な機能と、機能と異なるビュータイプの比較を示します。

Feature	JS View	XML View	JSON View	HTML View
Standard and Custom Libraries	Yes	Yes	Yes	Yes
Properties of types string, int Boolean, float	Yes	Yes	Yes	Yes
Aggregation 1:1, 1:n Association 1:1, 1:n	Yes	Yes	Yes	Yes
Simple Data Binding	Yes	Yes	Yes	Yes
Customize Data Binding	Yes	No	No	No
Embedded HTML	No	Yes	No	No
Code Completion	Yes	Yes	No	No
Templating	Yes	No	No	No
Validation	No	Yes	No	No
Single Event Listener	Yes	Yes	Yes	Yes

SAP UI5-Developer Studio

SAPUI5 Developer Studioは、UI5開発プロセスを容易にするツールを提供します。以下は機能です-

コントロール開発用ウィザード
プロジェクト作成のウィザード
ビュー/コントローラー作成のウィザード

リンクhttps://support.sap.com/softwarel Search for UI Add-on 1.0 for NetWeaverを使用して、SAP Marketplaceからダウンロードできます。

SAPダウンロードセンター

ソフトウェアのダウンロードに移動し、IDとパスワードを入力します。次に、サポートパッケージとパッチに移動します。 sapui5ツールideプラグイン1.00を検索します。

ソフトウェアのダウンロード

SAPUI5フレームワークの証跡もSCNで入手できます。このリンクhttp://scn.sap.com/community/developer-center/front-endにアクセスできます

SAP UI5

SAP UI5-UI5プロジェクトの作成

ステップ1 *-UI5 Developer Studioで新しいプロジェクトを作成するには、[ファイル]→[新規]→[プロジェクト]に移動します。

新しいプロジェクトSAP

ステップ2 *-プロジェクトの名前、ターゲットデバイスを入力し、初期ビューを作成します。

プロジェクトの名前

ステップ3 *-次のウィンドウでビュー名とビュータイプを入力し、[次へ]をクリックします。

ビュー名を入力

ステップ4 *-最後のウィンドウに、プロジェクトの概要が表示されます。プロジェクトのプロパティが表示されます。 [完了]ボタンをクリックして、プロジェクトを作成します。

完了

ステップ5 *-Java EEパースペクティブに切り替えるように求められます。 [はい]をクリックすると、初期ビュー-JSViewで新しいUI5プロジェクトウィンドウが開きます。

UI5プロジェクト

ステップ6 *-このビューにシェルを追加するには、ライブラリsap.ui.ux3.Shell（）を使用できます。

ライブラリSAP

ステップ7 *-シェルはsap.ui.commonsの一部ではないため、sap.ui.ux3ライブラリを追加する必要があります。追加のライブラリをdata-sap-ui-libsに追加できます。

Data SAP UI Libs

アプリケーションを実行するには、2つのオプションがあります-

サーバーで実行
webappで実行

サーバーで実行することをお勧めします。ポートが固定されており、1回限りのランダムポートを使用するwebappでの実行とは異なります。

ランダムポート

SAP UI5─構成

次の表に示すように、SAP UI5でさまざまな構成属性を定義できます-

構成

コア機能

SAP UI5のコア機能は次のとおりです-

* Sap.ui.getCore（）*-これは、コアインスタンスを取得するために使用されます。
* Sap.ui.getCore（）。byid（id）*-これは、idで作成されたUI5コントロールのインスタンスを取得するために使用されます。
* Sap.ui.getCore（）。applyChanges（）*-これは、UI5コントロールの変更をすぐに実行およびレンダリングするために使用されます。
* jQuery.sap.domById（id）*-これは、IDを持つHTML要素を取得するために使用されます。 idを持つUI5コントロールがある場合、返される要素はUI5コントロールの最上位のHTML要素です。
* jQuery.sap.byId（id）*-これは、指定されたIDを持つDOM要素のjQueryオブジェクトを返すために使用されます。

SAP UI5-コントロール

UI5アプリケーションの開発中に使用できるUIコントロールにはさまざまな種類があります。これらのコントロールを使用すると、UI5アプリケーションにボタン、テーブル、画像、レイアウト、コンボボックス、およびその他のさまざまなコントロールを追加できます。

一般的なコントロールの種類は次のとおりです-

シンプルなコントロール
複雑なコントロール
UX3コントロール
対話
レイアウト

画像制御

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

コンボボックス

コンボボックスを使用して、事前定義されたエントリを提供できます。

プロパティ-アイテム、selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

シンプルなボタン制御

attachPressを使用して、プッシュアクションのイベントハンドラーを割り当てます。

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

オートコンプリートコントロール

入力した値をオートコンプリートします。

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

テーブルコントロールボックス

sap.ui.tableから派生し、各テーブルには列が含まれています。

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })

SAP UI5-データバインディング

SAP UI5では、*データバインディングコンセプト*を使用して、アプリケーションデータを保持するコントロールにデータをバインドすることにより、データを自動的に更新します。データバインディングを使用すると、テキストフィールド、シンプルなボタンなどのシンプルなコントロールをアプリケーションデータにバインドでき、新しい値があるとデータが自動的に更新されます。

双方向データバインディングを使用すると、バインドされたコントロールの値が変更されると、アプリケーションデータが更新されます。値は、ユーザー入力などのさまざまな方法で変更できます。

データバインディングコンセプト

SAP UI5では、さまざまなデータモデルをデータバインディングに使用できます。これらのデータモデルはさまざまな機能をサポートしています-

JSONモデル

JSONモデルは、JavaScriptオブジェクトをコントロールにバインドするために使用されます。このデータモデルはクライアント側のモデルであり、小さなデータセットに推奨されます。サーバー側のページングや読み込みのメカニズムは提供しません。

主な機能は次のとおりです-

データバインディングのJSONモデルは、JavaScript表記形式のデータをサポートしています。
双方向のデータバインディングをサポートします。

モデルインスタンスの作成-

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

XMLモデル

データバインディングのXMLモデルを使用すると、コントロールをXMLデータにバインドできます。クライアント側のオブジェクトと小さなデータセットに使用されます。サーバー側のページングや読み込みのメカニズムは提供していません。

主な機能は次のとおりです-

データバインディングのXMLモデルは、XMLデータをサポートします。
また、双方向のデータバインディングもサポートしています。

モデルインスタンスの作成-

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

ODataモデル

ODataモデルはサーバー側のモデルであるため、サーバー側でデータ全体を使用できます。クライアント側は行とフィールドのみを表示でき、クライアント側では並べ替えとフィルタリングを使用できません。これらのタスクを完了するには、このリクエストをサーバーに送信する必要があります。

ODataモデルのデータバインディングは1つの方法ですが、実験的な書き込みサポートを使用して双方向バインディングを有効にすることができます。

主な機能は次のとおりです-

データバインディングのODataモデルは、Odata準拠のデータをサポートしています。
このデータモデルを使用すると、OData要求を作成し、応答を処理できます。
実験的な双方向バインディングをサポートしています。

モデルインスタンスの作成-

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

モデルの割り当て

setModelメソッドを使用して、モデルを特定のコントロールまたはコアに割り当てることができます。

Sap.ui.getcore().setModel(oModel);

モデルをビューにバインドするには-

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

モデルをコントロールにバインドするには-

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

コントロールのプロパティをモデルプロパティにバインドできます。あなたはbindpropertyメソッドを使用してコントロールにモデルのプロパティをバインドすることができます-

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

集約バインディング

集計バインディングを使用して、複数の行をテーブルにバインドするなど、値のコレクションをバインドできます。集計を使用するには、テンプレートとして機能するコントロールを使用する必要があります。

bindAgregationメソッドを使用して、集計バインディングを定義できます。

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

SAP UI5-設計パターン

デザインパターン*は、SAP開発またはSAP Fioriシステムについて話すときのSAP UI5開発の新しい用語です。 SAPは、UI5 SDKを使用したSAPシステムの開発をサポートする新しい設計パターンを見つけるために懸命に取り組んでいます。

SAPはさまざまなタイプの設計パターンをリリースしました-

マスターディテール

これはアプリケーションバインディングの最初のステップであり、SAP UI5のSplitAppコントロールによってサポートされています。このデザインパターンは、コンテンツのリストをサポートし、リードの選択と詳細ビューを可能にします。

マスター-マスター詳細

この設計パターンでは、詳細セクションにトランザクションの詳細が表示されます。

例-オンラインで注文しているときに、購入内容を表示する確認ページを表示し、詳細ビューで取引の詳細を表示したい。

全画面表示

この設計パターンは、チャート、画像データ、およびさまざまなタイプのグラフを表示するために最も推奨されます。

マルチフロー

このデザインパターンは、複雑なアプリケーションフローを使用していて、すべてのデザインパターンを使用して動作中のアプリケーションを構築する必要がある場合に推奨されます。

SAP UI5-モジュール化

大規模なJavaScriptアプリケーション向けのSAPUI5開発では、UI5フレームワークはモジュール化の組み込みサポートを提供します。 *モジュール化*コンセプトにより、アプリケーションをより小さな部分に分割し、実行時にそれらを組み合わせることができます。これらの小さなアプリケーションパーツは、モジュール化と呼ばれます。

query jQuery.sap.declare関数を呼び出すことにより、独自のJavaScriptモジュールを宣言できます。これは、モジュール名と既にロードされたモジュールを追跡するために使用されます。

モジュールをロードするには、jQuery.sap.requireを使用する必要があります

例

<script>
   jQuery.sap.require(“sap.ui.commons.MessageBox”);
   ………………………
</script>

モジュールがjQuery.sap.requireを必要とし、そのモジュールがロードされていない場合、自動的にロードされます。これは、declareメソッドを呼び出すため、requireが呼び出されると、モジュールがロードされたことを認識します。

SAP UI5-ローカリゼーション

SAP UI5は、Javaプラットフォームに基づいたローカライズの概念をサポートしています。

言語コードの識別-言語の識別のために、フレームワークは文字列型の言語コードを使用します。

リソースバンドル-リソースバンドルファイルはJavaプロパティファイルであり、値は言語依存テキストであり、キーは言語に依存せず、対応する値を識別してアクセスするためにアプリケーションによって使用されるキー/値ペアを含みます。

リソースバンドルは*。properties *ファイルのコレクションです。すべてのファイルは、同じベース名（リソースバンドルを識別するプレフィックス）、各ファイルに含まれる言語を識別するオプションのサフィックス、および *fixed .properties 拡張子で名前が付けられます。

言語サフィックスは、古いJDKロケール構文に従って形成されます。慣例により、言語接尾辞のないファイルが存在し、開発者の言語の生の未翻訳テキストが含まれている必要があります。このファイルは、適切な言語が見つからない場合に使用されます。

リソースバンドルsap.ui.commons.message_bundleには次のファイルが含まれています-

sap.ui.commons.message_bundle.properties -このファイルには開発者からの生のテキストが含まれており、キーのセットを決定します。
sap.ui.commons.message_bundle_en.properties -このファイルには英語のテキストが含まれています。
sap.ui.commons.message_bundle_en_US.properties -このファイルにはアメリカ英語のテキストが含まれています。
sap.ui.commons.message_bundle_en_UK.properties -このファイルはイギリス英語のテキストを保持しています。

アプリケーションでのローカライズされたテキストの使用

SAPUI5には、アプリケーションでローカライズされたテキストを使用するための2つのオプション、jQuery.sap.resourcesモジュールとデータバインディングが用意されています。

次のコードは、特定の言語のリソースバンドルを取得するために使用されます-

jQuery.sap.require(“jquery.sap.resources”);
var oBundle = jQuery.sap.resources({url ; sUrl, locale:sLocale});

次のコードは、リソースバンドル内のテキストにアクセスするために使用されます-

Var sText = oBundle.getText(sKey);

次のコードは、リソースのURLを取得するために使用されます-

Var sUrl = sap.ui.resource(“sap.ui.table”,”messagebundle.properties”);

SAP UI5-メモ帳コントロール

*Control* は、外観と画面領域を定義するために使用されます。 幅やテキストなどのプロパティが含まれています。 これらのプロパティは、外観を変更したり、コントロールによって表示されるデータを変更したりするために使用されます。 集約コントロールまたは関連するコントロールを作成できます。

コントロールの*関連コントロール*は、子コントロールまたはメインコントロールの一部ではない、大まかに関連するコントロールとして定義されます。コントロールは、明確に定義されたイベントをトリガーするために使用されます。

SAPUI5のコントロールは、ツールまたはJavaScriptファイルを使用して直接作成できます。 extend（）メソッドを使用して作成されたコントロールは、*メモ帳コントロール*とも呼ばれます。

次のコードは、Extendメソッドを使用してコントロールを定義するために使用されます-

Sap.ui.core.control.extend (sname, oDefinition);

このコントロールに渡されるパラメータ-

コントロールの名前
コントロールの定義

コントロールの定義には、コントロールAPI、集約、イベントなどに関する情報が含まれます。および実装方法。

カスタムコントロールを作成することもできます。カスタムコントロールの定義には、パブリックメソッドとプライベートメソッド、メタデータ、レンダリングメソッドなどを含めることができます。

metadata:{
   properties: {},
   events: {},
   aggregations: {}
},

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

新しいコントロールの作成は、ボタンから継承します-

Sap.ui.commons.Button.extend (sname, oDefinition);

コントロール定義の*メタデータ*は、コントロールプロパティ、イベント、および集計のオブジェクトで構成されます。

物件

タイプ：コントロールプロパティのデータタイプ
文字列：文字列プロパティの文字列
数値プロパティのIntまたはfloat
整数配列のInt []
文字列配列の場合はString []

イベント

イベントは、イベントという名前でのみ定義されます。通常、空のオブジェクトをイベントに渡します。アプリケーションは、enablePreventDefaultフラグを使用してイベントを中断します。

Events: {
   Logout:{},
   Close: {
      enablePreventDefault : true
   }
}

SAP UI5-アプリケーションの拡張

リモートまたはWeb IDEにあるUI5アプリケーションを拡張できます。新しいExtensionプロジェクトを作成するには、リモートまたはIDE上にアプリケーションが必要です。

ステップ1 *-新しいプロジェクトを作成するには、[ファイル]→[拡張プロジェクト]に移動します。

拡張プロジェクト

ステップ2 *-ワークスペースを選択して、元のアプリケーションとして使用する目的のSAP Fioriアプリケーションを選択します。

ステップ3 *-アプリケーションを選択すると、Extension Project Nameフィールドに、拡張子がサフィックスの元のアプリケーションの名前が入力されます。この名前を変更できます→次へ

ステップ4 *-必要に応じて、[拡張機能ペインで拡張プロジェクトを開く]チェックボックスをオンにして、プロジェクトの生成後に拡張機能ペインを自動的に開きます。

ステップ5 *-[完了]をクリックします。

同様に、SAP HANA Cloudプラットフォームにあるアプリケーションを拡張することもできます。以下の手順に従ってください。

ステップ1 *-新しいプロジェクトを作成するには、[ファイル]→[拡張プロジェクト]に移動します。

SAP HANA Cloud

ステップ2 *-スタート→リモート→SAP HANAクラウドプラットフォーム→SAP HANAクラウドプラットフォームからアプリケーションを選択ダイアログボックスを選択します。

ステップ3 *-次のウィンドウで、SAP HANA Cloud Platformアカウント、ユーザー名、およびパスワードを入力する必要があります。

ステップ4 *-[アプリケーションの取得]を選択し、拡張するアプリケーションを検索します。

ステップ5 *-目的のアプリケーションを選択→[OK]。拡張プロジェクト名フィールドは、ウィザードで自動的に入力されます。必要に応じて、この名前を編集できます。

ステップ6 *-[次へ]をクリックします。 [完了]を選択して、拡張プロジェクトを確認および作成します。

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グラフ]

SAP UI5-モバイル

SAP UI5アプリケーションは、iPadやスマートフォンなどのさまざまなモバイルデバイスで実行されます。ただし、ユーザーエクスペリエンスを向上させるには、外観、タッチ操作、およびその他のさまざまなUIパラメーターを制御する必要があります。

UI5には、モバイルデバイスのアプリケーション開発をサポートし、データバインディング、MVCなどのすべての主要な概念をサポートするコントロールライブラリ sap.m が含まれています。

主な機能

Android、iOS、BlackBerryのプラットフォームサポート
40個のコントロールが含まれています
Webkitブラウザー-Google Chrome
UI5の概念-MVC、ローカリゼーション、モジュール化など

主な機能

SAP UI5-Web IDEでのプロジェクトの作成

この章では、Web IDEでプロジェクトを作成する方法を学びます。ステップバイステップで行きましょう。

ステップ1 *-新しいプロジェクトを開始するには、[ファイル]→[新規]→[プロジェクト]に移動します

Web IDE

ステップ2 *-プロジェクトの名前を入力します。次のウィンドウで、テンプレートを選択します。

基本的なSAP UI5プロジェクト

ステップ3 *-テンプレートSAPUI5モバイルアプリケーションを選択→次へ

テンプレートを選択

ステップ4 *-次のステップは、データ接続を選択することです。サービスURLを選択→選択

データ接続

ステップ5 *-次のステップでは、テンプレートのカスタマイズを実行する必要があります。

テンプレートのカスタマイズ

ステップ6 *-[次へ]をクリックすると、[完了]ボタンが表示されます。

新しいプロジェクトの確認

[完了]をクリックすると、UIアプリケーションのデフォルト構造を持つ新しいプロジェクトが作成されたことを確認できます。プロジェクトのビュー、モデル、および名前が含まれています。

UIアプリケーション

Sap-ui5-quick-guide

SAP UI5-アーキテクチャ

SAP UI5-主要コンポーネント

フェースレスコンポーネント

UIコンポーネント

コンポーネントの構造

新しいSAP UI5コンポーネントを作成するには？

コンポーネントの使用方法

placeAtメソッドを使用する

componentContainerコンストラクターの使用

SAP UI5-コントロールライブラリ

制御ライブラリの組み合わせ

SAP UI5-MVCコンセプト

モデル

View

コントローラ

JSONモデル

XMLモデル

SAP UI5-ビュー

JavaScriptのサンプルを表示

HTMLビューのサンプル

ビュータイプの比較

SAP UI5-Developer Studio

SAP UI5-UI5プロジェクトの作成

SAP UI5─構成

コア機能

SAP UI5-コントロール

画像制御

コンボボックス

シンプルなボタン制御

オートコンプリートコントロール

テーブルコントロールボックス

SAP UI5-データバインディング

JSONモデル

XMLモデル

ODataモデル

モデルの割り当て

集約バインディング

SAP UI5-設計パターン

マスターディテール

マスター-マスター詳細

全画面表示

マルチフロー

SAP UI5-モジュール化

例

SAP UI5-ローカリゼーション

アプリケーションでのローカライズされたテキストの使用

SAP UI5-メモ帳コントロール

物件

イベント

SAP UI5-アプリケーションの拡張

SAP UI5-テーマ

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

主な機能と利点

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

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

チャートタイプ

SAP UI5-モバイル

主な機能

SAP UI5-Web IDEでのプロジェクトの作成

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