4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【SAPUI5】MVCで作ってみよう

Last updated at Posted at 2018-11-24

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");
      }
   });

※プロジェクトの設定(JavaScriptのルール)により、alertが許可されておらずエラーが出る場合があります。@Auggie_2345さんの以下の記事にルールの設定方法が載っています。
【SAP WebIDE】Unexpected alert. (no-alert)の解決方法

もしくは、alertの代わりにMessageToastを使ってもOKです。

sap.m.MessageToast.show("Hello World");

4. アプリを実行する

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

参考にしたページ

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

4
1
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?