Using Bootstap to Create a Responsive Application Design - Part 2

In Part 2, I want to share the code that I used to create the navigation for my application.   The technique I am using with Bootstrap, is very analogous to using the extlib Application Layout Control.   You create your layout once in a custom control, and then add it to each xpage in your application.   You then add content in the facet area of your layout.  

Presently, my layout is basically done, and I have shifted to creating the content of the application.   The application is fairly straightforward, so I was able to put the whole layout in two custom controls.   The screen shots in the previous post will show you what this looks like.

The layout custom control shown here, contains the Bootstrap grid, and calls the header custom control.  I am using a grid of 1-10-1.


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

<!-- Fix for IE8 -->
<xp:text escape="false" id="computedField1"
rendered="#{javascript:context.getUserAgent().isIE(0,8)}">
<xp:this.value><![CDATA[#{javascript:"<style type='text/css'>body {padding-top: 45px; padding-bottom: 40px; }</style>"}]]></xp:this.value>
</xp:text>

<div class="container-fluid">
<xc:header showCategories="true" />
<div class="row-fluid">
<div class="span1 visible-desktop">
<xp:callback facetName="leftColumn" disableTheme="true" />
</div>
<div id="mainContent" class="span10">
<xp:callback disableTheme="true" />
</div>
<div id="rightColumn" class="span1 hidden-phone">
<xp:callback facetName="rightColumn" disableTheme="true" />
</div>
</div>
</div>
</xp:view>

The header custom control is more complicated and contains different menu listings for a desktop and mobile device.   This CC contains all the menu navigation.  

 Here is a key to what each section does.  See the corresponding code in red.

1. Uses Google Web font
2. Creates Bootstrap Navbar fixed to the top
3. Creates Mobile menu button that only shows when collapsed
4. Creates the "Brand" which is the company name, I show different brands for different devices
5. Creates dropdown capable menu
6. Creates listing with dropdown values
7. Create a caret to indicate dropdown choices
8. Creates different listing of menu items for mobile devices, this way I can limit choices a mobile sees if I choose.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

1.)<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet'
type='text/css' />
2)<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
3)<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
</a>
4)<a class="brand" href="/po/po.nsf">
<span class="hidden-phone float-left">
<xp:image url="/harmons_reverse.png" id="image1" />
<span id="brand-label-big">
<xp:label value="&#160;&#160;Purchase Orders" id="label1" />
</span>
</span>
<span class="visible-phone" id="phone-text">
<xp:image url="/harmons_reverse_phone.png" id="image2" />
&#160;&#160;Purchase Orders
</span>
</a>
5)<div class="visible-desktop dropdown">
<ul class="nav nav-pills">
<li class="${javascript:view.pageName == '/follow.xsp' ? 'active' : ''}">
6)<a class="dropdown-toggle" data-toggle="dropdown" href="#">
View PO's
7)<b class="caret" /></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<xp:link text="Active PO's"  value="/Active_PO.xsp" />
<xp:link text="Pending PO's" 
value="/Pending_PO.xsp" />
<xp:link text="Completed PO's" 
value="/Completed_PO.xsp" />
<li class="divider" />
<xp:link text="All PO's" value="/All_PO.xsp" />
</ul>
</li>
<li class="${javascript:view.pageName == '/about.xsp' ? 'active' : ''}">
<xp:link text="Manage Vendor Info" />
</li>
<li
class="${javascript:view.pageName == '/contact.xsp' ? 'active' : ''}">
<xp:link text="Create New PO" 
value="/New_PO.xsp" />
</li>
</ul>

8)<div class="collapse nav-collapse hidden-desktop dropdown">
<ul class="nav nav-list">
<li>
<xp:link text="Create New PO" 
value="/New_PO.xsp" />
</li>
<li>
<xp:link text="Active PO's" value="/Active_PO.xsp" />
</li>
<li>
<xp:link text="Pending PO's"  value="/Pending_PO.xsp" />
</li>
<li>
<xp:link text="Completed PO's" 
value="/Completed_PO.xsp" />
</li>
<li>
<xp:link text="All PO's" value="/All_PO.xsp" />
</li>
<li>
<xp:link text="Manage Vendor Info" />
</li>
</ul>
</div>
</div>
</div>
</div>
</xp:view>