FoBo lift module v1.2

Demo - Lift/Template with the FoBo Front-End ToolKit

FoBo <...data-lift="Front-End Toolkit Module"/>

This pages demonstrates FoBo, an generic front-end toolkit module for Lift, that, quickly and easily, will integrate some of the industry leading web-centric open source front-end toolkits (like Twitter Bootstrap, angularJS and more) into your Lift application, giving you the flexibility and choice of setting up and use the toolkits of your liking without cluttering your applications source base.

FoBo provides smooth toolkit upgrades and easy fallback/downgrade by simultaneously supporting several versions of the included toolkits and by minimizing the point of change with uniform template declarations that also provides debug-able js and css files in development and minimized files otherwise. A toolkit upgrade/downgrade can be as easy as changing the toolkit initiation code line in Lift boot.

Added to this is a growing number of FoBo API functions that give you even more ease of usage, power and control.

Other from reading the FoBo - Bootstrap Setup and Usage specific page or the more general Setup and usage section below, and the FoBo API, the most up to date way to explore and learn how to use the FoBo module is to fork and/or study the Lift v2.6 Template Applications with Bootstrap v3 or the Templating With Twitter Bootstrap. They are Lift starter template project's that includes FoBo for its Bootstrap support. You can also study this demo code on Github.

For more information about the FoBo module, take a look at the FoBo API and the readme on Github.

Also check out the integrated toolkit documentation for a comprehensive list of the toolkit’s features included in this demo.

Responsive Design with FoBo

FoBo comes with setup options for several front end toolkits including ZURB/Foundation, Twitter Bootstrap and JQuery Mobile. ZURB/Foundation and Twitter Bootstrap are both great responsive and media scalable toolkits. The JQuery Mobile toolkit is an awesome Touch-Optimized Web Framework for Smartphones & Tablets.

What is Lift?

If you ended up on this page and don’t know what Lift is, I will sum it up for you by quoting:

Lift is the most powerful, most secure web framework available today.

liftweb.net

and if you ask me, I will add Lift simply Rocks!. As David Pollak, Lift’s founder, will show you in the video, there are Seven Things that distinguish Lift from other web frameworks and here is a Hot New podcast by David Across Time and Address Space: Lift 3.0 over at SkillsMatter, Functional Programming eXchange 2013.

Lift applications are:
Secure -- Lift apps are resistant to common vulnerabilities including many of the OWASP Top 10
Developer centeric -- Lift apps are fast to build, concise and easy to maintain
Scalable -- Lift apps are high performance and scale in the real world to handle insane traffic levels
Interactive like a desktop app -- Lift’s Comet support is unparalled and Lift’s ajax support is super-easy and very secure
Modular -- Lift apps can benifit from, easy to integrate, pre built modules
Designer friendly -- Lift apps can be developed in a totally designer friendly way

The Twitter Bootstrap toolkit

The Twitter Bootstrap toolkit is a great toolkit with lots of components and candy. It’s simple and flexible and has popular user interface components and interactions. FoBo inculdes both the v2.x and v3.x series of Bootstrap

There is a separate page dedicated to setting up and using Twitter Bootstrap with FoBo icluding using FoBo's API functions and links to FoBo Bootstrap v3.x demos. Click the button to check it out.

FoBo - Bootstrap Setup and Usage

Font Awesome

Font Awesome is a iconic font designed for use with Twitter Bootstrap but it can be used as-is with other toolkits. You can see it used in this demo as a replacement of Bootstrap’s icon glyphs.

You will find more information on how to set up and use this bootstrap extension in the Bootstrap Customization section on this demo’s Bootstrap dedicated page.

AngularJS

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. It is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries.

FoBo has support for AngularJS and several Angular components including:
AngularJS - AngularJS framework.
UI Bootstrap - Bootstrap components written in pure AngularJS.
ng-grid - Angular Data Grid written in AngularJS and jQuery by the AngularUI Team.

Knockout JS

Knockout - Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.

Some of Knockouts key concepts is:
Declarative Bindings - Easily associate DOM elements with model data using a concise, readable syntax.
Automatic UI Refresh - When your data model’s state changes, your UI updates automatically.
Dependency Tracking - Implicitly set up chains of relationships between model data, to transform and combine it.
Templating - Quickly generate sophisticated, nested UIs as a function of your model data.

