Skip to Content
Author's profile photo Wouter Lemaire

OpenUI5 with bootstrap for the design

Hi,

This blog is an extension on my previous blog about Nested UI routing in OpenUI5.

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:

http://getbootstrap.com/

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:

/wp-content/uploads/2014/02/bootstrap1_389889.png

/wp-content/uploads/2014/02/bootstrap2_389890.png

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

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      someones been reading twitter

      heres one of the examples i have been working on

      Bootstrap OpenUI5 and OData

      I quite like the AngularUI bootstrap approach of using the CSS only and imitating the bootstrap javascript functionality, looks a lot lighter and easier to manage than wrangling or wrapping javascript libraries.

      jsp

      Author's profile photo Former Member
      Former Member

      Hi Wouter, John,

      Thanks for the great examples, it's something I had thought about, but not got around to trying.

      I did wonder if there would be any conflict between the JavaScript and CSS, but everything looks good!!

      Definitely something I want to experiment with...

      Thanks,

      Jason

      Author's profile photo John Patterson
      John Patterson

      When you do please share you findings

      Initially i thought handlebars templates in UI5 was a bit of a gimmick, the more i use them the more i like them. The templates for me dont have the formal or boilerplate feel of notepad controls. 

      Lately i am seeing requests coming through from people wanting to use UI5 with a corporate theme and i think that using templates is a good fit, it means you can talk with non UI5 developers in a common simple semantic language and there is potentially a lot of reuse.

      There is one drawback,  where do you put the javascript? 

      I really dont like putting jquery selectors or dom stuff in controllers, you can create custom handlebar helpers but not sure whether this would be the right place.

      looking forward to hearing others ideas

      jsp

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      The bootstrap is only on the index page. In the index I have multiple views which I put in the right place by using bootstrap. Only some javascript in the index for the routing and all other javascript is in the controller of every view. Or do you mean something else?

      Kind regards,

      Wouter

      Author's profile photo John Patterson
      John Patterson

      sorry mate, was talking more generally in reply to Jasons comment about experimenting with bootstrap and ui5, was sharing my experience in the hope that others do similar.

      jsp

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      No problem. Indeed, the more we share the more we learn!

      Kinde regards,

      Wouter

      Author's profile photo Former Member
      Former Member

      Hi John,

      Thanks for the comments, will definitely share any experiements.

      The HTML templating is interesting and not something I was aware of, gives us other options to bind data, although as you mention it seems you loose some benefits that the views/routing provide, perhaps we need a TemplateView.

      Like the idea of just using just the bootstrap css, especially with the number of themes out there, but I guess would require a fair amount of effort with all the renderers.

      Thanks,

      Jason

      Author's profile photo Former Member
      Former Member

      Hi all,

      i am currently working on a library for OpenUI5 that maps the bootstrap components to OpenUI5 controls. I released it as Apache2 License. Maybe this is interesting for you. Please take a look at pks5/ui5strap · GitHub

      Kind regards,

      Philipp