Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【SAPUI5】ビューの埋め込み

More than 1 year has passed since last update.

はじめに

これまでは、ひとつのビュー(App.view.xml)にすべてのコンテンツを記述していました。
コンテンツが増えて複雑になってくると、コンテンツごとに別々のビューにしたほうがすっきりします。

今回は、以下のようにApp.view.xmlのコンテンツの一部を別のビューに切り出し、そのビューをApp.view.xmlに埋め込むことをやってみます。
ビューごとにコントローラーが必要なのでコントローラーも新設します。
WS000075.JPG

ステップ

前提:【SAPUI5】入門編の記事まとめ(2)

  1. 埋め込み用のビューを作成
  2. コントローラーを作成
  3. App.controller.jsを変更
  4. App.view.xmlにビューを埋め込み

1. 埋め込み用のビューを作成

viewフォルダの配下に"HelloPanel.view.xml"というファイルを新規作成します。
WS000076.JPG

以下のコードを入力します。App.view.xmlから一つ目のPanelをそのままコピーし、コントローラーの名称だけ変えています。

<mvc:View
    controllerName="test.helloworld.controller.HelloPanel" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <Panel headerText="{i18n>panel1Header}">
        <content>
            <l:VerticalLayout class="sapUiContentPadding">
                <Button text="{i18n>helloButton}" press="onShowHello"/>
                <Text text="{mPrice>/product/name}"/>
                <Text binding="{mPrice>/product}" text="{mPrice>price}"/>
                <Text text="{
                    path: '/date',
                    type: 'sap.ui.model.type.Date',
                    formatOptions: {
                        style: 'short'
                    }
                }"/>
            </l:VerticalLayout>                             
        </content>
    </Panel>    
</mvc:View> 

2. コントローラーを作成

controllerフォルダの配下に"HelloPanel.controller.js"というファイルを新規作成します。
WS000077.JPG

以下のコードを入力します。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
    "test/helloworld/model/formatter"
], function (Controller, JSONModel, MessageToast, formatter) {
   "use strict";
   return Controller.extend("test.helloworld.controller.HelloPanel", {
        _data : {
            "date" : new Date()
        },

        onInit : function (oEvent) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },  

        onShowHello : function () {
            // read msg from i18n model
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
            var sMsg = oBundle.getText("helloMessage", [sProduct]);

            // show a native JavaScript alert
            MessageToast.show(sMsg);
        },
   });      

3. App.controller.jsを変更

App.controller.jsから、新しいコントローラーに切り出した部分をコメントアウトします。(コメントアウトの部分は削除しても問題ありません)

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    //"sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    //"sap/m/MessageToast",
    "test/helloworld/model/formatter"
], function (Controller, Filter, FilterOperator, formatter) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {

        formatter: formatter,
        /*
        _data : {
            "date" : new Date()
        }

        onInit : function (oEvent) {
            var oModel = new JSONModel(this._data);
            this.getView().setModel(oModel);
        },

        onShowHello : function () {
            // read msg from i18n model
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
            var sMsg = oBundle.getText("helloMessage", [sProduct]);

            // show a native JavaScript alert
            MessageToast.show(sMsg);
        },
        */

        onFilterProducts : function (oEvent) {

            // build filter array
            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                aFilter.push(new Filter("name", FilterOperator.Contains, sQuery));
            }

            // filter binding
            var oList = this.byId("productList");
            var oBinding = oList.getBinding("items");
            oBinding.filter(aFilter);           
        },      
   });
});     

4. App.view.xmlにビューを埋め込み

まず、App.view.xmlからPanel1の部分を削除します。コントロール"sap.ui.layout"も不要なので削除します。

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc">
    <App>
        <pages>
            <Page title="{i18n>pageTitle}">
                <content>
                    <ここにビューを埋め込み>
                    <Panel headerText="{i18n>panel2Header}">

・・・

この時点で実行すると、Panel1がなくなっています。
image.png

Panel1があったところに以下のコードを追加します。
<mvc:XMLView viewName="test.helloworld.view.HelloPanel"/>

実行結果

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

まとめ

  • ビューの中に別のビューを埋め込むことができる
  • ビューごとにコントローラーが必要

参考にしたページ

Get Started: Setup and Tutorials-Walkthrough-Step 15: Nested Views

tami
SAPUI5、 Fioriについて学びつつ、アウトプットしていきたいと思います。記事の内容について質問・コメント歓迎です
Why not register and get more from Qiita?
  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