The FoBo module gives your Lift project seamless front-end toolkit integration. This page focus on the FoBo/Lift Bootstrap v3.x and includes general bootstrap usage and information on how to use some of FoBo's API functions. There is also a Lift v3.0 Template Applications - On Github that uses FoBo for it's Bootstrap v3.x and FoBo's BootstrapMegaMetaProtUser for ProtoUser views. See the slightly pimped live Demo and the FoBo's API for more information.

For general information about the FoBo module see the FoBo Demo Home.

Although the benefits of using the FoBo module is several without even using the FoBo Bootstrap API hooks (see demo ingress section), the sections below will take you through the FoBo module setup to enable Bootstrap in your Lift project and give you some clues on how you can make use of the API functions, to for instance, utilize Lifts SiteMap to populate bootstrap menus and more.

 Mobile device

Responsive Web - If you have not done it already open this demo in your favorite smart device.

 Scroll

Scroll the page to see the navbar scrollspy function provided by bootstrap.

 Drag

Drag the window to see bootstraps (and foundations) fluid and reactive grid with mobile scalabilty in action.

Getting Started

The following section will show you how to set up and use FoBo in your Lift project.


Starter Project

Kick start! If you are about to start a new Lift project that includes FoBo with Bootstrap v3.x you can get a kick start by forking the Lift v3.0 Template Applications - Bootstrap v3.x project it uses the FoBo module pre-set-up for use with a v3.y.z release of Bootstrap.

If you already have a Lift project that you want to extend with FoBo/Bootstrap functionality the next section is for you, so read on for setup information.


Module Setup

To integrate FoBo for usage in your existing Lift project this section will show you how to set it up. I am assuming you are using SBT but if you are using Maven or some other build system you will probably be able to extract the needed information, its pretty straight forward and easy.

SBT setup for FoBo usage
 ⋮
// Lift
liftVersion := "3.1.0"

liftEdition := { liftVersion apply { _.substring(0, 3) } }.value

libraryDependencies ++= {
  "net.liftweb" %% "lift-webkit" % liftVersion.value % "compile" ::
    "net.liftmodules" %% ("fobo" + "_" + liftEdition.value) % "2.0" % "compile" ::
    Nil
}

// Customize any further dependencies as desired
libraryDependencies ++= {
  "ch.qos.logback" % "logback-classic" % "1.0.6" ::
    "org.eclipse.jetty" % "jetty-webapp" % "8.0.3.v20111011" % "container" ::
    "org.eclipse.jetty" % "jetty-plus" % "8.0.3.v20111011" % "container" ::
						:
						:
    Nil
}
						
For more information on the dependency setup for both Maven and SBT see the Dependency settings section in FoBo project readme.
The resolvers section:
For your convenience pre-compiled FoBo module artifacts currently resides at the same repository as Lift and other lift modules so there is no need for additional resolvers.
The library dependency section:
Declare the FoBo lift module line "net.liftmodules" %% "fobo_[major.minor Lift version]" % [FoBo module version]" % "compile" with the version string starting with the lift version number used for your project and appending the module version on the form "-X.Y.Z"
Examples on github:
Here is the complete build.sbt file used in Lift v3.0 Template Applications - Bootstrap v3.x

To initiate the FoBo module, chose the Toolkit option(s) you prefer and then call FoBo.init() from your lift projects Boot.

FoBo Bootstrap setup in Lift Boot
   ⋮
import net.liftmodules.fobo

