SAPUI5-Routing
2015-07-23 16:51
676 查看
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"
data-sap-ui-resourceroots='{"sap.ui.demo" : "./",
"routingdemo" : "./routingdemo"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
new sap.m.Shell("shellId", {
title : "Routing Demo",
app : new sap.ui.core.ComponentContainer({
name : "sap.ui.demo"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>Component.js
jQuery.sap.declare("sap.ui.demo.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.Component", {
// https://sapui5.hana.ondemand.com/sdk/#docs/guide/902313063d6f45aeaa3388cc4c13c34e.html metadata : {
routing : {
config : {
// config contains the default values for every route default
// values are overwritten by custom route values
viewType : "JS",
viewPath : "routingdemo",
targetControl : "NavContainer",
clearTarget : false
},
routes : [ {
// routes contains an array of all routes defined by the
// component
pattern : "", // which appears in URL, while you navigate
name : "first", // Name that is used in navTo method
view : "FirstPage", // target view that you are navigating to
viewPath : "routingdemo", // path of the target view
targetAggregation : "pages" // [pages/content/masterpages/detailpages]
}, {
pattern : "InSecondPage",
name : "second",
view : "SecondPage",
viewPath : "routingdemo",
targetAggregation : "pages"
} ]
}
},
init : function() {
// 1. some very generic requires
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.demo.MyRouter");
// 2. call overridden init (calls createContent)
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// 3. monkey patch the router
var router = this.getRouter();
router.myNavBack = sap.ui.demo.MyRouter.myNavBack;
// 4. initialize the router
this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
router.initialize();
},
destroy : function() {
if (this.routeHandler) {
this.routeHandler.destroy();
}
// call overridden destroy
sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
},
createContent : function() {
var oView = new sap.ui.view({
id : "app",
viewName : "routingdemo.App",
type : "JS"
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
myName : null,
myPass : null
});
oView.setModel(oModel);
return oView;
}
});App.view
sap.ui.jsview("routingdemo.App", {
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf routingdemo.App
*/
getControllerName : function() {
return "routingdemo.App";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf routingdemo.App
*/
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.App("NavContainer");
}
});FirstPage.view
sap.ui.jsview("routingdemo.FirstPage", {
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf routingdemo.FirstPage
*/
getControllerName : function() {
return "routingdemo.FirstPage";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf routingdemo.FirstPage
*/
createContent : function(oController) {
var flexbox = new sap.m.FlexBox({
direction : "Column"
});
flexbox.addItem(new sap.m.Input("name", {
placeholder : "Enter User Name",
value : "{/myName}"
}));
flexbox.addItem(new sap.m.Input("password", {
placeholder : "Enter Password",
value : "{/myPass}"
}));
flexbox.addItem(new sap.m.Button("login", {
text : "Log in",
press : function() {
oController.navigate();
}
}));
flexbox.setAlignItems("Center");
flexbox.setJustifyContent("Center");
var page1 = new sap.m.Page({
title : "Routing Demo",
content : flexbox,
});
return page1;
}
});FirstPage.controller
sap.ui.controller("routingdemo.FirstPage", {
/**
* 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 routingdemo.FirstPage
*/
onInit : function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
},
navigate : function() {
this.router.navTo("second");
}
/**
* 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 routingdemo.FirstPage
*/
// 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 routingdemo.FirstPage
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and
* finalize activities.
*
* @memberOf routingdemo.FirstPage
*/
// onExit: function() {
//
// }
});SecondPage.view
sap.ui.jsview("routingdemo.SecondPage", {
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf routingdemo.SecondPage
*/
getControllerName : function() {
return "routingdemo.SecondPage";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf routingdemo.SecondPage
*/
createContent : function(oController) {
var flexbox = new sap.m.FlexBox({
direction : "Column"
});
flexbox.addItem(new sap.m.Text({
text : "{/myName}"
}));
flexbox.addItem(new sap.m.Text({
text : "{/myPass}"
}));
flexbox.setAlignItems("Center");
flexbox.setJustifyContent("Center");
var page2 = new sap.m.Page({
content : flexbox,
showNavButton : true,
navButtonPress : function() {
oController.handleNavBack();
}
});
return page2;
}
});SecondPage.controller
sap.ui.controller("routingdemo.SecondPage", {
/**
* 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 routingdemo.SecondPage
*/
onInit : function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
},
handleNavBack : function() {
this.router.myNavBack("first");
}
/**
* 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 routingdemo.SecondPage
*/
// 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 routingdemo.SecondPage
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and
* finalize activities.
*
* @memberOf routingdemo.SecondPage
*/
// onExit: function() {
//
// }
});MyRouter.js
jQuery.sap.declare("sap.ui.demo.MyRouter");
sap.ui.demo.MyRouter = {
myNavBack : function(route, data) {
var history = sap.ui.core.routing.History.getInstance();
var url = this.getURL(route, data);
var direction = history.getDirection(url);
if ("Backwards" === direction) {
window.history.go(-1);
} else {
var replace = true; // otherwise we go backwards with a forward
// history
this.navTo(route, data, replace);
}
},
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【从零开始学NGUI 】 （七）Atlas制作
- ios8 UITableView设置 setSeparatorInset:UIEdgeInsetsZero不起作用的解决办法
- HDOJ 1047 Integer Inquiry(多次大数相加)
- Android面试---Handler,Looper,MessageQueue
- Android UI
- easyui获取当前点击对象tabs的title
- UISlider两边都可以滑动
- Map sort by value
- Codeforces Round #313 (Div. 2) D. Equivalent Strings（简单搜索）
- java 根据value进行并发同步操作
- NetSuite crm国内合作商来讲讲NetSuite常见问题
- String 与StringBuilder
- HDU 1242 Rescue(DFS or BFS)
- EF中使用SqlQuery进行参数化查询时抛出异常
- UIScrollView - 常用方法总结
- [SoapUI] SoapUI命令行方式运行
- Qt GUI 通过鼠标事件剖析整个事件处理流程（基于Qt4.5.2源码windows平台）
- UI—代理简单使用
- 下载：Win10 Build 10240 RTM官方简体中文镜像泄露(32/64位)
- 关于ueditor在Java中文件上传问题，404问题