Butter Faces

ButterFaces
Table of Contents
Introduction
Getting started
Configuration
PrimeFaces integration
BootsFaces integration
OmniFaces integration
Release Notes
Migration
ButterFaces
What is ButterFaces?
YAJF - yet another JSF Framework. There are a lot of JSF frameworks like RichFaces or
PrimeFaces. Most of them bring a lot of features and they feel like fat clients. ButterFaces is
a lightweight JSF framework bringing a lot of nice features to JSF with beeing minimal
invasive. Easy to use and easy to extend by custom features.
ButterFaces is a JSF 2 component enrichment framework. It wrappes most of default JSF 2
components and adds labels, readonly-views, tooltips, placeholder, validation style class
marker and other nice features to the standard JSF 2 components.
Why ButterFaces?
It is simple: Because everything tastes better with butter. Plain JSF brings a lot of
components but if you want to use them they are naked. There are no labels for input
components, no tooltips except of titles and html5 is not supported. If you want to create a
template supporting input and output components you have to implement both types of
components.
ButterFaces creates a simple html structure based on twitters bootstrap around existing JSF
components. You do not have already use bootstrap in your project - it comes with
ButterFaces. And if you do not want to use bootstrap styles or you have your own version
you can disable it easily by configuring it in your web.xml.
What about the license?

ButterFaces stands under MIT License. So feel free to use it. Feel free to customize it. Feel
free to sell it. But let us know how it works and what kind of problems you have.
Introduction
ButterFaces
Getting started
Install ButterFaces as maven dependency
ButterFaces is accessible by maven central repository. Add following dependency to use
components for each JSF implementation (i.e. MyFaces)
<dependency>
<groupId>de.larmic.butterfaces</groupId>
<artifactId>components</artifactId>
<version>2.0.0</version>
</dependency>
In pre 2.0.0 versions of ButterFaces some components are only supported by mojarra. In
this case use following dependency
<dependency>
<groupId>de.larmic.butterfaces</groupId>
<artifactId>components-mojarra</artifactId>
<version>2.0.0.CR1</version>
</dependency>
Install ButterFaces by yourself

You can clone git repository and install maven plugin by yourself using console
git@github.com:ButterFaces/ButterFaces.git
maven install
Using ButterFaces
Add http://butterfaces.org/components to your <html .../> and use <!DOCTYPE html> to
activate html 5 features.
HINT with version 2.0.0 web.xml parameters has been renamed from de.larmic.butterfaces.x
to org.butterfaces.x
Getting started
ButterFaces
<!DOCTYPE html>
<html lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:b="http://butterfaces.org/components"
xmlns:f="http://xmlns.jcp.org/jsf/core">
...
<b:text id="test" ... />
</html>
That's all!
Getting started
ButterFaces
Configuration
This part contains the options to customize ButterFaces by editing web.xml .
Using of jQuery
Using of Bootstrap
Ajax configuration
Auto trim input fields
Max length text
Tree configuration
Resourcehandling
HINT with version 2.0.0 web.xml parameters has been renamed from de.larmic.butterfaces.x
to org.butterfaces.x
Using of jQuery
As default ButterFaces comes with an actual version of jQuery 2.x. To disable ButterFaces
jQuery version because of using your own version you have to change following parameter
<context-param>
<param-name>org.butterfaces.provideJQuery</param-name>
<param-value>false</param-value>
</context-param>
Using of Bootstrap
As default ButterFaces comes with an actual version of Bootstrap 3.x. To disable
ButterFaces Boostrap version because of using your own version you have to change
following parameter
<context-param>
<param-name>org.butterfaces.provideBootstrap</param-name>
</context-param>
Ajax configuration
Configuration
ButterFaces
(since 1.11.1)
b:commandLink components comes with ajaxDisableRenderRegionsOnRequest to
crossfade render regions while ajax request is running. To configure this for global usage
add following parameter
<context-param>
<param-name>org.butterfaces.ajaxDisableRenderRegionsOnRequest</param-name>
</context-param>
This can be useful if you are using b:waitingPanel to disable b:commandLink support and to
prevent multiple crossfade windows.
Auto trim input fields

(since 2.0.0)
By default all input fields will be trimed after submit.
<context-param>
<param-name>org.butterfaces.autoTrimInputFields</param-name>
<param-value>true</param-value>
</context-param>
Max length text for textArea and markdown

