初心者向け SAPUI5 チュートリアル: Fiori とは何か (例付き)

SAPUI5とは?

SAPUI5 は、デスクトップ、モバイル、タブレットなどの複数のデバイスで実行される応答性の高い Web アプリケーションを構築するためのライブラリのセットです。 SAPUI5 が動作する MVCの概念 データ、ビジネス ロジック、およびデータの表現をビュー上で個別に作成することで、開発サイクルを加速します。 そのため、ビューとコントローラーの開発を独立して実行してモデル (データ コンテナー) を作成できます。

SAPUI5 は、SAP UI 開発テクノロジー シリーズの最新版です。 基盤となる SAP ERP システムに Web 統合を提供するために、SAP は BSP (ビジネス サーバー ページ)、PDK (ポータル開発キット)、Web Dynpro Java、Web Dynpro ABAP などの複数の UI 開発テクノロジを考案しました。 そして、Web Dynpro ABAP の後継は SAPUI5 です。

SAPUI5 アーキテクチャ

SAPUI5 アーキテクチャ
SAPUI5 アーキテクチャ

SAPUI アーキテクチャ図

上記のアーキテクチャでは、まず、 box、つまり「デバイス」は、UI5 アプリケーションが実行されるデバイスを示します。 UI5 アプリケーションには、モバイル アプリまたはこれらのデバイス上の任意のブラウザーを介してアクセスできます。 アーキテクチャのこの層は「プレゼンテーション層」と呼ばれます。

SAPUI5 アプリケーションと oData サービスは、SAP NetWeaver Gateway Server 上に存在します。 アーキテクチャのこの層は「アプリケーション層」と呼ばれます。

実際のビジネス ロジックは、ECC、CRM、BW などの SAP 基幹システムに実装されます。ビジネス ロジックは、SAP プログラムと機能モジュールを使用して実装できます。 SAP トランザクション データとマスター データは SAP システム上に存在します。 アーキテクチャのこの層は、「データベース層」または「永続層」と呼ばれます。

SAPUI5 コンポーネント

コンポーネントは、必要に応じて再利用される作業コードの一部です。 SAPUI2が提供するコンポーネントは5種類あります

  1. UI コンポーネント – これらは、UI 要素を含むユーザー インターフェイスを表します。 これらは、sap.ui.core.UIComponent と呼ばれる SPAUI5 クラスに基づいています。
  2. 顔のないコンポーネント – これらにはユーザー インターフェイスがありません。 これらは、sap.ui.core.Component と呼ばれる SAPUI5 クラスに基づいています。

基本的に、コンポーネントはフォルダーです。 新しい SAPUI5 アプリケーションを作成すると、プロジェクト エクスプローラーに次のように作成されたフォルダー構造が表示されます。

SAPUI5 コンポーネント

この UI5 アプリケーションでは、PassNum がコンポーネントです。 Component.js ファイルは、UI5 アプリケーションがコンポーネントのように動作するために必須です。 Component.js ファイルはコンポーネント コントローラーです。

このSAPUI5の次は Eclipse チュートリアルでは、SAPUI5 のセットアップ方法を学びます。

SAPUI5のセットアップ

始める前に、次のことを確認する必要があります。

  1. Eclipse (Luna バージョン) がラップトップにインストールされている
  2. SAP 開発ツール Eclipse Luna にインストールされている eclipse (SAP 開発ツール Eclipse ルナ– https://tools.hana.ondemand.com/luna/)
  3. SAP ログオン パッドがインストールされており、このブログで構築するこのアプリケーションの展開とテストのために SAP NetWeaver Gateway システムにアクセスできるようになります。

アプリケーションが完全に構築されると、次のようになります。

SAPUI5のセットアップ

この SAPUI5 チュートリアル ガイドでは、親コンポーネントと子コンポーネントという 2 つのコンポーネントを作成します。 まず、子コンポーネントを作成し、それを親コンポーネントで使用します。

手を汚してみましょう。

パート 1) 子アプリケーションの作成

私たちの目標は、1 から 12 までの数値を受け入れ、月の名前を表示する子コンポーネントを作成することです。 たとえば、3 を受け取ります。 「XNUMX月」と表示されるはずです。

ステップ 1) UI プロジェクトを作成する

[ファイル] -> [新規] -> [その他] -> [SAPUI5 アプリケーション開発] -> [アプリケーション プロジェクト] に移動します。

UIプロジェクトを作成する

以下のようにして、SAPUI5 用のアプリケーション プロジェクトを作成します。wing 開くウィザード。 以下のスクリーンショットを参照してください。

UIプロジェクトを作成する

プロジェクトの名前を入力し、他の選択はウィザードの提案どおりにしておきます。

UIプロジェクトを作成する

上のスクリーンショットでは、ラジオ ボタンとして 2 種類のライブラリが表示されています。

  1. 樹液分
  2. sap.ui.commons

