Toggle navigation

BootsFaces
</index.jsf>
*
*
*
*
Getting Started**
<#>
o
// Requirements
</requirements.jsf>
o
// Download
</download.jsf>
o
// Quick Start
</quickstart.jsf>
o
// PrimeFaces
</integration/PrimeFaces.jsf>
o
// OmniFaces
</integration/OmniFaces.jsf>
o
// AngularFaces
</integration/angularFaces.jsf>
*
*
Layout**
<#>
o
// Basic Layout and Grid System
</layout/basic.jsf>
o
// Sidebars (NavLinks)
</layout/navLinks.jsf>
o
// Menus (Navbars)
</layout/navbars.jsf>
o
// Panels
</layout/panels.jsf>
o
// Grids

</layout/panelgrids.jsf>
o
// Icons
</layout/icons.jsf>
o
Jumbotron
</layout/jumbotron.jsf>
o
Wells
</layout/wells.jsf>
*
*
Forms**
<#>
o
Buttons
</forms/buttons.jsf>
o
Button Groups and Toolbars
</forms/buttonGroups.jsf>
o
Command Button
</forms/commandButton.jsf>
o
Fetch Bean Infos (Validations)
</forms/FetchBeanInfos.jsf>
o
Input Text
</forms/inputText.jsf>
o
// Input Secret
</forms/inputSecret.jsf>
o
Checkbox
</forms/checkBox.jsf>
o
Combobox (SelectOneMenu)
</forms/selectOneMenu.jsf>
o
Multiple Choice Combobox (SelectMultiMenu)
</forms/selectMultiMenu.jsf>
o
// Poll
</forms/poll.jsf>
o
// Messages

</forms/messages.jsf>
*
*
Bootstrap Widgets**
<#>
o
// Alerts
</bootstrap/alerts.jsf>
o
DropButton
</bootstrap/dropButton.jsf>
o
// Labels and Badges
</bootstrap/labelsbadge.jsf>
o
Modals
</bootstrap/modal.jsf>
o
// Thumbnails
</bootstrap/thumbnails.jsf>
o
// Tab
</bootstrap/tab.jsf>
o
// Tooltip
</bootstrap/tooltips.jsf>
*
*
jQueryUI Widgets**
<#>
o
// Slider
</jquery-ui/slider.jsf>
o
// More Sliders
</jquery-ui/slider2.jsf>
o
// DatePicker
</jquery-ui/datepicker.jsf>
*
// Examples
</examples/index.jsf>
Integration with AngularFaces

Starting with AngularFaces 2.1 and BootsFaces 0.6.0, both frameworks are
aligned to each other. AngularFaces offers special support for
BootsFaces, and BootsFaces is tested to work with AngularFaces.
Teaser
Consider the form below and the corresponding XHTML source code. As you
can see, this is a pretty relaxed, almost HTML-like style of writing a
JSF view:
*
live demo
<#j_idt69>
*
JSF markup
<#j_idt97>
*
AngularJS Controller
<#j_idt100>
*
i18n.properties (optional)
<#j_idt103>
*
i18n_de.properties (optional)
<#j_idt106>
*
JSF bean
<#j_idt109>
*
CSS
<#j_idt112>
brand
Select your car
How much do you want to pay at most?
.00
engine power
HP
i agree to the terms and conditions
Look which cars are available
|<||div| |ng-controller||=||"IntegrationController"| |ng-app||=||"IntegrationApp
"| |angularJSFile||=||"/pages/integration/test.js"||>|
|
||<||h:form| |id||=||"sample1id"| |name||=||"sample1"| |prependId||=||"fals
e"||>|
|
||<||panelGrid| |colSpans||=||"4,2,6"| |size||=||"xs"||> |
|
||<||selectOneMenu| |value||=||"{{carBean.brand}}"| |id||=||"brandI
D"||>|
|
||<||option| |value||=||""||>
(Please select)</||opt