JQuery

JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

For user convenience FoBo wraps the Lift juery module and embeds it into the FoBo namespace.

The ZURB/Foundation toolkit

The ZURB/Foundation toolkit is a great reactive and mobile scalable toolkit. For a demonstration take a look at the included Foundation demo.

Foundation demo

The JQuery Mobile toolkit

The JQuery Mobile toolkit is a Touch-Optimized Web Framework for Smartphones & Tablets.

JQuery-mobile demo

Google Code Prettify

Google Code Prettify A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. You will find it used in many places in this demo.

Pace

Pace Automatic page load progress bar, you get a beautiful progress indicator for your page load and ajax navigation. You can see it in action when loading these pages using one of it's simplest css stylings.

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

DataTables demo

 Mobile device

Responsive Web - If you have not done it already open this demo in your favorite smart device. Get the url quick and easy by pointing your barcode reader to the barcode image.

 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.

 FoBo on GitHub

 Social











Setup and Usage

There are pre-built artifacts of FoBo available, see FoBo readme update log section for latest stable and SNAPSHOT versions. Also for more information on how to set things up there is also a integration section to show you how to integrate the module into your project.

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

This demo uses the following unusually heavy FoBo module(s) setup in lift Boot.

For bootstrap only setup and demo see FoBo - Bootstrap Setup and Usage
FoBo 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.InitParam.JQuery=FoBo.JQuery191 
                                FoBo.InitParam.ToolKit=FoBo.Foundation215
                                FoBo.InitParam.ToolKit=FoBo.PrettifyJun2011
                                FoBo.InitParam.ToolKit=FoBo.JQueryMobile110
                                FoBo.InitParam.ToolKit=FoBo.DataTables190
                                FoBo.InitParam.ToolKit=FoBo.Knockout210
                                FoBo.InitParam.ToolKit=FoBo.Bootstrap232
                                FoBo.InitParam.ToolKit=FoBo.FontAwesome321
                                FoBo.InitParam.ToolKit=FoBo.AngularJS122      
                                FoBo.InitParam.ToolKit=FoBo.AJSUIBootstrap020 
                                FoBo.InitParam.ToolKit=FoBo.AJSNGGrid204        
                                FoBo.InitParam.ToolKit=FoBo.Pace0415                                
                                FoBo.init()
                                  :

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

Lift surround template 
                        <!DOCTYPE html>
                        <html>
                          <head>
                             :
                             <!--Main css for the Bootstrap2xx module option, bootstrap-responsive is not used in v3.x-->
                             <link href="/classpath/fobo/bootstrap.css" type="text/css" rel="stylesheet">
                             <link href="/classpath/fobo/bootstrap-responsive.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>
                          <!--Demo page setup for prettyprint and bootstrap scrollspy-->
                          <body data-spy="scroll" data-target="#fobo-navbar" data-offset="40" onload="prettyPrint()">
                             :
                             <!--In end of page (for fast pageload) add the scripts you need--> 
                             <script src="/classpath/fobo/prettify.js" type="text/javascript"></script>
                             <script src="/classpath/fobo/lang-scala.js" type="text/javascript"></script>
                             <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.

DataTables setup


A simple setup 
                        <!DOCTYPE html>
                        <html>
                          <head>
                               :
                            <!-- Use the smoothness theme -->  
                            <link rel="stylesheet" type='text/css' href="/classpath/fobo/themes/smoothness.css"/>
                            <!-- <link rel="stylesheet" type='text/css' href="/classpath/fobo/themes/ui-lightness.css"/> -->
                            <link rel="stylesheet" type='text/css' href="/classpath/fobo/jquery.dataTables_themeroller.css"/>
                               :
                            <script type="text/javascript" charset="utf-8" src="/classpath/fobo/jquery.dataTables.js"></script>
                            <!-- Use the FoBo API to init the table (optional) -->
                            <script data-lift="FoBo.DataTables.dataTable?id=#example&options='bJQueryUI':true,'sPaginationType':'full_numbers'"></script>
                          </head>
                          <body">
                               :
                            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                               :
                            </table>   
                          </body>        
                        </html>

