前言对于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>
编写Viewview主要用于整体页面的布局展示,可以使用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./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运行环境及服务,测试我们的应用: SAPUI5中文系列视频教程首发! |
|