Help us understand the problem. What is going on with this article?

【SAPUI5】MVCで作ってみよう

More than 1 year has passed since last update.

MVCとは

MVCとは、アプリケーションを構成するデータ(Model)、画面(View)、ロジック(Controller)を分けて作る構成のことです。開発、メンテナンスをしやすい(例えば、画面を変更してもロジック部分のソースは変更しなくてよい)というメリットがあります。
以下は、シンプルなSAPUI5のフォルダ構成の例です。model, view, controllerのフォルダがありますね。
hcp_17.png

SAPUI5で(M)VCを実装してみる

モデルを使うにはひと手間必要なので、今回はビュー、コントローラーを実装します。モデルを使った例は別の機会にご紹介したいと思います。

ゴール

ボタンを押すと"Hello World"と表示されるようにします。
WS000004.JPG

ステップ

【前提】Bootstrapを実装したコードを用意する
1. index.htmlで名前空間を定義し、ビューを埋め込む
2. App.view.xmlを作成する
3. App.controller.jsを作成する
4. アプリを実行する

各ファイルの関係は以下のようになります。
WS000006.JPG

1. index.htmlで名前空間を定義し、ビューを埋め込む

名前空間を定義する

bootstrapのコードの下に、以下のようにコードを追加します。これは「"test.helloworld"で始まるファイルはindex.htmlフォルダと同じ階層にありますよ」ということを意味します。

        <script
           id="sap-ui-bootstrap"
           src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
           //省略
           data-sap-ui-resourceroots='{
            "test.helloworld": "./"
           }'          
        >    

ビューを埋め込む

この後で作成するビューを埋め込むスペースを先に作っておきます。attachInitの中身を以下のように書き換えてください。index.htmlファイルの中にある"content"という場所に、App.view.xmlというビューを埋め込むという意味になります。(ビューの末尾はview.xmlであると自動的に解釈されます)

           sap.ui.getCore().attachInit(function () {
              sap.ui.xmlview({
                 viewName : "test.helloworld.view.App"
              }).placeAt("content");
           });

bodyタグを以下のように変更します。bodyタグのidがcontentとなって、bodyにビューが埋め込まれます。

    <body class="sapUiBody" id="content">
    </body>

2. App.view.xmlを作成する

新しく"view"フォルダを作り、その配下に"App.view.xml"を作成します。
※ビューの名称は大文字で開始し、末尾はview.xmlとするのが慣例です。
WS000000.JPG
以下のコードを入力します。

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

ファイルの先頭で指定している項目について解説します。
controllerName:使用するコントローラーの名前です。
xmlns="sap.m":SAPUI5のライブラリのひとつです。Buttonを使うために指定しています。
xmlns:mvc="sap.ui.core.mvc":同じくSAPUI5のライブラリのひとつです。Viewを使うために指定しています。

このように、ファイルの先頭で使用するライブラリを指定しておく必要があります。(この後出てくるControllerも同様です)
最後にボタンを配置して、ボタンが押されたらonShowHelloメソッドが起動されるようにします。

3. App.controller.jsを作成する

新しく"controller"フォルダを作り、その配下に"App.controller.js"を作成します。
※コントローラーの名称はビューと同じにするのが慣例です。
WS000002.JPG
以下のコードを入力します。

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {
          //この後追加
      }
   });
});

これがコントローラーの定型となります。上から順に見ていくと、
"sap/ui/core/mvc/Controller":sap.ui.core.mvc.Controllerライブラリを使うことを宣言しています。ビューと違ってスラッシュで区切るのですね。
"use strict":JavaScriptの"use strict"と同じで、指定すると"strict mode"で実行されます。これによって、変数を使用前に宣言しているか、などのチェックが行われます。
return Controller.extend("test.helloworld.controller.App",{}:Controllerを拡張して、独自のメソッドを追加したものを返します。この中にonShowHelloを定義します。

   return Controller.extend("test.helloworld.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });

4. アプリを実行する

実行結果は以下のようになります。
WS000004.JPG

参考にしたページ

Get Started: Setup and Tutorials-Walkthrough-Step 4: XML Views
Get Started: Setup and Tutorials-Walkthrough-Step 5: Controllers

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away