天天看点

SAP UI5 yong web ide 的实用

 https://tools.hana.ondemand.com/#sapui5     下载 sap web  ide

安装完全,然后打开

SAP UI5 yong web ide 的实用

 http://localhost:8080/mixloginstatic/LoginWindow.html

进去,点击下图,然后注册登录

SAP UI5 yong web ide 的实用

创建project

SAP UI5 yong web ide 的实用

 查看 index.html ,view 文件等 信息

SAP UI5 yong web ide 的实用

view文件下编辑 view1.xml文件,定义一个按钮,返回helloPanel.json文件的内容

SAP UI5 yong web ide 的实用
<Button text="Say Hello!" press="onShowHello"/>
	<Input 
			value="{helloPanel>/recipient/name}" 
			description="Hello 
			{helloPanel>/recipient/name}" 
			valueLiveUpdate="true" width="60%"/> 
           
SAP UI5 yong web ide 的实用
{  
"recipient" : { 
"name" : "你好,欢迎来到 SAP UI5" 
} 
}
           
SAP UI5 yong web ide 的实用
sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device"
], function(JSONModel, Device) {
	"use strict";

	return {

		createDeviceModel: function() {
			var oModel = new JSONModel(Device);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		}

	};
});
           
SAP UI5 yong web ide 的实用
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function(Controller,MessageToast) {
	"use strict";

	return Controller.extend("ztest.controller.View1", {
       onShowHello : function () { 
    	    MessageToast.show("Hello Boy, Welcome to this");
    	    }
	});
});
           

 到这里,就完成了。

SAP UI5 yong web ide 的实用