我正尝试使用ui5
中的路由创建splitapp
应用程序。我的第一页是登录页面。然后下一页应该是一个splitapp,我无法做到。如何使用ui5中的路由创建使用不同容器的页面
我无法使用路由从登录页面导航到splitapp。我的路由URL正在改变,但splitapp视图没有被加载。
enter code here
// component.js
jQuery.sap.declare("sap.demo.cart.Component");
sap.ui.core.UIComponent.extend("sap.demo.cart.Component",{
metadata:{
routing:{
config:{
viewType:"JS",
viewPath:"shopcart",
targetAggregation:"pages",
clearTarget:false
},
routes:[
{
pattern: "",
name: "login",
view: "login",
viewType:"JS",
viewPath:"shopcart",
targetControl:"topMaster"
},
{
pattern: "splitApp",
name:"app",
view:"app",
targetControl:"topMaster",
clearTarget:false,
subroutes:[{
pattern: "master",
name:"master",
view:"master",
targetAggregation:"masterPages",
targetControl:"splitApp"
preservePageInSplitContainer:true
subroutes:[{
pattern:"welcome",
name:"welcome",
view:"welcome",
targetAggregation:"detailPages"
}]
}]
}
]
}
},
init: function(){
jQuery.sap.require("sap.ui.core.routing.HashChanger");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
this._router = this.getRouter();
this._routerHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
},
createContent:function(){
var oView = sap.ui.view({
id:"tmaster",
viewName:"shopcart.topMaster",
type:"JS",
viewData:{component: this}
});
return oView;
}
});
/*login.view*/
sap.ui.jsview("shopcart.login", {
getControllerName : function() {
return "shopcart.login";
},
createContent : function(oController) {
var opanel = new sap.m.Panel(
{
width:"100%",
height:"100%",
expandable : false,
expanded: true,
content:[
new sap.m.Panel("ologin",{
headerText:"Login",
width:"400px",
height:"300px",
content:[
new sap.m.Input("uname",{ tooltip:"Enter Username",placeholder : "Username"}),
new sap.m.Input("pwd",{ type: sap.m.InputType.Password,placeholder : "Password"}),
new sap.m.Link("fgt",{text:"Forgot Password?", press:oController.onForgot}),
new sap.m.Button("log",{text:"Login", press:[oController.onLogin, oController]}),
new sap.m.Button("clr",{text:"Clear", press:oController.onClear})
]
})
]
}).addStyleClass("logContainer");
return sap.m.Page({
content:[opanel]
});
}
});
/*login controller*/
sap.ui.controller("shopcart.login", {
onInit: function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
},
onLogin: function(){
var uname = sap.ui.getCore().byId("uname").getValue();
var pwd = sap.ui.getCore().byId("pwd").getValue();
if(uname=="" || pwd=="")
{
// openDialog(sap.ui.core.ValueState.Error,"Login Details","Please provide both the username and password details to login");
}
else{
// app.to("idhome2");
this.router.navTo("app");
}
},
onClear:function(){
sap.ui.getCore().byId("uname").setValue("");
sap.ui.getCore().byId("pwd").setValue("");
},
onForgot:function(){
openDialog(sap.ui.core.ValueState.None,"Forgot Password","Resetting is still under construction");
}
});
/*topmaster.view*/
sap.ui.jsview("shopcart.topMaster", {
createContent : function(oController) {
return new sap.m.App("topMaster",{
});
}
});
/*app.view*/
sap.ui.jsview("shopcart.app", {
getControllerName : function() {
return "shopcart.app";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.SplitApp("splitApp");
}
});
/*master.view*/
sap.ui.jsview("shopcart.master", {
getControllerName : function() {
return "shopcart.master";
},
createContent : function(oController) {
var olist = new sap.m.List({
mode:sap.m.ListMode.SingleSelect,
items : [ new sap.m.StandardListItem({
title : "Employee Master"
}), new sap.m.StandardListItem({
title : "Product Master"
}),new sap.m.StandardListItem({
title : "Category Master"
}),new sap.m.StandardListItem({
title : "Order Master"
}),new sap.m.StandardListItem({
title : "Operation Master"
}) ]
});
return olist;
}
});
/*welcome.view */
sap.ui.jsview("shopcart.welcome", {
getControllerName : function() {
return "shopcart.welcome";
},
createContent : function(oController) {
return new sap.m.Text({text:"Welcome to Oncall Support Maintenance Fiori Application",design:sap.ui.commons.TextViewDesign.H5});
}
});
究竟是怎么做你想象我们可以帮助你在这里没有向我们展示任何代码? ;-) – Qualiture 2015-04-02 13:05:03
添加您的代码以获取适当的帮助 – 2015-04-02 13:05:48
对不起,我..我已经添加了我的代码.. 现在我能够导航到应用程序视图页,我的splitapp容器加载..但无法添加母版页并详细说明页面。 请检查并协助我解决此问题。 – Sunil 2015-04-03 15:39:06