The FoBo snippet invocation will transform the API call to the following script:

The transformation 
                        <!DOCTYPE html>
                        <html>
                          <head>
                              :
                            <script type="text/javascript" charset="utf-8" src="/classpath/fobo/jquery.dataTables.js"></script>                          
                            <script type="text/javascript">
                            // <![CDATA[
                              $(document).ready(function() {
                                oTable = $('#example').dataTable({'bJQueryUI':true,'sPaginationType':'full_numbers'});
                              } );;
                            // ]]>
                            </script>
                              :
Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
KHTML Konqureror 3.1 KDE 3.1 3.1 C
KHTML Konqureror 3.3 KDE 3.3 3.3 A
KHTML Konqureror 3.5 KDE 3.5 3.5 A
Tasman Internet Explorer 4.5 Mac OS 8-9 - X
Tasman Internet Explorer 5.1 Mac OS 7.6-9 1 C
Tasman Internet Explorer 5.2 Mac OS 8-X 1 C
Misc NetFront 3.1 Embedded devices - C
Misc NetFront 3.4 Embedded devices - A
Misc Dillo 0.8 Embedded devices - X
Misc Links Text only - X
Misc Lynx Text only - X
Misc IE Mobile Windows Mobile 6 - C
Misc PSP browser PSP - C
Other browsers All others - - U
A simple client side data table with no Lift rendering hocks.


A setup via demo snippet with some json and a database backend 
                        <!DOCTYPE html>
                        <html>
                          <head>
                               :
                            <!-- Use the smoothness theme -->  
                            <link rel="stylesheet" type='text/css' href="/classpath/fobo/themes/smoothness.css"/>
                            <!-- <link rel="stylesheet" type='text/css' href="/classpath/fobo/themes/ui-lightness.css"/> -->
                            <link rel="stylesheet" type='text/css' href="/classpath/fobo/jquery.dataTables_themeroller.css"/>
                               :
                            <script type="text/javascript" charset="utf-8" src="/classpath/fobo/jquery.dataTables.js"></script>

                            <!-- Demo snippet datatable example on the dtdemo2 div that will contain a datatable with id = tableId -->
                            <script data-lift="DataTables.semiDynamicDT?on=#dtdemo2&tableId=dtexample2"> </script>

                          </head>
                          <body">
                               :
                            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                               :
                            </table>   
                          </body>        
                        </html>

The demo snippet invocation will transform the call to the following script:

The transformation 
                        <!DOCTYPE html>
                        <html>
                          <head>
                              :
                            <script type="text/javascript" charset="utf-8" src="/classpath/fobo/jquery.dataTables.js"></script>                          
                            <script type="text/javascript">
                            // <![CDATA[
                            $(document).ready(function() {
                              $('#dtdemo2').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dtexample2"></table>' );
                              $('#dtexample2').dataTable( 
                                {
                                  "bJQueryUI":true,
                                  "sPaginationType":"full_numbers",
                                  "aaData":[["Trident","Internet Explorer 4.0","Win 95+","4","X"],...,["Other browsers","All others","-","-","U"]],
                                  "aoColumns":[{
                                    "sTitle":"Rendering Engine"
                                  },{
                                    "sTitle":"Browser"
                                  },{
                                    "sTitle":"Platform(s)"
                                  },{
                                    "sTitle":"Engine Version", "sClass":"center"
                                  },{
                                    "sTitle":"CSS Grade", "sClass":"center",
                                    "fnRender": function(obj) {
                                                   var sReturn = obj.aData[ obj.iDataColumn ];
                                                   if ( sReturn == 'A' ) { 
                                                     sReturn = '<b>A</b>'; 
                                                   } 
                                                   return sReturn; 
                                                 } ;
                                  }],
                                   "aoColumnDefs":[{
                                     "bVisible":false,
                                     "aTargets":[0]
                                  }]
                                }
                              );   
                            } );           
                            // ]]>
                            </script>
                               :
A semi-dynamic data table with hocks to the demos DataTable snippet that fetches the data from a database. It also demonstrates the usage of a hiden Id column.

Col1Col2

This is a demo of code (slightly modified) contributed by Paweł Gajewski you will find his blog post on how to set this up here.

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