UI5-学习篇-13-Eclipse 开发UI5应用
1.Eclipse环境配置及组件安装
2.创建项目
3.设置代理映射
打开WebContent->WEB-INF->web.xml文件，设置代理地址：
<servlet>
<servlet-name>SimpleProxyServlet</servlet-name>
<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SimpleProxyServlet</servlet-name>
<url-pattern>/proxy/*</url-pattern>
</servlet-mapping>
<context-param>
<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
<param-value>http://XXX.XXXXX.com:8000</param-value>
</context-param>
4.WebContent文件设置
在WebContent文件夹下创建如下文件夹：
controller：JavaScript应用层逻辑控制
css：样式设置
i18n：多语言设置
localService：元数据文件
model：数据层
view：视图展现层
5.创建View及Controller
选择view文件夹，创建view视图文件
view -右键 New - other- 选择SAPUI5 Application Development - View
视图设计目前有四种类型：JavaScript，XML，JSON，HTML，根据个人习惯进行选择，目前官网实例大多采用XML格式去设计，可以多了解XML。
创建完成后，View文件夹会生成两个文件：MAT.controller.js / MAT.view.xml
将MAT.controller.js文件拖放到controller文件夹下面，如下所示：
MAT.view视图代码如下：
<mvc:View
controllerName="zrico_ecp_ui.controller.MAT"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>app_header_title}" id="PG_SEARCH">
<content>
<Panel
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
id="__panel0"
headerText="{i18n>app_panel_title}">
<content>
<form:Form
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:sap.ui.layout.form="sap.ui.layout.form"
editable="true"
id="__form2">
<form:formContainers>
<form:FormContainer
id="__container2">
<form:formElements>
<form:FormElement
id="__element2"
label="{i18n>app_panel_lable_usrid}">
<form:fields>
<Input
id="productInput"
type="Text"
width="auto"
textFormatMode="KeyValue"
placeholder="Enter User ID..."
showSuggestion="true"
showValueHelp="true"
valueHelpRequest="handleValueHelp"
suggestionItems="{/ZUSERSet}"
suggestionItemSelected="suggestionItemSelected">
<suggestionItems>
<core:ListItem key="{Usrid}" text="{Usrname}" additionalText="{Usrid}"/>
</suggestionItems>
</Input>
<Button
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
width="auto"
type="button"
id="app_panel_button_read"
icon="sap-icon://search"
text="{i18n>app_panel_button_search}"
press="onRead"/> </form:fields> </form:FormElement> </form:formElements> </form:FormContainer> </form:formContainers>
<form:layout>
<form:ResponsiveGridLayout
id="__layout2"/>
</form:layout>
</form:Form>
</content>
</Panel>
<Table xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" noDataText="No data" id="idTable" items="{path:'/ZUSERSet'}">
<items>
<ColumnListItem type="Navigation" press="onItemPress">
<cells>
<Text text="{Usrid}"/>
<Text text="{Usrname}"/>
<Text text="{Usraddr}"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column id="__column0">
<header>
<Label id="lUsrid" text="{i18n>app_table_header_usrid}"/>
</header>
</Column>
<Column id="__column1">
<header>
<Label text="{i18n>app_table_header_usrname}" id="lUsrname"/>
</header>
</Column>
<Column id="__column2">
<header>
<Label text="{i18n>app_table_header_usraddr}" id="lUsraddr"/>
</header>
</Column>
</columns>
</Table>
</content>
<footer>
<Bar>
<contentRight>
<Button icon="sap-icon://create" text="Create" press="onCreate"/>
<Button icon="sap-icon://edit" text="Edit" press="onEdit"/>
<Button icon="sap-icon://delete" text="Delete" press="onDelete"/>
</contentRight>
</Bar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
MAT.controller代码如下(注意替换文件中user/password)：
sap.ui.define([
"sap/ui/core/mvc/Controller",
'sap/ui/model/Filter',
"sap/ui/model/json/JSONModel"
], function(Controller,Filter,JSONModel) {
"use strict";
var oModel;
var rModel;
var oAjax;
var aFilters;
var sCurrentPath; // current path
var sCurrentUsr; // cureent user
var sServiceUrl; return Controller.extend("zrico_ecp_ui.controller.MAT", {
inputId: '', onInit: function() {
// oModel = this.getOwnerComponent().getModel();
// oModel.setUseBatch(false);
// this.getView().setModel(oModel); oModel = new sap.ui.model.odata.ODataModel("proxy/sap/opu/odata/sap/ZRICO_STRU_USR_SRV/",{
json: true,
user: "XXXX",
password: "XXXXX"
}); oModel.setUseBatch(false);
this.getView().setModel(oModel);
}, onRead:function(){
var sInputValue = this.getView().byId("productInput").getSelectedKey();
// define filters
if ( sInputValue === ""){
aFilters = [ new Filter("Usrid",
sap.ui.model.FilterOperator.Contains,
sInputValue) ];
}
else{
aFilters = [ new Filter("Usrid",
sap.ui.model.FilterOperator.EQ,
sInputValue)];
} // get data using filter
oModel.read("/ZUSERSet", {
filters: aFilters,
success: function(oData, oResponse){
//window.console.log(oData);
}
}); var oList = this.getView().byId("idTable");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilters); }, openDialog: function() {
var oView = this.getView();
// Open dialog
var oUsrDialog = oView.byId("UsrDialog");
if (!oUsrDialog) {
oUsrDialog = sap.ui.xmlfragment(oView.getId(),
"zrico_ecp_ui.view.UsrDialog");
oView.addDependent(oUsrDialog);
}
oUsrDialog.open();
// Attach press event for CancelButton
var oCancelButton = oView.byId("CancelButton");
oCancelButton.attachPress(function() {
oUsrDialog.close();
});
}, // onCreate event
onCreate: function() {
sap.m.MessageToast.show("Create starting.");
var oView = this.getView();
this.openDialog();
var oUsrDialog = oView.byId("UsrDialog");
oUsrDialog.setTitle("Create User");
oView.byId("Usrid").setEditable(true);
oView.byId("SaveEdit").setVisible(false);
oView.byId("SaveCreate").setVisible(true);
// clear
oView.byId("Usrid").setValue("");
oView.byId("Usrname").setValue("");
oView.byId("Usraddr").setValue("");
// commit save
oView.byId("SaveCreate").attachPress(function() {
var oNewEntry = {
"Mandt": "300",
"Usrid": "",
"Usrname": "",
"Usraddr": ""
};
// populate value from form
oNewEntry.Usrid = oView.byId("Usrid").getValue();
oNewEntry.Usrname = oView.byId("Usrname").getValue();
oNewEntry.Usraddr = oView.byId("Usraddr").getValue(); if(!oNewEntry.Usrid){
sap.m.MessageToast.show("Please input the value of Usrid");
return;
}else{
// Commit creation operation
oModel.create("/ZUSERSet", oNewEntry, {
success: function() {
sap.m.MessageToast.show("Created successfully.");
},
error: function(oError) {
window.console.log("Error", oError);
}
});
} // close dialog
if (oUsrDialog) {
oUsrDialog.close();
}
});
}, //onEdit event
onEdit: function() {
// no Item was selected
if (!sCurrentUsr) {
sap.m.MessageToast.show("No Item was selected.");
return;
}
var oView = this.getView();
this.openDialog();
var oUsrDialog = oView.byId("UsrDialog");
oUsrDialog.setTitle("Edit User");
oView.byId("Usrid").setEditable(false);
oView.byId("SaveEdit").setVisible(true);
oView.byId("SaveCreate").setVisible(false);
// populate fields
oView.byId("Usrid").setValue(oModel.getProperty(sCurrentPath + "/Usrid"));
oView.byId("Usrname").setValue(oModel.getProperty(sCurrentPath + "/Usrname"));
oView.byId("Usraddr").setValue(oModel.getProperty(sCurrentPath + "/Usraddr"));
// Attach save event
oView.byId("SaveEdit").attachPress(function() {
var oChanges = {
"Mandt": "300",
"Usrid":"",
"Usrname": "",
"Usraddr": ""
};
// populate value from form
oChanges.Usrid = oView.byId("Usrid").getValue();
oChanges.Usrname = oView.byId("Usrname").getValue();
oChanges.Usraddr = oView.byId("Usraddr").getValue();
// commit creation
oModel.update(sCurrentPath, oChanges, {
success: function() {
sap.m.MessageToast.show("Changes were saved successfully.");
},
error: function(oError) {
window.console.log("Error", oError);
}
});
// close dialog
if (oUsrDialog) {
oUsrDialog.close();
}
});
},
// onDelete event
onDelete: function() {
var that = this;
// no Item was selected
if (!sCurrentUsr) {
sap.m.MessageToast.show("No Item was selected.");
return;
}
var oDeleteDialog = new sap.m.Dialog();
oDeleteDialog.setTitle("Deletion");
var oText = new sap.m.Label({
text: "Are you sure to delete UsrId [" + sCurrentUsr + "]?"
});
oDeleteDialog.addContent(oText);
oDeleteDialog.addButton(
new sap.m.Button({
text: "Confirm",
press: function() {
that.deleteUsr();
oDeleteDialog.close();
}
})
);
oDeleteDialog.open();
},
// deletion operation
deleteUsr: function() {
oModel.remove(sCurrentPath, {
success: function() {
sap.m.MessageToast.show("Deletion successful.");
},
error: function(oError) {
window.console.log("Error", oError);
}
});
}, onItemPress: function(evt) {
var oContext = evt.getSource().getBindingContext();
sCurrentPath = oContext.getPath();
sCurrentUsr = oContext.getProperty("Usrname");
}, //Input usrid value help
handleValueHelp : function (oEvent) {
var sInputValue = oEvent.getSource().getValue(); this.inputId = oEvent.getSource().getId();
// create value help dialog
if (!this._valueHelpDialog) {
this._valueHelpDialog = sap.ui.xmlfragment(
"zrico_ecp_ui.view.InputUsridDialog",
this
);
this.getView().addDependent(this._valueHelpDialog);
} // create a filter for the binding
this._valueHelpDialog.getBinding("items").filter([new Filter(
"Usrname",
sap.ui.model.FilterOperator.Contains, sInputValue
)]); // open value help dialog filtered by the input value
this._valueHelpDialog.open(sInputValue);
}, _handleValueHelpSearch : function (evt) {
var sValue = evt.getParameter("value");
var oFilter = new Filter(
"Usrname",
sap.ui.model.FilterOperator.Contains, sValue
);
evt.getSource().getBinding("items").filter([oFilter]);
}, _handleValueHelpClose : function (evt) {
var oSelectedItem = evt.getParameter("selectedItem");
if (oSelectedItem) {
var productInput = this.byId(this.inputId),
//oText = this.byId('selectedKey'),
sDescription = oSelectedItem.getDescription(); productInput.setSelectedKey(sDescription);
//oText.setText(sDescription);
}
evt.getSource().getBinding("items").filter([]);
}, suggestionItemSelected: function (evt) {
var oItem = evt.getParameter('selectedItem'),
//oText = this.byId('selectedKey'),
sKey = oItem ? oItem.getKey() : '';
//oText.setText(sKey);
}
});
});
6.创建Fragment
创建两个对话框：InputUsridDialog / UsrDialog
选中view视图，右键New ，File
InputUsridDialog.fragment.xml代码部分：
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<SelectDialog
title="{i18n>inputusriddialog_header_title}"
class="sapUiPopupWithPadding"
items="{/ZUSERSet}"
search="_handleValueHelpSearch"
confirm="_handleValueHelpClose"
cancel="_handleValueHelpClose">
<StandardListItem
title="{Usrid}{Usrname}"
description="{Usrid}" />
</SelectDialog>
</core:FragmentDefinition>
UsrDialog.fragment.xml代码部分：
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form">
<Dialog id="UsrDialog" title="{i18n>usrdialog_header_title}">
<f:SimpleForm>
<Label text="{i18n>usrdialog_lable_usrid}"/>
<Input id="Usrid" value="{Usrid}"/>
<Label text="{i18n>usrdialog_lable_usrname}"/>
<Input id="Usrname" value="{Usrname}"/>
<Label text="{i18n>usrdialog_lable_usraddr}"/>
<Input id="Usraddr" value="{Usraddr}"/>
</f:SimpleForm>
<Toolbar>
<ToolbarSpacer/>
<Button id="SaveCreate" text="Save"/>
<Button id="SaveEdit" text="Save Edit"/>
<Button id="CancelButton" text="Cancel"/>
</Toolbar>
</Dialog>
</core:FragmentDefinition>
7.多语言文件i18n
i18n文件夹下创建文件i18n.properties
选择文件夹i18n，右键New - File，创建文件名i18n.properties，如下图：
i18n.properties内容如下：
app_header_title=用户信息查询
app_panel_title=查询条件
app_panel_lable_usrid=用户ID
app_panel_button_search=查询
app_table_header_usrid=用户ID
app_table_header_usrname=用户名称
app_table_header_usraddr=用户地址
usrdialog_header_title=用户信息维护
usrdialog_lable_usrid=用户ID
usrdialog_lable_usrname=用户名称
usrdialog_lable_usraddr=用户地址
usrdialog_button_savecreate=保存
usrdialog_button_saveedit=保存修改
usrdialog_button_cancel=取消
inputusriddialog_header_title=用户ID选择
8.mainfest配置文件
mainfest.json配置文件
{
"_version": "1.7.0",
"sap.app": {
"id": "zrico_ecp_ui",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "servicecatalog.connectivityComponent",
"version": "0.0.0"
},
"dataSources": {
"ZRICO_STRU_USR_SRV": {
"uri": "/sap/opu/odata/sap/ZRICO_STRU_USR_SRV/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
},
"ajaxUser":{
"uri": "./model/ajaxinfo.json",
"type": "JSON"
}
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "zrico_ecp_ui.view.MAT",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.00",
"libs": {
"sap.collaboration": {},
"sap.m": {},
"sap.ui.comp": {},
"sap.ui.core": {},
"sap.ui.layout": {},
"sap.ushell": {},
"sap.uxap": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "zrico_ecp_ui.i18n.i18n"
}
},
"ajaxinfo": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "ajaxUser"
},
"": {
"type": "sap.ui.model.odata.v2.ODataModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "OneWay",
"defaultCountMode": "Request"
},
"dataSource": "ZRICO_STRU_USR_SRV",
"preload": true
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
}
},
"sap.platform.abap": {
"uri": "/sap/bc/ui5_ui5/sap/zrico_ui5",
"_version": "1.1.0"
}
}
9.index.html启动页面
<!DOCTYPE HTML>
<html> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8"> <title>ZRICO_UI5_TEST</title> <script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"zrico_ecp_ui": ""}'>
</script> <link rel="stylesheet" type="text/css" href="css/style.css"> <script>
var serviceUrl = getServiceUrl("/mypath/myservice");
function getServiceUrl(sServiceUrl) {
if (window.location.hostname == "localhost") {
return "proxy" + sServiceUrl;
} else {
return sServiceUrl;
}
}
</script> <script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "zrico_ecp_ui"
})
}).placeAt("content");
});
</script>
</head> <body class="sapUiBody" id="content">
</body> </html>
10.Tomcat执行测试
选中项目名，右键Run As - Run on Server
执行后： 
创建：
修改：
删除：
11.Chrome浏览器调试
打开浏览器chrome，输入路径：http://localhost:9090/zrico_ecp_ui/，然后快捷键F12打开调试控制台 
UI5-学习篇-13-Eclipse 开发UI5应用的更多相关文章
- Java基础学习笔记十一 Eclipse开发工具
Eclipse是功能强大Java集成开发工具.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公司中,使用的就是Eclipse进行开发. Eclipse的下载.安装.卸载 下载 http:/ ...
- [python][django学习篇[13]增加markdown_1
1 进入虚拟环境,安装markdwon python install markdown 2 修改视图函数detail def detail(request, pk): # get_object_or ...
- OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（下）
1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...
- OPEN(SAP) UI5 学习入门系列之三：MVC （下） - 视图与控制器
继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...
- OPEN(SAP) UI5 学习入门系列之四：更好的入门系列-官方Walkthrough
好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方 ...
- 13本热门书籍免费送！（Python、SpingBoot、Entity Framework、Ionic、MySQL、深度学习、小程序开发等）
七月第一周,网易云社区联合清华大学出版社为大家送出13本数据分析以及移动开发的书籍(Python.SpingBoot.Entity Framework.Ionic.MySQL.深度学习.小程序开发等) ...
- OPEN(SAP) UI5 学习入门系列之二： 最佳实践练习（下）
上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文 ...
- 突破瓶颈，对比学习：Eclipse开发环境与VS开发环境的调试对比
曾经看了不少Java和Android的相关知识,不过光看不练易失忆,所以,还是写点文字,除了加强下记忆,也证明我曾经学过~~~ 突破瓶颈,对比学习: 学习一门语言,开发环境很重,对于VS的方形线条开发 ...
- 第一篇:打造专属开发工具Eclipse篇
第一篇:打造专属开发工具Eclipse篇 eclipse 优化 1.动画很酷,但如果可以的话,我总是在所有的工具中禁用动画.所以classic或者window classic主题是我最常用的主题 , ...
- springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定
springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定 标签: springmvc springmvc学习笔记13-springmvc注解开发之集合类型參数绑定 数组绑定 需 ...
随机推荐
- 开发框架-.Net：Learun（力软敏捷开发）
ylbtech-开发框架-.Net:Learun(力软敏捷开发) 1.返回顶部 2.返回顶部 1. 系统简介:(1)后台采用MVC+EF架构,前台使用Jquery+Bootstrap,界面美观大气 ...
- win7 没有权限使用网络资源
局域网下同一工作组电脑无法访问 提示"....没有权限使用网络资源...." 一.组策略 win + R 输入gpedit.msc并回车,打开本地组策略编辑器 按如下展开 计算机配 ...
- python面向对象 : 抽象类(接口类),多态,封装(私有制封装)
一. 抽象类(接口类) 与java一样, python也有抽象类的概念但是同样需要借助模块实现,抽象类是一个特殊的类, 它的特殊之处在于只能被继承, 不能被实例化. 从设计角度去看, 如果类是从现实对 ...
- AD中组的概念
- 梳理源码：spring ioc容器加载的流程图
- linux 安装软件各种错误集锦及解决方法
1.最小化安装了centos, 但是使用ifconfig命令时候出现”bash ifconfig command not found” .解决方法:yum -y install net-tools.x ...
- 字符串格式化format使用
顺序传参 '{}....{}'.format(value1, value2) 索引传参 '{0}....{1}'.format(value1, value2) 关键字传参 '{k1}....{k2}' ...
- Linux性能优化 第四章 性能工具：特定进程CPU
4.1进程性能统计信息 4.1.1. 内核时间VS用户时间 一个应用程序所耗时间最基本的划分是内核时间与用户时间.内核时间是消耗在Linux内核上的时间,而用户时间则是消耗在应用程序或库代码上的时间. ...
- linux设置服务器时间同步
yum install -y rdate 服务器请设置 */5 * * * * /usr/bin/rdate -s time-b.nist.gov ubuntu 设定时区:dpkg-reconfigu ...
- angularjs的cache
首先要引入angular-cookies.js插件 angular.module('app').service('cache', ['$cookies', function($cookies){ th ...