FoBo - A Modular Front-End Toolkit module for Lift

FoBo is a Lift module, composed of several Toolkit modules that includes industry leading open source front end toolkits for developing mobile scalable responsive web applications that will jazz up your Lift applications with the toolkit(s) of your choice.

The toolkit modules is in it's turn composed of a API module and a Resource module artifact making the usage of FoBo scalable and flexible.

A live demo and introduction to using the FoBo module(s), including unified Scaladoc API documentation and links to running examples of starter templates and more, can be seen at the FoBo Template Demo.

Using the Lift module you will get a hassle free inclusion and smooth upgrades of toolkits, you decide what toolkits artifacts and versions to enable. The FoBo module is making development, maintenance, upgrade and fall-back quick and easy (typically a one liner change in lift boot), by simultaneously supporting several versions of the included toolkits and, without code or reference changes, providing debug-able js and css files in development and minimized files otherwise.

Using this module you will also get a clean separation of the toolkit files and your application specific resources as the module dose not clutter your applications web-app resources directory.

FoBo API

Some of the FoBo toolkit modules also includes a evolving FoBo/Lift API module that includes snippet:s and helper object:s (see API documents for usage) that will take care of some common toolkit and component initiation and usage, like lift site-map to bootstrap or Angular Material menu builders, breadCrumbs, resource injection, script generation and more.

FoBo - Lift starter template

Bootstrap v4 A Lift v3.x starter template with FoBo setup using Bootstrap v4.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here FoBo-Demo

Material Design A Lift v3.x starter template with FoBo setup using Angular Material and FoBo's MaterialMegaMetaProtoUser (for mapper ProtoUser views) is available from here FoBo-Demo

Bootstrap v3 A Lift v3.x starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v3.x Template Applications

Bootstrap v3 A Lift v2.6 starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v2.6 Template Applications

For more information on how to get started with FoBo's starter templates see Quick Start with Lift Template Applications

If you have ideas and suggestions let us know!

Contributions

Improvements, contributions and suggestions are welcome! Pick a issue marked as ready by the waffle badge above or open a new issue and start working on a PR. Please see the Contribution Document. You can also leave a issue report or drop a question/suggestion to the Lift's mailing list

As FoBo is using this Git branching model the main branch is just updated for releases so your pull requests will, by default, be against the Development branch

Integration into your project

Dependency settings (General)

This section describes the general naming pattern for using any of FoBo's modules.

SBT: Add this to your project build.sbt files libraryDependencies section

"net.liftmodules" %% "moduleName_x1.y1" % "x2.y2[.z2][-SNAPSHOT/rcx/mx]"

Maven: Add this in the dependency section of your pom file.

<dependency>
  <groupId>net.liftmodules</groupId>
  <artifactId>moduleName_x1.y1_a.b.c</artifactId>
  <version>x2.y2[.z2][-SNAPSHOT/rcx/mx]</version>
</dependency>

Where x1.y1 is Lift major and minor version numbers and a.b.c is Scala version number and x2.y2.[z2] is the module's major x2, minor y2 and eventual incremental numbers z2 followed by a eventual SNAPSHOT release candidate (rcX) or milestone (mX) version part.

