<!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="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
  id="sap-ui-bootstrap" 
  data-sap-ui-libs="sap.m,sap.ui.commons"
  data-sap-ui-resourceroots='{"view": "./view/"}' 
  data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <!-- by Denise Nepraunig @denisenepraunig -->
  
  <!-- example for a SAPUI5 MVC XML view with JSON data from a file
       and data binding based on the demokit example from sapui5:
       https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
       -->

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    
     // http://scn.sap.com/community/developer-center/front-end/blog/2014/12/10/sap-ui5-with-local-json-model
    

    //sap.ui.localResources("view");
	  
		var app = new sap.m.App({initialPage:"idApp1"});  
		var view = sap.ui.view({id:"idApp1",
		type:sap.ui.core.mvc.ViewType.JS,
		viewName:"view.Main"});
		
    app.addPage(view);  
    app.placeAt("content");  
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
// Code goes here

/* Styles go here */

sap.ui.jsview("view.Main", {

	/** 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 list.page
	*/ 
	getControllerName : function() {
		return "view.Main";
	},

	/** 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 list.page
	*/ 
	createContent : function(oController) {
 		return new sap.m.Page({
			title: "Title",
			content: [
				  new sap.ui.commons.TabStrip("ts",{
			        	 select:[oController,oController.tab],
			        	 tabs:[
			        	     
			        	       new sap.ui.commons.Tab("tab1",{
			        	    	   title:new sap.ui.core.Title({text:"Home"
			        	    		   }),//title
			        	       	    content:[
			        	       	          
			        	       	             new sap.m.Input("input",{placeholder:"Enter Text"})
			        	       	             ]
			        	       }),
			        	       new sap.ui.commons.Tab({
			        	    	   title:new sap.ui.core.Title({text:"Contact"
			        	    		   }),
			        	    		   content:[
			        	    		            new sap.m.Label({text:"This is the contact tab"})
			        	    		            ]
			        	    	   
			        	       }),
			        	       new sap.ui.commons.Tab({
			        	    	   title:new sap.ui.core.Title({text:"About"
			        	    		   }),
			        	    		   content:[
			        	    		            new sap.m.Label({text:"This is the About tab"})
			        	    		            ]
			        	    	   
			        	       }),
			        	        ]
			         })
			]
		});
	}

});
sap.ui.controller("view.Main", {

/**
* 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 bars.page
*/
//	onInit: function() {
//
//	},
tab:function(evt){
		var a = sap.ui.getCore().byId("input").getValue();
		if(a === ""){
			
			var id1 = sap.ui.getCore().byId("ts");
			id1.setSelectedIndex(0)
			
			
		}
		else{
			alert("Now it will navigates");	
		}
		
	},
/**
* 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 bars.page
*/
//	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 bars.page
*/
//	onAfterRendering: function() {
//
//	},



/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf 

bars.page
*/
//	onExit: function() {
//
//	}

});