2015-04-02 79 views
0

我正尝试使用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}); 

} 

});

+0

究竟是怎么做你想象我们可以帮助你在这里没有向我们展示任何代码? ;-) – Qualiture 2015-04-02 13:05:03

+0

添加您的代码以获取适当的帮助 – 2015-04-02 13:05:48

+0

对不起,我..我已经添加了我的代码.. 现在我能够导航到应用程序视图页,我的splitapp容器加载..但无法添加母版页并详细说明页面。 请检查并协助我解决此问题。 – Sunil 2015-04-03 15:39:06

回答

0

看看这段代码。注意TopMaster控制器和组件中的路由配置。

jQuery.sap.require("sap.m.MessageBox"); 
 

 
jQuery.sap.declare("shopcart.Component"); 
 
sap.ui.core.UIComponent.extend(
 
    "shopcart.Component", 
 
    { 
 
     metadata:{ 
 

 
      rootView : { 
 
       viewName: "shopcart.view.TopMaster", 
 
       type: sap.ui.core.mvc.ViewType.JS 
 
      }, 
 

 
      routing:{ 
 
       config:{ 
 
        viewType: "JS", 
 
        viewPath: "shopcart.view", 
 
        targetControl: "topMaster", 
 
        targetAggregation: "pages", 
 
        clearTarget: false 
 
       }, 
 
       routes: [ 
 
        { 
 
         pattern: "", 
 
         name: "login", 
 
         view: "Login" 
 
        }, 
 
        { 
 
         pattern: "splitApp", 
 
         name: "app", 
 
         view: "App", 
 
         subroutes:[ 
 
          { 
 
           pattern: "master", 
 
           name: "master", 
 
           view: "Master", 
 
           targetAggregation: "masterPages", 
 
           targetControl: "splitApp", 
 
           preservePageInSplitContainer: true, 
 
           subroutes: [ 
 
            { 
 
             pattern: "welcome", 
 
             name: "welcome", 
 
             view: "Welcome", 
 
             targetControl: "splitApp", 
 
             targetAggregation: "detailPages" 
 
            } 
 
           ] 
 
          } 
 
         ] 
 
        } 
 
       ] 
 
      } 
 
     }, 
 
     init: function(){ 
 

 
      sap.ui.core.UIComponent.prototype.init.apply(
 
       this, 
 
       arguments 
 
      ); 
 
      var oRouter = this.getRouter(); 
 
      oRouter.initialize(); 
 

 
     } 
 
    } 
 
); 
 

 
// <-- TopMaster.view.js --> 
 
sap.ui.jsview(
 
    "shopcart.view.TopMaster", 
 
    { 
 
     getControllerName : function() { 
 
      return "shopcart.controller.TopMaster"; 
 
     }, 
 

 
     createContent : function(oController) { 
 
      return new sap.m.App(
 
       "topMaster" 
 
      ); 
 
     } 
 
    } 
 
); 
 

 
// <-- TopMaster.controller.js --> 
 
sap.ui.controller(
 
    "shopcart.controller.TopMaster", 
 
    { 
 

 
     onInit: function() { 
 

 
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this); 
 
      oRouter.attachRouteMatched(this.onRouteMatched, this); 
 

 
     }, 
 

 
     onRouteMatched: function(oEvent) { 
 

 
      var oParameters = oEvent.getParameters(); 
 
      var oView = this.getView(); 
 
      var oApp = sap.ui.getCore().byId("topMaster"); 
 

 
      if (oApp.getCurrentPage().sId !== oParameters.view.sId) { 
 
       oApp.to(oParameters.view.sId); 
 
      } 
 

 
     } 
 

 
    } 
 
); 
 

 

 
// <-- login.view --> 
 
sap.ui.jsview(
 
    "shopcart.view.Login", 
 
    { 
 
     getControllerName : function() { 
 
      return "shopcart.controller.Login"; 
 
     }, 
 

 
     createContent : function(oController) { 
 

 
      return new sap.m.Page(
 
       { 
 
        title: "Login", 
 
        content: [ 
 
         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(
 
                this.createId("uname"), 
 
                { 
 
                 tooltip: "Enter Username", 
 
                 placeholder: "Username" 
 
                } 
 
               ), 
 
               new sap.m.Input(
 
                this.createId("pwd"), 
 
                { 
 
                 type: sap.m.InputType.Password, 
 
                 placeholder: "Password" 
 
                } 
 
               ), 
 
               new sap.m.Link(
 
                this.createId("fgt"), 
 
                { 
 
                 text:"Forgot Password?", 
 
                 press: oController.onForgot 
 
                } 
 
               ), 
 
               new sap.m.Button(
 
                this.createId("log"), 
 
                { 
 
                 text:"Login", 
 
                 press:[ 
 
                  oController.onLogin, 
 
                  oController 
 
                 ] 
 
                } 
 
               ), 
 
               new sap.m.Button(
 
                this.createId("clr"), 
 
                { 
 
                 text:"Clear", 
 
                 press:oController.onClear 
 
                } 
 
               ) 
 
              ] 
 
             } 
 
            ) 
 
           ] 
 
          } 
 
         ) 
 
         .addStyleClass("logContainer") 
 
        ] 
 
       } 
 
      ); 
 
     } 
 
    } 
 
); 
 

 
// <-- Login.controller.js --> 
 
