Routing Demo In SAPUI5

Project Name: RoutingDemo


Main.View.xml :

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.Main"  displayBlock="true" height="100%" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="AppId">
</App>

</core:View>

View1.controller.xml :

sap.ui.controller("RoutingDemo.view.View1", {

/**
* 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 View1
*/
onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);


},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(){
debugger;
this.byId("InputId").setValue("");
},
OnNumliveChange:function(evt){
if(evt.getSource().getValue()){
this.byId("InputId").setValueState("None");
}else{
this.byId("InputId").setValueState("Error");
}
},
onSubmit: function(evt) {
debugger;
var Value=this.byId("InputId").getValue();
if(Value===""){
this.byId("InputId").setValueState("Error");
sap.m.MessageToast.show("Enter Number");
}else{
this.getRouter().navTo("View2", {
val: Value


});
}

}

});

View1.view.xml :

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.View1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page1">
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId" width="30%" liveChange="OnNumliveChange" placeHolder="Enter Num" type="Number" ></Input>
<Button type="Emphasized" width="10%" text="Submit" press="onSubmit"></Button>
<ToolbarSpacer/>
</Toolbar>
</content>
</Page>

</core:View>


View2.controller.xml :

sap.ui.controller("RoutingDemo.view.View2", {


onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);
},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(evt){

this.Val=evt.getParameter('arguments').val;
this.byId("InputId2").setValue(this.Val);
},

Back:function(){

this.getRouter().navTo("View1");
},

click:function(oEvent){
  /*var Val=oEvent.mParameters.value;
   console.log(Val);*/

   var list=this.getView().byId("LIST1");
   list.getItems();


   var arrlen = this.getView().byId("LIST1").getItems().length;
   var arr = [];

   for(var i =0;i<arrlen;i++){
 
   var val = this.byId("LIST1").getItems()[i].getContent()[0].getValue();
   arr.push(val);
   }

   var Totalval=arr.reduce(this.arrSum,0);
   if(Totalval>this.Val)
   {
   sap.m.MessageToast.show("Exceed");
   }
   else{
   sap.m.MessageToast.show("ok");
   }  

},

arrSum:function(total,num){
return total+ Math.round(num);
},



});

View2.view.xml :

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.View2" showNavButton="true" navButtonPress="Back" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page2" showNavButton="true" navButtonPress="Back" >
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId2" width="30%"  type="Number" ></Input>
<ToolbarSpacer/>
</Toolbar>
</content>

<List id="LIST1"
headerText="Sum of " >


<InputListItem label="Input1">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>


<InputListItem label="Input2">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>

<InputListItem label="Input3">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>

<InputListItem label="Input4">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>

<InputListItem label="Input5">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>

</List>


</Page>

</core:View>


Component.js :

jQuery.sap.declare("RoutingDemo.Component");
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

sap.ui.core.UIComponent.extend("RoutingDemo.Component", {
metadata : {
"name" : "RoutingDemo",


routing : {
config : {
"viewType" : "XML",
"viewPath" : "RoutingDemo.view",
"targetControl" : "AppId",
"targetAggregation" : "pages",
"clearTarget" : false
},
routes : [
{
pattern : "",
name : "View1",
view : "View1"
},
{
pattern : "View2/{val}",
name : "View2",
view : "View2"
}

]
}
},
init : function() {

sap.ui.core.UIComponent.prototype.init.apply(this, arguments);



this._routeMatchedHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter(), this._bRouterCloseDialogs);     
// this._initODataModel();     

this.getRouter().initialize();
},

createContent: function() {
    var viewData = {
        component:this
    };
    return sap.ui.view({
        viewName: "RoutingDemo.view.Main",
        type: sap.ui.core.mvc.ViewType.XML,
        viewData: viewData
    });
},

getEventBus : function () {
return sap.ui.getCore().getEventBus();
}

});