UI5 Walkthrough #7

9551 ワード
ui5 fiori Walkthrough テキストリンク

Walkthrough #7


手順7：JSONモデル


ビューとコントローラが設定されました.
アプリケーションに入力フィールドを追加し、モデルにバインドし、入力フィールドの説明に同じ値をバインドします.
入力フィールドと入力フィールドの値を表示

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});
コントローラにonInit機能を追加します.コントロール作成時にフレームが呼び出されるSAPUI 5メソッドの1つです.
関数の内部インスタンス化JSONモデル.モデル内のデータには、「受信者」の1つの属性のみが含まれ、名前の追加属性も含まれます.
ビュー内の関数を呼び出して、XMLビューでこのモデルを使用し、新しく作成したモデルを渡します.モデルがビューに設定されます.
メッセージトーストには静的「Hello World」メッセージが表示されます.次の手順では、翻訳されたテキストをロードする方法を示します.

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>
コントロールをビューに追加します.これにより、ユーザーは受信者を入力して挨拶を行うことができます.XMLビューの宣言バインディング構文を使用して、SAPUI 5モデルに値をバインディングします.

  • カッコは、受信者属性値からのデータを表します.これを「データバインド」と呼びます.

  • /recipient/name declares the path in the model.

    • webapp/index.html

    <html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
    値属性バインドは、バインドモードのみを含む単純なバインドの例です.「説明」プロパティに示すように、テキストとバインドモードをより複雑なバインド結果に結合することもできます.これらの複雑なバインド構文を使用可能にするには、ブートストラップパラメータを設定し、グローバルに有効にする必要があります.この設定を省略すると、標準バインド構文のみが許可されるため、「Hello」は機能しません.
    コメント
    スクリプトで使用または使用できます.「edge」互換性モードを設定すると、複雑なバインド構文が自動的に有効になります.このモードでは、手動でアクティブ化する必要がある互換性機能を自動的に有効にできます.詳細については、互換性バージョンについてを参照してください.

    ルール＃ルール＃

  • 変数名の場合は、ハンガリー語表記を使用します.
    シンボルソース:https://myeonguni.tistory.com/1595
    • React Componentとprops
    非特定領域を特定するクリック(イベント)