FoBo lift module v1.7

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 / Angular Material Design 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 using 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. They are Lift starter template project's that includes FoBo for its Bootstrap support. You can also study fobo example code on Github.

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

Responsive Design with FoBo

FoBo comes with setup options for responsive front end toolkits including Angular Material Design and Twitter Bootstrap. Angular Material Design and Twitter Bootstrap are both great responsive and media scalable toolkits.

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 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 for using Lift/boostrap based UI components and links to other 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 like Angular Material. 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. Used with Lift 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 JS libraries.

FoBo has support for AngularJS and several Angular components including:
AngularJS - AngularJS framework.
Angular Material - Implementation of Material Design in Angular.
UI Bootstrap - Bootstrap components written in pure AngularJS.
ng-grid - Angular Data Grid written in AngularJS and jQuery by the AngularUI Team.
ui-grid - Angular Data Grid written in native AngularJS implementation, no jQuery

Angular Material

The Angular Material project is an implementation of Material Design in Angular.js. The Angular Material project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Althugh Angular Material is "just a" Angular module it merrits it's own section as it gives you front-end components that will integrate seamlessly with your Lift/FoBo application.

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 Prettify used in some places in this demo.

HighlightJS

highlight.js A more reasent (than Google Code Prettify) and popular javasript / css module for syntax highlighting. Higlight JS includes 70+ styles and highlighting for a lot of languages (including Scala). Notably it dose, by choice, not support line numbers.

You will find highlight js used in some 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 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.Toolkit.Init=FoBo.Toolkit.JQuery1113                           
    FoBo.Toolkit.Init=FoBo.Toolkit.PrettifyJun2011
    FoBo.Toolkit.Init=FoBo.Toolkit.HighlightJS930
    FoBo.Toolkit.Init=FoBo.Toolkit.Bootstrap337
    FoBo.Toolkit.Init=FoBo.Toolkit.FontAwesome430      
    FoBo.Toolkit.Init=FoBo.Toolkit.Pace102  
      :

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

Lift surround template 

<!DOCTYPE html>
<html>
  <head>
    :
    <!-- FoBo css setting-->
    <link href="/classpath/fobo/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="/classpath/fobo/bootstrap-theme.css" type="text/css" rel="stylesheet">
    
    <!--Init of highlight js avoiding inline javascript in Lift 3-->
    <link rel="stylesheet" href="/classpath/fobo/highlight/gruvbox-dark.css">
    <script src="/classpath/fobo/highlight/highlight.pack.js"></script>
    <script data-lift="FoBo.HLJS.initHighlightingOnLoad"></script>
    
    <!--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