HTML 5モバイルWebアプリケーション開発——SAP UI 5編(7)
3949 ワード
SAPUI 5では、Componentによるコンポーネントのパッケージングがサポートされています.コンポーネントをカプセル化したい場合、Componentの基本コードは以下の通りです.
Componentフレームワークのコードの意味を分析し、coreのUIcomponent基礎空間を引用し、コンポーネントの作成はUIcomponent.extendでは,拡張を行う.
これまでのアプリケーションをコンポーネントにカプセル化し、新しいComponentを作成してみました.jsファイル、コードは以下の通りです.
私たちは元のコントローラをjsファイルの初期化関数、データモデルのバインド構成などの作業はすべてComponent.jsではControllerを修正する.jsファイル:
Controller.jsファイルには、本プロジェクトで使用する各関数のみが保持され、プロジェクト内の各ファイルの論理がより明確になります.
indexでhtmlでは、Componentを直接呼び出すことができます.
SAP Fioriアプリケーションでは、各アプリケーションに1つのプロファイルであるmanifestがある.json、いくつかの列のプロジェクト構成情報を定義します.この例のmanifestファイルは次のとおりです.
見えますよjsonファイルはui 5バージョン、データモデルなどの一連の基本情報を定義します.今後の開発では、このプロファイルは絶えず改善されます.
sap.ui.define([
"sap/ui/core/UIComponent"], function (UIComponent) {
"use strict";
return UIComponent.extend("", {
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});
Componentフレームワークのコードの意味を分析し、coreのUIcomponent基礎空間を引用し、コンポーネントの作成はUIcomponent.extendでは,拡張を行う.
これまでのアプリケーションをコンポーネントにカプセル化し、新しいComponentを作成してみました.jsファイル、コードは以下の通りです.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"], function (UIComponent, JSONModel, ResourceModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata : {
rootView: "sap.ui.demo.wt.view.App"
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
var i18nModel = new ResourceModel({
bundleName : "sap.ui.demo.wt.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
私たちは元のコントローラをjsファイルの初期化関数、データモデルのバインド構成などの作業はすべてComponent.jsではControllerを修正する.jsファイル:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"], function (Controller, MessageToast) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sRecipient = this.getView().getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);
MessageToast.show(sMsg);
}
});
});
Controller.jsファイルには、本プロジェクトで使用する各関数のみが保持され、プロジェクト内の各ファイルの論理がより明確になります.
indexでhtmlでは、Componentを直接呼び出すことができます.
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer(
name : "sap.ui.demo.wt"
}).placeAt("content");
});
</script>
SAP Fioriアプリケーションでは、各アプリケーションに1つのプロファイルであるmanifestがある.json、いくつかの列のプロジェクト構成情報を定義します.この例のmanifestファイルは次のとおりです.
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.ui.demo.wt",//
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-DOC"
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.ui.demo.wt.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.wt.i18n.i18n"
}
}
}
}}
見えますよjsonファイルはui 5バージョン、データモデルなどの一連の基本情報を定義します.今後の開発では、このプロファイルは絶えず改善されます.