Hi,
This blog is an extension on my previous blog about Nested UI routing in OpenUI5.
There I talked about navigation between pages without changing the whole page but only some parts of it. One of the advantages of this concept is that it can have a master page, which is the index.html page. In the previous blog I've created this page by using HTML and CSS. You can't design this page with the OpenUI5 components when working with this concept. The OpenUI5 components are only available when they are attached to the different parts (DIVs) of the master page.
So we have one design in the master page (index.html) with multiple components/views in it. Besides HTML and CSS we could also use a front-end framework like bootstrap! With this framework you can easily create your design, as well for web as for mobile! You can even use it to create responsive designs:
By just including the bootstrap css, we are now able to use all the features of bootstrap.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Now I’m able to use bootstrap for my css. So I changed the body of my index page to the following:
<body class="sapUiBody" role="application"> <div class="container-fluid" > <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div id="headerImage" class="col-md-4"><img src="images/sapui5.png"></div> <div id="subheader" class="col-md-8"> <div id="headerTitle" class="row" data-type="text/x-handlebars-template"><h1>{{text path="/title"}}</h1></div> <div id="headerWidget" class="row"></div> </div> </div> <div class="row"><hr /></div> <div id="menu" class="row text-center"></div> <div class="row"><hr /></div> <div id="main" class="row"> <div id="contentWidget" class="col-md-4"></div> <div id="content" class="col-md-8"></div> </div> </div> </div> </div> </div> </div> </body>Which will result in the following output:
In my opinion, Bootstrap is really powerful and makes the life of a web developer easier. This is one of the reasons to use Nested UI Routing in OpenUI5.
It’s also a good example of using multiple frameworks/libraries together!
You can find the index.html in the attachment and the full project at github: lemaiwo/OpenUI5-with-BootstrapUI · GitHub
Hope your seeing the benefits of it!
Kind regards,
Wouter