Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata
In this tutorial, I will show you how to get started with UI5. I will also use the ui5 router component.
start eclipse set my work space to my local web host XAMPP
 create sap ui5 application file->new->other-> search SAP -> Application project->Target device: Mobile,
 create initial view (check)this will create the first J S view which I will use as a parent container for my other views App.js --> add the mobile app component on the left of the generated project with the first view in our first view app.view.js we're going to replace the generated code with the root container of our application sap.m.app
 set display block to true: we do this to embed the other views in this root container
Now we create the first html view which will be embedded to the root container app view.js
right click->new->others->select view -> HTML ->call this view over view 
 On this view we add a label and a button, this will allow us to navigate to the next page.
 lets create a event handler for our button in the controller of this view, for the moment we will just program an alert.
 create the component just a simple Java script file,right click web content-> new -> file->Javascript-> name component.js
 This will be the start of my application this is also the place where I will define the routing of my application.
 In the component.js we extend the UI component and call it com.tutorial.component in the config of the router we define the type of views: in our case HTML 
 we also define our path for our views. In the router I will define which is the parent component for all the views.which will be the nav Container from the app view.
 Next step is to define our routes I have to define every URL pattern for every view,we define URL, name for the route and the name of the view which we want to navigate to.
we start defining our first HTML view, we create the init method of our extended component,in this init we will initialize our router.
 we also program a destroy function where we will destroy the router handler.
 create the createContent method --> here I initialize the app view which contains the navcontainer our component.js is ready, we have to initialize our application in the Index.html.
 change the SDK to desired UI5 SDK. we define the path of the resources so the application can find all of the views and the component.js replace the generated code with an own implementation.
initialize the shell --> I add my component.js to the shell. So the shell will be created in the index file, the shell creates the component, the component initialize the app.view  and has the routing component which contains the connection between the app.view and the other views.
 lets test what we build so far. To find my project on my local host xampp,
Right click on the project--> properties and copy after htdocs 
 i make sure my localhost is started on go to my browser.
 here i surf to the localhost plus i add the copied path.so this is what we build so far.
 Next we will create a second HTML view.
so we can actually show some navigation between views by using routing.
 create second view choose HTML radio button in this view.
we will add a BACK button and a label.
 we will add the Back button in the header of the page  we create our function to navigate back, we use the Window.history to navigate back.
 Define the route for second view in the component.js for the url pattern we use the second page.
 In the overview controller we changed the button eventhandler. we get the router component and navigate to the second view for the navigation.
We use the name of the route which is in our case the same name as the view .
 So we've created a second view with a back button. we've changed the router component in the component.js and we've changed the eventhandler in the controller of the first html view.
 So we can now navigate from the first view to the second view and back.
 We hope you found this SAP UI5 information helpful and wish you good luck.