ion||>|
|
||<||option| |value||=||"Turin"||>
Fiat
</||opt
ion||>|
|
||<||option| |value||=||"Swindon"||>
Honda
</||opt
ion||>|
|
||<||option| |value||=||"Ruesselsheim"||>Opel
</||opt
ion||>|
|
||</||selectOneMenu||> |
|
||<||selectOneMenu| |value||=||"{{carBean.type}}"| |id||=||"typeID"
| |label||=||"Select your car"||>|
|
||<||option| |value||=||""||>(Please select)</||option||>|
|
||<||option||>
Cinquecento
</||option||>|
|
||<||option||>
Civic
</||option||>|
|
||<||option||>
Astra
</||option||>|
|
||<||option||>
Megane
</||option||>|
|
||</||selectOneMenu||> |
|
||<||inputText| |value||=||"{{carBean.price}}"| |label||=||"How muc
h do you want to pay at most?"| |id||=||"price"||> |
|
||<||f:facet| |name||=||"prepend"||>|
|
||<||h:outputText| |value||=||" "| |/>|
|
||</||f:facet||> |
|
||<||f:facet| |name||=||"append"||>|
|
||<||h:outputText| |value||=||".00"| |/>|
|
||</||f:facet||>|
|
||</||inputText||> |
|
||<||inputText| |value||=||"{{carBean.enginePower}}"||>|
|
||<||f:facet| |name||=||"append"||>|
|
||<||h:outputText| |value||=||"HP"| |/>|
|
||</||f:facet||>|
|
||</||inputText||> |
|
||<||selectBooleanCheckbox| |value||=||"{{carBean.iAgreeToTheTermsA
ndConditions}}"| |/> |
|
||</||panelGrid||>|
|
||<||commandButton| |value||=||"Look which cars are available"| |ng-sho
w||=||"carBean.iAgreeToTheTermsAndConditions"| |/>|
|
||</||h:form||>|
|</||div||>|
|angular.module("IntegrationApp", [ "angularfaces" ])|
|.controller('IntegrationController', ['$scope', function($scope) {|
|
||initJSFScope($scope);|
|}]);|
i18n files can be useful even if you don't want to support foreign
languages. If you don't define a label manually, AngularFaces guesses a
label for you. You can replace this label by a more adequate label using
the property file. This way, you can write very concise JSF code, which
is nice for rapid prototyping. In case the texts aren't up to your
customer's liking, you can fix them later in a properties file.
Put the |i18n.properties| into the root folder of your class path.
|brand=Select your car brand:|
|engine power=How much engine power ||do| |you need?|
AngularFaces supports foreign languages out of the box. Simply put an
|i18n_{language}.properties| file into the root folder of your class
path ({language} being a placeholder for the two-letter code of the
target language). For example, if you set the browser to "German", it
shows the live demo in German language - including labels and error

messages. The error messages are translated in an error messages file

provided with AngularFaces. The other messages are translated in the
|i18n_de.properties| file:
|brand=Bitte whlen Sie die Marke:|
|engine power=Wie viele PS brauchen Sie?|
|Select your car=Welches Modell suchen Sie?|
|How much ||do| |you want to pay at most?=Hchstpreis:|
|i agree to the terms and conditions=Ich habe die AGBs gelesen und akzeptiert.|
|Look which cars are available=Suche nach passenden Fahrzeugen|
|HP=PS|
|@RequestScoped|
|@ManagedBean|
|public| |class| |CarBean {|
|
||@NotNull|
|
||private| |String brand;|
|
|

||@NotNull|
||private| |String type;|

|
|
|
|

||@NotNull|
||@Min||(||500||)|
||@Max||(||50000||)|
||private| |int| |price;|

|
|
|
|
|
|
|
|
|}|

||@NotNull|
||@Min||(||2||)|
||@Max||(||999||)|
||private| |int| |enginePower;|
|
||private| |boolean| |iAgreeToTheTermsAndConditions=||false||;|
|
||// getters and setters are omitted for the sake of brevity|

AngularFaces and AngularJS add a CSS class to an erroneous input field