sap.ui.controller(
 
    "shopcart.controller.Login", 
 
    { 
 

 
     onInit: function() { 
 
      
 
     }, 
 

 
     onLogin: function(){ 
 
      var oView = this.getView(); 
 
      var sUsername = oView.byId("uname").getValue(); 
 
      var sPassword = oView.byId("pwd").getValue(); 
 

 
      if(sUsername === "" || sPassword === ""){ 
 
       sap.m.MessageBox.alert(
 
        "Please provide your login details", 
 
        { 
 
         title: "Error" 
 
        } 
 
       ); 
 
      } 
 
      else{ 
 
       var oRouter = sap.ui.core.UIComponent.getRouterFor(this); 
 
       oRouter.navTo("welcome"); 
 
      } 
 
     }, 
 

 
     onClear:function(){ 
 
      var oView = this.getView(); 
 
      oView.byId("uname").setValue(null); 
 
      oView.byId("pwd").setValue(null); 
 
     }, 
 

 
     onForgot:function(){ 
 
      sap.m.MessageBox.alert(
 
       "Resetting is still under construction", 
 
       { 
 
        title: "Error" 
 
       } 
 
      ); 
 
     } 
 
    } 
 
); 
 

 
// <-- App.view.js --> 
 
sap.ui.jsview(
 
    "shopcart.view.App", 
 
    { 
 
     getControllerName : function() { 
 
      return "shopcart.controller.App"; 
 
     }, 
 
     createContent : function(oController) { 
 
      this.setDisplayBlock(true); 
 
      return new sap.m.SplitApp(
 
       "splitApp" 
 
      ); 
 
     } 
 
    } 
 
); 
 

 
// <-- App.controller.js --> 
 
sap.ui.controller(
 
    "shopcart.controller.App", 
 
    { 
 

 
     onInit: function() { 
 

 
     } 
 

 
    } 
 
); 
 

 
// <-- Master.view.js --> 
 
sap.ui.jsview(
 
    "shopcart.view.Master", 
 
    { 
 
     getControllerName : function() { 
 
      return "shopcart.controller.Master"; 
 
     }, 
 
     createContent : function(oController) { 
 
      return 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" 
 
          } 
 
         ) 
 
        ] 
 
       } 
 
      ); 
 
     } 
 
    } 
 
); 
 

 
// <-- Master.controller.js --> 
 
sap.ui.controller(
 
    "shopcart.controller.Master", 
 
    { 
 

 
     onInit: function() { 
 
      
 
     } 
 

 
    } 
 
); 
 

 
// <-- Welcome.view.js --> 
 
sap.ui.jsview(
 
    "shopcart.view.Welcome", 
 
    { 
 

 
     getControllerName : function() { 
 
      return "shopcart.controller.Welcome"; 
 
     }, 
 

 
     createContent : function(oController) { 
 
      return new sap.m.Text(
 
       { 
 
        text: "Welcome to Oncall Support Maintenance Fiori Application" 
 
       } 
 
      ); 
 
     } 
 

 
    } 
 
); 
 

 
// <-- Welcome.controller.js --> 
 
sap.ui.controller(
 
    "shopcart.controller.Welcome", 
 
    { 
 

 
     onInit: function() { 
 
      
 
     } 
 

 
    } 
 
);

+0

嗨塞巴斯蒂安,其工作..感谢很多!! ..最后一件事,我想知道我错了什么地方,以及这种路由如何工作..我第一次使用路由,所以..这将是有益的如果你能解释 – Sunil 2015-04-09 14:19:43

0
<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 
     <link href="css/index.css" rel="stylesheet"/> 


     <script src="resources/sap-ui-core.js" 
       id="sap-ui-bootstrap" 
       data-sap-ui-libs="sap.ui.commons" 
       data-sap-ui-theme="sap_bluecrystal"> 
     </script> 
     <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required --> 

     <script> 
      function Login(){ 
         **window.location.assign("dashboard.html#/dashboard");** 
      } 

     </script> 

    </head> 
    <body class="sapUiBody" role="application"> 
     <div id="content"> 
     <div id="content-center-alignment"> 
     <div class="inner"> 
     <img alt="" src=""> 
      <input id="txtUsername" type="text" placeholder="Enter user name"></input> 
      <br/> 
      <input id="txtPassword" type="password" placeholder="Enter your password"></input> 
         <br/> 
      <button id="btnLogin" type="submit" onClick="Login();" class="button">Login</button> 
      </div> 
     </div> 
     </div> 
    </body> 
</html> 

只需添加**在您的index.html盯着一行这样做,你可以能够重定向到另一个视图从index.html的

相关问题