Dependency settings (FoBo's FoBo module)

To get access to all FoBo's toolkit, resource and api modules you can use FoBo's FoBo module as shown bellow. This is the simplest and probably most common way to use FoBo.

Setup example:

SBT:

"net.liftmodules" %% "fobo_3.3" % "2.1.0"

Maven:

<dependency>
  <groupId>net.liftmodules</groupId>
  <artifactId>fobo_3.3_2.12.6</artifactId>
  <version>2.1.0</version>
</dependency>

The example shows how to include the FoBo/FoBo module built for lift 3.3.x. If you are using maven observe that the artifact id also needs the Scala version.

Dependency setting (Toolkit / API / Resource)

To get access to exactly the FoBo toolkit, resource and/or api module(s) you expect to use in your project you can use something like the following. For more information see respective Toolkit, API or Resource modules readme.

Setup example using the FoBo/Lift Bootstrap3 API module:

SBT:

"net.liftmodules" %% "fobo-twbs-bootstrap4-api_3.3" % "2.1.0"

Maven:

<dependency>
  <groupId>net.liftmodules</groupId>
  <artifactId>fobo-twbs-bootstrap4-api_3.3_2.12.6</artifactId>
  <version>2.1.0</version>
</dependency>

The example shows how to include the FoBo Bootstrap4 API module built for lift 3.2.x. If you are using maven observe that the artifact id also needs the Scala version.

Lift FoBo boot hooks

Alternative: Using the FoBo/FoBo module to get access to all FoBo's toolkit, resource and api modules, use the following into your lift Boot

import net.liftmodules.fobo
  :    
//initiate a toolkit to initiate usage of both resource and api
fobo.Toolkit.init = fobo.Toolkit.[ToolkitObjectXYZ]
fobo.Toolkit.init = fobo.Toolkit.[additional toolkit object name]
//you can also initate one or more resources modules (excluding ev. Lift/FoBo API)
fobo.Resource.init = fobo.Resource.[ResouceObjectXYZ]
fobo.Resource.init = fobo.Resource.[additional resource object name]
//you can also initiate one or more API modules (providing the corresponding resource yourself)
fobo.API.init = fobo.API.[APIObjectXYZ]
fobo.API.init = fobo.API.[additional api object name]

Alternative: Using one of FoBo's Toolkit, Resource and/or API modules

import net.liftmodules.{foboXY => fobo}
  :
//as above if toolkit
fobo.Toolkit.init = fobo.Toolkit.[ToolkitObjectXYZ]
//as above if resource
fobo.Resource.init = fobo.Resource.[ResouceObjectXYZ]
//as above if api
fobo.API.init = fobo.API.[APIObjectXYZ]

Alternative: Using several independently added FoBo modules (but not all)

import net.liftmodules.{foboXY1,foboXY2}
  :
//toolkits
foboXY1.Toolkit.init = foboXY1.Toolkit.[ToolkitObjectXYZ]
foboXY2.Toolkit.init = foboXY2.Toolkit.[ToolkitObjectXYZ]
//resource
foboXY1.Resource.init = foboXY1.Resource.[ResouceObjectXYZ]
foboXY2.Resource.init = foboXY2.Resource.[ResouceObjectXYZ]      
//api
foboXY1.API.init = foboXY1.API.[APIObjectXYZ]
foboXY2.API.init = foboXY2.API.[APIObjectXYZ]

Lift FoBo Template hooks

Put something like the following in your Lift template(s) head section (see below for available names)

<link rel="stylesheet" type='text/css' href='/classpath/fobo/[css file name]'>
<link rel="stylesheet" type='text/css' href='/classpath/fobo/[tolkit-name]/[css file name]'>
<link rel="stylesheet" type='text/css' href='/classpath/fobo/[tolkit-name]/[another css file name]'> 
<link rel="stylesheet" type='text/css' href='/classpath/fobo/[a third css file name]'>
  :	
<link rel="stylesheet" type='text/css' href='[path/to/you/app/specific/css/file/in/the/webapp/dir]'>
  :
<script type="text/javascript" src="/classpath/fobo/[script file name]"></script>
<script type="text/javascript" src="/classpath/fobo/[tolkit-name]/[script file name]"></script>
<script type="text/javascript" src="/classpath/fobo/[tolkit-name]/[another script file name]"></script>
<script type="text/javascript" src="/classpath/fobo/[a third script file name]"></script>
  :

For more information see readme in respective toolkit module. You can now also use use FoBo's resource injection snippet to inject all your FoBo css and js resources

<link data-lift="FoBo.Resources.injectCSS?resources=file name,another file name,a third file name,..."></link>	
<link rel="stylesheet" type='text/css' href='[path/to/you/app/specific/css/file/in/the/webapp/dir]'>
<script data-lift="FoBo.Resources.injectJS?resources=file name,another file name,a third file name,..."></script>

For more information see FoBo API: Resources

Module names

The following is a list of names that can be used in Lift Boot either pulled in by the FoBo meta module or as stand alone (sub) modules. For more information se respective sub modules readme.

• AngularJSXYZ with components (AJSUIBootstrapXYZ, AJSUIGridXYZ, AJSNGGridXYZ, AJMaterialXYZ)
• BootstrapXYZ
• FontAwesomeXYZ
• HighlightJSXYZ
• JQueryXYZ
• JQueryMigrateXYZ
• PaceXYZ
• PrettifyXYZ
• Popper

Where X is major, Y minor and Z incremental version numbers as seen in the Toolkits list above (for example BootstrapXYZ will be Bootstrap230 for Twitter Bootstrap v2.3.0) For more information on how to set this up see below.

FoBo Modules -- Toolkit:s and available versions

FoBo artifacts is available for: Lift 2.4, 2.5, 2.6.x, 3.0.x, 3.1.x, 3.2.x and 3.3.x

• FoBo This module contains all the bellow listed toolkit modules.

FoBo is built up of several toolkit that in it's turn is built up of corresponding api and resource modules. Apart from being accessible from the FoBo / FoBo module the toolkit, api and resource modules is also available for use separately.

The FoBo / FoBo module includes the following modules and supports the following toolkit versions

• FoBo-AngularJS [v1.0.6, v1.2.11, v1.3.15, v1.4.1, v1.4.8, v1.5.3] (and components see FoBo-AngularJS )] - Angular
• FoBo-TwBs-Bootstrap4 [v4.0.0, v4.1.3] - Bootstrap 4.x
• FoBo-TwBs-Bootstrap3 [v3.0.0, v3.0.1, v3.1.1, v3.2.0, v3.3.5, v3.3.6, v3.3.7] - Bootstrap 3.x
• FoBo-Twitter-Bootstrap [v2.3.2] - Twitter Bootstrap
• FoBo-Font-Awesome [v2.0.0, v3.0.0, v3.2.1, v4.0.1, v4.0.3, v4.1.0, v4.3.0, v4.5.0, v5.5.0] - Font Awesome
• FoBo-Highlight [v9.3.0] - highlight.js
• FoBo-JQuery [v1.7.2, v1.8,2, v1.9.1, v1.10.2, v1.11.0, v1.11.1, v1.11.3, v2.1.1, v2.1.4, v2.2.4, v3.0.0, v3.1.0] - JQuery
• FoBo-JQuery also includes JQuery Migrate [v1.2.1, v1.4.1, v3.0.0] - JQuery-Migrate
• FoBo-Google-Code-Prettify [vJun2011] - google-code-prettify
• FoBo-Pace [v0.4.15, v1.0.2] - Pace
• Popper [v1.10.8] - Popper