and its label and error message. For maximum flexibility, that's three
different classes. It's up to you to decide whether you want to
highlight a violated validation constraint in the label, the field, the
error message or a combination of them. The example below colors
everything red - not exactly decent, but making it almost impossible to
ignore a mistake:
|<style>|
| ||.ng-invalid {
||/* ng-invalid is added to an offending i
nput field. */|
|
||border-color||: ||#c33||;|
|
||border-width||: ||1px||;|
| ||}|
| ||.ui-state-error { ||color||:||#d33||;} ||/* ui-state-error is added to la
bels of erroneous input fields. */|
| ||.pui-message
{ ||color||:||#d33||; } ||/* The puimessage tag displays a
n error message (similar to <h:message />). */|
| ||.pui-label
{ ||width||:||100%||;} ||/* af-label is the CSS class add
ed to an automatically generated label.|
|
||Add width:100% to allow for right hand
side alignment. */|
|</style>|

Why is AngularFaces interesting?

We can mention only a few advantages of AngularFaces here:
* It opens the world of AngularJS programming to JSF programmers.
Notice the mustaches in the JSF source code. They refer both to the
AngularJS model and the JSF bean. AngularFaces synchronizes both
models for you.
* You can use (and write) widgets that are rendered on the client
side. For instance, ng-table is a great replacement for JSF datatables.
* Labels and error messages are optionally generated automatically.
* Labels and messages are translated to foreign languages automatically.
* Most JSR303 bean validations are evaluated on the client.
* Optionally you can adopt an HTML-like style. For instance, you can
omit the |b:| prefixes. For instance, |b:row| simply becomes |row|.
Note the |<b:selectOneMenu />| in the example above. It almost
passes for a native HTML |<select>| widget.
Read the full story on the AngularFaces manual page.
<http://www.angularfaces.com>
Getting started
You have to add both the BootsFaces and the AngularFaces jar files.
AngularFaces also requires a Json serializer - currently either Gson or
Jackson:
*
Maven
<#j_idt117>
*
Gradle
<#j_idt123>
*
Others
<#j_idt126>
Add these lines to your Maven pom.xml file:
|<||dependency||>|
|
||<||groupId||>de.beyondjava</||groupId||>|
|
||<||artifactId||>angularFaces-core</||artifactId||>|
|
||<||version||>2.1.0-RC2</||version||>|
|</||dependency||>|
|<||dependency||>|
|
||<||groupId||>net.bootsfaces</||groupId||>|
|
||<||artifactId||>bootsfaces</||artifactId||>|
|
||<||version||>0.6.6</||version||>|
|
||<||scope||>compile</||scope||>|
|</||dependency||>|
AngularFaces also needs a Json serializer. As of AngularFaces 2.1,
Jackson and Gson are supported. Activate one of the following dependencies:
|<||dependency||>|

|
||<||groupId||>com.fasterxml.jackson.jaxrs</||groupId||>|
|
||<||artifactId||>jackson-jaxrs-json-provider</||artifactId||>|
|
||<||version||>2.5.0</||version||>|
|</||dependency||>|
|<||dependency||> |
|
||<||groupId||>com.google.code.gson</||groupId||> |
|
||<||artifactId||>gson</||artifactId||> |
|
||<||version||>2.2.4</||version||> |
|</||dependency||>|
|compile ||'de.beyondjava:angularFaces-core:2.1.+'|
|compile ||'net.bootsfaces:bootsfaces:0.6.6'|
|compile ||'com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.5.0'|
AngularFaces also needs a Json serializer. As of AngularFaces 2.1,
Jackson and Gson are supported. Activate one of the following dependencies:
|compile ||'com.google.code.gson:gson:2.2.4'|
|compile ||'com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.5.0'|
AngularFaces is available at Maven Central. You also need a Json
serializer. As of AngularFaces 2.1, Jackson and Gson are supported.
Configuration
You have to add a few lines to the web.xml. For the sake of convenience,
we show both the entire minimal |web.xml| and the complete minimal
|faces-config.xml| files:
*
web.xml
<#j_idt130>
*
faces-config.xml
<#j_idt135>
|<?||xml| |version||=||"1.0"| |encoding||=||"UTF-8"||?>|
|<||web-app| |version||=||"3.0"| |xmlns||=||"http://java.sun.com/xml/ns/javaee"|
|xmlns:xsi||=||"http://www.w3.org/2001/XMLSchema-instance"| |xsi:schemaLocation
||=||"http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-ap
p_3_0.xsd"||>|
|
||<!-- Activates the tag decorator that turns divs into JSF components (and
much more) -->|
|
||<||context-param||>|
|
||<||param-name||>javax.faces.FACELETS_DECORATORS</||param-name||>|
|
||<||param-value||>|
|
||de.beyondjava.angularFaces.core.tagTransformer.AngularTagDecorato
r|
|
||</||param-value||>|
|
||</||context-param||>|
|
||<!-- jQuery doesn't cope with JSF's default separator. This setting fixes
the problem. -->|
|
||<||context-param||>|
|
||<||param-name||>javax.faces.SEPARATOR_CHAR</||param-name||>|
|
||<||param-value||>_</||param-value||>|

||</||context-param||>|

|
||<!-- The BootsFaces_USETHEME context-param controls the loading of the bo
otstrap-theme.css -->|
|
||<!-- The default is false, when set to true the bootstrap-theme.css will
be loaded -->|
|
||<||context-param||>|
|
||<||param-name||>BootsFaces_USETHEME</||param-name||>|
|
||<||param-value||>true</||param-value||>|
|
||</||context-param||>|
|
||<||servlet||>|
|
||<||servlet-name||>Faces Servlet</||servlet-name||>|
|
||<||servlet-class||>javax.faces.webapp.FacesServlet</||servlet-class||
>|
|
||<||load-on-startup||>1</||load-on-startup||>|
|
||</||servlet||>|
|
||<||servlet-mapping||>|
|
||<||servlet-name||>Faces Servlet</||servlet-name||>|
|
||<||url-pattern||>*.jsf</||url-pattern||>|
|
||<||url-pattern||>/javax.faces.resource/*</||url-pattern||>|
|
||</||servlet-mapping||>|
|</||web-app||>|
|<?||xml| |version||=||"1.0"| |encoding||=||"UTF-8"||?>|
|<||faces-config|
|
||xmlns||=||"http://xmlns.jcp.org/xml/ns/javaee"|
|
||xmlns:xsi||=||"http://www.w3.org/2001/XMLSchema-instance"|
|
||xsi:schemaLocation||=||"http://xmlns.jcp.org/xml/ns/javaee http://xmlns.j
cp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"|
|
||version||=||"2.2"||>|
|
||<||application||>|
|
||<||resource-handler||>net.bootsfaces.render.UnmappedResourceHandler</
||resource-handler||>|
|
||</||application||>|
|</||faces-config||>|
Pitfalls
form and ng-controller
It's important to put the form inside the div containing the
ng-controller. Otherwise, everything works fine - but you never see the
validation error messages.
Multiple forms
AngularFaces supports only one controller per JSF view and one form per
controller. Don't put more than one form in a controller.
separatorchar and prependId
AngularJS doesn't cope with Java's default separator char which is used
internally in ids. The best solution is to clear the form attribute
|prependId=false|. Alternatively, you can set the separator charactor to
"%" in the |web.xml.| However, the latter solution is not officially

supported by the JSF specification, so we don't recommend it.

Tag decorators
By default, AngularFaces converts HTML tags to JSF or even BootsFaces
tags very eagerly. Sometimes this stands in your way. If so, you can use
the |ConservativeAngularTagDecorator| instead of the
|AngularTagDecorator| in the |faces-config.xml|. The conservative
implementation only translates |div|, |span|, |messages| and |translate|
to AngularFaces tags.
Relaxed HTML-like style of writing
Once you've activated AngularFaces, you can write most BootsFaces tags
without the preceding |b:|. These tags can be written in the relaxed
fashion:
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

alert
badge
modal
commandButton
buttonGroup
buttonToolbar
navBar
navbarLinks
listLinks
navLink
dropButton
dropMenu
thumbnail
container
row
column
panel
jumbotron
well
datepicker
slider
inputSecret
inputText
selectBooleanCheckbox
selectOneMenu
tabView
tab

Toggle navigation
2013-2015 TheCoder4Eu
<http://www.thecoder4.eu/>
BootsFaces v0.7.0-OSP on Mojarra 2.2.11, PrimeFaces 5.2, AngularFaces
2.1.6 and OmniFaces 1.10