sap.m を選択すると、UI5 アプリケーション プロジェクトを作成するようにウィザードに指示することになります。このプロジェクトのブートストラップ セクションには、応答性の高い Web アプリケーションを作成するための sap.m ライブラリが自動的に組み込まれます。

次に、この SAP FIORI チュートリアルでは、初期ビューを作成する必要があるウィザードの下のセクションが表示されます。 初期ビューは、アプリケーションがアクセスされたときに最初にレンダリングされるビューです。

UIプロジェクトを作成する

ここで、ビューの名前を指定し、ビューのタイプを選択する必要があります。 上記の画面で明らかなように、SAPUI5 は 4 種類のビューをサポートしています。 したがって、SAPUI5 アプリケーションの UI は、JavaScript または XML を使用して構築できます。 JSONの または HTML など、使い慣れた言語を選択してください。

ウィザードの最後に、新しいプロジェクトが作成され、プロジェクト エクスプローラー ウィンドウに表示されます。 Eclipse 以下のように。

UIプロジェクトを作成する

ステップ 2) Component.js コード

次に、Component.js ファイルを作成し、以下のコードを記述します。

sap.ui.core.UIComponent.extend("DisplayMonth.Component", {  
	
	metadata: {
	    "name": "DisplayMonth",	    
	    "dependencies": {	      
	      "components": []}
	    },
	    
createContent: function() {
    var oViewData = {
      component: this
    };
    var oView = sap.ui.view({
      viewName: "DisplayMonth.displaymonth.DisplayMonthView",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });
     
     return(oView);
  },

  init: function() {
    // call super init (will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

    // always use absolute paths relative to our own component
    // (relative paths will fail if running in the Fiori Launchpad)
    var sRootPath = jQuery.sap.getModulePath("DisplayMonth");

  
  },
});

ステップ 3) Index.html コード

次に、ブラウザからアプリケーションにアクセスしたときに SAPUI5 に Component.js を読み込むように、index.html ファイルを指定します。 したがって、index.html ファイルに以下のコードを記述します。

<!DOCTYPE HTML>
<html>
	<head>
	// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-resourceroots='{"DisplayMonth": "./"}'>
		</script>

		<script>
							
				sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "DisplayMonth"
				      })
				    }).placeAt("content");
				  });
		</script>

	</head>
// start of body of SAPUI5 application. It contains a div element.
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

ステップ 4) DisplayMonthView.view.xml コード

次に、親コンポーネントから受け取った月番号の月を表示するコードを、displaymonth ビューに記述しましょう。

<html:style>
	#__xmlview1--id{
	margin-left: 30rem;
    margin-top: 9rem;
    font-size: 6rem;
    font-style: italic;
    background-color: burlywood;
	}
</html:style>
	<App id="fioricontent">
		<Page title="Child Component">
			<content>
				<Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text>
			</content>
		</Page>
	</App>

上記のコードを貼り付けると、ビューは次のようになります。

DisplayMonthView.view.xml コード

ステップ 5) DisplayMonthView.controller.js コード

最後に、DisplayMonthView のコントローラー ファイルのコードを記述します。

コードはこのコントローラーの onInit() フック メソッドにのみ記述されているため、ここには onInit() コードのみを貼り付けます。 ファイルの残りの部分はフレームワークによって生成されたものです。

onInit : function() {
		sap.ui.getCore().getEventBus().subscribe("exchange", "data",
				function(channel, event, oEventData) {
					jsonModel = new sap.ui.model.json.JSONModel({
						monthumber : oEventData,
						monthname : ''

					});

					// derive month name from month number
					switch (jsonModel.oData.monthumber) {
					case "1":
						jsonModel.oData.monthname = 'January';
						break;
					case "2":
						jsonModel.oData.monthname = 'February';
						break;
					case "3":
						jsonModel.oData.monthname = 'March';
						break;
					case "4":
						jsonModel.oData.monthname = 'April';
						break;
					case "5":
						jsonModel.oData.monthname = 'May';
						break;
					case "6":
						jsonModel.oData.monthname = 'June';
						break;
					case "7":
						jsonModel.oData.monthname = 'July';
						break;
					case "8":
						jsonModel.oData.monthname = 'August';
						break;
					case "9":
						jsonModel.oData.monthname = 'September';
						break;
					case "10":
						jsonModel.oData.monthname = 'October';
						break;
					case "11":
						jsonModel.oData.monthname = 'November';
						break;
					case "12":
						jsonModel.oData.monthname = 'December';
						break;

					}
					this.getView().setModel(jsonModel, "myModel");

				}, this);
	},

ステップ 6) SAP Netweaver Gateway Server へのアプリケーションのデプロイメント

プロジェクトをデプロイし、ABAP フロントエンド サーバー上で生成される BSP アプリケーションの技術名を指定します。 名前はこうしましょう zdisplaymonth。 この時点で、アプリケーション プロジェクトは次のようになります。

