SAP前端——使用SAPUI5来创建Web应用UI

前言

对于SAP产品开发而言，功能需求的实现当之无愧，但是前端UI展示一直被吐槽，不够友好的界面，较为繁琐的操作流程，给用户增添了很多学习和使用上的烦恼。

但是自从SAPUI5诞生以来，移动显示，多元化的页面，不仅美观，更加实用便捷，下面我们来看看如何简单创建一个SAPUI5的应用。

首页创建

首先一个web应用程序，需要一个入口文件index.html:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
                sap.ui.localResources("helloworld");
                var app = new sap.m.App({initialPage:"idHelloWorld1"});
                var page = sap.ui.view({id:"idHelloWorld1", viewName:"helloworld.HelloWorld", type:sap.ui.core.mvc.ViewType.XML});
                app.addPage(page);
                app.placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

编写View

view主要用于整体页面的布局展示，可以使用JS格式，XML格式，HTML格式，JSON格式，但是更为推荐大家使用XML格式语法。

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="helloworld.HelloWorld" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Title">
        <content>
            <Label text="This is Hello World"></Label>
        </content>
    </Page>
</core:View>

编写Controller

对于MVC结构而言自然少不了控制器，下面我们编写一个controller.

sap.ui.controller("helloworld.HelloWorld", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf helloworld.HelloWorld
*/
//  onInit: function() {
//
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf helloworld.HelloWorld
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf helloworld.HelloWorld
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf helloworld.HelloWorld
*/
//  onExit: function() {
//
//  }

});

运行

应用Eclipse插件，以来Java Web运行环境及服务，测试我们的应用：

这里写图片描述

SAP前端——使用SAPUI5来创建Web应用UI

前言

首页创建

编写View

编写Controller

运行

SAPUI5中文系列视频教程首发！

浏览过的版块