Note: Some of the listed toolkit versions may have been deprecated (and possible removed after having been deprecated in 2 releases).

Available CSS and JavaScript files

See the "Lift FoBo Template hooks" section in readme file for respective FoBo toolkit module listed above.

Quick Start with Lift Template Applications

The only prerequisites for using this Lift module is that you have Git and Java installed and configured on the target computer but a suitable Lift template project will also come in handy.

A Scala v2.11 Lift v2.6.x starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v2.6 Template Applications.

A Scala v2.12 Lift v3.0 starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v3.0 Template Applications.

You don't need to use it but this project's also includes a Eclipse (and a IDEA) plug-in for browsing the code, see the Scala IDE section below.

Scala IDE for Eclipse

Sbteclipse provides SBT command to create Eclipse project files

1. Usage

   project$ ./sbt > compile

   eclipse

2. In eclipse do:

   File ==> Import... Select General ==> Existing Project into Workspace Use "Brows" to look up the project root ....

Note: The compile step prior to the eclipse command in (1) is needed for eclipse to recognize the generated BuildInfo.scala file that is part of FoBo's build system.

Updates

For a comprehensive list of updates see Changelog

Old submodules

Modules available as maven artifacts but that have been split out of the FoBo / FoBo module. The modules can still be used as stand alone modules (Lift version < 3.0).

• Sonatype FoBo-JQuery-Mobile [v1.0.1, v1.1.0] - JQuery Mobile Usage FoBoJQM.InitParam.Toolkit=FoBoJQM.JQueryMobile110
• Sonatype FoBo-DataTables [v1.9.0] - DataTables.net Usage FoBoDT.InitParam.Toolkit=FoBoDT.DataTables190
• Sonatype FoBo-Knockout [v2.0.0, v2.1.0, v2.2.1] - KnockoutJS Usage FoBoKO.InitParam.Toolkit=FoBoKO.Knockout221
• Sonatype FoBo-Foundation [v2.1.5] - ZURB/Foundation Usage FoBoFo.InitParam.Toolkit=FoBoFo.Foundation215
• Sonatype FoBo-Kinetic [v5.1.0] - Kinetic Usage FoBoFo.InitParam.Toolkit=FoBoFo.Kinetic510

For feature listings on all releases see

• Changelog

Contributors

The FoBo Lift module was created by Peter Petersson- [email protected] - Twitter: @karma4u101.

Contributors: @byrongibson, @LawlietS

The Lift Module conventions were developed by the Lift community.