SAP Netweaver ゲートウェイ サーバー

パート 2) 親コンポーネントの作成

次に、このチュートリアルでこれまでに作成したコンポーネントを使用する新しいコンポーネント (親コンポーネント) を作成します。

ステップ 1) 新しい SAPUI5 アプリケーションを作成する

[ファイル] -> [新規] -> [その他] -> [SAPUI5 アプリケーション開発] -> [アプリケーション プロジェクト] に移動します。 次に、ウィザードの指示に従って、新しい SAPUI5 アプリケーション プロジェクトを作成します。 これについては、上記のこのチュートリアルのパート 1 のステップ 1 で詳しく説明されています。

親コンポーネントプロジェクトの名前は次のとおりです。 パス番号。 SAPUI5 コンポーネントを ABAP フロントエンド サーバーにデプロイした後に生成される BSP アプリケーションの技術名は、 zパスナム。 プロジェクト構造は以下のようになります

新しい SAPUI5 アプリケーションを作成する

次に、index.html、Component.js、PassNum.view.xml、PassNum.controller.js ファイルにコードを記述してみましょう。

ステップ2) 親コンポーネントのIndex.htmlのソースコード

<!DOCTYPE HTML>
<html>
	<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{"PassNum": "./"}'>
		</script>
		<script>
				  sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "PassNum"
				      })
				    }).placeAt("content");
				  });
				
		</script>

	</head>
// start of Body of SAPUI5 application, Contains a div tag,
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

ステップ3) 親コンポーネントのComponent.jsファイルのソースコード

sap.ui.core.UIComponent.extend("PassNum.Component", {  
	
	metadata: {
	    "name": "PassNum",	    
	    "dependencies": {	      
	      "components": []}
	    },
	    
createContent: function() {
    var oViewData = {
      component: this
    };
    
// Creating Reference of a PassNum XML view
    var  myView = sap.ui.view({
      viewName: "PassNum.passnum.PassNum",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });
     
     return(myView);
  },

  init: function() {
    // call super init (this will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    // ensure to use absolute paths relative to own component
    // (running in the Fiori Launchpad, relative paths will fail)
    var sRootPath = jQuery.sap.getModulePath("PassNum");
 
  },
});

ステップ4) PassNum.view.xmlファイルのソースコード

<Page title="Parent Component">
		<content>

			<VBox xmlns="sap.m" id="vboxid">

			<items>
				<Button xmlns="sap.m" id="1" text="First" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="2" text="Second" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="3" text="Third" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>

				<core:ComponentContainer id="conpcontid"
					name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer>

				</items>
			</VBox>

		</content>
	</Page>

ビューで上記のコードを使用すると、ビューは以下のようになります。

PassNum.view.xml ファイルのソースコード

ステップ5) PassNum.controller.jsのソースコード

onInit() メソッドのみが変更されました。 このファイル内の他の内容はすべて同じままです

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{			
		sap.ui.getCore().getEventBus().publish("exchange", 
				"data", oEvent.oSource.sId.split("--")[1]);
		
		
	}

ステップ 6) SAP Netweaver Gateway Server への親コンポーネントのデプロイメント

アプリケーションをABAPフロントエンドサーバーにデプロイして実行します。 プロジェクトを右クリックし、「ABAP サーバーで実行」オプションをクリックすると、プロジェクトを実行できるはずです。

SAP Netweaver Gateway Server への親コンポーネントのデプロイメント

以下のURLが開きます eclipse ブラウザ。
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

URLをコピーして実際のブラウザで実行します。 上記のホスト名で黄色でマークされているのは、ABAP フロントエンド サーバーのホスト名です。

出力

SAP Netweaver ゲートウェイ サーバーの出力

「最初」ボタンをクリックすると、子コンポーネントに XNUMX 月が表示されます。

SAP Netweaver ゲートウェイ サーバーの出力

SAPUI5 を使用して、美しく応答性の高い Web アプリケーションの作成をお楽しみください。

まとめ

この SAPUI5 チュートリアルでは、次のことを学びました。

  • SAPUI5 の調査: SAPUI5 は、一連の SAP UI 開発テクノロジの最新のものです。
  • SAP UI5 とは: SAPUI5 は、レスポンシブ Web アプリケーションを構築するために使用されるライブラリのセットです。
  • SAPUI5 アーキテクチャのコンポーネントは、デバイス、クライアント、NetWeaver ゲートウェイ、永続層です。
  • SAPUI5 コンポーネントは、必要に応じて再利用される作業コードの一部です。
  • SAPUI5 コンポーネントの種類は、1) UI コンポーネント、2) Faceless コンポーネントです。
  • 5 つの sapui5 コンポーネントを別の sapuiXNUMX コンポーネントに取り込み、XNUMX つのコンポーネント間でデータを渡すことについて学びました。