(since 2.1.2)
When using maxlength parameter counting text will be {0} of {1} characters.
<context-param>
<param-name>org.butterfaces.maxLengthText</param-name>
<param-value>{0} of {1} characters</param-value>
</context-param>
Tree configuration
(since 1.11.1)
Configuration
ButterFaces
b:tree and b:treeBox are trivial components and can be configured by components attribute
or by changeing following parameters
<context-param>
<param-name>org.butterfaces.noEntriesText</param-name>
<param-value>No matching entries...</param-value>
</context-param>
<context-param>
<param-name>org.butterfaces.spinnerText</param-name>
<param-value>Fetching data...</param-value>
</context-param>
Resourcehandling
Each components comes up with it's own javascript and css resources. If you want to use
ButterFaces resources (i.e. Bootstrap or jQuery) without any ButterFaces component use
b:activateLibraries to load all resources to html
<!DOCTYPE html>
<html lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:b="http://butterfaces.org/components"
xmlns:f="http://xmlns.jcp.org/jsf/core">
...
<b:activateLibraries />
</html>
This tags add javascript and css resources for all existing components. In addition to that
you may activate compression by web.xml
<context-param>
<param-name>org.butterfaces.useCompressedResources</param-name>
<param-value>true</param-value>
</context-param>
HINT This only works if you are using

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>
Configuration
ButterFaces
When using Development resource will always provided as non minified and compressed.
Likewise sourcemaps will be supplied to enable javascript debugging.
Configuration
ButterFaces
As well as ButterFaces PrimeFaces comes with jQuery. This does not work out of the box.
Problem
ButterFaces deliveres css and javascript as first part of html head to allow custom class
handling. PrimeFaces deliveres its own jQuery after ButterFaces, so ButterFaces jQuery
plugins does not work anymore.
Solution
You can add your own version of jQuery or use jQuery from ButterFaces. You have to
disable jQuery from PrimeFaces. Unfortunately you can not disable jQuery by a simple
web.xml parameter (like in ButterFaces), but you can remove it from head by a
javax.faces.event.SystemEventListener .
10
ButterFaces
package de.larmic.butterfaces.primefaces.event;
import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.SystemEvent;
import javax.faces.event.SystemEventListener;
public class HandleResourceListener implements SystemEventListener {
public boolean isListenerForSource(Object source) {
return source instanceof UIViewRoot;
}
public void processEvent(SystemEvent event) throws AbortProcessingException {
final UIViewRoot source = (UIViewRoot) event.getSource();
final FacesContext context = FacesContext.getCurrentInstance();
for (UIComponent resource : source.getComponentResources(context, "head")) {
final String resourceLibrary = (String) resource.getAttributes().get("library"
final String resourceName = (String) resource.getAttributes().get("name");
if ("primefaces".equals(resourceLibrary) && "jquery/jquery.js".equals(resourceName)) {
source.removeComponentResource(context, resource);
}
}
}
}
Activate it in your faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="2.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
<application>
<system-event-listener>
<system-event-listener-class>de.larmic.butterfaces.primefaces.event.HandleResourceListene
<system-event-class>javax.faces.event.PreRenderViewEvent</system-event-class>
</system-event-listener>
</application>
</faces-config>
Code example
11
ButterFaces
Take a look at https://github.com/ButterFaces/primefaces-integration
12
ButterFaces
As well as ButterFaces BootsFaces comes with jQuery and Bootstrap. This does not work
out of the box.
Problem
ButterFaces deliveres css and javascript as first part of html head to allow custom class
handling. BootsFaces deliveres its own jQuery after ButterFaces, so ButterFaces jQuery
plugins does not work anymore.
Solution
Disable jQuery in BootsFaces and most things will work
<context-param>
<param-name>net.bootsfaces.get_jquery_from_cdn</param-name>
</context-param>
Known problems
BootsFaces and ButterFaces override some Bootstrap style sheet. Sometimes they come in
the transverse, i.e. placeholder position in ButterFaces. We are working on that.
Code example
Take a look at https://github.com/ButterFaces/bootsfaces-integration
13
ButterFaces
Problem
There is no problem. Just use it in one application.
Code example
Take a look at https://github.com/ButterFaces/omnifaces-integration
14
ButterFaces
Release Notes
This page contains the important feature changes.
Release Notes
15
ButterFaces
version
new stuff
2.1.1
web.xml parameter org.butterfaces.maxLengthText allows to use custom

text for textarea and markdown counter
2.1.1
Fix a problem with b:repeat and MyFaces 2.1.x
2.1.0
Fixed autocomplete bug when using MyFaces 2.1.x

Fixed ajax bug when using MyFaces 2.1.x
Radiobox components comes with template support
2.0.0
combobox has been removed and replaced by treebox

new web.xml parameter org.butterfaces.autoTrimInputFields activates
auto trim for input fields (true by default)
2.0.0.CR1
radioBox relieves Mojarra
1.11.1
treeBox component comes with dot notation support for mustache

syntax
ajaxDisableRenderRegionsOnRequest is supported by web.xml
noEntriesText is supported by web.xml
Fix bug when using readonly checkbox and form submit
1.11.0
table component relieves Mojarra and Bootstrap upgrade from 3.3.5 to

3.3.6
1.10.5
Second CR of treeBox component
1.10.4
First CR of treeBox component

checkbox component relieves Mojarra
1.9.14
textarea component relieves Mojarra
1.9.13
new repeat component
1.9.0
All text components are MyFaces compatible

Calendar
Tags
Text
MaskedText
Secret
Number
Tags component switched to https://trivial-components.github.io/trivialcomponents/. It comes with a new design.
Tree component switched to https://trivial-components.github.io/trivialcomponents/. It comes with a new design.
ButterFaces code has been moved to GitHub
1.8.4
Table columns ordering support
1.7.13
new tooltip component
Release Notes
16
ButterFaces
Migration
This page shows migration instructions if some ButterFaces version require it.
Migration
17
ButterFaces
from
version
to
version
what to do
2.0.0
combobox components has been removed (use treebox

instead)
components namespace has been changed from
http://butterfaces.larmic.de/components to
http://butterfaces.org/components
web.xml parameters has been renamed from
de.larmic.butterfaces.x to org.butterfaces.x
web.xml parameter ajaxDisableRenderRegionsOnRequest has
been renamed to
org.butterfaces.ajaxDisableRenderRegionsOnRequest
1.9.15
TreeBox hideRootNode has removed.

Use List instead of Node as treeBox value if you want to hide
root node
1.9.8
Javascript migrated to Typescript

butter.disableElements has replaced by new
ButterFaces.Overlay()
1.8.17
1.9.0
ButterFaces code has been moved to GitHub

Tree model Node.java comes with a description attribute. You
may have to extend your custom model
web.xml parameters de.larmic.butterfaces.glyphicon.collapsing
and de.larmic.butterfaces.glyphicon.expansion is no longer
supported
1.8.7.1
1.8.8
2.0.0.CR1
1.9.14
1.9.6
TreeNodeSelectionListener has a new Methode

boolean isValueSelected(final Node data);
TableSortModel has been renamed to TableRowSortingModel

TableColumnDisplayModel has been renamed to
TableColumnVisibilityModel
showColumn and hideColumn has been refactored to
update(de.larmic.butterfaces.model.table.TableColumnVisibilty)
TableOrderModel has been renamed to
TableColumnOrderingModel
orderColumnToPosition has been refactored to
update(de.larmic.butterfaces.model.table.TableColumnOrdering)
1.8.5
1.8.6
1.8.4
1.8.5
TableSingleSelectionListener has a new Method
1.7.21
1.8.2
Combobox component is filterable at default. Attribute filterable has

been removed.
1.7.16
1.7.17
Table models signature has been changed
1.7.12
1.7.13
tooltip attribute is no longer supported. If you are using tooltips you

have to replace tooltip attribute by new tooltip component as child
Migration
boolean isValueSelected(final T data);
18

Butter Faces

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Butter Faces

Hochgeladen von

Copyright:

Verfügbare Formate

ButterFaces

What about the license?

Install ButterFaces by yourself

Auto trim input fields

Max length text for textArea and markdown

HINT This only works if you are using

Activate it in your faces-config.xml

Take a look at https://github.com/ButterFaces/primefaces-integration

web.xml parameter org.butterfaces.maxLengthText allows to use custom

Fix a problem with b:repeat and MyFaces 2.1.x

Fixed autocomplete bug when using MyFaces 2.1.x

combobox has been removed and replaced by treebox

radioBox relieves Mojarra

treeBox component comes with dot notation support for mustache

table component relieves Mojarra and Bootstrap upgrade from 3.3.5 to

Second CR of treeBox component

First CR of treeBox component

textarea component relieves Mojarra

new repeat component

All text components are MyFaces compatible

Table columns ordering support

new tooltip component

combobox components has been removed (use treebox

TreeBox hideRootNode has removed.

Javascript migrated to Typescript

ButterFaces code has been moved to GitHub

TreeNodeSelectionListener has a new Methode

TableSortModel has been renamed to TableRowSortingModel

TableSingleSelectionListener has a new Method

Combobox component is filterable at default. Attribute filterable has

Table models signature has been changed

tooltip attribute is no longer supported. If you are using tooltips you

boolean isValueSelected(final T data);

Das könnte Ihnen auch gefallen