【SAPUI5】はじめに知っておきたい構文

概要

SAPUI5を学んでいて、jsファイルやxmlビューに独特の書き方（構文）があることを知りました。今回はこれらの構文についてまとめます。

jsファイルの構文

SAPUI5のjsファイルは以下の形式で書かれる場合が多いです。この書き方はScaffolding Template（Scaffoldingは足場の意味）と呼ばれ、外部のモジュールを簡単に使用できるようにするために用いられます。SAP UI5 version 1.32から導入されました。

 sap.ui.define([
        "namespace/path/Object1",
        "namespace/path/Object2"
    ],function (Object1, Object2){
        //この中ではObject1, Object2の名前でクラスを使用できる
});

要領は次の通りです。
1. sap.ui.defineに続くカッコ[ ]の中に使用するモジュールを指定する。（この部分はdependencyと呼ばれる）
2. functionの次のカッコ( )の中に、モジュールを表す引数を1.と同じ順番で指定する。順番さえ一致していれば1.と同じ名前でなくてもよい
3. functionの内部で2.で指定した名前でクラスを使用する

jsファイルで使いたいモジュールがある場合は、1.と2.のところに追加していけばよいということになります。

コントローラーの構文

コントローラーのjsファイルは、これの応用で以下の構文となります。
特徴的なのはsap/ui/core/mvc/Controllerクラスを拡張して実装するところです。

sap.ui.define([
    "sap/ui/core/mvc/Controller"
    ], function(Controller){
        return Controller.extend("<名前空間>.controller.<コントローラーの名前>", {
            functionName  : function(){

            }
        });
});

xmlビューの構文

xmlビューの考え方はjsファイルと似ていて、頭の部分で使用するライブラリを定義します。
xmlns:mvc="sap.ui.core.mvc"という部分は、「このファイルの中では、mvc:と頭につくコントロールはsap.ui.core.mvcライブラリに属しますよ」ということを意味します。
xmlns="sap.m"という部分は、「接頭辞がつかないコントロールはsap.mライブラリに属しますよ」ということを表します。

<mvc:View 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m"
    xmlns:f="sap.ui.layout.form"
    controllerName="<名前空間>.controller.<コントローラー>">

</mvc:View>

使用例

以下が実際のビューでの使用例です。
SimpleFormの中にあるcontentにはf:の接頭辞がついていますが、Pageの中にあるcontentにはついていません。contentは少し特殊で、親と同じライブラリを指定する必要があるそうです。（SimpleFormの中にあるcontentからf:をとるとエラーになります）

<mvc:View 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m"
    xmlns:f="sap.ui.layout.form"
    controllerName="restaurant.controller.customer">
    <App id="idApp">
        <Page title="本日の定食">
            <content>
                <f:SimpleForm>
                    <f:content>
                        <Label text="メニュー"></Label>
                        <Text text="{/menu/name}"></Text>
                        <Label text="価格"></Label>
                        <Text text="{/menu/price}"></Text>
                        <Label text="カロリー"></Label>
                        <Text text="{/menu/calories}"></Text>                       
                    </f:content>
                </f:SimpleForm>             
            </content>
        </Page>
    </App>
</mvc:View>

まとめ

• jsファイルもxmlファイルも、最初に使用するライブラリを指定する
• これにより、ファイルの中で名前空間を指定せずにライブラリを使用できる