Setting up the SplitApp for our Master-Detail Views

Now that our component and router are both set up, let's reconfigure our index to properly manage loading and unloading our Master-Detail application.

Replace default App view with a SplitApp

1. Open /WebContent/view/App.view.xml.

   If this is the first XML file you've opened in the project, Eclipse sometimes defaults to a design view of XML. There is a tab near the bottom which allows you to switch to the Source view. Do that now.

2. Replace it's contents with:

   <mvc:View
       xmlns:mvc="sap.ui.core.mvc"
       displayBlock="true"
       xmlns="sap.m">
       <SplitApp id="splitApp" />
   </mvc:View>
   

   We are cleaning up the default <View> tag, and assigning a single sap.m.SplitApp as our sole control. Our odatalabclient.Component's routes will assign the Master and Detail views into this SplitApp control. You will also notice that this is the rootView in our odatalabclient.Component.

   Let's take a look at running the application now to make sure things are still good.

3. Ensure your Tomcat server is still running by clicking on the Servers tab. If it says [Started, Synchronized], then your server is still up and refreshed with your latest file changes.

4. Open your browser to http://localhost:8080/odatalabclient/

You should see a screen that looks similar to the last, but you shouldn't see "Title" at the top anymore. You will also see errors in the console, looking for resource odatalabclient/view/Master.view.xml. This is because in our UIComponent, we set up route "" which will try and load the Master view. Let's get that next.

---