概要
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ファイルも、最初に使用するライブラリを指定する
- これにより、ファイルの中で名前空間を指定せずにライブラリを使用できる