您现在的位置:首页 >> 前端 >> 内容

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

时间:2017/6/27 11:10:00 点击:

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

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

前言

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

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

首页创建

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


<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script><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>

 

编写View

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


    
        
            
        
    

编写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
SAP前端——使用SAPUI5来创建Web应用UI

Tags:SA AP P前 前端 
作者:网络 来源:Richard Ji
  • 上一篇:URL中“#”号的作用
  • 下一篇:css盒模型