SAP初心者向けUI5チュートリアル
ジェシカ・ブレイク
⚡ スマートサマリー
SAPUI5は SAPのレスポンシブな HTML5 フレームワークは、デスクトップ、モバイル、タブレット デバイス全体でエンタープライズ Web アプリケーションを支えています。このチュートリアルでは、MVC アーキテクチャ、コンポーネント モデル、ライブラリ、および親コンポーネントと子コンポーネントの構築方法について説明します。 Eclipse.
何ですか SAPUI5ですか？
SAPUI5 デスクトップ、モバイル、タブレットなどの複数のデバイスで実行されるレスポンシブ Web アプリケーションを構築するためのライブラリ セットです。 SAPUI5は MVCの概念 データ、ビジネス ロジック、およびデータの表現をビュー上で個別に作成することで、開発サイクルを加速します。 そのため、ビューとコントローラーの開発を独立して実行してモデル (データ コンテナー) を作成できます。
SAPUI5はシリーズの最新版です SAP UI開発技術。基盤となるWeb統合を提供するために SAP ERPシステム、 SAP BSP（ビジネスサーバーページ）、PDK（ポータル開発キット）、Web Dynproなどの複数のUI開発技術を考案しました。 Java、Web Dynpro ABAP。そしてWeb Dynpro ABAPの後継は SAPUI5。
SAPUI5 Archi構造
SAPUI Archi構造図
上記で Archi構造において、最初のボックス「デバイス」は、UI5 アプリケーションが実行されるデバイスを示します。UI5 アプリケーションは、モバイル アプリまたは任意のブラウザからアクセスできます。このレイヤーは「プレゼンテーション レイヤー」と呼ばれます。
SAPUI5アプリケーションとoDataサービスは、 SAP NetWeaver Gateway Server。このアーキテクチャの層は「アプリケーション層」と呼ばれます。
実際のビジネスロジックは、 SAP ECC、CRM、BWなどのコアシステム。ビジネスロジックは、 SAP プログラムと機能モジュール。 SAP トランザクションデータとマスターデータは SAP システムにおいて、この層は「データベース層」または「永続化層」と呼ばれます。
SAPUI5 コンポーネント
コンポーネントとは、再利用可能なコードのことです。コンポーネントには 2 種類あります。 SAPUI5：
- UI コンポーネント – これらは UI 要素を含むユーザー インターフェイスを表します。これらは、 SAPsap.ui.core.UIComponent という UI5 クラス
- フェイスレスコンポーネント – これらにはユーザーインターフェイスがありません。これらは、 SAPsap.ui.core.Component と呼ばれる UI5 クラス
基本的に、コンポーネントはフォルダです。新しいコンポーネントを作成すると、 SAPUI5 アプリケーションでは、以下のようにプロジェクト エクスプローラーに作成されたフォルダー構造を確認できます。
このUI5アプリケーションでは、PassNumはコンポーネントです。UI5アプリケーションがコンポーネントのように動作するためには、Component.jsファイルが必須です。
次はこれで SAPUI5 Eclipse チュートリアルでは、セットアップ方法を学びます SAPUI5。
SAPUI5 セットアップ
始める前に、以下の点を確認してください。
- Eclipse (Luna バージョン) がラップトップにインストールされている
- SAP 開発ツール Eclipse Lunaはあなたの Eclipse (SAP 開発ツール Eclipse ルナ– https://tools.hana.ondemand.com/luna/)
- SAP Logon Pad がインストールされ、 SAP このブログで構築するアプリケーションのデプロイとテストには、NetWeaver Gatewayシステムを使用します。
アプリケーションが完全に構築されると、次のようになります。
この中の SAPUI5チュートリアルガイドでは、親コンポーネントと子コンポーネントという2つのコンポーネントを作成します。まず子コンポーネントを作成し、次にそれを親コンポーネントで使用します。
手を汚してみましょう。
パート 1) 子アプリケーションの作成
私たちの目標は、1から12までの数値を受け取り、その数値に対応する月の名前を表示する子コンポーネントを作成することです。例えば、3を受け取った場合は「3月」と表示されるようにする必要があります。
ステップ 1) UI プロジェクトを作成する
ファイル->新規->その他->SAPUI5アプリケーション開発→アプリケーションプロジェクト。
アプリケーションプロジェクトを作成する SAPウィザードに従ってUI5をインストールしてください。下のスクリーンショットをご覧ください。
プロジェクト名を入力し、その他の選択項目はウィザードの提案どおりにしてください。
上記のスクリーンショットでは、2種類のライブラリがラジオボタンとして表示されています。
- 樹液分
- sap.ui.commons
sap.mを選択すると、ウィザードに対して、レスポンシブなWebアプリケーションを作成するためのライブラリであるsap.mライブラリがブートストラップセクションに自動的に含まれるUI5アプリケーションプロジェクトを作成するように指示することになります。
次はこれで SAP FIORIチュートリアルでは、ウィザードの以下のセクションが表示され、そこで初期ビューを作成する必要があります。初期ビューとは、アプリケーションにアクセスしたときに最初にレンダリングされるビューのことです。
ここでは、ビューの名前を指定し、ビューの種類を選択する必要があります。 SAPUI5は、上の画面からわかるように4種類のビューをサポートしています。 SAPUI5アプリケーションは以下を使用して構築できます。 JavaスクリプトまたはXMLまたは JSONの またはHTML。どちらの言語でも、あなたが使い慣れている方で構いません。
ウィザードの最後に、新しいプロジェクトが作成され、プロジェクトエクスプローラーウィンドウに表示されます。 Eclipse 以下のように。
ステップ 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 コード
次に、アプリケーションにアクセスした際に、index.html ファイルが Component.js を読み込むように設定しましょう。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>
上記のコードを貼り付けると、画面は以下のようになります。
ステップ 5) DisplayMonthView.controller.js コード
最後に、DisplayMonthViewのコントローラーファイルのコードを記述しましょう。
コードは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プロジェクトは以下のようになるはずです。
パート 2) 親コンポーネントの作成
それでは、このチュートリアルでこれまで作成したコンポーネントを利用する新しいコンポーネント（親コンポーネント）を作成しましょう。
ステップ 1) 新規作成 SAPUI5アプリケーション
ファイル->新規->その他->SAPUI5アプリケーション開発→アプリケーションプロジェクト。次に、ウィザードの指示に従って新しいプロジェクトを作成します。 SAPUI5 アプリケーション プロジェクト。これについては、このチュートリアルのパート 1 のステップ 1 で詳しく説明しました。
親コンポーネントプロジェクトの名前は パス番号デプロイ後に生成される BSP アプリケーションの技術名は zpassnumプロジェクトの構造は以下のようになります。
それでは、index.html、Component.js、PassNum.view.xml、およびPassNum.controller.jsファイルにコードを記述しましょう。
ステップ2）ソース Code 親コンポーネントの 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>
上記のコードをビューで使用すると、ビューは以下のようになります。
ステップ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サーバーで実行」オプションをクリックすることで実行できるはずです。
以下 URL オープンします Eclipse ブラウザ。
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
コピー URL そして、それを実際のブラウザで実行してください。上記のホスト名（黄色でマークされている部分）は、ABAPフロントエンドサーバーのホスト名です。
出力
「最初」ボタンをクリックすると、子コンポーネントに1月が表示されます。
美しくレスポンシブなウェブアプリケーションの作成をお楽しみください SAPUI5。
