UI5-学习篇-13-Eclipse 开发UI5应用

其他 2019-03-06 16:38:08 阅读次数: 0

1.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>
View Code

　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);
        }
    });
});
View Code

 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>
View Code

　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>
View Code

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选择
View Code

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"
    }
}
View Code

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>
View Code

10.Tomcat执行测试

　选中项目名，右键Run As - Run on Server

　

　执行后：　

　创建：

　　

　修改：

　

　

　删除：

　

　

11.Chrome浏览器调试

　打开浏览器chrome，输入路径：http://localhost:9090/zrico_ecp_ui/，然后快捷键F12打开调试控制台　

　

　

　

　

　

猜你喜欢

转载自www.cnblogs.com/ricoo/p/10458078.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022