FoBo lift module v1.4

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

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

This pages introduces you to FoBo, a comprehensive 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.

KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

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.

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.

 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.PrettifyJun2011
                                FoBo.InitParam.ToolKit=FoBo.Bootstrap232
                                FoBo.InitParam.ToolKit=FoBo.FontAwesome321
                                FoBo.InitParam.ToolKit=FoBo.AngularJS1219      
                                FoBo.InitParam.ToolKit=FoBo.AJSUIBootstrap070 
                                FoBo.InitParam.ToolKit=FoBo.AJSNGGrid207        
                                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.

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