HTML 5モバイルWebアプリケーション開発——SAP UI 5編(4)

プロジェクトにコントローラを追加し、コントローラを設定します.私たちはボタンを作って、このボタンをクリックした後、自動的にhellow、worldのダイアログボックスをポップアップします.
Appを変更します.view.xmlのコードは次の形式です.

<mvc:View
   controllerName="sap.ui.demo.wt.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press="onShowHello"/>
</mvc:View>

頭部にコントロール名空間をコントロール名空間で定義します.Buttonラベルを追加し、ボタンを定義し、textプロパティとpressプロパティを設定します.pressはクリックして実行する関数をonShowHelloと定義している.
ビューの修正が完了したら、コントローラファイルを作成し、Appします.controller.jsは、次のコードを記述します.

sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         alert("Hello World");
      }
   });
});

このコードを少しずつ分析し、defineメソッドはコントローラを定義します.ここでsap/ui/core/mvc/controllerは、ダウンロードしたsdkファイルのresourcesファイルでディレクトリ構造に従って見つけることができ、コントローラのベースファイルに相当します.次にメソッドを定義します.ここではonShowHelloメソッドを定義します.内容は簡単です.Hello Worldダイアログボックスが表示されます.
上のalertメソッドはjsオリジナルのメソッドなので、ポップアップするのはやはり醜いヒントボックスです.UI 5には多くのコンポーネントが用意されており、そのうちの1つがポップアップボックスのイメージを最適化することができる.jsコードを変更するには、次のようにします.

sap.ui.define([
   "sap/ui/core/mvc/Controller",
  <span style="color:#ff0000;"> "sap/m/MessageToast"</span>], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
        <span style="color:#ff0000;"> MessageToast.show</span>("Hello World");
      }
   });
});

ここにはsapが導入されています.mのMessageToastコンポーネントは、Controllerコンポーネントと同様に使用されます.onShowHello関数でMessageToast.showメソッドはalertの代わりにUI 5独自のプロンプトボックスを表示できます.
    
要点まとめ:
1、コントローラでui 5ベースファイルコンポーネントを参照し、自分のコントローラに適用する方法
2、XMLでラベル及び関数を定義し、XMLファイルの内容を使用する方法
3、ui 5内蔵の美しいコンポーネントを使用する