/**
 * A class that's instantiated early and run.  It allows the application
 * to modify lift's environment
 **/
  class Boot extends Loggable {
    def boot {
           ⋮
      fobo.Toolkit.init=fobo.Toolkit.JQuery1111
      fobo.Toolkit.init=fobo.Toolkit.Bootstrap335
      fobo.Toolkit.init=fobo.Toolkit.FontAwesome430
           ⋮     
					

In Lift's html5 template:s add (depending on your setup) something like this:

Lift surround template
<!DOCTYPE html>
<html>
  <head>
         ⋮
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--Main css for the Bootstrap v2.x module option -->
     <link href="/classpath/fobo/bootstrap.css" type="text/css" rel="stylesheet">
     <link href="/classpath/fobo/bootstrap-theme.css" type="text/css" rel="stylesheet">
     <!--app specific tweeks and overrides external to module goes here-->
     <link href="[path to your projects app css]" type="text/css" rel="stylesheet">  
         ⋮                       
  </head>
  <!--Page setup with bootstrap scrollspy-->
  <body data-spy="scroll" data-offset="40">
         ⋮
     <!--In end of page (for fast pageload) add the scripts you need--> 
     <script src="/classpath/fobo/bootstrap.js" type="text/javascript"></script>
         ⋮
  </body>        
</html>    
						

Note the uniform setup without any version references in the html templates or any appended -min.css/-min.js as FoBo takes care of that for you, making way for a smooth(er) toolkit upgrade. For more information see the FoBo modules Github.


Module/Toolkit Upgrad

In most cases the only things you need to change in your project to upgrade to a newer toolkit version is the FoBo modules version number in build.sbt "net.liftmodules" %% ("fobo" + "_" + liftEdition.value) % "foboVersion.value" % "compile" and the init param line fobo.Toolkit.init = fobo.Toolkit.BootstrapXYZ in your projects Boot.scala file.

If there are some breaking changes in the toolkit you may need to downgrade to your previous toolkit version and take messure to fix the problem, for that you just have to change back the init param line in Boot.scala. FoBo will always have a reasonable number of toolkit versions avwailable in it's module bundle.

A toolkit version that is to be removed will always be marked as depricated prior to be removed. A depricated toolkit version will always (if nothing else has been comunicated) have a compatible upgrade awailable.

Bootstrap Customization

Font Awesome

You can add to the bootstrap provided icon set with Font Awesome this is done by using the init parram fobo.Toolkit.init = fobo.Toolkit.FontAwesomeXYZ. The v4.x sereies of the Font Awesome icon set is compatible with the Bootstrap v3.x serie.

The Font Awesome icon set is compatible with bootstrap but can be used as-is even if you are not using bootstrap.
Font Awesome - Boot.scala Setup
⋮
fobo.Toolkit.init=fobo.Toolkit.Bootstrap335
fobo.Toolkit.init=fobo.Toolkit.FontAwesome463
⋮
Font Awesome - Template Setup
<link rel="stylesheet" type='text/css' href="/classpath/fobo/bootstrap.css"/>
 :
<link rel="stylesheet" href="/classpath/fobo/font-awesome.css">
Font Awesome Example - Rendering login icons

Font Awesome Example - The code
			
<form class="form-horizontal">
<div class="row">
  <div class="col-sm-3">
    <label class="sr-only" for="exampleInput">Email address</label>
    <div class="input-group">
    <div class="input-group-addon""><i class="fa fa-envelope"></i></div>
    <input type="email" class="form-control" id="exampleInput"  placeholder="Email address">
  </div>
</div> 
<div class="row">
  <div class="col-sm-3">
    <label class="sr-only" for="exampleInput2">Password</label>
    <div class="input-group">
    <div class="input-group-addon""><i class="fa fa-key"></i></div>
    <input type="password" class="form-control" id="exampleInput2"  placeholder="Password">
  </div>
</div> 
</form>   
    

This is just one smal example, the FoBo Github button (in the upper right on this page) is using font-size: 24px; to slightly scale up the icon with a Font Awesome Social icon, the social icons is one set of extra icons available in Font Awesome, in fact all icons on this page is replaced by Font Awesome icons but as it is fully compatible with Twitter Bootstrap it blends in nicely.


FoBo's Bootstrap Meta Mega Proto User (since v1.1)

FoBo comes with a MetaMegaProtoUser trait BootstrapMegaMetaProtoUser that you can extend your mapper User object with to get Bootstrap v3.x ProtoUser form views. For a example see the code.module.User object in the lift_advanced_bs project at Lift v3.0 Template Applications - On Github and the live Demo for viewing the result.


FoBo.Bootstrap Snippets

The FoBo module comes with some convenience functions (snippets, optional to use) that will, among other things, help you, build menues, create popups and tooltips and more. For more information see the FoBo API (latest) .


The FoBo.Bs3NavLiList Snippet (since v1.3)

If you are on a desktop computer (wide screen device) the Affix menu to the left uses this snippet to build it's list of ancors.

Bs3NavLiList Usage
<span data-lift="FoBo.TBNavLiList.builder?group=[LocGroup-Name]"></span>

The above shows you how to transform SiteMap items to list items in a NavLiList.

Bs3NavLiList Example - The rendering

The following is a example usage of the Bs3NavLiList (as seen above)

Bs3NavLiList Example - The template code
					
<!DOCTYPE html>
<html>
    ⋮
  <body">
     ⋮
<ul class="nav nav-list navlist-demo" style="max-width: 220px;">
  <span data-lift="FoBo.Bs3NavLiList.builder?group=liboAffix"></span>
</ul>			
       ⋮ 
  </body>        
</html> 					 
					  

The FoBo.Bs3Navbar Snippet (since v1.0)

The FoBo.Bs3Navbar snippet gives you a simple way to build your Bootstrap nav from Lift SiteMap item's, combine this with the use of the FoBo.TBLocInfo object and you can do pretty much anything you are used to only a lot easier and with a lot less code.

Navbar Usage
<span data-lift="FoBo.Bs3Navbar.builder?group=[LocGroup-Name]"></span>
<span data-lift="FoBo.Bs3Navbar.builderPullRight?group=[LocGroup-Name]"></span>

The above shows you how to transform SiteMap items to nav items in a NavBar. You can specify one or more nav builder's, i.e groups of items, on a NavBar where each group is specified by it's Lift LocGroup belonging. Items in a builder group can be pulled to the right in the NavBar by using the pull right builder.

Bs3Navbar Example - The rendering

This example represent a typical navbar that can be fixed to the top or the bottom of the page. It can also, like this one, be used with a reactive fluid grid container to make it scale down and be usefull on mobile devices and pads. In this example there are also menu dividers between the Home and Content items and in the dropdown menu between the bootstrap and FoBo documentation items, rendering of this decorators is acomplished by the use of the FoBo.TBLocInfo object in the SiteMap like FoBo.TBLocInfo.DividerVertical and FoBo.TBLocInfo.Divider respectively.

TBNavbar Example - The template code
					
<!DOCTYPE html>
<html>
    ⋮
  <body">
     ⋮
   <div class="navbar navbar-default"> <!-- for example 'navbar navbar-default navbar-fixed-top' -->
     <div class="container-fluid">
       <div class="navbar-header ">
         <button type="button" class="navbar-toggle" data-toggle="collapse"
             data-target=".navbar-ex1-collapse">
             <span class="sr-only">Navbar Example</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Navbar Example</a>
       </div>	   
       <div class="collapse navbar-collapse navbar-ex1-collapse">
          <span data-lift="FoBo.Bs3Navbar.builder?group=mdemo1"></span>
          <span data-lift="FoBo.Bs3Navbar.builderPullRight?group=mdemo2"></span>
       </div>          
     </div>
   </div>
       ⋮ 
  </body>        
</html> 					 
					    
TBNavbar Example - The SiteMap Showing the LocGroup's that will be transformed into Bootstrap Navbar items for this example.
   
   ⋮
  def sitemap = SiteMap(
     ⋮
    liboIndex,
    hdivider1 >> LocGroup("mdemo1") >> FoBo.TBLocInfo.DividerVertical,   
    contentDD >> LocGroup("liboTop1","mdemo1") >> PlaceHolder submenus ( 
      bootstrap3xxDoc ,
      divider1  >> FoBo.TBLocInfo.Divider,
      foboApiDoc 
    ), 
     ⋮  
  ) 
						

If you wish to take a closer look, here is the Boot.scala file on Github.


The FoBo.Bs3NavLiList Snippet (since v1.0)

The FoBo.Bs3NavLiList snippet gives you a simple way to build a Bootstrap navlist from Lift SiteMap item's,

Bs3NavLiList Usage
<span data-lift="FoBo.Bs3NavLiList.builder?group=[LocGroup-Name]"></span>

The above shows you how to transform SiteMap items to list items in a Navlist.

Bs3NavLiList Example - The rendering

This navlist example have some SiteMap menu link items and nav header's/menu lable's. The label's is set in Lift's SiteMap by "marking" the item as a FoBo.Bs3NavLiList.NavHeader item.

Bs3NavLiList Example - The template code
					
<!DOCTYPE html>
<html>
    ⋮
  <body">
     ⋮
<ul class="well" id="exnavlilist">
  <span data-lift="FoBo.Bs3NavLiList.builder?group=nldemo1"></span>
</ul>			
       ⋮ 
  </body>        
</html> 					 
					    
TBNavlist Example - The SiteMap Showing the LocGroup nldemo1 that will be transformed into Bootstrap Navlist items for this example.
 
   ⋮
  def sitemap = SiteMap(
       ⋮
    navHeader1 >> LocGroup("nldemo1") >> FoBo.TBLocInfo.NavHeader,   
    index >> LocGroup("mdemo1","nldemo1"),
    navHeader2 >> LocGroup("nldemo1") >> FoBo.TBLocInfo.NavHeader,
       ⋮
    contentDD >> LocGroup("liboTop1","mdemo1") >> PlaceHolder submenus ( 
           ⋮
      bootstrap3xxDoc ,
           ⋮
      foboApiDoc 
    ), 
       ⋮  
    nlHelp >> LocGroup("nldemo1")     
  ) 
						

If you wish to take a closer look, here is the Boot.scala file on Github.


FoBo SiteMap builder with a MetaMegaProtoUser AddUserMenusXXXX method

If you are using net.liftweb.record.MetaMegaProtoUser and any of the AddUserMenusXXXX methods and are struggeling with how to set it up with a Fobo menu builder for example to use it with user authentication that renders the links dependant on if the user are authenticated or not the following tips may be of help.

Tips: Set the menu LocGroup in your MetaMegaProtoUser object by overriding the globalUserLocParams method.

For more information see FoBo sitemap with User.AddUserMenusAfter (authentication) ... how to?



The FoBo Demo is Powered by Lift using the FoBo Module
with Twitter Bootstrap and Font Awesome
Design by Peter Petersson