5
4

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 5 years have passed since last update.

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

Posted at

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

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
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?