diff --git a/.gitignore b/.gitignore index 99ee68e0..d6e2c19d 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,5 @@ download.xhtml nbactions.xml faces-config.NavData nb-configuration.xml +.idea/ +BootsFacesWeb.iml diff --git a/build.gradle b/build.gradle index 38aa5418..0fd8055d 100644 --- a/build.gradle +++ b/build.gradle @@ -3,8 +3,8 @@ apply plugin: 'war' //webAppDirName = 'web' -sourceCompatibility = '1.7' -targetCompatibility = '1.7' +sourceCompatibility = '1.8' +targetCompatibility = '1.8' repositories { mavenLocal() @@ -39,7 +39,7 @@ compile files("${System.properties['java.home']}/../lib/tools.jar") compile fileTree(dir: 'bsflib', include: '*.jar') //Required for messages/utils -compile "net.bootsfaces:bootsfaces:1.1.2-SNAPSHOT" +compile "net.bootsfaces:bootsfaces:1.2.0" } war.doFirst { diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar index ed8ae40b..99340b4a 100644 Binary files a/gradle/wrapper/gradle-wrapper.jar and b/gradle/wrapper/gradle-wrapper.jar differ diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index 59395e84..45a4d68f 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,5 @@ -#Fri Apr 28 16:18:17 CEST 2017 +distributionUrl=https\://services.gradle.org/distributions/gradle-4.4.1-bin.zip distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-3.5-bin.zip +zipStoreBase=GRADLE_USER_HOME diff --git a/gradlew b/gradlew index 4453ccea..cccdd3d5 100755 --- a/gradlew +++ b/gradlew @@ -33,11 +33,11 @@ DEFAULT_JVM_OPTS="" # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD="maximum" -warn ( ) { +warn () { echo "$*" } -die ( ) { +die () { echo echo "$*" echo @@ -155,7 +155,7 @@ if $cygwin ; then fi # Escape application args -save ( ) { +save () { for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done echo " " } diff --git a/pom.xml b/pom.xml index 61734ed1..0b919bf2 100644 --- a/pom.xml +++ b/pom.xml @@ -3,7 +3,7 @@ 4.0.0 net.bootsfaces BootsFacesWeb - 1.1.2-SNAPSHOT + 1.2.1-SNAPSHOT BootsFacesWeb war Documentation page of BootsFaces @@ -75,7 +75,7 @@ net.bootsfaces bootsfaces - 1.1.2-SNAPSHOT + 1.2.1-SNAPSHOT org.primefaces diff --git a/src/main/java/Admin.java b/src/main/java/Admin.java new file mode 100644 index 00000000..d7ce04bf --- /dev/null +++ b/src/main/java/Admin.java @@ -0,0 +1,28 @@ +import java.util.Arrays; +import java.util.List; + +public class Admin { + private String id; + + private List skills = Arrays.asList(new AdminSkill("sleep"), new AdminSkill("work"), new AdminSkill("drink coffee")); + + public Admin(String id) { + this.id = id; + } + + public String getId() { + return id; + } + + public void setId(String id) { + this.id = id; + } + + public List getSkills() { + return skills; + } + + public void setSkills(List skills) { + this.skills = skills; + } +} \ No newline at end of file diff --git a/src/main/java/AdminController.java b/src/main/java/AdminController.java new file mode 100644 index 00000000..e27f118b --- /dev/null +++ b/src/main/java/AdminController.java @@ -0,0 +1,44 @@ +import java.io.Serializable; +import java.util.ArrayList; +import java.util.List; + +import javax.faces.bean.ManagedBean; +import javax.faces.bean.ViewScoped; + +@ManagedBean +@ViewScoped +public class AdminController implements Serializable { + private static final long serialVersionUID = 1L; + + private List admins = new ArrayList<>(); + + private Admin selectedAdmin = null; + + public AdminController() { + admins.add(new Admin("Hugo")); + admins.add(new Admin("Erwin")); + admins.add(new Admin("Helga")); + } + + public List getAdmins() { + return admins; + } + + public void setAdmins(List admins) { + this.admins = admins; + } + + public void onSelect(Admin admin) { + this.selectedAdmin = admin; + } + + public List getAdminSkills() { + if (null == selectedAdmin) { + return new ArrayList<>(); + } + return selectedAdmin.getSkills(); + } + +} + + diff --git a/src/main/java/AdminSkill.java b/src/main/java/AdminSkill.java new file mode 100644 index 00000000..b5106cd2 --- /dev/null +++ b/src/main/java/AdminSkill.java @@ -0,0 +1,17 @@ + +public class AdminSkill { + private String id; + + public AdminSkill(String id) { + this.id = id; + } + + public String getId() { + return id; + } + + public void setId(String id) { + this.id = id; + } + +} diff --git a/src/main/java/Collector.java b/src/main/java/Collector.java new file mode 100644 index 00000000..e3a106c9 --- /dev/null +++ b/src/main/java/Collector.java @@ -0,0 +1,146 @@ +import java.io.BufferedReader; +import java.io.BufferedWriter; +import java.io.File; +import java.io.FileReader; +import java.io.FileWriter; +import java.io.IOException; +import java.util.ArrayList; +import java.util.HashMap; +import java.util.List; +import java.util.Map; + +public class Collector { + + public static void main(String[] args) throws IOException { + scanFolder(new File("src/main/webapp")); + } + + public static void scanFolder(File folder) throws IOException { + File[] files = folder.listFiles(); + for (File file : files) { + if (file.isDirectory()) { + scanFolder(file); + } else if (file.getName().endsWith(".xhtml")) { + if (!file.getName().endsWith("Attributes.xhtml")) { + String newFile = readFile(file.getAbsolutePath()); + if (newFile != null) { + writeFile(file.getAbsolutePath(), newFile); + //System.exit(1); + } + } + } + } + } + + public static void writeFile(String filename, String content) throws IOException { + new File(filename).delete(); + try (FileWriter fw = new FileWriter(filename); BufferedWriter bw = new BufferedWriter(fw)) { + bw.write(content); + } + } + + public static String readFile(String filename) { + Map chapters = new HashMap<>(); + List tags = new ArrayList<>(); + StringBuilder result = new StringBuilder(); + String previousLine = ""; + + try (FileReader fr = new FileReader(filename); BufferedReader br = new BufferedReader(fr)) { + String line; + + while ((line = br.readLine()) != null) { + if (line.contains("")) { + return null; + } + while (line.contains(""))) { + line = line.trim() + br.readLine().trim(); + } + line = examineLine(filename, chapters, tags, previousLine, line, "

"); + line = examineLine(filename, chapters, tags, previousLine, line, "

"); + line = examineLine(filename, chapters, tags, previousLine, line, "

"); + result.append(line); + result.append('\n'); + } + } catch (IOException e) { + e.printStackTrace(); + } + if (tags.size() > 1) { + int pos = result.indexOf(""); + if (pos < 0) { + return null; + } + if (pos > 0) { + pos = result.lastIndexOf("\n", pos); + } + String start = result.substring(0, pos); + String end = result.substring(pos); + StringBuilder navigator = new StringBuilder(); + navigator.append("\n\n\n"); + navigator.append(" \n"); + for (String tag : tags) { + navigator.append(" \n"); + } + + navigator.append(" \n"); + navigator.append("\n\n"); + System.out.println(filename + ": " + tags.size()); + return start + navigator.toString() + end; + + } + return null; + } + + private static String examineLine(String filename, Map chapters, List tags, + String previousLine, String line, String headerTag) { + String newHeaderTag = "

"; + if (headerTag.equals("

")) { + newHeaderTag = "

"; + } + if (line.contains(headerTag)) { + if (line.contains(" 0) { + innerText = innerText.replace("(Virtually no)", ""); + int end2 = 0; + while (end2 < innerText.length() && (Character.isLetter(innerText.charAt(end2)) + || Character.isWhitespace(innerText.charAt(end2)) || '&' == innerText.charAt(end2) + || '/' == innerText.charAt(end2) || ';' == innerText.charAt(end2) + || ':' == innerText.charAt(end2))) { + end2++; + } + String tag = innerText.substring(0, end2).replace("<", "").replace(">", "").replace(":", "_") + .replace("/", "").toLowerCase(); + tag = tag.trim().replace(" ", "_"); + if (tag.length() == 0) { + System.out.println("Empty tag?"); + } else { + line = line.substring(0, line.indexOf(headerTag)) + newHeaderTag + "" + innerText + + "" + line.substring(end); + line = line.replace(""; + } + } + } + } + return line; + } +} diff --git a/src/main/java/Reindent.java b/src/main/java/Reindent.java new file mode 100644 index 00000000..406df638 --- /dev/null +++ b/src/main/java/Reindent.java @@ -0,0 +1,262 @@ +import java.io.BufferedReader; +import java.io.BufferedWriter; +import java.io.File; +import java.io.FileReader; +import java.io.FileWriter; +import java.io.IOException; + +public class Reindent { + static int currentIndent = 0; + static int parameterIndent = 0; + static boolean insideTag = false; + static boolean modified = false; + static boolean insideStyle = false; + static boolean silent = false; + + public static void main(String[] args) throws IOException { +// readFile("src/main/webapp/layout/navbars.xhtml"); + silent = true; + scanFolder(new File("src/main/webapp/")); + } + + public static void scanFolder(File folder) throws IOException { + File[] files = folder.listFiles(); + for (File file : files) { + if (file.isDirectory()) { + scanFolder(file); + } else if (file.getName().endsWith(".xhtml")) { + if (!file.getName().endsWith("Attributes.xhtml")) { + String newFile = readFile(file.getAbsolutePath()); + if (newFile != null) { + writeFile(file.getAbsolutePath(), newFile); + System.out.println(file.getAbsolutePath()); + // System.exit(1); + } + } + } + } + } + + public static void writeFile(String filename, String content) throws IOException { + new File(filename).delete(); + try (FileWriter fw = new FileWriter(filename); BufferedWriter bw = new BufferedWriter(fw)) { + bw.write(content); + } + } + + public static String readFile(String filename) { + if (filename.endsWith("DateTimePicker.xhtml")) { + return null; + } + if (filename.endsWith("InputText.xhtml")) { + return null; + } + if (filename.endsWith("InputSecret.xhtml")) { + return null; + } + StringBuilder result = new StringBuilder(); + + try (FileReader fr = new FileReader(filename); BufferedReader br = new BufferedReader(fr)) { + currentIndent = 0; + modified = false; + String line; + + while ((line = br.readLine()) != null) { + line = examineLine(line); + result.append(line); + result.append('\n'); + } + } catch (IOException e) { + e.printStackTrace(); + } + if (currentIndent == 0 && modified) { + return result.toString(); + } + if (modified) { + System.out.println("Failed at " + filename + " Indent = " + currentIndent); + // System.exit(1); + } + return null; + } + + private static String examineLine(String line) { + boolean startsWithClosingTag = false; + String originalLine = line; + line = line.trim(); + if (line.startsWith("")) { + if (line.contains(" 1) { + insideTag = false; + } + if (line.contains("")) { + currentIndent--; + } + if (line.startsWith(" + + + + +
  • + + + + +
    • +
  • + Components + + + + + +
    • + + + diff --git a/src/main/webapp/applayout/navbarbottom.xhtml b/src/main/webapp/applayout/navbarbottom.xhtml index c1a727dc..1d719374 100644 --- a/src/main/webapp/applayout/navbarbottom.xhtml +++ b/src/main/webapp/applayout/navbarbottom.xhtml @@ -1,11 +1,12 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:b="http://bootsfaces.net/ui"> - -

    -     + +

    + +     diff --git a/src/main/webapp/applayout/navbartop.xhtml b/src/main/webapp/applayout/navbartop.xhtml index 54978f61..7692d814 100644 --- a/src/main/webapp/applayout/navbartop.xhtml +++ b/src/main/webapp/applayout/navbartop.xhtml @@ -1,35 +1,31 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:jsf="http://xmlns.jcp.org/jsf" + xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"> - - + + style="padding-top:2px;padding-bottom:2px" brand-target="_blank"> @@ -37,7 +33,7 @@ -

    + + + + + + + - - + dir="#{settingsBean.checkbox4?'ltr':'rtl'}" + onchange="ajax:settingsBean.action()" + offText="rtl" + onText="ltr" + offColor="success" + onColor="info" + update="@form"/> + + - - JSF markup: - - - - + + JSF markup: + + - + + -

    AJAX

    + +

    AJAX

    The <b:switch /> uses the unified AJAX API of BootsFaces. However, you should avoid to use the onclick event because it's triggered too early. Use onchange instead.

    -

    Error messages

    -

    If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, - bf-error or bf-fatal is added to the label, depending on which error severity the message has. - The latter two classes color the label red. bf-warning colors it orange. You can override this default setting in a custom CSS file.

    -

    If there's no message, - the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. -

    - - - - - - - - - - - +

    Error messages

    +

    If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, + bf-error or bf-fatal is added to the label, depending on which error severity the message has. + The latter two classes color the label red. bf-warning colors it orange. You can override this default setting in a custom CSS file.

    +

    If there's no message, + the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. +

    + + + + + + + + + + + - - - + +     +     - - JSF markup: - - - - + + + + ]]> +     - + + -
    -

    Responsive design

    -

    You can use all the attributes controlling the responsive behaviour of <b:column /> - also with <b:switch />:

    - - - - - - - - - - - - - - - - +
    +

    Responsive design

    +

    You can use all the attributes controlling the responsive behaviour of <b:column /> + also with <b:switch />:

    + - - JSF markup: - - - - + + + + + + + + + + + + + + + + + + JSF markup: + + + + -

    Visibility depending on screen size

    -

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    -
    - - - - - - - - +

    Visibility depending on screen size

    +

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    +
    + + + + + + + + - - JSF markup: - - - - + + JSF markup: + + + +
    -

    Reference section

    +

    Reference section

    Skinning

    - The entire switch (including label and caption) is enclosed in a - div - bearing the CSS-class - checkbox - . + The entire switch (including label and caption) is enclosed in a + div + bearing the CSS-class + checkbox + .

    + SyntaxHighlighter.all(); +


    diff --git a/src/main/webapp/forms/testButton.xhtml b/src/main/webapp/forms/testButton.xhtml index a38befa1..f5b1b3ab 100644 --- a/src/main/webapp/forms/testButton.xhtml +++ b/src/main/webapp/forms/testButton.xhtml @@ -5,18 +5,18 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - BootsFaces: next-gen JSF Framework - - - -

    Button test

    - - - - -

    You arrived to this page clicking a button. - You have passed a ViewParameter whose value is "#{testBean.val1}" -

    -     + + BootsFaces: next-gen JSF Framework + + + +

    Button test

    + + + + +

    You arrived to this page clicking a button. + You have passed a ViewParameter whose value is "#{testBean.val1}" +

    +     diff --git a/src/main/webapp/healthcheck.xhtml b/src/main/webapp/healthcheck.xhtml index 540fbc54..73183af4 100644 --- a/src/main/webapp/healthcheck.xhtml +++ b/src/main/webapp/healthcheck.xhtml @@ -1,52 +1,52 @@ - - BootsFaces: next-gen JSF Framework + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + BootsFaces: next-gen JSF Framework - - - - - -

    Healthcheck

    +     + + + + +

    Healthcheck

    - - #{healthCheckBean.reportMostFrequentObjects()} - - - - - - - - - - - - - + + #{healthCheckBean.reportMostFrequentObjects()} + + + + + + + + + + + + + - - + + - + -
    -
    -
    -
    -     -     -     +
    +
    +
    +
    +     + + diff --git a/src/main/webapp/index.xhtml b/src/main/webapp/index.xhtml index 55eda89b..52a98d8e 100644 --- a/src/main/webapp/index.xhtml +++ b/src/main/webapp/index.xhtml @@ -6,41 +6,42 @@ xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" > - - BootsFaces: next-gen JSF Framework - - - - - -

    BootsFaces Showcase

    - - - - -

    Welcome to the BootsFaces Showcase and Documentation

    - -     -     - - - Built on thecoder4eu-desktop Linux 4.2.0-27-generic amd64
    - by Gradle 2.10
    - Java Version 1.8.0_72 (Oracle Corporation 25.72-b15)
    - sourceCompatibility 1.7
    - targetCompatibility 1.7
    - Build Date Tue Feb 09 23:45:45 CET 2016
    -     - - hibernate-validator
    primefaces
    qrgen
    barcode4j-light
    core
    javase
    omnifaces
    components
    angularFaces-core
    jackson-jaxrs-json-provider
    cdi-api
    servlet-api
    jsf-api
    jsf-impl
    el-impl
    jboss-logging
    classmate
    xml-apis
    commons-logging
    commons-beanutils
    jackson-jaxrs-base
    jackson-core
    jackson-databind
    jackson-module-jaxb-annotations
    javax.el-api
    javax.interceptor-api
    javax.inject
    el-api
    jackson-annotations
    validation-api
    -     - - - -     - - -     -     -     + + BootsFaces: next-gen JSF Framework + + + + + +

    BootsFaces Showcase

    + + + + +

    Welcome to the BootsFaces Showcase and Documentation

    +

    + +     +     + + + Built on thecoder4eu-desktop Linux 4.12.3-041203-generic amd64
    + by Gradle 4.1
    + Java Version 1.8.0_144 (Oracle Corporation 25.144-b01)
    + sourceCompatibility 1.7
    + targetCompatibility 1.7
    + Build Date Sun Aug 20 10:53:16 CEST 2017
    +     + + hibernate-validator
    primefaces
    qrgen
    barcode4j-light
    javase
    core
    omnifaces
    highfaces
    bootsfaces
    cdi-api
    servlet-api
    jsf-api
    jsf-impl
    el-impl
    validation-api
    jboss-logging
    classmate
    xml-apis
    json
    javax.servlet-api
    javax.el-api
    javax.interceptor-api
    javax.inject
    el-api
    +     + + + +     + + +     +     +     diff --git a/src/main/webapp/integration/ButterFaces.xhtml b/src/main/webapp/integration/ButterFaces.xhtml index 5534e502..48a4cc4d 100644 --- a/src/main/webapp/integration/ButterFaces.xhtml +++ b/src/main/webapp/integration/ButterFaces.xhtml @@ -1,26 +1,26 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:butter="http://butterfaces.larmic.de/components" + xmlns:p="http://primefaces.org/ui"> - - - -

    Integration with ButterFaces

    -

    BootsFaces plays nicely with ButterFaces.

    -

    OK, it doesn't. But were working on it!

    + + + +

    Integration with ButterFaces

    +

    BootsFaces plays nicely with ButterFaces.

    +

    OK, it doesn't. But were working on it!

    - - -



    -     -     + + +



    + + diff --git a/src/main/webapp/integration/HighFaces.xhtml b/src/main/webapp/integration/HighFaces.xhtml index bf5d7a9b..b812d18a 100644 --- a/src/main/webapp/integration/HighFaces.xhtml +++ b/src/main/webapp/integration/HighFaces.xhtml @@ -8,263 +8,278 @@ xmlns:hf="http://highfaces.org" xmlns:p="http://primefaces.org/ui"> - - - -

    Integration with HighFaces

    -

    HighFaces is a small JSF library focusing on charts. - It's based on Highcharts.js. Note that HighFaces is published under - an Apache V2 license, but the base library, Highcharts.js, is not. It's free for non-commercial - use, but you have to buy a license for commercial use.

    - -

    Example

    -

    HighFaces works with BootsFaces out-of-the-box. Just add the library to your project, - add the

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    Interactive example

    -

    The charts play well with the AJAX API of BootsFaces:

    - - - - - - - - - - - - - - - - - - - - -
    - -     -     -     - - - - - - - - - - - - - - - -     - - - -



    -     + + + + + + + + + + + + + + +

    Integration with HighFaces

    +

    HighFaces is a small JSF library focusing on charts. + It's based on Highcharts.js. Note that HighFaces is published under + an Apache V2 license, but the base library, Highcharts.js, is not. It's free for non-commercial + use, but you have to buy a license for commercial use.

    + +

    Prerequisites

    +

    HighFaces requires Mojarra. It's not compatible with MyFaces.

    + + +

    Example

    +

    HighFaces works with BootsFaces out-of-the-box. Just add the library to your project, + add the

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    Interactive example

    +

    The charts play well with the AJAX API of BootsFaces:

    + + + + + + + + + + + + + + + + + + + + +
    + +     +     +     + + + + + + + + + + + + + + + +     + + + +



    +     diff --git a/src/main/webapp/integration/OmniFaces.xhtml b/src/main/webapp/integration/OmniFaces.xhtml index d2d637e6..11223f18 100644 --- a/src/main/webapp/integration/OmniFaces.xhtml +++ b/src/main/webapp/integration/OmniFaces.xhtml @@ -1,91 +1,100 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Integration with OmniFaces

    -

    BootsFaces loads many small CSS and JavaScript files. So it's a good idea to combine it with OmniFaces. - In particular, we recommend to use the CombinedResourceHandler. -

    -

    Note that we didn't run an exhaustive compatibility test yet. However, nobody's ever reported us problems with BootsFaces and OmniFaces.

    - - -

    Add these lines to your Maven pom.xml file:

    - - - -     - - - - - - + + + + + + + + + + +

    Integration with OmniFaces

    +

    BootsFaces loads many small CSS and JavaScript files. So it's a good idea to combine it with OmniFaces. + In particular, we recommend to use the CombinedResourceHandler. +

    +

    Note that we didn't run an exhaustive compatibility test yet. However, nobody's ever reported us problems with BootsFaces and OmniFaces.

    + + + +

    Add these lines to your Maven pom.xml file:

    + + + +     + + + + + + To activate the CombinedResourceHandler, add a <resource-handler> to the faces-config.xml file: - + - -     +     +     -

    Caching version of the CombinedResourceHandler

    -

    Caching can add a lot to your page's responsiveness. You have to add a few lines to the web.xml file to activate and configure caching.

    +

    Caching version of the CombinedResourceHandler

    +

    Caching can add a lot to your page's responsiveness. You have to add a few lines to the web.xml file to activate and configure caching.

    -

    Download the PrimeFaces Bootsstrap theme, add it to your application's lib folder and activate it in the web.xml like so:

    +

    Download the PrimeFaces Bootsstrap theme, add it to your application's lib folder and activate it in the web.xml like so:

    - - - + + + - -



    -     -     + +



    + + diff --git a/src/main/webapp/integration/PrimeFaces.xhtml b/src/main/webapp/integration/PrimeFaces.xhtml index ebf1eebb..b3e032d6 100644 --- a/src/main/webapp/integration/PrimeFaces.xhtml +++ b/src/main/webapp/integration/PrimeFaces.xhtml @@ -1,371 +1,383 @@ - - - - -

    Integration with PrimeFaces

    -

    BootsFaces plays nicely with PrimeFaces. Both frameworks have a couple of components in common, so there are two interesting strategies:

    -
      -
    • Use BootsFaces for defining the layout only. PrimeFaces contributes the input widgets.
      • -
    • Use the full wealth of BootsFaces components. In this case, PrimeFaces contributes the fancy widgets, such as the data table, tooltips, prime:growl or the chart widget.
      • -
    - -

    Configuration

    - - -

    Add these lines to your Maven pom.xml file:

    - - - -     - - - - - - -

    Download the PrimeFaces Bootstrap theme, add it to your application's lib folder and activate it in the web.xml like so:

    s - - - -     -     - -

    Example for Scenario 1

    -

    Even with the Bootstrap theme, PrimeFaces components don't blend into the Bootstrap look perfectly. On the other hand, PrimeFaces has a lot of advanced components BootsFaces doesn't provide - and probably never will. - So it's a good idea to use the "bread and butter" widgets of BootsFaces and use PrimeFaces for the advanced widgets:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Markup:
    - -     -     - -

    Example for Scenario 2

    -

    The demo below is taken from the PrimeFaces showcase. We adapted it slightly to take advantage of the BootsFaces API.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Markup:
    - -     -     - - -



    -     -     + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:p="http://primefaces.org/ui"> + + + + + + + + + + + + + + + +

    Integration with PrimeFaces

    +

    BootsFaces plays nicely with PrimeFaces. Both frameworks have a couple of components in common, so there are two interesting strategies:

    +
      +
    • Use BootsFaces for defining the layout only. PrimeFaces contributes the input widgets.
      • +
    • Use the full wealth of BootsFaces components. In this case, PrimeFaces contributes the fancy widgets, such as the data table, tooltips, prime:growl or the chart widget.
      • +
    + +

    Configuration

    + + +

    Add these lines to your Maven pom.xml file:

    + + + +     + + + + + + +

    Download the PrimeFaces Bootstrap theme, add it to your application's lib folder and activate it in the web.xml like so:

    s + + + +     +     + +

    Example for Scenario 1

    +

    Even with the Bootstrap theme, PrimeFaces components don't blend into the Bootstrap look perfectly. On the other hand, PrimeFaces has a lot of advanced components BootsFaces doesn't provide - and probably never will. + So it's a good idea to use the "bread and butter" widgets of BootsFaces and use PrimeFaces for the advanced widgets:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Markup:
    + +     +     + +

    Example for Scenario 2

    +

    The demo below is taken from the PrimeFaces showcase. We adapted it slightly to take advantage of the BootsFaces API.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Markup:
    + +     +     + + +



    +     + diff --git a/src/main/webapp/issues/issue328.xhtml b/src/main/webapp/issues/issue328.xhtml index 9822ad42..0b1a056c 100644 --- a/src/main/webapp/issues/issue328.xhtml +++ b/src/main/webapp/issues/issue328.xhtml @@ -1,20 +1,20 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    InputText

    - - - - - - -



    -     + + +

    InputText

    + + + + + + +



    +     diff --git a/src/main/webapp/issues/issue360.xhtml b/src/main/webapp/issues/issue360.xhtml index a27ea436..1f2a2d6b 100644 --- a/src/main/webapp/issues/issue360.xhtml +++ b/src/main/webapp/issues/issue360.xhtml @@ -5,25 +5,25 @@ xmlns:p="http://primefaces.org/ui" xmlns:b="http://bootsfaces.net/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> - + Minimal b:datatable demo - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/issues/issue504.xhtml b/src/main/webapp/issues/issue504.xhtml index d933ad45..f3eb30c9 100644 --- a/src/main/webapp/issues/issue504.xhtml +++ b/src/main/webapp/issues/issue504.xhtml @@ -1,45 +1,45 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/issues/issue906.xhtml b/src/main/webapp/issues/issue906.xhtml new file mode 100644 index 00000000..83e2f578 --- /dev/null +++ b/src/main/webapp/issues/issue906.xhtml @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/issues/issue907.xhtml b/src/main/webapp/issues/issue907.xhtml new file mode 100644 index 00000000..465a07ef --- /dev/null +++ b/src/main/webapp/issues/issue907.xhtml @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/issues/issue908.xhtml b/src/main/webapp/issues/issue908.xhtml new file mode 100644 index 00000000..5a418caa --- /dev/null +++ b/src/main/webapp/issues/issue908.xhtml @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/jquery-ui/datepicker.xhtml b/src/main/webapp/jquery-ui/datepicker.xhtml index 8c1490c7..1283baea 100644 --- a/src/main/webapp/jquery-ui/datepicker.xhtml +++ b/src/main/webapp/jquery-ui/datepicker.xhtml @@ -1,330 +1,343 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:p="http://primefaces.org/ui"> - - -

    Date Picker

    -

    BootsFaces derives the Date Picker component from jQuery UI's widget because of its ease of use and its configurability.

    -

    Caveat: There's a new component, the <b:dateTimePicker />, that doesn't need jQueryUI. - We recommend to use the new component. The <b:datepicker> is considered deprecated and will be removed in - one of the next versions of BootsFaces.

    - Date Picker modes -

    The <b:datepicker> supports six modes for displaying the widget, specified with the attributemode:

    + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    b:datepickermode attributeDescription
    popupIn this mode, the Date picker is triggered only when the user clicks in the field.
    popup-iconIn this mode, the Date picker is triggered either when the user clicks in the field, or when the user clicks on the calendar icon. The icon is positioned on the right of the input.
    icon-popupSame as above, but the icon is positioned on the left of the input.
    toggle-iconThis is the default mode. In this mode, the Date picker is triggered only when the user clicks on the calendar icon. The icon is positioned on the right of the input.
    icon-toggleSame as above, but the icon is positioned on the left of the input.
    inlineIn this mode, the Date picker is displayed directly inline and no input field is shown.
    -     - Widget options -

    BootsFaces <b:datepicker> tag supports jQuery UI's widget most relevant options:

    + + +

    Date Picker

    +

    BootsFaces derives the Date Picker component from jQuery UI's widget because of its ease of use and its configurability.

    +

    Caveat: There's a new component, the <b:dateTimePicker />, that doesn't need jQueryUI. + We recommend to use the new component. The <b:datepicker> is considered deprecated and will be removed in + one of the next versions of BootsFaces.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    OptionTypeDescription
    changeMonthbooleanBoolean value to specify if month selector should be shown.
    changeYearbooleanBoolean value to specify if year selector should be shown.
    firstDayintSet the first day of the week: Sunday is 0, Monday is 1, etc. Default is 0 (Sunday).
    numberOfMonthsintNumber of months to show.
    showButtonPanelbooleanBoolean value to specify if row Buttons to the bottom of calendar should be shown.
    showWeekbooleanBoolean value to specify if Week number should be shown.
    + Date Picker modes +

    The <b:datepicker> supports six modes for displaying the widget, specified with the attributemode:

    - - - Date Picker examples - - - - Date Picker with showButtonPanel, changeMonth, changeYear set to true. - - - - Date Picker with numberOfMonths="3" . - - - - Inline Date Picker with showWeek="true" and firstDay="1" . + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    b:datepickermode attributeDescription
    popupIn this mode, the Date picker is triggered only when the user clicks in the field.
    popup-iconIn this mode, the Date picker is triggered either when the user clicks in the field, or when the user clicks on the calendar icon. The icon is positioned on the right of the input.
    icon-popupSame as above, but the icon is positioned on the left of the input.
    toggle-iconThis is the default mode. In this mode, the Date picker is triggered only when the user clicks on the calendar icon. The icon is positioned on the right of the input.
    icon-toggleSame as above, but the icon is positioned on the left of the input.
    inlineIn this mode, the Date picker is displayed directly inline and no input field is shown.
    +     -     - - - - - + Widget options +

    BootsFaces <b:datepicker> tag supports jQuery UI's widget most relevant options:

    -     -     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OptionTypeDescription
    changeMonthbooleanBoolean value to specify if month selector should be shown.
    changeYearbooleanBoolean value to specify if year selector should be shown.
    firstDayintSet the first day of the week: Sunday is 0, Monday is 1, etc. Default is 0 (Sunday).
    numberOfMonthsintNumber of months to show.
    showButtonPanelbooleanBoolean value to specify if row Buttons to the bottom of calendar should be shown.
    showWeekbooleanBoolean value to specify if Week number should be shown.
    - - - - - - - converted with <f:convertDateTime pattern="dd/MM/yyyy"/> + + + Date Picker examples + + + + Date Picker with showButtonPanel, changeMonth, changeYear set to true. + + + + Date Picker with numberOfMonths="3" . + + + + Inline Date Picker with showWeek="true" and firstDay="1" . - - - + + + + + + - - - - - converted with <f:convertDateTime pattern="MM/dd/yy"/> - - - - - - + + -

    Mandatory Dates

    + + + + + + + converted with <f:convertDateTime pattern="dd/MM/yyyy"/> + + + + + + + + + + converted with <f:convertDateTime pattern="MM/dd/yy"/> + + + + + + + +

    Mandatory Dates

    - Datepickers support the - required - attribute: + Datepickers support the + required + attribute:

    - - - - - - - - - - - + + + + + + + + + + + + ]]> -

    Responsive design

    -

    You can use all the attributes controlling the responsive behaviour of <b:column /> - also with <b:datepicker />. Note that this is equivalent to putting it into a - <b:column />. In particular, the CSS styles are inside the column div. -

    - - - - - - - - - - - - - - - - - - - - - - +

    Responsive design

    +

    You can use all the attributes controlling the responsive behaviour of <b:column /> + also with <b:datepicker />. Note that this is equivalent to putting it into a + <b:column />. In particular, the CSS styles are inside the column div. +

    + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + ]]> +     +     +     -

    Visibility depending on screen size

    -

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    -
    - - - - - - - - - - - - - - - - - - - +

    Visibility depending on screen size

    +

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    +
    + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + ]]> +     +     +
    -

    Reference section

    - - - - Skinning - -
      -
    • - <b:datePicker /> is an input tag bearing the CSS-classes form-control and hasDatepicker. -
      • -
    • - If the attribute required is true, the pseudo CSS class bf-required is added. - Thus you can define your custom style for required fields. -
      • -
    • - If there's a FacesMessage, the input field is bears one of the pseudo CSS classes - bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, - the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. -
      • -
    -     - +

    Reference section

    + + + + Skinning + +
      +
    • + <b:datePicker /> is an input tag bearing the CSS-classes form-control and hasDatepicker. +
      • +
    • + If the attribute required is true, the pseudo CSS class bf-required is added. + Thus you can define your custom style for required fields. +
      • +
    • + If there's a FacesMessage, the input field is bears one of the pseudo CSS classes + bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, + the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. +
      • +
    +     + -



    -     -     +



    + + diff --git a/src/main/webapp/jquery-ui/datepicker_localization.xhtml b/src/main/webapp/jquery-ui/datepicker_localization.xhtml index e74094d0..3cab265b 100644 --- a/src/main/webapp/jquery-ui/datepicker_localization.xhtml +++ b/src/main/webapp/jquery-ui/datepicker_localization.xhtml @@ -5,66 +5,66 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - BootsFaces: next-gen JSF Framework - - - -

    Date Picker Localization

    - - - Date Picker Localization - - - - Date Picker without lang. - - - - Date Picker with numberOfMonths="3" . - - - - Inline Date Picker with showWeek="true" and firstDay="1" . + + BootsFaces: next-gen JSF Framework + + + +

    Date Picker Localization

    + + + Date Picker Localization + + + + Date Picker without lang. + + + + Date Picker with numberOfMonths="3" . + + + + Inline Date Picker with showWeek="true" and firstDay="1" . - - - - - - - - - - - - - - - - - converted with <f:convertDateTime pattern="dd/MM/yyyy"/> + + + + + + - - - - - converted with <f:convertDateTime pattern="dd/MM/yyyy"/> - - - - - - converted with <f:convertDateTime pattern="MM/dd/yy"/> -     - - - - - -     + + + + + + + + + + converted with <f:convertDateTime pattern="dd/MM/yyyy"/> + + + + + + converted with <f:convertDateTime pattern="dd/MM/yyyy"/> + + + + + + converted with <f:convertDateTime pattern="MM/dd/yy"/> + + + + + + + diff --git a/src/main/webapp/jquery-ui/slider.xhtml b/src/main/webapp/jquery-ui/slider.xhtml index c891bf25..def60bfc 100644 --- a/src/main/webapp/jquery-ui/slider.xhtml +++ b/src/main/webapp/jquery-ui/slider.xhtml @@ -1,497 +1,510 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - -

    Slider

    -

    BootsFaces derives the Slider component from jQuery UI's widget, thus the b:slider tag supports most of its options.

    -

    Caveat: Currently, we're developing a new component that doesn't need jQueryUI. In one of the next versions of BootsFaces - we'll either replace the implementation of <b:slider/> by what we're currently calling <b:slider2 />. - If that's not possible for compatibility reasons, we'll declare <b:slider /> deprecated and remove it in one of the - next versions of BootsFaces.

    -

    Basic usage

    -

    You can use the attributes min, max, orientation and step.

    -
    -

    There are three modes available that you can choose from with the mode attribute: basic, badge and edit.

    -

    In basic mode, only the slider and the label(if present) will be shown and the slider value will be hidden.

    -

    In badge mode, the default, the slider value will be shown in a badge. This is the default mode.

    -

    In edit mode, an editable input field showing the slider value will be shown; - in this mode you can change the value by sliding or editing the value in the field.

    -
    - -

    Basic Mode

    -

    The most simple slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys(once you click on it).

    - -
    -

    Edit Mode

    -

    Use the edit mode when you want to allow the user to change the value editing it in an input field.

    - -

    Notice how the slide handle positions itself as you type in the input box to reflect the current value and how the value in the input box changes when you slide.

    -
    -

    Badge Mode

    -

    In this mode, the slider value will be shown in a badge.

    - -     -

    Options and Examples

    -

    Horizontal sliders width

    -

    You can use the span attribute to control the width, in terms of Bootstrap's grid columns:

    - - - -

    If you omit the span attribute, the component will take the full width of the parent container.

    -
    -

    You can use more than one slider to get input for complex values, like the Time:

    - - - EXAMPLE - Time slider - - - - - - - - - - - -
    - -     - - Markup:
    + + + + + + + + + + + - -     -     -     -

    You can use the orientation attribute to obtain a vertical slider.

    -

    If you specify orientation="vertical", the Label is rendered on top, then the value and the slider on the bottom.

    -

    If orientation="vertical-bottom" is used, the slider is rendered on top, then the value and the Label on the bottom.

    - - EXAMPLE - Vertical sliders - - - #{' '} - - - - - - - #{' '} - - - - Markup:
    - -     -     -

    Styles and style-classes

    -

    Until version 1.0.2 of BootsFaces, the style and style-class attributes applied only - the the optional badge.

    -

    Since 1.1.0, there are three separate pairs of options:

    -
      -
    • style and style-class apply to the entire slider.
      • -
    • label-style and label-style-class apply to the optional label.
      • -
    • badge-style and badge-style-class apply to the optional badge or to the optional input field.
      • -
    - - EXAMPLE - stylish sliders - - - - - - - - - - - - - - - Markup:
    + +

    Slider

    +

    BootsFaces derives the Slider component from jQuery UI's widget, thus the b:slider tag supports most of its options.

    +

    Caveat: Currently, we're developing a new component that doesn't need jQueryUI. In one of the next versions of BootsFaces + we'll either replace the implementation of <b:slider/> by what we're currently calling <b:slider2 />. + If that's not possible for compatibility reasons, we'll declare <b:slider /> deprecated and remove it in one of the + next versions of BootsFaces.

    +

    Basic usage

    +

    You can use the attributes min, max, orientation and step.

    +
    +

    There are three modes available that you can choose from with the mode attribute: basic, badge and edit.

    +

    In basic mode, only the slider and the label(if present) will be shown and the slider value will be hidden.

    +

    In badge mode, the default, the slider value will be shown in a badge. This is the default mode.

    +

    In edit mode, an editable input field showing the slider value will be shown; + in this mode you can change the value by sliding or editing the value in the field.

    +
    + +

    Basic Mode

    +

    The most simple slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys(once you click on it).

    - -     -     + +
    +

    Edit Mode

    +

    Use the edit mode when you want to allow the user to change the value editing it in an input field.

    + +

    Notice how the slide handle positions itself as you type in the input box to reflect the current value and how the value in the input box changes when you slide.

    +
    +

    Badge Mode

    +

    In this mode, the slider value will be shown in a badge.

    + + +

    Options and Examples

    +

    Horizontal sliders width

    +

    You can use the span attribute to control the width, in terms of Bootstrap's grid columns:

    + + + +

    If you omit the span attribute, the component will take the full width of the parent container.

    +
    +

    You can use more than one slider to get input for complex values, like the Time:

    + + + EXAMPLE - Time slider + + + + + + + + + + + +
    + +     + + Markup:
    + +     +     +     +

    You can use the orientation attribute to obtain a vertical slider.

    +

    If you specify orientation="vertical", the Label is rendered on top, then the value and the slider on the bottom.

    +

    If orientation="vertical-bottom" is used, the slider is rendered on top, then the value and the Label on the bottom.

    + + EXAMPLE - Vertical sliders + + + #{' '} + + + + + + + #{' '} + + + + Markup:
    -

    The Slider component has been developed so that it fits well both in forms and in Bootstrap Grid system.

    -

    This allows you to obtain complex input interfaces that adapt to all media screen sizes, taking advantage of the responsive features of the Grid system.

    - - EXAMPLE - Equalizer - - - #{' '} - - - - - - - - - - - - - - - - #{' '} - - - - Markup:
    + +     +     +

    Styles and style-classes

    +

    Until version 1.0.2 of BootsFaces, the style and style-class attributes applied only + the the optional badge.

    +

    Since 1.1.0, there are three separate pairs of options:

    +
      +
    • style and style-class apply to the entire slider.
      • +
    • label-style and label-style-class apply to the optional label.
      • +
    • badge-style and badge-style-class apply to the optional badge or to the optional input field.
      • +
    + + EXAMPLE - stylish sliders + + + + + + + + + + + + + + + Markup:
    - -     -     -

    Slider Handle options

    -

    Handle Size

    -

    If you are targeting Mobile, it can be useful to have a bigger handle.

    -

    You can control the handle size adding the handle-size attribute, using the md or lg values for a Medium sized handle and a Large sized handle respectively.

    - - - EXAMPLE - Handle Size - - - - - - - - - - - - - - - + +     +     - - Markup:
    - -     - - -

    Note: the same applies to Vertical Sliders.

    -

    Handle Shape

    -

    The default handle has a rounded square shape.

    -

    If you prefer a round handle you can add the handle-shape="round" attribute.

    - - - EXAMPLE - Handle Shape - - - - - - - - - - - - - - - +

    The Slider component has been developed so that it fits well both in forms and in Bootstrap Grid system.

    +

    This allows you to obtain complex input interfaces that adapt to all media screen sizes, taking advantage of the responsive features of the Grid system.

    + + EXAMPLE - Equalizer + + + #{' '} + + + + + + + + + + + + + + + + #{' '} + + + + Markup:
    - - Markup:
    + +     +     +

    Slider Handle options

    +

    Handle Size

    +

    If you are targeting Mobile, it can be useful to have a bigger handle.

    +

    You can control the handle size adding the handle-size attribute, using the md or lg values for a Medium sized handle and a Large sized handle respectively.

    + + + EXAMPLE - Handle Size + + + + + + + + + + + + + + + - - - - -

    Note: the same applies to Vertical Sliders.

    -

    Read only / disabled

    -

    The attributes readonly and disabled can also be applied to sliders.

    - - - Disabled and readonly - - - - - - - - - - - - - - - + + Markup:
    - - Markup:
    + +     +     +     +

    Note: the same applies to Vertical Sliders.

    +

    Handle Shape

    +

    The default handle has a rounded square shape.

    +

    If you prefer a round handle you can add the handle-shape="round" attribute.

    + + + EXAMPLE - Handle Shape + + + + + + + + + + + + + + + - - - - + + Markup:
    - - Submitted values: - - - + +     +     +     +

    Note: the same applies to Vertical Sliders.

    +

    Read only / disabled

    +

    The attributes readonly and disabled can also be applied to sliders.

    + + + Disabled and readonly + + + + + + + + + + + + + + + - - - - - - - - + + Markup:
    - -

    Labels, required fields and error messages

    -

    You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility, - you can suppress automatic rendering of labels by adding renderLabel="false". -

    -
    BootsFaces 1.0.2 and below:
    -

    Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.

    -

    If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, - bf-error or bf-fatal, depending on which error severity the message has. - The latter two classes color the label red.

    -

    If there's no message, - the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. -

    -
    BootsFaces 1.1.0:
    -

    bf-info, bf-warning, - bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success, - has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.

    -
    Compatibility settings
    -

    If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes - in the web.xml.

    + +     +     +     + + Submitted values: + + + -
    -

    Reference section

    - - - - Skinning - -
      -
    • - If the attribute required is true, the pseudo CSS class bf-required is added. Thus you can define your custom style for required fields. -
      • -
    • - if theres a FacesMessage, the input field is bears one of the pseudo CSS classes - bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, - the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. -
      • -
    • If there's a label, it bears the CSS class required, if it's a mandatory field. - This class adds an asterisk to the label text. You can override the CSS class to remove the asterisk - or to replace it by something else.
      • -
    • If there's a label, it bears the CSS classes bf-info, bf-warning, - bf-error or bf-fatal, depending on which error message the input field has. - The latter two classes color the label red.
      - If there's no message, - the label bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. -
      • + + + + + + + + -
    -     +

    Labels, required fields and error messages

    +

    You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility, + you can suppress automatic rendering of labels by adding renderLabel="false". +

    +
    BootsFaces 1.0.2 and below:
    +

    Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.

    +

    If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, + bf-error or bf-fatal, depending on which error severity the message has. + The latter two classes color the label red.

    +

    If there's no message, + the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. +

    +
    BootsFaces 1.1.0:
    +

    bf-info, bf-warning, + bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success, + has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.

    +
    Compatibility settings
    +

    If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes + in the web.xml.

    - -
    -
    -
    -
    -     -     +
    +

    Reference section

    + + + + Skinning + +
      +
    • + If the attribute required is true, the pseudo CSS class bf-required is added. Thus you can define your custom style for required fields. +
      • +
    • + if theres a FacesMessage, the input field is bears one of the pseudo CSS classes + bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, + the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. +
      • +
    • If there's a label, it bears the CSS class required, if it's a mandatory field. + This class adds an asterisk to the label text. You can override the CSS class to remove the asterisk + or to replace it by something else.
      • +
    • If there's a label, it bears the CSS classes bf-info, bf-warning, + bf-error or bf-fatal, depending on which error message the input field has. + The latter two classes color the label red.
      + If there's no message, + the label bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default. +
      • + +
    +     + + +
    +
    +
    +
    + +     + diff --git a/src/main/webapp/jquery-ui/slider2.xhtml b/src/main/webapp/jquery-ui/slider2.xhtml index 91ecb945..6b8efe24 100644 --- a/src/main/webapp/jquery-ui/slider2.xhtml +++ b/src/main/webapp/jquery-ui/slider2.xhtml @@ -1,212 +1,212 @@ - - -

    Fancy sliders

    -

    Options and Examples

    -

    You can use more than one slider to get input for complex values, like the Time:

    - + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + +

    Fancy sliders

    +

    Options and Examples

    +

    You can use more than one slider to get input for complex values, like the Time:

    + - + + value="#{clockBean.hour}" label="HH" /> + value="#{clockBean.minute}" label="MM" />
    - +     + #sec { + stroke: #f55; + } + - - - - - - - + + + + + + +     - Clock inspired by demosthenes.info/blog/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript. - + Clock inspired by demosthenes.info/blog/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript. +     + class="brush: xml; toolbar: false;gutter:true;first-line: 0"> + + + + + + + + + + + + + +
    + +     +     + + + + + + + + + + + + + ]]>     - -     - - - Submitted values: - - - - - - - - - - - - - -     - - - -
    -
    -
    -
    + ]]> + + + + + Submitted values: + + + + + + + + + + + + + +     + + + +
    +
    +
    +
    -     -     + + diff --git a/src/main/webapp/jquery-ui/slider3.xhtml b/src/main/webapp/jquery-ui/slider3.xhtml index 0e1c20c1..fdf83963 100644 --- a/src/main/webapp/jquery-ui/slider3.xhtml +++ b/src/main/webapp/jquery-ui/slider3.xhtml @@ -1,96 +1,93 @@ - - BootsFaces: next-gen JSF Framework - - + #blue .ui-slider-handle { + border-color: #729fcf; + } + - - - - -

    Fancy sliders

    -
    - - -
    Angular Slider: {{clockBean.minute}}
    -
    - - - -     -     -     + + + + +

    Fancy sliders

    +
    + +
    Angular Slider: {{clockBean.minute}}
    +
    + +     +     +     diff --git a/src/main/webapp/layout/Accordion.xhtml b/src/main/webapp/layout/Accordion.xhtml index b1cff1d1..e38fc7d8 100644 --- a/src/main/webapp/layout/Accordion.xhtml +++ b/src/main/webapp/layout/Accordion.xhtml @@ -1,137 +1,148 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Accordion (<b:accordion />)

    -

    The <b:accordion> component wrap one or more <b:panel> components to display them as an accordion.

    -

    Basic Usage

    -

    - Essentially, accordion is only a wrapper for panels. The additional attribute that can be specified, is the expandedPanels that - provide the ability to make expanded by default, specified panels ids. -

    - - - - Content 1 - Content 2 - Content 3 - - - - - - Footer of panel 3 - - - - - - JSF markup: - - - - + + + + + + + + + + + + +

    Accordion (<b:accordion />)

    + +

    The <b:accordion> component wrap one or more <b:panel> components to display them as an accordion.

    +

    Basic Usage

    +

    + Essentially, accordion is only a wrapper for panels. The additional attribute that can be specified, is the expandedPanels that + provide the ability to make expanded by default, specified panels ids. +

    + + + + Content 1 + Content 2 + Content 3 + + + + + + Footer of panel 3 + + + + + + JSF markup: + + - -

    Disabling the content

    -

    By setting the flag contentDisabled="true" you can set each child element to disabled. More precisely, - the panels of the accordion are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but - not every component. In particular, tabs and panels still work. You'll also have to be careful about - links (everything that's using an <a> tag, like <button> and <b:navLink>.) - These elements will be shown as disbled, but still are accessible. In part, that's because this CSS property isn't fully - standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    - - - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - +     +     + +

    Disabling the content

    +

    By setting the flag contentDisabled="true" you can set each child element to disabled. More precisely, + the panels of the accordion are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but + not every component. In particular, tabs and panels still work. You'll also have to be careful about + links (everything that's using an <a> tag, like <button> and <b:navLink>.) + These elements will be shown as disbled, but still are accessible. In part, that's because this CSS property isn't fully + standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + - - - + + + + + -
    -

    Reference section

    - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     +
    +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     - -
    -
    -
    -
    -     + +
    +
    +
    +
    +     diff --git a/src/main/webapp/layout/Canvas.xhtml b/src/main/webapp/layout/Canvas.xhtml index 2c19a46f..4b3e3b60 100644 --- a/src/main/webapp/layout/Canvas.xhtml +++ b/src/main/webapp/layout/Canvas.xhtml @@ -1,100 +1,112 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Canvas (<b:canvas />)

    -

    Sometimes the standard widgets are not enough. You have to draw a painting. That's what <b:canvas> is for.

    -

    Basic usage

    -

    <b:canvas> consists of two parts:

    -
      -
    • The widget itself, which is simply an HTML canvas.
      • -
    • A simple and useful API to define the drawing on the server side. You don't have to know anything about JavaScript to create a drawing.
      • -
    + + + + + + + - - - - - JSF markup: - - + + + +

    Canvas (<b:canvas />)

    + +

    Sometimes the standard widgets are not enough. You have to draw a painting. That's what <b:canvas> is for.

    +

    Basic usage

    +

    <b:canvas> consists of two parts:

    +
      +
    • The widget itself, which is simply an HTML canvas.
      • +
    • A simple and useful API to define the drawing on the server side. You don't have to know anything about JavaScript to create a drawing.
      • +
    + + + + + + JSF markup: + + - + - + filledCircle(805+70+105, 470-210-10,5, "blue"); + text(800+40+105, 470-195, "AngularFaces", "14px Arial"); + } + } + ]]> - - - +     - - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     +     +     + +
    +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     - -     -     \ No newline at end of file + + + diff --git a/src/main/webapp/layout/FlyOutMenu.xhtml b/src/main/webapp/layout/FlyOutMenu.xhtml index d9ac9c59..a6a3d686 100644 --- a/src/main/webapp/layout/FlyOutMenu.xhtml +++ b/src/main/webapp/layout/FlyOutMenu.xhtml @@ -1,101 +1,177 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Fly-out menu

    -

    The fly-out menu is a hierarchical menu that puts the sub-menus - to the right-hand side of the parent menu. They "fly out" of the - parent menu.

    -

    - The menu entries are - <b:navLink /> - tags supporting both AJAX and non-AJAX navigation. -

    -

    - You can create a submenu by grouping several menu entries in a - <b:dropMenu /> - tag. -

    - - - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - + + + + + + + + + + + +

    Fly-out menu

    +

    The fly-out menu is a hierarchical menu that puts the sub-menus + to the right-hand side of the parent menu. They "fly out" of the + parent menu.

    +

    + The menu entries are + <b:navLink /> + tags supporting both AJAX and non-AJAX navigation. +

    +

    + You can create a submenu by grouping several menu entries in a + <b:dropMenu /> + tag. +

    + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + - -

    Reference section

    - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - -
    -
    -
    -
    -     + +     + +

    Opening submenus downwards instead of positioning them to the left-hand side

    + +

    You can modify the position of the submenu with a little CSS code. For instance, you can open the submenu below the current menu item, + pushing the rest of the menu downward like so:

    + + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + +
    +
    +
    +
    +     diff --git a/src/main/webapp/layout/Image.xhtml b/src/main/webapp/layout/Image.xhtml index 5c360b73..f1f17d0a 100644 --- a/src/main/webapp/layout/Image.xhtml +++ b/src/main/webapp/layout/Image.xhtml @@ -1,109 +1,160 @@ - - - -

    Image (<b:image />)

    -

    The <b:image /> component is just that: an image. Plus the unified AJAX engine of BootsFaces, and Bootstrap tooltips.

    - -

    Basic usage

    - - - - - - JSF markup: - - - - + + -

    Alternatively, you can use the JSF resource libraries, just the way you're used to from <h:graphicImage />;

    - - - - - - JSF markup: - - - - - -

    Advanced usage

    -

    You can use the standard JavaScript callbacks to call both JavaScript function and Java methods (via AJAX). - See BootsFaces chess - for a full-blown demo. These following demonstrate how BootsFaces chess uses AJAX to implement drag and drop:

    - - - - Missing live preview - - - JSF markup: - - - - + + + +

    Progress bar

    +

    Sometime your images load slowly. BootsFaces offers a JavaScript API tracking the progress. You can use it to implement + a progress bar. If you benefit from a fast internet connection, the example below is to fast to show a progress bar. + However, you can track the progress by opening your browser's web developer tools:

    +
      +
    • The console window should display at least threee progress messages (and probably more).
      • +
    • If you're using Chrome, open the network tab, deactivate the cache and activate throttling. Set the speed of the + connection to "fast 3G". Now this page loads very slow (more than 10 seconds until the page starts to be rendered), + so you can watch the progress bar moving slowly to 100%. (Other browsers probably have similar features).
      • +
    + + + + + + JSF markup: + + + + + + + +

    Advanced usage

    +

    You can use the standard JavaScript callbacks to call both JavaScript function and Java methods (via AJAX). + See BootsFaces chess + for a full-blown demo. These following demonstrate how BootsFaces chess uses AJAX to implement drag and drop:

    + + + + Missing live preview + + + JSF markup: + + - - - - - -

    Don't use both value and name/library

    -

    Until BootsFaces 0.8.5, there was an error in the documentation which lead some developers to use both - name and value. Both attributes belong to different resource loading mechanisms, - so this caused RES_NOT_FOUND errors. Since BootsFaces 0.8.6, the value attributes is evaluated first. - If both attributes are provided, BootsFaces displays a warning in the logfile (only in the development stage).

    - -

    Responsive attributes

    -

    The image supports the full range of responsive attributes, such as col-*, visible - and hidden:

    - - - - - - - - - JSF markup: - - - - +     +     -

    Reference section

    - - - - Skinning - -

    BootsFaces generates pretty simple code for the <b:image>. In particular, there's no extra CSS class. You can modify the appearance of the - image using the standard JSF attributes styleClass and style.

    -     +

    Reference section

    + + + + Skinning + +

    BootsFaces generates pretty simple code for the <b:image>. In particular, there's no extra CSS class. You can modify the appearance of the + image using the standard JSF attributes styleClass and style.

    +     - -     + +     diff --git a/src/main/webapp/layout/ImageAttributes.xhtml b/src/main/webapp/layout/ImageAttributes.xhtml index 3cb8638d..290fc942 100644 --- a/src/main/webapp/layout/ImageAttributes.xhtml +++ b/src/main/webapp/layout/ImageAttributes.xhtml @@ -167,6 +167,16 @@ (none) Client side callback when a drag-and-drop action ends. May also call an AJAX function. + + onloadend + (none) + JavaScript code executed when the image has successfully been loaded. Note that using this options reduces the speed of loading. + + + onloadstart + (none) + JavaScript code executed when the image starts loading. Note that using this options reduces the speed of loading. + onmousedown (none) @@ -192,6 +202,11 @@ (none) Client side callback to execute when a pointer input element is released over input element. + + onprogress + (none) + JavaScript code executed when the image loading progresses. Note that using this options reduces the speed of loading. + process (none) diff --git a/src/main/webapp/layout/Kebab.xhtml b/src/main/webapp/layout/Kebab.xhtml index 9bc67f2d..2f996d1f 100644 --- a/src/main/webapp/layout/Kebab.xhtml +++ b/src/main/webapp/layout/Kebab.xhtml @@ -1,149 +1,158 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Kebab (<b:kebab />)

    + } + +

    Kebab (<b:kebab />)

    + +

    <b:kebab> are similar to DropMenu and support the same feature set.

    +

    Basic usage

    +

    Kebabs are rendered as three vertical dots and will show a overflow menu when clicked. + The example below shows both the kebab menu, and what it looks like if it's content is disabled by setting content-disabled="true":

    + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + + +
    +
    + Using the Kebab in a Navbar +

    It's also possible to use the Kebab in a Navbar, you may need to use the fluid="true" option in the navBar tag for its correct positioning:

    + + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + - - - - -
    -
    - Using the Kebab in a Navbar -

    It is possible tu use the Kebab in a Navbar:

    - - - - - - - - - - - - - - - - - - - - - - - - - - JSF markup: + + + + + + + + + + + - - - -
    + + + ]]> + + +
    -
    - - - - Skinning - -
      -
    • none.
      • -
    -     +

    Reference section

    + + + + Skinning + +
      +
    • none.
      • +
    +     - -     + +     diff --git a/src/main/webapp/layout/NavCommandLinkAttributes.xhtml b/src/main/webapp/layout/NavCommandLinkAttributes.xhtml index 1e0b7ece..f8da8b80 100644 --- a/src/main/webapp/layout/NavCommandLinkAttributes.xhtml +++ b/src/main/webapp/layout/NavCommandLinkAttributes.xhtml @@ -95,7 +95,7 @@ header (none) - If present, this element is rendered as Header in a menu with the text specifide by this attribute value: all other attributes will be ignored. + If present, this element is rendered as Header in a menu with the text specified by this attribute value: all other attributes will be ignored. hidden diff --git a/src/main/webapp/layout/NavLinkAttributes.xhtml b/src/main/webapp/layout/NavLinkAttributes.xhtml index 4042d20a..89ef9af1 100644 --- a/src/main/webapp/layout/NavLinkAttributes.xhtml +++ b/src/main/webapp/layout/NavLinkAttributes.xhtml @@ -95,7 +95,7 @@ header (none) - If present, this element is rendered as Header in a menu with the text specifide by this attribute value: all other attributes will be ignored. + If present, this element is rendered as Header in a menu with the text specified by this attribute value: all other attributes will be ignored. hidden diff --git a/src/main/webapp/layout/PanelAttributes.xhtml b/src/main/webapp/layout/PanelAttributes.xhtml index 07f527de..c3ed5bab 100644 --- a/src/main/webapp/layout/PanelAttributes.xhtml +++ b/src/main/webapp/layout/PanelAttributes.xhtml @@ -97,6 +97,41 @@ (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. + + icon + (none) + Panel header icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute. + + + icon-align
    iconAlign (alternative writing) + (none) + Alignment can be right or left. + + + icon-awesome
    iconAwesome (alternative writing) + (none) + Font Awesome icon to show in this Panel header, can be one of the Font Awesome icon names. Alignment can be specified with the icon-align attribute. + + + icon-flip
    iconFlip (alternative writing) + (none) + Flip the icon: can be H (horizontal) or V (vertical). + + + icon-rotate
    iconRotate (alternative writing) + (none) + Rotate 90 degrees the icon: Can be L,R. + + + icon-size
    iconSize (alternative writing) + (none) + Icon Size: legal values are lg, 2x, 3x, 4x, 5x. + + + icon-spin
    iconSpin (alternative writing) + false + Boolean value: if true the icon will spin. + id (none) diff --git a/src/main/webapp/layout/Spinner.xhtml b/src/main/webapp/layout/Spinner.xhtml index d5f5f686..33390ebd 100644 --- a/src/main/webapp/layout/Spinner.xhtml +++ b/src/main/webapp/layout/Spinner.xhtml @@ -1,54 +1,65 @@ - - - -

    Spinner (<b:spinner />)

    - -

    <b:spinner> is a facility tag to have a spinner icon, to use as a loading ui.

    -

    Basic usage

    - - - #{' '} - #{' '} - - - - JSF markup: - - - - + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + + + +

    Spinner (<b:spinner />)

    + +

    <b:spinner> is a facility tag to have a spinner icon. Among other things, it can be used to indicate that the UI is busy.

    +

    Basic usage

    + + + #{' '} + #{' '} + + + + JSF markup: + + - - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - -     + +     + +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +     diff --git a/src/main/webapp/layout/basic.xhtml b/src/main/webapp/layout/basic.xhtml index 44775caf..0c9c0863 100644 --- a/src/main/webapp/layout/basic.xhtml +++ b/src/main/webapp/layout/basic.xhtml @@ -1,741 +1,763 @@ - - - - - -

    The grid system of Bootstrap

    -

    The general idea of both BootsFaces and Bootstrap is to apply the lesson learnt by generations of typesetters to the - world of websites and applications. Most people like pages with a lot of white space. Plus, they - like a clear structure. It's surprisingly simply to achieve this goal. Put everything into a container - that provides a lot of white space surrounding the payload area, and divide the payload area into twelve - equal-sized columns. Align everything to this grid:

    - -

    What seems as an annoying restriction at first, turns out to be a big plus. Everybody can create - attractive web applications with little effort. The grid system and the well-thought color scheme - of Bootstrap make it almost impossible to create a page that doesn't look nice.

    - -

    Basic usage

    -

    To understand this page better, check out this demo project. It doesn't cover exactly this page, - but it's a good starting point to play with the grid system of BootsFaces.

    -

    You can see the building blocks of every BootsFaces application in the image above:

    -
      -
    • Every BootsFaces page should have a <b:container />. That's the component - providing the generous white space around your payload area. As a rule of thumb, - everything must be put in a container, and every BootsFaces page needs a container. But only one. Don't try - to nest containers.
      - It goes without saying that the white space around your widgets may look nice, but it's also a waste of - space. Screen estate is a scarce resource. You can get rid of the border by using the attribute - fluid="true". -
      • -
    • The grid is made of <b:row /> and <b:column />. <b:row /> - is a simple component that usually doesn't need any parameters. -
      • -
    • A <b:column /> spans one of more grid columns. You can define different column - spans for different screen sizes. More on this in a minute. For now, suffice it to say that - it's usually a good idea to optimize the screen for medium sized or small screens. Your layout will scale - seamlessly on larger screens, and still be usable on smaller screens. To define that a column spans - three grid columns on almost every laptop or desktop PC, use the attribute medium="3". - For those who're already familiar with Bootstap: that's the same as col-md="3". The generated - HTML code is <div class="col-md-3" />. -
      • -
    - -

    Putting it into action

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +

    Responsive design

    +

    We'll explain the responsive design of BootsFaces in a minute. But we can show it now. Resize your browser window slowly. + Make it smaller. When the window is too small to display everything side-by-side, the widgets are stacked on top of each other.

    + +

    Why BootsFaces? Why not using Bootstrap natively?

    +

    BootsFaces takes full advantage of Bootstrap's Grid system while maintaining the benefits of being a JSF framework. Actually, we believe + it's more concise and more expressive + than programming Bootstrap natively. Convince yourself: inspect the source code of the demo in your + browser's source code view. After reformatting, the form is 81 lines. The JSF source is is 45 lines.

    +

    BootsFaces being a JSF framework means that you can leverage Bootstrap's layout feature using - for example - the JSF templating system and JSF's conditional rendering to achieve and maintain very complex layouts without much effort.

    +

    This website is an example itself: it uses a page template with ui:insert and ui:include and the pages are ui:compositions.

    +

    Understanding BootsFaces Grid System

    +

    We've already talked about the Bootstrap grid. Let's cover the topic in more detail.

    +

    The central idea is to divide the page into 12 equal-sized columns. Each element of your page - be it an input field, a label, a table or a text - covers + several of these columns. Widgets can't cover half a column. You're limited to integer multiples: one, two, three, ..., up to twelve columns. At first glance this sounds like + a severe restriction, but in practice 12 columns offer enough flexibility for almost every use case. At the same time, being limited to twelve columns usually ensures an attractive page design.

    +

    The second central idea is to avoid horizontal scrolling. If your screen is wide enough to display the twelve columns side-by-side, do it. If not, stack the columns on top of each other. + This means you have to do a lot of horizontal scrolling on small phone displays. But that's still better than having to scroll both horizontally and vertically. Users + can use your application even if screen estate is scarce.

    + Grid options +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
    Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
    Max container widthNone (auto)750px970px1170px
    b:column attributescol-xs or tiny-screencol-sm or small-screencol-md, medium-screen or spancol-lg or large-screen
    # of columns12
    Max column widthAuto60px78px95px
    Gutter width30px (15px on each side of a column)
    NestableYes
    OffsetsN/AYes
    Column orderingN/AYes
    +
    +
    +

    Example: Stacked-to-horizontal

    +

    Using a single set of col-md=* or span=* attributes, + you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) + before becoming horizontal on desktop (medium) devices.

    +

    The span=* and offset=* attributes are meant for this common special use case, to speed up markup writing

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Markup:
    + + +     +     +

    Example: Mobile and desktop

    +

    + Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid attributes including + col-xs=* and col-md=* in your columns. See the example below for a better idea of how it all works. +

    + + + + + + + + + + + + + + + + + + + + Markup:
    + + +     +     +

    Example: Mobile, tablet, desktops

    +

    Build on the previous example by creating even more dynamic and powerful layouts with tablet col-sm=* attribute.

    + + + + + + + + + + +
    + +     + + Markup:
    + + +     +     +

    Offsetting columns

    +

    Move columns to the right using offset=* or col-md-offset=* attribute. + These attributes increase the left margin of a column by * columns. + For example, offest=4 moves a span=4 over four columns. +

    + + + + + + + + + + + + + + + Markup:
    + + +     +     +

    Nesting columns

    +

    + To nest your content with the default grid, add a new row and set of col-md=* columns within an existing + col-md=* column. + Nested rows should include a set of columns that add up to 12. +

    + + + + + + + + + + + + + Markup:
    + + +     +     + +

    Alternative attribute names and values

    +

    You can choose from two alternative spellings to define the column span:

    +
      +
    • col-xs, col-xs, col-xs and col-xs follow + the tradition coined by Bootstrap.
      • +
    • Alternatively, you can use the symboliv names tiny-screen, + small-screen, medium-screen and huge-screen.
      • +
    +

    You can also use symbolic names to indicate how many columns to span, at least for + some common cases:

    +
      +
    • medium-screen="full-width" amounts to col-md="12".
      • +
    • medium-screen="half" amounts to col-md="6".
      • +
    • medium-screen="one-third" amounts to col-md="4".
      • +
    • medium-screen="two-thirds" amounts to col-md="8".
      • +
    • medium-screen="one-fourth" amounts to col-md="3".
      • +
    • medium-screen="three-fourth" amounts to col-md="9".
      • +
    + +

    Hiding columns on certain screens

    +

    There are two attributes allowing you to hide columns depending on the screen size:

    +
      +
    • hidden hides an element on a certain screen size and below. For example, hidden="sm" hides the element on + small (sm) and extra-small (xs) screens.
      • +
    • visible shows an element on a certain screen size and above. It also hides it on smaller screens. For example, + visible="sm shows the element on small (sm), medium (md) and large (lg) screens.
      • +
    +

    Beware: These attributes behave different than the underlying Bootstrap library. To alleviate this, we introduced + a second syntax of the parameter:

    +
      +
    • Lists of sizes: for instance, hidden="xs,lg" hides the element on tiny and large screens, while showing it on + small and medium screens.
      • +
    • Ranges: hidden="xs...md" hides the element on tiny and medium screens, and on every screen size between (i.e. small screens).
      • +
    • Open ranges: hidden="...md" hides the element on medium screens and everything below.
      • +
    • Analogously, hidden="sm..." hides the element on small screens and everything above.
      • +
    + +

    Corner cases: zero columns

    +

    You can define a column to span zero columns. That's equivalent to using the hidden attribute.

    + + large-screen="0" always hides the column on large screens. It's visible on every other screen size. + medium-screen="0" hides the text on medium screens. It's visible on every other screen size. + small-screen="0" hides the text on small screens. It's visible on every other screen size. + tiny-screen="0" hides the text on tiny screens. It's visible on every other screen size. + + +

    Disabling the content

    +

    By setting the flag contentDisabled="true" you can set each child element of + <b:container, <b:row, and <b:column to disabled. More precisely, + the panels of the accordion are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but + not every component. In particular, tabs and panels still work. You'll also have to be careful about + links (everything that's using an <a> tag, like <button> and <b:navLink>.) + These elements will be shown as disbled, but still are accessible. In part, that's because this CSS property isn't fully + standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    + + + - - + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + - ]]> - - - - - - - - - ]]> - - - - - - - - - - - - -

    Responsive design

    -

    We'll explain the responsive design of BootsFaces in a minute. But we can show it now. Resize your browser window slowly. - Make it smaller. When the window is too small to display everything side-by-side, the widgets are stacked on top of each other.

    - -

    Why BootsFaces? Why not using Bootstrap natively?

    -

    BootsFaces takes full advantage of Bootstrap's Grid system while maintaining the benefits of being a JSF framework. Actually, we believe - it's more concise and more expressive - than programming Bootstrap natively. Convince yourself: inspect the source code of the demo in your - browser's source code view. After reformatting, the form is 81 lines. The JSF source is is 45 lines.

    -

    BootsFaces being a JSF framework means that you can leverage Bootstrap's layout feature using - for example - the JSF templating system and JSF's conditional rendering to achieve and maintain very complex layouts without much effort.

    -

    This website is an example itself: it uses a page template with ui:insert and ui:include and the pages are ui:compositions.

    -

    Understanding BootsFaces Grid System

    -

    We've already talked about the Bootstrap grid. Let's cover the topic in more detail.

    -

    The central idea is to divide the page into 12 equal-sized columns. Each element of your page - be it an input field, a label, a table or a text - covers - several of these columns. Widgets can't cover half a column. You're limited to integer multiples: one, two, three, ..., up to twelve columns. At first glance this sounds like - a severe restriction, but in practice 12 columns offer enough flexibility for almost every use case. At the same time, being limited to twelve columns usually ensures an attractive page design.

    -

    The second central idea is to avoid horizontal scrolling. If your screen is wide enough to display the twelve columns side-by-side, do it. If not, stack the columns on top of each other. - This means you have to do a lot of horizontal scrolling on small phone displays. But that's still better than having to scroll both horizontally and vertically. Users - can use your application even if screen estate is scarce.

    - Grid options -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Extra small devices - Phones (<768px) - - Small devices - Tablets (≥768px) - - Medium devices - Desktops (≥992px) - - Large devices - Desktops (≥1200px) -
    Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
    Max container widthNone (auto)750px970px1170px
    b:column attributescol-xs or tiny-screencol-sm or small-screencol-md, medium-screen or spancol-lg or large-screen
    # of columns12
    Max column widthAuto60px78px95px
    Gutter width30px (15px on each side of a column)
    NestableYes
    OffsetsN/AYes
    Column orderingN/AYes
    -
    -
    -

    Example: Stacked-to-horizontal

    -

    Using a single set of col-md=* or span=* attributes, - you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) - before becoming horizontal on desktop (medium) devices.

    -

    The span=* and offset=* attributes are meant for this common special use case, to speed up markup writing

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Markup:
    - - -     -     -

    Example: Mobile and desktop

    -

    - Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid attributes including - col-xs=* and col-md=* in your columns. See the example below for a better idea of how it all works. -

    - - - - - - - - - - - - - - - - - - - - Markup:
    - - -     -     -

    Example: Mobile, tablet, desktops

    -

    Build on the previous example by creating even more dynamic and powerful layouts with tablet col-sm=* attribute.

    - - - - - - - - - - -
    - -     - - Markup:
    - - -     -     -

    Offsetting columns

    -

    Move columns to the right using offset=* or col-md-offset=* attribute. - These attributes increase the left margin of a column by * columns. - For example, offest=4 moves a span=4 over four columns. -

    - - - - - - - - - - - - - - - Markup:
    - - -     -     -

    Nesting columns

    -

    - To nest your content with the default grid, add a new row and set of col-md=* columns within an existing - col-md=* column. - Nested rows should include a set of columns that add up to 12. -

    - - - - - - - - - - - - - Markup:
    - - -     -     + + -

    Alternative attribute names and values

    -

    You can choose from two alternative spellings to define the column span:

    -
      -
    • col-xs, col-xs, col-xs and col-xs follow - the tradition coined by Bootstrap.
      • -
    • Alternatively, you can use the symboliv names tiny-screen, - small-screen, medium-screen and huge-screen.
      • -
    -

    You can also use symbolic names to indicate how many columns to span, at least for - some common cases:

    -
      -
    • medium-screen="full-width" amounts to col-md="12".
      • -
    • medium-screen="half" amounts to col-md="6".
      • -
    • medium-screen="one-third" amounts to col-md="4".
      • -
    • medium-screen="two-thirds" amounts to col-md="8".
      • -
    • medium-screen="one-fourth" amounts to col-md="3".
      • -
    • medium-screen="three-fourth" amounts to col-md="9".
      • -
    - -

    Hiding columns on certain screens

    -

    There are two attributes allowing you to hide columns depending on the screen size:

    -
      -
    • hidden hides an element on a certain screen size and below. For example, hidden="sm" hides the element on - small (sm) and extra-small (xs) screens.
      • -
    • visible shows an element on a certain screen size and above. It also hides it on smaller screens. For example, - visible="sm shows the element on small (sm), medium (md) and large (lg) screens.
      • -
    -

    Beware: These attributes behave different than the underlying Bootstrap library. To alleviate this, we introduced - a second syntax of the parameter:

    -
      -
    • Lists of sizes: for instance, hidden="xs,lg" hides the element on tiny and large screens, while showing it on - small and medium screens.
      • -
    • Ranges: hidden="xs...md" hides the element on tiny and medium screens, and on every screen size between (i.e. small screens).
      • -
    • Open ranges: hidden="...md" hides the element on medium screens and everything below.
      • -
    • Analogously, hidden="sm..." hides the element on small screens and everything above.
      • -
    - -

    Corner cases: zero columns

    -

    You can define a column to span zero columns. That's equivalent to using the hidden attribute.

    - - large-screen="0" always hides the column on large screens. It's visible on every other screen size. - medium-screen="0" hides the text on medium screens. It's visible on every other screen size. - small-screen="0" hides the text on small screens. It's visible on every other screen size. - tiny-screen="0" hides the text on tiny screens. It's visible on every other screen size. - - -

    Disabling the content

    -

    By setting the flag contentDisabled="true" you can set each child element of - <b:container, <b:row, and <b:column to disabled. More precisely, - the panels of the accordion are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but - not every component. In particular, tabs and panels still work. You'll also have to be careful about - links (everything that's using an <a> tag, like <button> and <b:navLink>.) - These elements will be shown as disbled, but still are accessible. In part, that's because this CSS property isn't fully - standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - - - - - - -
    -

    Reference section

    - - - - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - -


    - -     -     + + + +
    +

    Reference section

    + + + + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +


    + + + diff --git a/src/main/webapp/layout/div.xhtml b/src/main/webapp/layout/div.xhtml index 36aaef5a..0d4abab6 100644 --- a/src/main/webapp/layout/div.xhtml +++ b/src/main/webapp/layout/div.xhtml @@ -55,7 +55,7 @@

    Truth to tell, you can use <div /> tags in ordinary JSF-code. The problem is that they are not included in the JSF component tree. In other words: you can't use them for the update attribute of AJAX statements. You can't use render="false".

    -

    Other advantages are that the HMTL5-like coding style is not restrited to <div />. +

    Other advantages are that the HMTL5-like coding style is not restricted to <div />. There are also a couple of HTML element that are converted to JSF elements:

    diff --git a/src/main/webapp/layout/icons.xhtml b/src/main/webapp/layout/icons.xhtml index add25106..40b2556b 100644 --- a/src/main/webapp/layout/icons.xhtml +++ b/src/main/webapp/layout/icons.xhtml @@ -1,460 +1,478 @@ - - - -

    Icons

    -

    Default Icons

    -

    BootsFaces supports the default Icon set of Bootstrap Glyphicons

    -
    - -

    Using an icon in BootsFaces is very simple: just add a <b:icon> with a name attribute with the icon name (without the trailing glyphicon- prefix)

    - - - glyphicon-cloud
    - glyphicon-envelope
    - glyphicon-pencil
    - glyphicon-glass
    - - JSF markup: - - - - -     - -
    -

    If you are using OmniFaces, read the configuration for the Icons to apply to your Project on the page.

    - -

    Font Awesome Icon set

    -

    Since BootsFaces is born to help you design a wonderful website, we recognize that Icons are an important tool to achieve this goal and there are never enough:

    -

    for this reason, BootsFaces now supports the Font Awesome Icon set with its 600+ icons.

    -

    As you will see later, we also support most Awesome features, which will work with Glyphicon too!

    - -
    - - - fa-camera-retro
    - fa-coffee
    - fa-futbol-o
    - fa-heartbeat
    - fa-group
    - fa-gamepad
    - - - JSF markup: - - - - -     - - -

    Icon Size

    -

    BootsFaces supports different sizes for the Icons.

    -
    - -

    To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x", - size="3x", size="4x", or size="5x" attributes.

    - - - size="lg"
    - size="2x"
    - size="3x"
    - size="4x"
    - size="5x"
    - - - JSF markup: - - - - -     - -

    Rotated and Flipped Icons

    -

    You can also rotate and flip your icons.

    -
    - -

    To rotate or flip your icons, just use the rotate="R", rotate="L" and flip="H", flip="V" attributes respectively.

    - - - normal
    - rotate="R" (right - 90 deg.)
    - rotate="L" (left - 270 deg.)
    - flip="H" (horizontal)
    - flip="V" (vertical)
    - - - JSF markup: - - - - -     - - -

    Animated Icons

    -
    - -

    To let your icons spin, just add the spin="true" attribute.

    - - #{' '} - #{' '} - #{' '} - - - - JSF markup: - - - - - - -

    AJAX, JavaScript, disabled and readOnly

    -

    Both icon and iconAwesome can be used with AJAX and/or JavaScript.

    -

    The attributes readonly and disabled prevent AJAX from being executed. Note that JavaScript is not affected - it's executed without checking the state of the widget. - The difference between readonly and disabled is that disabled grays out the icon.

    -

    This is one of the cases a picture is worth a thousand words. Move the mouse over the spinning icons below, click them, and - change the checkboxes below to get the idea.

    - - - - - - - Glyphicon: - - Font Awesome icon: - -
    - - - + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + + + + + + + + + + + + +

    Icons

    +

    Default Icons

    +

    BootsFaces supports the default Icon set of Bootstrap Glyphicons

    +
    + +

    Using an icon in BootsFaces is very simple: just add a <b:icon> with a name attribute with the icon name (without the trailing glyphicon- prefix)

    + + + glyphicon-cloud
    + glyphicon-envelope
    + glyphicon-pencil
    + glyphicon-glass
    + + JSF markup: + + -     - - - Last action: -
      - -
    • #{message}
      • -       -
    -     -     -     -     - - - JSF markup: - - - - - - Last action: -
      - -
    • #{message}
      • -       -
    -     -     - - - - ]]> - -     - - - - -

    Configuring FontAwesome

    -

    By default, BootsFaces fetches FontAwesome 4.3.0 from a CDN (from http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css, to be precise).

    -

    If you want to supress the automatical internet access for some reason, you've got several options. You can deactivate it globally in the web.xml, you can - add a facet to the header of the JSF-view (which allows you to activate and deactivate the feature on a per-page basis) or you can simply include your own - CSS import. If the file name contains the word font-awesome and ends with .css, BootsFaces won't try to load FontAwesome a second time. - In most cases that's precisely what you need to do anyways, so you don't have to configure anything to deactivate the defaults.

    - - - - - - - - - - - - - - - - - - - -
    -

    Responsive design

    -

    You can use all the attributes controlling the responsive behaviour of <b:column /> - also with <b:icon />. The example may look a bit odd, because these icons - don't fill all the available screen space, but still, it shows the idea nicely:

    - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - - + + -

    Visibility depending on screen size

    -

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    - - - - - - - - - - - - - - - - - JSF markup: - - - - - - -

    Tooltips

    -

    <b:iconAwesome name="cog" /> supports tooltips:

    - - - - - JSF markup: - - - - + +

    Icon Size

    +

    BootsFaces supports different sizes for the Icons.

    +
    + +

    To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x", + size="3x", size="4x", or size="5x" attributes.

    + + + size="lg"
    + size="2x"
    + size="3x"
    + size="4x"
    + size="5x"
    + + + JSF markup: + + + + +     + +

    Rotated and Flipped Icons

    +

    You can also rotate and flip your icons.

    +
    + +

    To rotate or flip your icons, just use the rotate="R", rotate="L" and flip="H", flip="V" attributes respectively.

    + + + normal
    + rotate="R" (right - 90 deg.)
    + rotate="L" (left - 270 deg.)
    + flip="H" (horizontal)
    + flip="V" (vertical)
    + + + JSF markup: + + + + +     + + +

    Animated Icons

    +
    + +

    To let your icons spin, just add the spin="true" attribute.

    + + #{' '} + #{' '} + #{' '} + + + + JSF markup: + + + + + + +

    AJAX, JavaScript,disabled and readOnly

    +

    Both icon and iconAwesome can be used with AJAX and/or JavaScript.

    +

    The attributes readonly and disabled prevent AJAX from being executed. Note that JavaScript is not affected - it's executed without checking the state of the widget. + The difference between readonly and disabled is that disabled grays out the icon.

    +

    This is one of the cases a picture is worth a thousand words. Move the mouse over the spinning icons below, click them, and + change the checkboxes below to get the idea.

    + + + + + + + Glyphicon: + + Font Awesome icon: + +
    + + + +     +     + + + Last action: +
      + +
    • #{message}
      • +       +
    +     +     +     +     + + + JSF markup: + + -     -     + + + + Last action: +
      + +
    • #{message}
      • +       +
    +     +     + + + + ]]> + + + + + + +

    Configuring FontAwesome

    +

    By default, BootsFaces fetches FontAwesome 4.3.0 from a CDN (from http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css, to be precise).

    +

    If you want to supress the automatical internet access for some reason, you've got several options. You can deactivate it globally in the web.xml, you can + add a facet to the header of the JSF-view (which allows you to activate and deactivate the feature on a per-page basis) or you can simply include your own + CSS import. If the file name contains the word font-awesome and ends with .css, BootsFaces won't try to load FontAwesome a second time. + In most cases that's precisely what you need to do anyways, so you don't have to configure anything to deactivate the defaults.

    + + + + + + + + + + + + + + + + + + + +
    +

    Responsive design

    +

    You can use all the attributes controlling the responsive behaviour of <b:column /> + also with <b:icon />. The example may look a bit odd, because these icons + don't fill all the available screen space, but still, it shows the idea nicely:

    + + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + +

    Visibility depending on screen size

    +

    You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

    + + + + + + + + + + + + + + + + + JSF markup: + + + + + + +

    Tooltips

    +

    <b:iconAwesome name="cog" /> supports tooltips:

    + + + + + JSF markup: + + + + + + +

    Reference section

    + + + +

    List of Font Awesome icons

    + +
    + + +
    +     + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + +


    + + + diff --git a/src/main/webapp/layout/jumbotron.xhtml b/src/main/webapp/layout/jumbotron.xhtml index 7d5d3c75..b625dbe1 100644 --- a/src/main/webapp/layout/jumbotron.xhtml +++ b/src/main/webapp/layout/jumbotron.xhtml @@ -1,51 +1,60 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - -

    Jumbotron

    -

    A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site.

    -

    To make the jumbotron full width, don't include it within a b:container.

    -

    Placing it within a container will keep it at the width of the rest of your content and provides rounded corners.

    - - -

    Hello, world!

    -

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    -

    Learn more

    -     - - JSF markup:
    - -     -     -
    -

    Reference section

    - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - -


    -     -     + + + + + + + + + +

    Jumbotron

    +

    A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site.

    +

    To make the jumbotron full width, don't include it within a b:container.

    +

    Placing it within a container will keep it at the width of the rest of your content and provides rounded corners.

    + + +

    Hello, world!

    +

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    +

    Learn more

    +     + + JSF markup:
    + +     +     + +
    +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +


    +     + diff --git a/src/main/webapp/layout/mobile.xhtml b/src/main/webapp/layout/mobile.xhtml index 50c1328d..870e5af3 100644 --- a/src/main/webapp/layout/mobile.xhtml +++ b/src/main/webapp/layout/mobile.xhtml @@ -1,63 +1,73 @@ - - - - + + + + + + + + + + + + + + -

    Mobile first!

    +

    Mobile first!

    BootsFaces targets both desktop and mobile platforms. In previous versions, developers faced difficulties because they weren't aware of the viewport meta tag. Since BootsFaces 0.8.5, this meta tag is added automatically to every BootsFaces page. It defaults to width=device-width, initial-scale=1.

    - -

    Disabling the standard setting

    + +

    Disabling the standard setting

    If you don't want a meta viewport tag at all, you can disable this behaviour by setting its context paramater to false. - + - + - - -

    Overriding the viewport

    + + +

    Overriding the viewport

    If you need a different viewport setting, simply add it to your <h:head> tag. BootsFaces adds the default viewport setting at the beginning of the HTML file, ensuring you can override it.

    - + You can also provide your own setting by setting the context parameter to your desired content. - + - +


    -     +     diff --git a/src/main/webapp/layout/navLinks.xhtml b/src/main/webapp/layout/navLinks.xhtml index 9cd8727b..a1cbc408 100644 --- a/src/main/webapp/layout/navLinks.xhtml +++ b/src/main/webapp/layout/navLinks.xhtml @@ -1,650 +1,668 @@ - - - - -

    NavLinks and NavCommandLinks

    -

    The NavLink is a very versatile component you can use for different purposes.

    -

    The b:navLink tag is a more powerful version of the standard JSF h:link tag.

    -

    This means that you can use the outcome, fragment and href attributes.

    -

    NavLinks can be used in:

    -
      -
      • -
      • -
    • List links (see below)
      • -
    • Pill links (see below)
      • -
    • Tab links (see below)
      • -
    • or as solitary components (see below).
      • -
    -

    There are five kinds of <b:navLink: /> -

      -
    • a link that points to an outcome
      • -
    • an external link
      • -
    • a link calling a JavaScript function
      • -
    • a header link
      • -
    • a separator link
      • -
    -

    -

    For some technical reason, in BootsFaces 0.8.0 the <b:navLink /> component couldn't call JSF action listeners. To circumvent this limitation, there's a second - component, we added <b:navCommandLink />. The advantage of <b:navCommandLink /> is that is can be use the actionListener - and action attributes. The disadvantage is that is has to be put in a <h:form />. Other than that, both components are identical. - In particular, both components support the new unified AJAX API introduced with BootsFaces 0.8.0. You only see the differences when you try to use - the standard JSF AJAX API.

    -
    - -

    The outcome link, the external link and the JavaScript link can have an icon adding the attribute icon (on the left or right, default is left).

    -

    You can control the icon position by specifying it in the attribute iconAlign.

    -

    The Icon attribute will add a Glyphicon icon (Bootstrap's default), but now you can also use a Font Awesome icon using the iconAwesome attribute instead of icon.

    -

    Both icon and iconAwesome attributes, require the icon name as value, without the trailing glyphicon- prefix and fa- prefix respectively.

    -

    Bootstrap 4 is going to drop support for the Glyphicon library. We recommend you to choose icons from the Font Awesome library to avoid future incompatibilities.

    -

    In the following example the b:listLinks tag is used as a container for the NavLinks, showing how to create a Sidebar with links.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - - - -

    TabLinks

    -

    <b:tabLinks /> comes in handy if you want to render a tab strip, but don't want to use - a <b:tabView />. The example below renders five hyperlinks as <b:navLink /> - or <b:navCommandLink />. The result looks like an ordinary <b:tabView />, - but behaves differently. However, using AJAX and <b:navCommandLink /> you can - build your own tabView component. This may give you an edge over the "carefree package" if you need more flexibility than the - standard <b:tabView /> offers.

    - - - - - - - - - - - - - - - - - - - Markup:
    - - +     + + + +

    TabLinks

    +

    <b:tabLinks /> comes in handy if you want to render a tab strip, but don't want to use + a <b:tabView />. The example below renders five hyperlinks as <b:navLink /> + or <b:navCommandLink />. The result looks like an ordinary <b:tabView />, + but behaves differently. However, using AJAX and <b:navCommandLink /> you can + build your own tabView component. This may give you an edge over the "carefree package" if you need more flexibility than the + standard <b:tabView /> offers.

    + + + + + + + + + + + + + + + + + + + Markup:
    + + +     +     +
    + + +

    Pill links

    +

    The <b:pillLinks /> component resembles the <b:tabLinks /> + component, but the layout is slightly different.

    + + + + + + + + + + + + + + + + + + + Markup:
    + + -     -     -
    - - -

    Pill links

    -

    The <b:pillLinks /> component resembles the <b:tabLinks /> - component, but the layout is slightly different.

    - - - - - - - - - - - - - - - - - - - Markup:
    - - -     -     -
    - - -

    Solitary navLinks

    -

    A <b:navLink /> can also be used as a solitary component. In that case, - it's replaces an ordinary <h:link />. Similary, a <b:navCommandlink /> - can be used in place of an <h:commandLink />. Note that the HTML code renders - differs slightly from the HTML code of embedded <b:navLink />. It's an HTML - <span /> attribute (as opposed to the <li /> of the embedded version) - because solitary links are not part of a list.

    - - - - - - -

    A <b:navLink />: - -

    -

    A <h:navCommandlink /> using AJAX: - -

    -

    Combining <b:navLink /> with <ui:repeat />:

    - -

    - -

    -     - -     -     -     -     - - Markup:
    - - -     -     -
    - -

    Opening a modal dialog in a NavLink

    -

    To open a modal dialog from a NavLink, don't use the attributes data-target and data-toggle. Use an onclick handler instead:

    - - - - -

    Arbitrary content in a <b:navLink />

    -

    <b:navLink /> isn't limited to text and icons. You can add arbitrary widgets - as children of the <b:navLink />:

    - - - - - - - - - - - - - rocks (not only) - - - - - - - Text and nested content - - - - - - - - JSF markup: - - - - -

    As you can see, the nested content is always rendered between the text and the label. However, - in most cases you may want to consider moving the text and the icon (if there are any) into the nested - content. This way, the JSF source code looks a bit cleaner.

    - -

    Icons and icon modifiers

    -

    You can add Fontawesome icons and Glyphicons to navLinks, navCommandLinks and dropmenus. - These icons can be decorated with modifiers:

    - - - - - - - - - - - - - - - - - - - - -

    AJAX

    -

    Both <b:navCommandLink /> and <b:navLink /> support the new - unified AJAX API introduced with BootsFaces 0.8.1. <b:navCommandLink /> also supports - the traditional and the PrimeFaces AJAX API (to a certain extent).

    -

    Using b:navLink with AJAX

    - - - - - - - - - - - #{navLinkBean.pageContent} - - - - - - - + + +
    + + +

    Solitary navLinks

    +

    A <b:navLink /> can also be used as a solitary component. In that case, + it's replaces an ordinary <h:link />. Similary, a <b:navCommandlink /> + can be used in place of an <h:commandLink />. Note that the HTML code renders + differs slightly from the HTML code of embedded <b:navLink />. It's an HTML + <span /> attribute (as opposed to the <li /> of the embedded version) + because solitary links are not part of a list.

    + + + + + + +

    A <b:navLink />: + +

    +

    A <h:navCommandlink /> using AJAX: + +

    +

    Combining <b:navLink /> with <ui:repeat />:

    + +

    + +

    +     +     - - ]]> - - - - - - - -     - -

    Using b:navCommandLink with AJAX

    -

    Using <b:navCommandLink /> isn't much different from using <b:navLink />. - You have to put it in a <h:form />. On the plus side, you are rewarded with being allowed to use the attributes - action and actionListener.

    - - - - - - - - - - - #{navLinkBean.pageContent} - - - - - - - - - - - - - - -

    Reference section

    - - - - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - - -


    -     -     + + + + + Markup:
    + + +     + +
    + +

    Opening a modal dialog in a NavLink

    +

    To open a modal dialog from a NavLink, don't use the attributes data-target and data-toggle. Use an onclick handler instead:

    + + + + +

    Arbitrary content in a<b:navLink />

    +

    <b:navLink /> isn't limited to text and icons. You can add arbitrary widgets + as children of the <b:navLink />:

    + + + + + + + + + + + + + rocks (not only) + + + + + + + Text and nested content + + + + + + + + JSF markup: + + + + +

    As you can see, the nested content is always rendered between the text and the label. However, + in most cases you may want to consider moving the text and the icon (if there are any) into the nested + content. This way, the JSF source code looks a bit cleaner.

    + +

    Icons and icon modifiers

    +

    You can add Fontawesome icons and Glyphicons to navLinks, navCommandLinks and dropmenus. + These icons can be decorated with modifiers:

    + + + + + + + + + + + + + + + + + + + + +

    AJAX

    +

    Both <b:navCommandLink /> and <b:navLink /> support the new + unified AJAX API introduced with BootsFaces 0.8.1. <b:navCommandLink /> also supports + the traditional and the PrimeFaces AJAX API (to a certain extent).

    +

    Using b:navLink with AJAX

    + + + + + + + + + + + #{navLinkBean.pageContent} + + + + + + + + + + + + + + + +

    Using b:navCommandLink with AJAX

    +

    Using <b:navCommandLink /> isn't much different from using <b:navLink />. + You have to put it in a <h:form />. On the plus side, you are rewarded with being allowed to use the attributes + action and actionListener.

    + + + + + + + + + + + #{navLinkBean.pageContent} + + + + + + + + + + + + + + +

    Reference section

    + + + + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + + +


    + + diff --git a/src/main/webapp/layout/navbars.xhtml b/src/main/webapp/layout/navbars.xhtml index 2e55cbc4..e96f1eff 100644 --- a/src/main/webapp/layout/navbars.xhtml +++ b/src/main/webapp/layout/navbars.xhtml @@ -1,402 +1,414 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:ng="http://xmlns.jcp.org/jsf/passthrough"> - -

    Navbars

    -

    The main use of the NavBar component is to place a navigation menu at top, bottom or both of your web application or web page.

    -

    The NavBar typically will have a brand, that could be, for example, the name of your project.

    + + + + + + + + + + + + +

    Navbars

    +

    The main use of the NavBar component is to place a navigation menu at top, bottom or both of your web application or web page.

    +

    The NavBar typically will have a brand, that could be, for example, the name of your project.

    - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - - + + + -

    Sticky vs. non-sticky navBars and navBar positions

    -

    A navbar can be rendered in different ways, to fit in your page layout scheme.

    -

    The default NavBar appears as part of the page content, typically centered and at the beginning.

    -

    The two other ways a Navigation Bar can be rendered in the page are:

    -
      -
    • fixed to the top or bottom of the page, without scrolling with the content,
      • -
    • statically on top of the page, scrolling away with the page.
      • -
    -

    Starting with BootsFaces 0.8.5, there's the attribute position as a more expressive alternative:

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    position="top" sticky="true"fixed="top" sticky="true"Sticky NavBar at the top. The page scrolls under the NavBar.
    position="top" sticky="false"fixed="top" sticky="false"NavBar at the top. The NavBar scrolls with the page.
    position="bottom" sticky="true"fixed="bottom" sticky="true"Sticky NavBar at the bottom. The page scrolls under the NavBar.
    position="bottom" sticky="false"fixed="non-sticky" sticky="false"Non-sticky NavBar at the bottom. The NavBar scrolls with the page.
    sticky="false"sticky="false"Non-sticky NavBar at the current position. The NavBar scrolls with the page.
    +

    Sticky vs. non-sticky navBars and navBar positions

    +

    A navbar can be rendered in different ways, to fit in your page layout scheme.

    +

    The default NavBar appears as part of the page content, typically centered and at the beginning.

    +

    The two other ways a Navigation Bar can be rendered in the page are:

    +
      +
    • fixed to the top or bottom of the page, without scrolling with the content,
      • +
    • statically on top of the page, scrolling away with the page.
      • +
    +

    Starting with BootsFaces 0.8.5, there's the attribute position as a more expressive alternative:

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    position="top" sticky="true"fixed="top" sticky="true"Sticky NavBar at the top. The page scrolls under the NavBar.
    position="top" sticky="false"fixed="top" sticky="false"NavBar at the top. The NavBar scrolls with the page.
    position="bottom" sticky="true"fixed="bottom" sticky="true"Sticky NavBar at the bottom. The page scrolls under the NavBar.
    position="bottom" sticky="false"fixed="non-sticky" sticky="false"Non-sticky NavBar at the bottom. The NavBar scrolls with the page.
    sticky="false"sticky="false"Non-sticky NavBar at the current position. The NavBar scrolls with the page.
    -

    To understand the different layouts better, just have a look at the .

    -
    +

    To understand the different layouts better, just have a look at the .

    +
    - - - -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    - - - - -     - - - -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    -

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    - - - - -     - - - -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    -

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    - - - - -     - - - -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    -

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    - - - - -     - - - position="top" - - - position="bottom" - - - position="bottom" sticky="false" - - - static="true" - - - + + + +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the top and a lot of content, so it can scroll.

    + + + + +     + + + +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    +

    This modal dialog has a navBar at the bottom and a lot of content, so it can scroll.

    + + + + +     + + + +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    +

    This modal dialog has a non-sticky navbar and a lot of content, so it can scroll.

    + + + + +     + + + +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    +

    This modal dialog has a static navBar and a lot of content, so it can scroll.

    + + + + +     + + + position="top" + + + position="bottom" + + + position="bottom" sticky="false" + + + static="true" + + + -

    Using the b:navbar tag

    -

    Using the b:navbar tag is very straightforward, as you can see from the following table you need to specify few attributes:

    +

    Using the b:navbar tag

    +

    Using the b:navbar tag is very straightforward, as you can see from the following table you need to specify few attributes:

    - Widget attributes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    b:navbar
    AttributeTypeDescription
    brandStringBrand for the Navbar.
    brandHrefStringLink URL for the Navbar Brand.
    staticbooleanIf true, a full-width navbar that scrolls away with the page will be rendered. Can be true or false, default false.
    fixedStringIf specified, the Fixed Bar will be rendered on top or bottom of the page. Can be bottom or top.
    inversebooleanBoolean value to specify if Navbar should use inverse color scheme.
    -
    - Inverted Navbar -

    Modify the look of the navbar by adding the inverse attribute:

    - - - - - - - - - - JSF markup:
    + Widget attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    b:navbar
    AttributeTypeDescription
    brandStringBrand for the Navbar.
    brandHrefStringLink URL for the Navbar Brand.
    staticbooleanIf true, a full-width navbar that scrolls away with the page will be rendered. Can be true or false, default false.
    fixedStringIf specified, the Fixed Bar will be rendered on top or bottom of the page. Can be bottom or top.
    inversebooleanBoolean value to specify if Navbar should use inverse color scheme.
    +
    +

    Inverted Navbar

    +

    Modify the look of the navbar by adding the inverse attribute:

    + + + + + + + + + + JSF markup:
    - -     -     -
    - Navbar Links -

    A NavBar will also contain a set of links. You can add the links to b:navbar using b:navLink as you do with b:listLinks.

    -

    The difference is that you nest the b:navLink elements inside a b:navbarLinks element instead of b:listLinks element.

    -
    + ]]> +     +     +
    +

    Navbar links and commandlinks

    + Navbar Links +

    A NavBar will also contain a set of links. You can add the links to b:navbar using b:navLink as you do with b:listLinks.

    +

    The difference is that you nest the b:navLink elements inside a b:navbarLinks element instead of b:listLinks element.

    +
    - Navbar CommandLinks -

    For some technical reason, the <b:navLink /> component can't call JSF action listeners. To circumvent this limitation, there's a second - component, <b:navCommandLink /> that's adds calls to JSF action listeners and a JSF action.

    -
    +

    For some technical reason, the <b:navLink /> component can't call JSF action listeners. To circumvent this limitation, there's a second + component, <b:navCommandLink /> that's adds calls to JSF action listeners and a JSF action.

    +
    - Drop Menus -

    You can build up a rich menu bar using another useful element: b:dropMenu. It is another element where you can put your b:navLink elements.

    -

    You can have multiple b:navbarLinks and b:dropMenu elements in a navbar, just pay attention to the resulting layout. Starting with - BootsFaces 0.8.0, b:dropMenus can also be nested. This way, you get menu of three or more levels. Of course, you shouldn't overdo it. Most of the - time, two levels is what users accept. They also accept a third level if it remains the exception. But adding a fourth level makes your application cumbersome.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - JSF markup: +

    Drop Menus

    +

    You can build up a rich menu bar using another useful element: b:dropMenu. It is another element where you can put your b:navLink elements.

    +

    You can have multiple b:navbarLinks and b:dropMenu elements in a navbar, just pay attention to the resulting layout. Starting with + BootsFaces 0.8.0, b:dropMenus can also be nested. This way, you get menu of three or more levels. Of course, you shouldn't overdo it. Most of the + time, two levels is what users accept. They also accept a third level if it remains the exception. But adding a fourth level makes your application cumbersome.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + JSF markup: - - - + +     +     -
    -

    Reference section

    - - - - - +
    +

    Reference section

    + + + + + - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     -


    - -     -     +


    + + + diff --git a/src/main/webapp/layout/navigationAndAJAX.xhtml b/src/main/webapp/layout/navigationAndAJAX.xhtml index 38d7b523..e0361014 100644 --- a/src/main/webapp/layout/navigationAndAJAX.xhtml +++ b/src/main/webapp/layout/navigationAndAJAX.xhtml @@ -1,92 +1,103 @@ + xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + -

    Navigation and AJAX

    +

    Navigation and AJAX

    - - Most JSF applications benefit tremendously from AJAX. This includes navigation between different JSF views of your - application. If done consequently, your BootsFaces looks and feels almost like a single page application (SPA) - build on, say, AngularJS. See the demo below to convince yourself. + + Most JSF applications benefit tremendously from AJAX. This includes navigation between different JSF views of your + application. If done consequently, your BootsFaces looks and feels almost like a single page application (SPA) + build on, say, AngularJS. See the demo below to convince yourself.

    However, there are two surprises and a bug.

    - + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - + + + + + + + - - - - - - - - + + + -

    Resource loading

    +

    Resource loading

    BootsFaces tries to keep the memory footprint as low as possible. Among other things, this means that it only loads the CSS and JavaScript code required by the current JSF page. If you use AJAX to replace parts of your page, BootsFaces doesn't check if it has to load additional CSS or JavaScript files. This results in pages containing @@ -95,15 +106,15 @@ you don't have to render these components, so you set rendered="false":

    + + + + ]]> -

    Templates

    +

    Templates

    Most JSF developers are used to use templates to embed their payload pages into a common application framework. For example, this showcase uses a template page to provide the main menu and the footer of each page.

    @@ -113,77 +124,77 @@ with an EL expression pointing to the current payload page. The demo below shows the idea.

    - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - -

    JavaScript memory leak

    + + +

    JavaScript memory leak

    Many components of BootsFaces are jQuery components that should be removed when their HTML tags are removed by an AJAX request. We've already started to investigate the topic (see Bug #220) of our bug tracker). However, the memory leak should be small. Chances are your application has been closed by the user @@ -197,7 +208,7 @@

    + SyntaxHighlighter.all(); + diff --git a/src/main/webapp/layout/panelgrids.xhtml b/src/main/webapp/layout/panelgrids.xhtml index 639cd50a..4eab8411 100644 --- a/src/main/webapp/layout/panelgrids.xhtml +++ b/src/main/webapp/layout/panelgrids.xhtml @@ -1,111 +1,284 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - -

    Panel grids

    -

    - Using a panel grid is a convenient way to display a couple of input - fields. BootsFaces aligns your input fields automatically. You don't - have to care about - <b:row> - and - <b:col> - . BootsFaces panel grid adds these tags automatically for you. -

    -

    - The difference to a standard JSF - <h:panelGrid> - is that standard JSF generates a table instead of Bootstrap-friendly - row - and - col - divs. -

    -

    Basic example

    -

    - The attribute - colSpan - of - <b:panelGrid /> - takes the a comma-separated list of numbers. Each number defines how - many Bootstrap columns a - <b:panelGrid /> - column spans. -

    - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - - -

    colSpan="2,10" means the content of the <b:panelGrid> is - arranged in to columns. The first colum takes 2 Bootstrap columns - (16% of the available space), the second column take the remaining - 10 Bootstrap columns (83% of the available space).

    + + + + + + + + + + -
    -

    Reference section

    - - - - Skinning - -

    <b:panelGrid> uses the standard Bootstrap CSS classes:

    -
      -
    • The panelgrid is a div bearing the CSS class container.
      • -
    • Each row is a div bearing the CSS class row.
      • -
    • Each column is a div bearing the CSS class col-lg-1 - col-lg-12.
      • -
    -     + +

    Panel grids

    +

    + Using a panel grid is a convenient way to display a couple of input + fields. BootsFaces aligns your input fields automatically. You don't + have to care about + <b:row> and <b:col>. BootsFaces panel grid adds these tags automatically for you. +

    +

    + The difference to a standard JSF <h:panelGrid> + is that standard JSF generates a simple HTML table. <b:panelGrid /gt; generates a responsive table consisting of + row and col divs. +

    + +

    Basic usage

    +

    The simplest way to use the panel grid is to tell it how many columns you need:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    -
    - -     -     + + JSF markup: + + + + + + +

    Columns of difference width

    +

    If you need to columns of different width, use the col-spans option. This attribute takes a comma-separated + list of integers indicating how many Bootstrap columns are to be spanned:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + +

    Size

    +

    + The size attributes determines when the screen is so small that the columns have to be stacked on top of each other. + The default value is medium-screen (aka md). +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + + + +

    Form example

    +

    + The classic use case of <b:panelGrid /> is the input form. In most cases, such an input form is a long list + of fairly uniform rows. The details vary, but usually such a row consists of a label, the input field and an optional error message. + Sometimes there's also a help text. <b:panelGrid /> makes generating such a form a walk in the park: +

    + + + + + + + + + + + + + + + + + + + + JSF markup: + + + + + + +

    colSpan="2,10" means the content of the <b:panelGrid> is + arranged in to columns. The first colum takes 2 Bootstrap columns + (16% of the available space), the second column take the remaining + 10 Bootstrap columns (83% of the available space).

    + +
    +

    Reference section

    + + + + Skinning + +

    <b:panelGrid> uses the standard Bootstrap CSS classes:

    +
      +
    • The panelgrid is a div bearing the CSS class container.
      • +
    • Each row is a div bearing the CSS class row.
      • +
    • Each column is a div bearing the CSS class col-lg-1 - col-lg-12.
      • +
    +     + + +
    +
    +
    + + + diff --git a/src/main/webapp/layout/panels.xhtml b/src/main/webapp/layout/panels.xhtml index 23a7c6a9..9131f328 100644 --- a/src/main/webapp/layout/panels.xhtml +++ b/src/main/webapp/layout/panels.xhtml @@ -1,523 +1,538 @@ + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:sourcecode="http://java.sun.com/jsf/composite/sourcecode"> + + + + + + + + + + + + + + + -

    Panels

    +

    Panels

    While not always necessary, sometimes you need to put your - DOM in a box. For those situations, the panel component comes in - handy.

    + DOM in a box. For those situations, the panel component comes in + handy.

    -

    Basic example

    +

    Basic example

    - By default, all the <b:panel> does is apply some basic border and padding to contain some content. + By default, all the <b:panel> does is apply some basic border and padding to contain some content.

    + + + + + JSF markup: - + - - JSF markup: - - - - + - +

    Panel with heading

    - Easily add a heading container to your panel specifying the - heading - facet. You may also include any - <h1> - - - <h6> - to add a pre-styled heading. Facets may contain arbitrary content. For instance, the example below contains a <b:badge />: + Easily add a heading container to your panel specifying the + heading + facet. You may also include any + <h1> + - + <h6> + to add a pre-styled heading. Facets may contain arbitrary content. For instance, the example below contains a <b:badge />:

    - + + + + + + + + + + + JSF markup: - - - - - - + - - JSF markup: - - - - +

    - As a simple (but less flexible) alternative, you can specify a title with the - title - attribute; since this is meant as an option, the heading facet - will not be rendered and the panel will render with a heading - having the attribute's value as Title. + As a simple (but less flexible) alternative, you can specify a title with the + title + attribute; since this is meant as an option, the heading facet + will not be rendered and the panel will render with a heading + having the attribute's value as Title.

    - - - - - JSF markup: - - - - + + + + + JSF markup: + + + + - - -

    Collapsible panels

    + + +

    Collapsable panels

    - By default, panels can be collapsed by clicking the title bar or - the chevron at the right hand side of the title bar. If you don't - need this feature, you can switch it off by adding the attribute - collapsible="false" - : + By default, panels can be collapsed by clicking the title bar or + the chevron at the right hand side of the title bar. If you don't + need this feature, you can switch it off by adding the attribute + collapsible="false" + :

    - + - - I bet you can't... - - - JSF markup: - - - - + ]]> + + + -

    Collapsible panels indicator

    +

    Collapsable panel indicator

    BootsFaces can underline the panel title as a visual clue that the panel can be collapsed using the keyboard. You can activate it by setting showCollapseLink="true":

    - + - - + + - - - JSF markup: - - + + + JSF markup: + + + + - + - + -

    Persistent collapse/expand state

    +

    Persistent collapse/expand state

    By default, panels are not collapsed when the page is - rendered. If they're outside a form, they are also expanded after - a post request (i.e. after clicking a button) - even if the user - had collapsed the panel before clicking the button. To preserve - the expansion state on postbacks, make sure to put the panel into - the same form as the command button. The panel below is the only - panel on this page which restores its state after clicking the - button:

    + rendered. If they're outside a form, they are also expanded after + a post request (i.e. after clicking a button) - even if the user + had collapsed the panel before clicking the button. To preserve + the expansion state on postbacks, make sure to put the panel into + the same form as the command button. The panel below is the only + panel on this page which restores its state after clicking the + button:

    - - - - - - - - - - - - - - - - JSF markup: - - + + JSF markup: + + + + - -

    Programmable collapse/expand state

    + +

    Programmable collapse/expand state

    The collapse state can also be controlled by an attribute of - a managed bean:

    - + a managed bean:

    + - - - - - - - - - - - - - - - - JSF markup: - - - - + + JSF markup: + + + +

    However, if the user opens or closes a panel, their choice - overrides the values taken from the bean.

    + overrides the values taken from the bean.


    Contextual alternatives

    - Like other components, easily make a panel more meaningful to a - particular context by adding a - look - attribute with values primary, success, info, warning or danger. + Like other components, easily make a panel more meaningful to a + particular context by adding a + look + attribute with values primary, success, info, warning or danger.

    - + - + + + + + + + + + + + + + + + + + + JSF markup: + + - - - JSF markup: - - - - + - +

    - Wrap buttons or secondary text in a - footer - facet. Note that panel footers do not inherit - colors and borders when using contextual variations as they are - not meant to be in the foreground. + Wrap buttons or secondary text in a + footer + facet. Note that panel footers do not inherit + colors and borders when using contextual variations as they are + not meant to be in the foreground.

    - + - - - - - - - - + + + - JSF markup: - - - + + + + JSF markup: + + + +

    AJAX and JavaScript

    - You can use the standard JavaScript callback handlers to call both JavaScript and AJAX code. Apart from the standard - HTML event handlers like onclick and onmouseover there are also four Bootstrap callback listeners: onexpand, - onexpanded, oncollapse and oncollapsed.. + You can use the standard JavaScript callback handlers to call both JavaScript and AJAX code. Apart from the standard + HTML event handlers like onclick and onmouseover there are also four Bootstrap callback listeners: onexpand, + onexpanded, oncollapse and oncollapsed..

    - + - - - - The content of the panel does not matter. Look at the messages at the right hand side. - That's where the music plays. - - - Last action: -
      - -
    • #{message}
      • -       -
    -     -     -     - - - JSF markup: - - - - + + + + The content of the panel does not matter. Look at the messages at the right hand side. + That's where the music plays. + + + Last action: +
      + +
    • #{message}
      • +       +
    +     +     +     + + + JSF markup: + + + +     -

    Disabling the content

    -

    By setting the flag contentDisabled="true" you can set each child element to disabled. More precisely, - the panels of the panel are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but - not every component. In particular, tabs and panels still work. You'll also have to be careful about - links (everything that's using an <a> tag, like <button> and <b:navLink>.) - These elements will be shown as disabled, but still are accessible. In part, that's because this CSS property isn't fully - standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    - - - - - - - - - - - - - - - - -
    - -     -     - - - JSF markup: - - - - +

    Disabling the content

    +

    By setting the flag contentDisabled="true" you can set each child element to disabled. More precisely, + the panels of the panel are wrapped in a disabled fieldset, which disables input fields, checkboxes and buttons, but + not every component. In particular, tabs and panels still work. You'll also have to be careful about + links (everything that's using an <a> tag, like <button> and <b:navLink>.) + These elements will be shown as disabled, but still are accessible. In part, that's because this CSS property isn't fully + standardized yet. For instance, it isn't supported by Internet Explorer 11 and below, and Opera 18 and below.

    + + + + + + + + + + + + + + + + +
    + +     +     + + + JSF markup: + + - - - - - - - - - - - + +     + + + + + + + + + + +
    -

    Reference section

    +

    Reference section

    Facets of <b:panel > + style="background-color: #fff"> @@ -525,16 +540,16 @@ - - - - - - - - + + + + + + + +
    Name of the facet
    headingThis optional facet can be used to render complex - titles.
    footerThis optional facet can be used to render complex - footers.
    headingThis optional facet can be used to render complex + titles.
    footerThis optional facet can be used to render complex + footers.
    @@ -544,7 +559,7 @@ Skinning     + style="background-color: #fff"> @@ -552,12 +567,12 @@ + panel. + panel.
    panel This CSS class applies to the entire panel.
    panel-title This CSS class applies to the title area of the - panel.
    panel-footer This CSS class applies to the footer area of the - panel.
    @@ -566,7 +581,7 @@

    + SyntaxHighlighter.all(); +     -     \ No newline at end of file + diff --git a/src/main/webapp/layout/register.xhtml b/src/main/webapp/layout/register.xhtml index 50059527..75bf0c03 100644 --- a/src/main/webapp/layout/register.xhtml +++ b/src/main/webapp/layout/register.xhtml @@ -1,9 +1,9 @@ + xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> That's the register.xhtml. - \ No newline at end of file + diff --git a/src/main/webapp/layout/resourcemanagement.xhtml b/src/main/webapp/layout/resourcemanagement.xhtml index a0aa35c3..320b3824 100644 --- a/src/main/webapp/layout/resourcemanagement.xhtml +++ b/src/main/webapp/layout/resourcemanagement.xhtml @@ -1,81 +1,93 @@ - - - - -

    Dealing with resource files

    -

    The BootsFaces jar contains many CSS and JavaScript files. You don't need external resource files to use BootsFaces. However, - many developers and web designers aren't happy with that. These are basically the reasons for using external resources: -

    -
      -
    • Many resource files BootsFaces uses are also provided by CDNs. Using a CDN reduces your server's load, and in many cases CDNs - serve the files faster.
      • -
    • Often developers want to use their own versions of our JS or CSS libraries.
      • -
    • Sometimes another framework already add its own instance of jQuery (or anather library we need).
      • -
    • BootsFaces doesn't serve the entires jQueryUI library. Instead, it tries to optimize the network traffic by serving the - jQueryUI modules individually. That's a good choice with respect to http/2, but currently this approach slows things down.
      • -
    • In rare cases, developers want to modify the resource files BootsFaces provides.
      • -
    -

    To serve all these requirements, we've implemented quite a few options to influence which files are loaded and which are not.

    - -

    jQuery and jQueryUI

    -

    In general, BootsFaces goes into some lengths to decide which libraries to load, and when. Among other things, BootsFaces modifies the order of JavaScript - libraries if need be:

    -
      -
    • jQuery.js is always loaded first.
      • -
    • jQueryUI.js is always loaded second.
      • -
    • bsf.js is always loaded last.
      • -
    -

    If you provide your own version of jQuery (i.e. if there's a <h:outputScript library="(whatever)" name="(whatever)/jQuery-(whatever).js" />), - BootsFaces doesn't add its own jQuery. Its up to you to make sure your jQuery is compatible to BootsFaces. Our mechanism to detect whether you - add jQuery or not is fairly flexible. It checks whether the resource name contains the substring "jquery" and ends with ".js". Plus, it's case-agnostic.

    -

    The some applies to jQueryUI. In this case, we check for the sub-string "jquery-ui".

    - - -

    Font Awesome

    -

    If you provide your own version of FontAwesome, BootsFaces doesn't load its own version of FontAwesome. We're looking for resource files containing the - sub-string "font-awesome" or "fontawesome" and ending with ".css". Again, we ignore the case.

    -

    You can suppress Font Awesome on a per-page basis by adding the facet "no-fa" to the <h:head /> of your XHTML file.

    - -

    Configuring resources via the web.xml

    -

    Alternatively, you can configure your web.xml to suppress certain resources:

    -
      -
    • Setting the context parameter net.bootsfaces.get_fontawesome_from_cdn to "yes" or "true" allows you to provide your own Font Awesome file.
      • -
    • Setting the context parameter net.bootsfaces.get_jquery_from_cdn to "yes" or "true" allows you to provide your own jQuery file.
      • -
    • Setting the context parameter net.bootsfaces.get_jqueryui_from_cdn to "yes" or "true" allows you to provide your own jQueryUI file.
      • -
    • Setting the context parameter net.bootsfaces.get_bootstrap_from_cdn to "yes" or "true" allows you to provide your own Bootstrap CSS file. + + + + + + + + + + + + + + + + +

      Dealing with resource files

      +

      The BootsFaces jar contains many CSS and JavaScript files. You don't need external resource files to use BootsFaces. However, + many developers and web designers aren't happy with that. These are basically the reasons for using external resources: +

      +
        +
      • Many resource files BootsFaces uses are also provided by CDNs. Using a CDN reduces your server's load, and in many cases CDNs + serve the files faster.
        • +
      • Often developers want to use their own versions of our JS or CSS libraries.
        • +
      • Sometimes another framework already add its own instance of jQuery (or anather library we need).
        • +
      • BootsFaces doesn't serve the entires jQueryUI library. Instead, it tries to optimize the network traffic by serving the + jQueryUI modules individually. That's a good choice with respect to http/2, but currently this approach slows things down.
        • +
      • In rare cases, developers want to modify the resource files BootsFaces provides.
        • +
      +

      To serve all these requirements, we've implemented quite a few options to influence which files are loaded and which are not.

      + +

      jQuery and jQueryUI

      +

      In general, BootsFaces goes into some lengths to decide which libraries to load, and when. Among other things, BootsFaces modifies the order of JavaScript + libraries if need be:

      +
        +
      • jQuery.js is always loaded first.
        • +
      • jQueryUI.js is always loaded second.
        • +
      • bsf.js is always loaded last.
        • +
      +

      If you provide your own version of jQuery (i.e. if there's a <h:outputScript library="(whatever)" name="(whatever)/jQuery-(whatever).js" />), + BootsFaces doesn't add its own jQuery. Its up to you to make sure your jQuery is compatible to BootsFaces. Our mechanism to detect whether you + add jQuery or not is fairly flexible. It checks whether the resource name contains the substring "jquery" and ends with ".js". Plus, it's case-agnostic.

      +

      The some applies to jQueryUI. In this case, we check for the sub-string "jquery-ui".

      + + +

      Font Awesome

      +

      If you provide your own version of FontAwesome, BootsFaces doesn't load its own version of FontAwesome. We're looking for resource files containing the + sub-string "font-awesome" or "fontawesome" and ending with ".css". Again, we ignore the case.

      +

      You can suppress Font Awesome on a per-page basis by adding the facet "no-fa" to the <h:head /> of your XHTML file.

      + +

      Configuring resources via theweb.xml

      +

      Alternatively, you can configure your web.xml to suppress certain resources:

      +
        +
      • Setting the context parameter net.bootsfaces.get_fontawesome_from_cdn to "yes" or "true" allows you to provide your own Font Awesome file.
        • +
      • Setting the context parameter net.bootsfaces.get_jquery_from_cdn to "yes" or "true" allows you to provide your own jQuery file.
        • +
      • Setting the context parameter net.bootsfaces.get_jqueryui_from_cdn to "yes" or "true" allows you to provide your own jQueryUI file.
        • +
      • Setting the context parameter net.bootsfaces.get_bootstrap_from_cdn to "yes" or "true" allows you to provide your own Bootstrap CSS file. Note that this option is a bit difficult to get up and running. BootsFaces modifies the original Bootstrap files. That's only a handful of lines of code, but be warned. Currently, we're aware of changes in these files:
          -
        • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-navbar.less
          • -
        • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-thumbnails.less
          • -
        • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/jq/ui/datepicker.js
          • -
        -
        • +
      • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-navbar.less
        • +
      • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/less/bs-thumbnails.less
        • +
      • https://github.com/TheCoder4eu/BootsFaces-OSP/blob/master/gradleResources/jq/ui/datepicker.js
      - - -

      Defining when your resource files are loaded

      -

      If you need to place your CSS or JS file before or after the other resource files, you can use the attribute position of the - <h:outputStylesheet />. This is a non-standard attribute, so chances are your IDE complains about it. If so, make it a pass-through attribute. -

      - - - - - -


      - -       +
      • +
    + + +

    Defining when your resource files are loaded

    +

    If you need to place your CSS or JS file before or after the other resource files, you can use the attribute position of the + <h:outputStylesheet />. This is a non-standard attribute, so chances are your IDE complains about it. If so, make it a pass-through attribute. +

    + + + + + +


    + +     diff --git a/src/main/webapp/layout/rtl.xhtml b/src/main/webapp/layout/rtl.xhtml index 2a034711..ad49f1b8 100644 --- a/src/main/webapp/layout/rtl.xhtml +++ b/src/main/webapp/layout/rtl.xhtml @@ -1,177 +1,154 @@ + xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + id="rtlStyleSheet" /> - - - - -

    RTL support

    -     -     - - - - - + function toggleCSSStylesheet() { + if (document.getElementById('rtlStyleSheet').href + .indexOf('bootstrap-ltr.css') > 0) + document.getElementById('rtlStyleSheet').href = '../javax.faces.resource/bootstrap-rtl.css.jsf?ln=rtl'; + else + document.getElementById('rtlStyleSheet').href = '../javax.faces.resource/bootstrap-ltr.css.jsf?ln=rtl'; + } + - - - - -

    Note that this tab always uses dir="ltr". Otherwise, the sourcecode - looks a bit corrupted.

    - - -     - -

    Note that this tab always uses dir="ltr". Otherwise, the sourcecode - looks a bit corrupted.

    -

    This script allows you to toggle between LTR and RTL without reloading the page. - It is called by the oncomplete handler of an AJAX call.

    - - -     - -

    Note that this tab always uses dir="ltr". Otherwise, the sourcecode - looks a bit corrupted.

    - - -     -     -     -     + + +

    RTL support

    +     + + + + + + - - -

    BootsFaces adds some limited support for RTL (right-to-left) languages. Many components offer a - dir attribute. Setting it to rtl activates the support for right-to-left languages - of your browser. You can read a good explanation of this feature here: http://www.i18nguy.com/markup/right-to-left.html.

    -

    - However, RTL isn't fully - supported by Bootstrap itself. So you need to add this library to fully active RTL support: - https://github.com/morteza/bootstrap-rtl. -

    -

    There's a catch: activating this library makes RTL the default. You can't revert this effect by using - the dir="ltr" setting of the BootsFaces components. The RTL-to-LTR switcher of this page - circumvents this problem by activating and deactivating the CSS file when you toggle the switch.

    -     -     - - -

    Examples

    -

    - This is an example I found at http://www.i18nguy.com/markup/right-to-left.html, - adapted to make use of - <b:column /> - and - <b:panelGrid /> - . As you can see, the CSS library https://github.com/morteza/bootstrap-rtl - reverts the order of the columns: -

    -     -     -

    Using the default direction:

    - - - - European Digits - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - - - Arabic Digits - Ù  - Ù¡ - Ù¢ - Ù£ - Ù¤ - Ù¥ - Ù¦ - Ù§ - Ù¨ - Ù© - - - - JSF markup: - - + + +

    Note that this tab always uses dir="ltr". Otherwise, the sourcecode + looks a bit corrupted.

    +

    This script allows you to toggle between LTR and RTL without reloading the page. + It is called by the oncomplete handler of an AJAX call.

    + + +     + +

    Note that this tab always uses dir="ltr". Otherwise, the sourcecode + looks a bit corrupted.

    + + +     + +     +     + + + +

    BootsFaces adds some limited support for RTL (right-to-left) languages. Many components offer a + dir attribute. Setting it to rtl activates the support for right-to-left languages + of your browser. You can read a good explanation of this feature here: http://www.i18nguy.com/markup/right-to-left.html.

    +

    + However, RTL isn't fully + supported by Bootstrap itself. So you need to add this library to fully active RTL support: + https://github.com/morteza/bootstrap-rtl. +

    +

    There's a catch: activating this library makes RTL the default. You can't revert this effect by using + the dir="ltr" setting of the BootsFaces components. The RTL-to-LTR switcher of this page + circumvents this problem by activating and deactivating the CSS file when you toggle the switch.

    +     +     + + +

    Examples

    +

    + This is an example I found at http://www.i18nguy.com/markup/right-to-left.html, + adapted to make use of + <b:column /> + and + <b:panelGrid /> + . As you can see, the CSS library https://github.com/morteza/bootstrap-rtl + reverts the order of the columns: +

    +     +     +

    Using the default direction:

    + + + European Digits 0 1 @@ -197,50 +174,50 @@ public class RtlBean implements Serializable { Ù¨ Ù© - - ]]> - - - - - -

    Always use LTR:

    -

    Setting dir="ltr" influences the text within the columns, but it doesn't change the column - ordering itself:

    - - - - European Digits - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 + + + JSF markup: + + + + + + + +

    Always use LTR:

    +

    Setting dir="ltr" influences the text within the columns, but it doesn't change the column + ordering itself:

    + + European Digits 0 @@ -267,48 +244,49 @@ public class RtlBean implements Serializable { Ù¨ Ù© - - ]]> - - - - -

    :Always use RTL

    -

    :Analogously, setting dir="rtl" influences the text within the columns, but it doesn't change the column - ordering itself

    - - - - European Digits - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 + + + JSF markup: + + + + + + +

    :Always use RTL

    +

    :Analogously, setting dir="rtl" influences the text within the columns, but it doesn't change the column + ordering itself

    + + European Digits 0 @@ -335,14 +313,45 @@ public class RtlBean implements Serializable { Ù¨ Ù© - - ]]> - - - + + JSF markup: + + + + + + SyntaxHighlighter.all(); +     diff --git a/src/main/webapp/layout/simplifiedLayout.xhtml b/src/main/webapp/layout/simplifiedLayout.xhtml index bba13974..8814e6fd 100644 --- a/src/main/webapp/layout/simplifiedLayout.xhtml +++ b/src/main/webapp/layout/simplifiedLayout.xhtml @@ -1,124 +1,134 @@ + xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + -

    Simplified layout

    + /* Needed for TBS 3.0.1 (panel content overflow issue ) */ + .panel-body { + margin: 0px 15px; + } + +

    Simplified layout

    - The BootsFaces approach to defining rows and columns using - <b:row /> - and - <b:column /> - is a little simpler than the HTML-only Bootstrap approach, but BootsFaces doesn't stop there. There are two - shortcuts you can take. + The BootsFaces approach to defining rows and columns using + <b:row /> + and + <b:column /> + is a little simpler than the HTML-only Bootstrap approach, but BootsFaces doesn't stop there. There are two + shortcuts you can take.

    -

    The <b:panelGrid />

    +

    The<b:panelGrid />

    - Use the - <b:panelGrid /> - to define forms. More often than not, forms have a very strict layout, often consisting of one or two columns of - input fields, which in turn consist of a label column, the input field columns and an error message column. In - such a situation, - <b:panelGrid /> - is the component to use. Read the full story at the documentation page of <b:panelGrid - />. - + Use the + <b:panelGrid /> + to define forms. More often than not, forms have a very strict layout, often consisting of one or two columns of + input fields, which in turn consist of a label column, the input field columns and an error message column. In + such a situation, + <b:panelGrid /> + is the component to use. Read the full story at the documentation page of <b:panelGrid + />. +

    -

    The span attribute of most input fields

    +

    Thespan attribute of most input fields

    - Many components have a - span - attribute. If this attribute is set, the component automatically is surrounded by a - <b:column /> - : + Many components have a + span + attribute. If this attribute is set, the component automatically is surrounded by a + <b:column /> + :

    - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JSF markup: - - - - + ]]> + + + + SyntaxHighlighter.all(); +     diff --git a/src/main/webapp/layout/slow_mars.jpg b/src/main/webapp/layout/slow_mars.jpg new file mode 100644 index 00000000..7d300dba Binary files /dev/null and b/src/main/webapp/layout/slow_mars.jpg differ diff --git a/src/main/webapp/layout/start.xhtml b/src/main/webapp/layout/start.xhtml index eacd1a92..a72045a7 100644 --- a/src/main/webapp/layout/start.xhtml +++ b/src/main/webapp/layout/start.xhtml @@ -1,9 +1,9 @@ + xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> That's the start.xhtml. - \ No newline at end of file + diff --git a/src/main/webapp/layout/themes.xhtml b/src/main/webapp/layout/themes.xhtml index b5dc1165..7b3c98e4 100644 --- a/src/main/webapp/layout/themes.xhtml +++ b/src/main/webapp/layout/themes.xhtml @@ -1,70 +1,81 @@ - + - -

    Themes

    -

    BootsFaces comes with the Bootstrap default theme and 16 Bootswatch themes. Plus, you can - use an arbitrary third-party or custom Bootstrap theme.

    - -

    Theme CSS support

    - -

    The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css is loaded or not.

    -

    If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic - file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own - look and feel.

    -

    Setting the parameter to true causes BootsFaces to load theme.css, this is true for Bootstrap and Bootswatch Themes.

    - - - - -

    BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME to the name of the theme:

    - - - - -

    Custom themes

    -

    If you want to use a custom theme, set BootsFaces_THEME to custom . - In this case, you have to add the custom theme files manually to your JSF page. Typically, the custom CSS files are a Bootstrap.min.css - and a theme.css, so the import looks like this:

    - - - -

    Switching themes

    -

    You can even implement a theme switcher by using an EL expression in the web.xml:

    - - - - - -     -     + + + + + + + + + + + + +

    Themes

    +

    BootsFaces comes with the Bootstrap default theme and 16 Bootswatch themes. Plus, you can + use an arbitrary third-party or custom Bootstrap theme.

    + +

    Theme CSS support

    + +

    The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css is loaded or not.

    +

    If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic + file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own + look and feel.

    +

    Setting the parameter to true causes BootsFaces to load theme.css, this is true for Bootstrap and Bootswatch Themes.

    + + + + +

    BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME to the name of the theme:

    + + + + +

    Custom themes

    +

    If you want to use a custom theme, set BootsFaces_THEME to custom . + In this case, you have to add the custom theme files manually to your JSF page. Typically, the custom CSS files are a Bootstrap.min.css + and a theme.css, so the import looks like this:

    + + + +

    Switching themes

    +

    You can even implement a theme switcher by using an EL expression in the web.xml:

    + + + + + +     +     diff --git a/src/main/webapp/layout/wells.xhtml b/src/main/webapp/layout/wells.xhtml index fb17f907..8f28599c 100644 --- a/src/main/webapp/layout/wells.xhtml +++ b/src/main/webapp/layout/wells.xhtml @@ -1,63 +1,73 @@ - - -

    Wells

    -

    Use the well as a simple effect on an element to give it an inset effect.

    - - - - - -

    Well Header

    - Well, that's the content of the <b:well />. -     -     -     - - Markup:
    - - -     -     -
    - - - - - - Skinning - -

    - A Well is simply a div bearing the CSS class well. If a size is given, a second CSS class is added: -

    -
      -
    • well-lg if size="lg"
      • -
    • well-sm if size="sm"
      • -
    -     -
    -
    -
    - - -     -     + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + +

    Wells

    +

    Use the well as a simple effect on an element to give it an inset effect.

    + + + + + +

    Well Header

    + Well, that's the content of the <b:well />. +     +     +     + + Markup:
    + + +     +     +
    + +

    Reference section

    + + + + + Skinning + +

    + A Well is simply a div bearing the CSS class well. If a size is given, a second CSS class is added: +

    +
      +
    • well-lg if size="lg"
      • +
    • well-sm if size="sm"
      • +
    +     +
    +
    +
    + + +     + diff --git a/src/main/webapp/license.xhtml b/src/main/webapp/license.xhtml index bb13b44b..836b67dd 100644 --- a/src/main/webapp/license.xhtml +++ b/src/main/webapp/license.xhtml @@ -5,20 +5,20 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - BootsFaces: next-gen JSF Framework - - - - - -

    License

    -

    We relicensed the Project starting from the 0.9.0 release,

    -

    to switch to the more permissive Apache Version 2.0 license.

    -

    #{' '}

    -

    BootsFaces versions prior to v0.9.0 are available under a dual license: GPLv3 or LPGLv3.

    -

    You can choose, which of those licenses you want to apply.

    -     -     -     + + BootsFaces: next-gen JSF Framework + + + + + +

    License

    +

    We relicensed the Project starting from the 0.9.0 release,

    +

    to switch to the more permissive Apache Version 2.0 license.

    +

    #{' '}

    +

    BootsFaces versions prior to v0.9.0 are available under a dual license: GPLv3 or LPGLv3.

    +

    You can choose, which of those licenses you want to apply.

    +     +     +     diff --git a/src/main/webapp/miscellaneous/CompositeComponents.xhtml b/src/main/webapp/miscellaneous/CompositeComponents.xhtml index f6a11bf6..aa8440a7 100644 --- a/src/main/webapp/miscellaneous/CompositeComponents.xhtml +++ b/src/main/webapp/miscellaneous/CompositeComponents.xhtml @@ -1,191 +1,200 @@ - - - -

    Composite Components

    - -

    BootsFaces supports Composite Components, too.

    - -

    Custom components in a data table

    - - - - - - - - - - - + + + + + + + + + + + + +

    Composite Components

    + +

    BootsFaces supports Composite Components, too.

    + +

    Custom components in a data table

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - -     +     + ]]> + +     + + + + + + + + + + + + + + + + + + + + +     diff --git a/src/main/webapp/miscellaneous/Configuration.xhtml b/src/main/webapp/miscellaneous/Configuration.xhtml index 00f34f83..bb04add4 100644 --- a/src/main/webapp/miscellaneous/Configuration.xhtml +++ b/src/main/webapp/miscellaneous/Configuration.xhtml @@ -7,182 +7,196 @@ xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Configuration: web.xml and faces-config.xml

    -

    You can tweak the behaviour of BootsFaces by a couple of global parameters in the web.xml.

    -

    Mobile support

    -

    By default, BootsFaces adds a viewport meta tag needed for a smooth experience on mobile devices:

    -

    <meta name="viewport" content="width=device-width, initial-scale=1">

    -

    However, if this setting stands in your way, you can deactivate it by setting the context parameter - BootsFaces_USE_VIEWPORT to false.

    -

    This parameter must not contain EL expressions.

    - - - + + + + + + + + + + + -

    Themes

    -

    BootsFaces_THEME selects the Bootstrap theme your application uses. Defaults to (guess what) "default". Legal values - are the name of the theme, "default" or "custom". This expression may contain EL expressions. It is evaluated - each time a page is rendered. -

    -

    BootsFaces_USETHEME should always be set to true unless you use your own custom theme. This expression may contain EL expressions. It is evaluated - each time a page is rendered.

    - - - + + +

    Configuration:web.xml and faces-config.xml

    +

    You can tweak the behaviour of BootsFaces by a couple of global parameters in the web.xml.

    -

    Use your own version of jQuery, jQueryUI, FontAwesome, or Bootstrap instead of using the version BootsFaces brings

    -

    These parameters allow you to replace the built-in version of these libraries by your own libary. - For instance, you might prefer to load it from a CDN (hence the name). Setting these parameters to true - stops BootsFaces from adding them itself. You have to care about that yourself. -

    -

    Note that setting net.bootsfaces.get_bootstrap_from_cdn is not recommended because it - removes every CSS file dealing with Bootstrap - including the file bsf.css that contains - the CSS styles some of the BootsFaces component need. Plus, the parameter does not stop BootsFaces from - loading the JavaScript code. In most cases, you are be better of setting the theme to "custom".

    -

    Setting the parameters to true stops BootsFaces from adding the resources. These parameters - may contain EL expressions are are evaluated each time a page is rendered.

    - - - +

    Mobile support

    +

    By default, BootsFaces adds a viewport meta tag needed for a smooth experience on mobile devices:

    +

    <meta name="viewport" content="width=device-width, initial-scale=1">

    +

    However, if this setting stands in your way, you can deactivate it by setting the context parameter + BootsFaces_USE_VIEWPORT to false.

    +

    This parameter must not contain EL expressions.

    + + + -

    Activate or deactivate the BlockUI features (aka waitcursor)

    -

    By default, BlockUI is not activated. You have to activate it by adding a context parameter to the - web.xml. This parameter may contain EL expressions. It is evaluated once each time a JSF - page is rendered. This allows you to activate or deactivate it on a per-page basis. -

    - - - -

    Suppress the automatic rendering of labels

    -

    By default, BootsFaces renders a label if your provide the label attribute of an input - field. However, the label is also used for error messages, so sometimes you need more flexibility. - You can deactivate rendering labels globally by setting net.bootsfaces.defaults.renderLabel - to false. This parameter may contain EL expression. It is evaluated once each time a page is rendered - (i.e. it is request scoped). -

    - - - -

    Activate the BootsFaces tag decorator

    -

    The BootsFaces tag decorator allows you to use a relaxed, HTML5-like coding style in your JSF pages. - This feature is described in detail here. - To activate the feature, you have to register the decorator in the web.xml: -

    - - - -

    After registering the decorator, it is active by default. Sometimes that's not the desired behaviour, - especially if you have a lot of legacy code that has been written without the decorator in mind.

    +

    Themes

    +

    BootsFaces_THEME selects the Bootstrap theme your application uses. Defaults to (guess what) "default". Legal values + are the name of the theme, "default" or "custom". This expression may contain EL expressions. It is evaluated + each time a page is rendered. +

    +

    BootsFaces_USETHEME should always be set to true unless you use your own custom theme. This expression may contain EL expressions. It is evaluated + each time a page is rendered.

    + + + - - - -

    In this case you can deactivate the decorator by default, and reactivate it on a per-page basis by adding the - attribute bootsFacesDecorator="true" to an (almost) arbitrary JSF element: -

    - - - -

    This expression must not contain EL expressions.

    +

    Use your own version of jQuery, jQueryUI, FontAwesome, or Bootstrap instead of using the version BootsFaces brings

    +

    These parameters allow you to replace the built-in version of these libraries by your own libary. + For instance, you might prefer to load it from a CDN (hence the name). Setting these parameters to true + stops BootsFaces from adding them itself. You have to care about that yourself. +

    +

    Note that setting net.bootsfaces.get_bootstrap_from_cdn is not recommended because it + removes every CSS file dealing with Bootstrap - including the file bsf.css that contains + the CSS styles some of the BootsFaces component need. Plus, the parameter does not stop BootsFaces from + loading the JavaScript code. In most cases, you are be better of setting the theme to "custom".

    +

    Setting the parameters to true stops BootsFaces from adding the resources. These parameters + may contain EL expressions are are evaluated each time a page is rendered.

    + + + - -
    -
    -
    -
    -     +

    Activate or deactivate the BlockUI features (aka waitcursor)

    +

    By default, BlockUI is not activated. You have to activate it by adding a context parameter to the + web.xml. This parameter may contain EL expressions. It is evaluated once each time a JSF + page is rendered. This allows you to activate or deactivate it on a per-page basis. +

    + + + +

    Suppress the automatic rendering of labels

    +

    By default, BootsFaces renders a label if your provide the label attribute of an input + field. However, the label is also used for error messages, so sometimes you need more flexibility. + You can deactivate rendering labels globally by setting net.bootsfaces.defaults.renderLabel + to false. This parameter may contain EL expression. It is evaluated once each time a page is rendered + (i.e. it is request scoped). +

    + + + +

    Activate the BootsFaces tag decorator

    +

    The BootsFaces tag decorator allows you to use a relaxed, HTML5-like coding style in your JSF pages. + This feature is described in detail here. + To activate the feature, you have to register the decorator in the web.xml: +

    + + + + +

    After registering the decorator, it is active by default. Sometimes that's not the desired behaviour, + especially if you have a lot of legacy code that has been written without the decorator in mind.

    + + + + +

    In this case you can deactivate the decorator by default, and reactivate it on a per-page basis by adding the + attribute bootsFacesDecorator="true" to an (almost) arbitrary JSF element: +

    + + + +

    This expression must not contain EL expressions.

    + + +
    +
    +
    +
    +     diff --git a/src/main/webapp/miscellaneous/FacesMessages.xhtml b/src/main/webapp/miscellaneous/FacesMessages.xhtml index e62231d2..11e89988 100644 --- a/src/main/webapp/miscellaneous/FacesMessages.xhtml +++ b/src/main/webapp/miscellaneous/FacesMessages.xhtml @@ -1,30 +1,40 @@ - - BootsFaces: next-gen JSF Framework + xmlns:b="http://bootsfaces.net/ui" xmlns:jsf="http://xmlns.jcp.org/jsf" + xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" xmlns:ui="http://java.sun.com/jsf/facelets"> + + BootsFaces: next-gen JSF Framework - - - - -

    Reporting messages

    +     + + + + + + + + + + + + + +

    Reporting messages

    BootsFaces offers a short-hand API to report FacesMessages:

    - + -

    Search Expressions

    +

    Search Expressions

    You can assign a FacesMessage to a particular field by providing its id. Alternatively, you can use a search expression describing one or more fields. This comes in handy because the Java backend shouldn't know much about the implementation details of the front-end, at least not if you're @@ -36,12 +46,12 @@

    - - + +

    The search expressions use the root of the JSF tree as base component. If your JSF tree contains a lot of components, this may result in slow evaluation of the search expressions scanning the entire subtree, such as @@ -50,38 +60,38 @@ decorate with an error message is in a form with a particular id, you can speed things up like so:

    - - + + -

    Variables

    -

    The search expression @property allows you to use the variable name to define the FacesMessage. - More precicly, @property find the JSF component by its EL expression (without the curly braces):

    +

    Variables

    +

    The search expression @property allows you to use the variable name to define the FacesMessage. + More precicly, @property find the JSF component by its EL expression (without the curly braces):

    - - - + } + } + ]]> + - + -     -     -     + + + diff --git a/src/main/webapp/miscellaneous/FullCalendar.xhtml b/src/main/webapp/miscellaneous/FullCalendar.xhtml index a0088fe3..cc429805 100644 --- a/src/main/webapp/miscellaneous/FullCalendar.xhtml +++ b/src/main/webapp/miscellaneous/FullCalendar.xhtml @@ -1,47 +1,59 @@ - - - -

    FullCalendar (<b:fullCalendar />)

    - -

    Basic usage

    -

    Put a short description in simple words here.

    - - - - - JSF markup:
    - - - -     + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + + + +

    FullCalendar (<b:fullCalendar />)

    + +

    Basic usage

    +

    Put a short description in simple words here.

    + + + + + JSF markup:
    + + - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - -     + +     + +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +     diff --git a/src/main/webapp/miscellaneous/Success.xhtml b/src/main/webapp/miscellaneous/Success.xhtml index 0ce41e39..f079a28c 100644 --- a/src/main/webapp/miscellaneous/Success.xhtml +++ b/src/main/webapp/miscellaneous/Success.xhtml @@ -1,32 +1,32 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:cc="http://java.sun.com/jsf/composite/customComponents"> - - -

    Sucess!

    + + +

    Sucess!

    -

    The custom component commandButton has sent you to this page.

    - - - +

    The custom component commandButton has sent you to this page.

    + + + - -
    -
    -
    -
    -     + +
    +
    +
    +
    +     diff --git a/src/main/webapp/miscellaneous/Video.xhtml b/src/main/webapp/miscellaneous/Video.xhtml index 8da6fff2..d6b69840 100644 --- a/src/main/webapp/miscellaneous/Video.xhtml +++ b/src/main/webapp/miscellaneous/Video.xhtml @@ -1,204 +1,219 @@ - - - -

    Video (<b:video />)

    - -

    This component is a simple implementation of the HTML <video /> element.

    -

    Basic usage

    -

    Basically, showing a video is as simple as writing <b:video src="http://URL.com/myVideo.mp4" style="width:100%" />:

    - - - - - - - - - - - - - - - - - - + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + + + + + + + + + + + + + +

    Video (<b:video />)

    + +

    This component is a simple implementation of the HTML <video /> element.

    +

    Basic usage

    +

    Basically, showing a video is as simple as writing <b:video src="http://URL.com/myVideo.mp4" style="width:100%" />:

    + + + + + + + + + + + + + + + + + + - - - -

    Playing videos from your own server

    -

    Most application servers support playing videos. Using a relative URL usually suffices to play the video: <b:video src="myVideo.mp4" style="width:100%" />.

    - -

    Always set the width attribute

    -

    It's a good idea to always set the width of the video. In general, setting it to 100% makes it fit in nicely - with the responsive design of your page. The height of the video is calculated automatically because you can't modify the - aspect ration of the video. Nonetheless, it's a good idea to set the height, too, in order to prevent the page from - flickering while the video is loaded. As long as the browser doesn't know the dimensions of the video, it uses default - values which are almost always wrong.

    - - -

    AJAX

    -

    The video element supports a couple of standard events, such as onclick, and the full range of - events described at w3schools.com. - The only exception is onerror, which is not supported because there's already a standard AJAX attribute called onerror.

    -
    -
    Event - -
    -
    Description
    -
    abort
    -
    Fires when the loading of an audio/video is aborted
    -
    canplay
    -
    Fires when the browser can start playing the audio/video
    -
    canplaythrough
    -
    Fires when the browser can play through the audio/video - without stopping for buffering
    -
    durationchange
    -
    Fires when the duration of the audio/video is changed
    -
    emptied
    -
    Fires when the current playlist is empty
    -
    ended
    -
    Fires when the current playlist is ended
    -
    error
    -
    Not supported! Fires when an error occurred during the loading of an - audio/video
    -
    loadeddata
    -
    Fires when the browser has loaded the current frame of the - audio/video
    -
    loadedmetadata
    -
    Fires when the browser has loaded meta data for the - audio/video
    -
    loadstart
    -
    Fires when the browser starts looking for the audio/video
    -
    pause
    -
    Fires when the audio/video has been paused
    -
    play
    -
    Fires when the audio/video has been started or is no longer - paused
    -
    playing
    -
    Fires when the audio/video is playing after having been - paused or stopped for buffering
    -
    progress
    -
    Fires when the browser is downloading the audio/video
    -
    ratechange
    -
    Fires when the playing speed of the audio/video is changed
    -
    seeked
    -
    Fires when the user is finished moving/skipping to a new - position in the audio/video
    -
    seeking
    -
    Fires when the user starts moving/skipping to a new position - in the audio/video
    -
    stalled
    -
    Fires when the browser is trying to get media data, but data - is not available
    -
    suspend
    -
    Fires when the browser is intentionally not getting media - data
    -
    timeupdate
    -
    Fires when the current playback position has changed
    -
    volumechange
    -
    Fires when the volume has been changed
    -
    waiting
    -
    Fires when the video stops because it needs to buffer the - next frame
    -
    - -
    -
    - - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     - - -
    -
    -
    -
    -     +     +     + +

    Playing videos from your own server

    +

    Most application servers support playing videos. Using a relative URL usually suffices to play the video: <b:video src="myVideo.mp4" style="width:100%" />.

    + +

    Always set the width attribute

    +

    It's a good idea to always set the width of the video. In general, setting it to 100% makes it fit in nicely + with the responsive design of your page. The height of the video is calculated automatically because you can't modify the + aspect ration of the video. Nonetheless, it's a good idea to set the height, too, in order to prevent the page from + flickering while the video is loaded. As long as the browser doesn't know the dimensions of the video, it uses default + values which are almost always wrong.

    + + +

    AJAX

    +

    The video element supports a couple of standard events, such as onclick, and the full range of + events described at w3schools.com. + The only exception is onerror, which is not supported because there's already a standard AJAX attribute called onerror.

    +
    +
    Event + +
    +
    Description
    +
    abort
    +
    Fires when the loading of an audio/video is aborted
    +
    canplay
    +
    Fires when the browser can start playing the audio/video
    +
    canplaythrough
    +
    Fires when the browser can play through the audio/video + without stopping for buffering
    +
    durationchange
    +
    Fires when the duration of the audio/video is changed
    +
    emptied
    +
    Fires when the current playlist is empty
    +
    ended
    +
    Fires when the current playlist is ended
    +
    error
    +
    Not supported! Fires when an error occurred during the loading of an + audio/video
    +
    loadeddata
    +
    Fires when the browser has loaded the current frame of the + audio/video
    +
    loadedmetadata
    +
    Fires when the browser has loaded meta data for the + audio/video
    +
    loadstart
    +
    Fires when the browser starts looking for the audio/video
    +
    pause
    +
    Fires when the audio/video has been paused
    +
    play
    +
    Fires when the audio/video has been started or is no longer + paused
    +
    playing
    +
    Fires when the audio/video is playing after having been + paused or stopped for buffering
    +
    progress
    +
    Fires when the browser is downloading the audio/video
    +
    ratechange
    +
    Fires when the playing speed of the audio/video is changed
    +
    seeked
    +
    Fires when the user is finished moving/skipping to a new + position in the audio/video
    +
    seeking
    +
    Fires when the user starts moving/skipping to a new position + in the audio/video
    +
    stalled
    +
    Fires when the browser is trying to get media data, but data + is not available
    +
    suspend
    +
    Fires when the browser is intentionally not getting media + data
    +
    timeupdate
    +
    Fires when the current playback position has changed
    +
    volumechange
    +
    Fires when the volume has been changed
    +
    waiting
    +
    Fires when the video stops because it needs to buffer the + next frame
    +
    + +
    +
    + + +

    Reference section

    + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +
    +
    +
    +
    +     diff --git a/src/main/webapp/mobile/Gyroscope.xhtml b/src/main/webapp/mobile/Gyroscope.xhtml index 23ea3bf9..cd755289 100644 --- a/src/main/webapp/mobile/Gyroscope.xhtml +++ b/src/main/webapp/mobile/Gyroscope.xhtml @@ -1,132 +1,143 @@ - - - -

    Gyroscope (<b:gyroscope />)

    - -

    Gyroscope is a component targeted specifically at mobile device. If your smartphone or tablet PC - has a motion and rotation sensor, you can send the values of the sensor to a Java bean. - This results in a lot of AJAX calls, so be careful with your network capacity. We've set the - default value how often the gyroscope reports back to the server to half a second. - That's too slow for most real-world applications, so you can configure it yourself using the - interval property.

    - -

    Basic usage

    -

    Use the attributes alpha, beta and gamma to define - the variables to contain the rotation angle of your mobile device. These attributes contain - EL expression pointing to variables of your back-end bean. Every half a second these variables - are updated. Like mentioned above, you can modify the update frequency using the interval - attribute.

    - - - - - + + + + + +

    Alpha: #{gyroscopeBean.alpha} (rotation around z-axis - i.e. rotation while the smartphone lies flat on the table)

    +

    Beta: #{gyroscopeBean.beta} (rotation around x-axis)

    +

    Gamma: #{gyroscopeBean.gamma} (rotation around y-axis)

    +

    Calls: #{gyroscopeBean.calls}

     -]]> - - -     - - - -

    Alpha: #{gyroscopeBean.alpha} (rotation around z-axis - i.e. rotation while the smartphone lies flat on the table)

    -

    Beta: #{gyroscopeBean.beta} (rotation around x-axis)

    -

    Gamma: #{gyroscopeBean.gamma} (rotation around y-axis)

    -

    Calls: #{gyroscopeBean.calls}

    -     -     - - - - - -     -     - - - - -
    -
    -
    -
    -     + + + + + + + + + +

    Reference section

    + + + +
    +
    +
    +
    +     diff --git a/src/main/webapp/mobile/Pinch.xhtml b/src/main/webapp/mobile/Pinch.xhtml index d14827c5..06256e68 100644 --- a/src/main/webapp/mobile/Pinch.xhtml +++ b/src/main/webapp/mobile/Pinch.xhtml @@ -1,28 +1,28 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Pinch (<b:pinch />)

    + + +

    Pinch (<b:pinch />)

    -

    Pinch is a component planned for BootsFaces 0.9.0.

    +

    Pinch is a component planned for BootsFaces 0.9.0.

    - -
    -
    -
    -
    -     + +
    +
    +
    +
    +     diff --git a/src/main/webapp/mobile/Shake.xhtml b/src/main/webapp/mobile/Shake.xhtml index 4e3ee63c..0a4e50cc 100644 --- a/src/main/webapp/mobile/Shake.xhtml +++ b/src/main/webapp/mobile/Shake.xhtml @@ -1,64 +1,76 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Shake (<b:shake />)

    -

    <b:shake> is a JSF component that detects when your device is shaken. - It goes without saying that this only works on devices with a motion sensor. Typically, smartphones - and many tablet computers have such a sensor.

    -

    Basic usage

    -

    <b:shake /> only takes a singe parameter: onshake. - That's a JavaScript function.

    + + + + + + + + -

    Live demo

    -

    Open this page on a mobile device and shake it. A JSF alert box should show. This is - the source code needed:

    - - - - - - - + + +

    Shake (<b:shake />)

    - +

    <b:shake> is a JSF component that detects when your device is shaken. + It goes without saying that this only works on devices with a motion sensor. Typically, smartphones + and many tablet computers have such a sensor.

    +

    Basic usage

    +

    <b:shake /> only takes a singe parameter: onshake. + That's a JavaScript function.

    - - - Skinning - -
      -
    • Tell the world which CSS classes can be used to change the - look of the component.
      • -
    -     +

    Live demo

    +

    Open this page on a mobile device and shake it. A JSF alert box should show. This is + the source code needed:

    + + + - -
    -
    -
    -
    -     + + + + + +

    Reference section

    + + + + + Skinning + +
      +
    • Tell the world which CSS classes can be used to change the + look of the component.
      • +
    +     + + +
    +
    +
    +
    +     diff --git a/src/main/webapp/mobile/Touch.xhtml b/src/main/webapp/mobile/Touch.xhtml index b5d2f00c..4f6846bc 100644 --- a/src/main/webapp/mobile/Touch.xhtml +++ b/src/main/webapp/mobile/Touch.xhtml @@ -1,28 +1,28 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> - - -

    Touch (<b:touch />)

    + + +

    Touch (<b:touch />)

    -

    Touch is a component planned for BootsFaces 0.9.0.

    +

    Touch is a component planned for BootsFaces 0.9.0.

    - -
    -
    -
    -
    -     + +
    +
    +
    +
    +     diff --git a/src/main/webapp/pages/index.xhtml b/src/main/webapp/pages/index.xhtml deleted file mode 100644 index 9199de02..00000000 --- a/src/main/webapp/pages/index.xhtml +++ /dev/null @@ -1,54 +0,0 @@ - - - - - BootsFaces Basic Page - - - - - - -

    [Tree]: javascript complex implementation

    - - -
    -
    - - -     -     - - - -     -     - - - - -

    [DefaultCommand] and [ColorPicker]:

    - - - - - - - -     -     -     -     - -     - \ No newline at end of file diff --git a/src/main/webapp/pages/second.xhtml b/src/main/webapp/pages/second.xhtml deleted file mode 100644 index b8612b00..00000000 --- a/src/main/webapp/pages/second.xhtml +++ /dev/null @@ -1,20 +0,0 @@ - - - - - BootsFaces Basic Page - - - - - -

    Hello, world Second Page!

    - -     -     -     -     - \ No newline at end of file diff --git a/src/main/webapp/pages/test_newcomp.xhtml b/src/main/webapp/pages/test_newcomp.xhtml deleted file mode 100644 index cc3ad825..00000000 --- a/src/main/webapp/pages/test_newcomp.xhtml +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - DatePicker 2 - - - - -
    - - -
    - -     -
    -
    - - -
    - -     - -
    -
    - - -
    - -     - -
    -
    -
    - - - -     - \ No newline at end of file diff --git a/src/main/webapp/quickstart.xhtml b/src/main/webapp/quickstart.xhtml index 48183ef8..0100c77c 100644 --- a/src/main/webapp/quickstart.xhtml +++ b/src/main/webapp/quickstart.xhtml @@ -5,227 +5,202 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - BootsFaces: next-gen JSF Framework - - - - - -

    Quick Start

    + + BootsFaces: next-gen JSF Framework + + + + -

    Requirements

    -

    Read the .

    -
    -

    Download

    - - -

    Add these lines to your Maven pom.xml build file:

    - - - -     - -

    Add this line to your .gradle build file:

    - - - -     - -

    If you have not downloaded BootsFaces yet, .

    -     -     -
    -

    Maven developer preview (for the curious one)

    -

    Every once in a while, we publish a developer snapshot for testing and preview purposes. Note that these developer previews - are not suited for production. In fact, the main purpose of a developer preview is to give the early adopter of the community - an option to test and evaluate new features early, and to tell us about bugs. In other words: we know the previews are buggy, - and hope there are enthusiasts helping us to polish the software before it hits the market. The great thing is: usually there - are daring developers you give the preview version a try and report us back. More often than not, that boils down to being a - lot of work for us, but we really appreciate your help. Thanks, early adopters!

    -

    Now that you are aware of the risks, add these lines to your Maven pom.xml build file:

    - - - -

    After that, add the dependency to the new version as shown in the first tab, this time adding the suffix -SNAPSHOT.

    + + + + + + + + + -

    Starting a project

    -

    Probably the easiest way to get started is to grab one of the demo projects at - https://github.com/stephanrauh/BootsFaces-Examples.

    -

    Alternatively, you can also start from scratch. Open your favorite IDE, start a new project and add the BootsFaces jar you've downloaded to your libraries.

    -

    Now, create a new JSF page and make the page header look as follows:

    - - - -

    Notice the <!DOCTYPE html> declaration, needed because BootsFaces makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype - and the xmlns:b="http://bootsfaces.net/ui" namespace, that enables the use of BootsFaces tags in your JSF page.

    -

    You are now ready to develop your project with BootsFaces!

    -

    This is a minimal BootsFaces page to get you started:

    - - - -

    However, we suggest you start reading the page and have a look at the - in the section.

    -
    + +

    Quick start

    -

    Theme CSS support

    +

    Requirements

    +

    Read the .

    +
    +

    Download

    + + +

    Add these lines to your Maven pom.xml build file:

    + + + +     + +

    Add this line to your .gradle build file:

    + + + +     + +

    If you have not downloaded BootsFaces yet, .

    +     +     +
    +

    Maven developer preview (for the curious one)

    +

    Every once in a while, we publish a developer snapshot for testing and preview purposes. Note that these developer previews + are not suited for production. In fact, the main purpose of a developer preview is to give the early adopter of the community + an option to test and evaluate new features early, and to tell us about bugs. In other words: we know the previews are buggy, + and hope there are enthusiasts helping us to polish the software before it hits the market. The great thing is: usually there + are daring developers you give the preview version a try and report us back. More often than not, that boils down to being a + lot of work for us, but we really appreciate your help. Thanks, early adopters!

    +

    Now that you are aware of the risks, add these lines to your Maven pom.xml build file:

    + + + +

    After that, add the dependency to the new version as shown in the first tab, this time adding the suffix -SNAPSHOT.

    -

    The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css is loaded or not.

    -

    If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic - file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own - look and feel.

    -

    Setting the parameter to true causes BootsFaces to load theme.css, this is true for Bootstrap and Bootswatch Themes.

    - - - -

    BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME to the name of the theme:

    - - - -

    If you need more customization you can use the custom value.

    -

    Please refer to the page for instructions on Custom Theme.

    -
    -

    Building the BootsFaces.jar from source

    -

    Most of the time you're probably happy with the binaries available at Maven Central or at the download page. However, it's - also possible to build BootsFaces from source. This way, you get our latest bug fixes and the newest components, - and you can also contribute bug fixes or components yourself to the project. (Truth to tell you get also our newest bugs. Use at own risk).

    -

    The BootsFaces source code is hosted on a GitHub repository. - Clone the repository using git (or download the zip file and unpack it to a folder). This folder contains two build files: a Maven pom.xml and an - Gradle build.gradle. In fact, there are even two Gradle files: the subfolder gradleResources contains a Gradle build file of its - own, which is called by the Gradle build file of the parent project.

    -

    The Maven build file is the quick-and-easy solution for most developers. However, it depends on the results of the Gradle build. When the BootsFaces team (or - a committer sending us a pull request) changes one of the CSS or JavaScript files, they have to run the Gradle build first. The Gradle build prepares the - resources for Maven, which are committed to GitHub. That way, the Maven build is always up-to-date, even if it lacks important parts of the build process.

    -

    Cutting a long story short, you're free to use either the Maven or the Gradle build, unless you want to modify the CSS or JavaScript files of BootsFaces.

    -

    The Maven build

    -

    To build the jar, run mvn clean install on the command line. Most IDEs also offer decent support for Maven. For instance, Eclipse users - can import the project via "Import --> Maven --> Existing Maven project".

    -

    The Gradle build from Command Line

    -

    Building BootsFaces with Gradle is very straightforward, the only prerequisite is having java installed (JDK 7 or later),

    -

    there is no need to have Gradle installed, thanks to the Gradle wrapper.

    -

    Just change your directory to the root directory of the project and execute:

    - ./gradlew -

    on *NIX systems or

    - gradlew.bat -

    on Windows systems.

    -

    After few seconds you should see the "BUILD SUCCESSFUL" message and will find the library

    -

    in the subdirectory build/libs .

    +

    Starting a project

    +

    Probably the easiest way to get started is to grab one of the demo projects at + https://github.com/stephanrauh/BootsFaces-Examples.

    +

    Alternatively, you can also start from scratch. Open your favorite IDE, start a new project and add the BootsFaces jar you've downloaded to your libraries.

    +

    Now, create a new JSF page and make the page header look as follows:

    + + + +

    Notice the <!DOCTYPE html> declaration, needed because BootsFaces makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype + and the xmlns:b="http://bootsfaces.net/ui" namespace, that enables the use of BootsFaces tags in your JSF page.

    +

    You are now ready to develop your project with BootsFaces!

    +

    This is a minimal BootsFaces page to get you started:

    + + + +

    However, we suggest you start reading the page and have a look at the + in the section.

    +
    -

    The Gradle build in your IDE

    -

    Import the Gradle project into your IDE. Whether you import the subproject or not, is up to you. You don't need it. To build the project, - first run Gradle with the target buildResources (which is inherited from the subproject). After that, - run "Gradle assemble" to build the BootsFaces-OSP.jar. You find the jar file in the build folder of your project.

    +

    Theme CSS support

    -
    -

    Customization of the BootsFaces.jar

    -

    Until there is a new version of the customizer, you can still customize the look and feel taking advantage of the build system. - There are many Bootstrap customizers on the net, for example Bootswatch . - What you need is a file with the variables to customize the build. Some customizers will provide you a .less file as well.

    -

    Put the files in the BootsFaces/less directory of the build and tweak the bs-* files to use your variables / .less file.

    -
    -

    Roadmap

    -

    The big tickets of the next versions are

    -
      -
    • Going mobile with swipe gesture support
      • -
    • Making the library more orthogonal (i.e. adding similar attributes like visible and hidden to every component that might benefit from such a feature).
      • -
    • Improving the AJAX support, making every visible component AJAX-aware.
      • -
    • And - of course - support for Bootstrap 4.
      • -
    • Possibly we're also going to re-implement the customizer, allowing you to use a special version of BootsFaces with a small footprint - (which you trade for a limited set of components).
      • -
    • Last, not least, we'd like to continue to improve the documentation.
      • -
    +

    The BootsFaces_USETHEME context-param in your web.xml controls whether theme.css is loaded or not.

    +

    If you set the parameter to false, BootsFaces delivers a CSS file containing the basic layout instructions. This basic + file doesn't contain shadows, decorations or colors, so it looks pretty boring. But it's a good starting point to implement your own + look and feel.

    +

    Setting the parameter to true causes BootsFaces to load theme.css, this is true for Bootstrap and Bootswatch Themes.

    + + + -

    Minor (but still important) tickets are

    -
      -
    • fixing bugs :)
      • -
    • adding components
      • -
    • client-side validation and JSR303 support
      • -
    -

    In any case, we'd like to hear from you. Use the bug tracker to inform us about bugs you've discovered, components you'd like to see or contributions - you'd like to make. Your feedback is welcome!

    +

    BootsFaces also contains all 16 BootsWatch themes. You can activate any of these by setting BootsFaces_THEME to the name of the theme:

    + + + +

    If you need more customization you can use the custom value.

    +

    Please refer to the page for instructions on Custom Theme.

    +
    +

    Building the BootsFaces.jar from source

    +

    Most of the time you're probably happy with the binaries available at Maven Central or at the download page. However, it's + also possible to build BootsFaces from source. This way, you get our latest bug fixes and the newest components, + and you can also contribute bug fixes or components yourself to the project. (Truth to tell you get also our newest bugs. Use at own risk).

    +

    The BootsFaces source code is hosted on a GitHub repository. + Clone the repository using git (or download the zip file and unpack it to a folder). This folder contains two build files: a Maven pom.xml and an + Gradle build.gradle. In fact, there are even two Gradle files: the subfolder gradleResources contains a Gradle build file of its + own, which is called by the Gradle build file of the parent project.

    +

    The Maven build file is the quick-and-easy solution for most developers. However, it depends on the results of the Gradle build. When the BootsFaces team (or + a committer sending us a pull request) changes one of the CSS or JavaScript files, they have to run the Gradle build first. The Gradle build prepares the + resources for Maven, which are committed to GitHub. That way, the Maven build is always up-to-date, even if it lacks important parts of the build process.

    +

    Cutting a long story short, you're free to use either the Maven or the Gradle build, unless you want to modify the CSS or JavaScript files of BootsFaces.

    +

    The Maven build

    +

    To build the jar, run mvn clean install on the command line. Most IDEs also offer decent support for Maven. For instance, Eclipse users + can import the project via "Import --> Maven --> Existing Maven project".

    +

    The Gradle build from Command Line

    +

    Building BootsFaces with Gradle is very straightforward, the only prerequisite is having java installed (JDK 7 or later),

    +

    there is no need to have Gradle installed, thanks to the Gradle wrapper.

    +

    Just change your directory to the root directory of the project and execute:

    + ./gradlew +

    on *NIX systems or

    + gradlew.bat +

    on Windows systems.

    +

    After few seconds you should see the "BUILD SUCCESSFUL" message and will find the library

    +

    in the subdirectory build/libs .

    - - -


    -     -     -     +
    + +


    +     +     +     diff --git a/src/main/webapp/requirements.xhtml b/src/main/webapp/requirements.xhtml index bb86985d..5a7b0c8e 100644 --- a/src/main/webapp/requirements.xhtml +++ b/src/main/webapp/requirements.xhtml @@ -5,28 +5,28 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets"> - - BootsFaces: next-gen JSF Framework - - - - - - -

    Requirements

    - - -

    BootsFaces is targeted at Java EE 6/7 and requires a Java 1.6 or later VM.

    -

    JSF 2.0, 2.1 and 2.2 are supported.

    -

    Oracle Mojarra 2.2+ or Apache MyFaces 2.2+

    -

    Note1: Oracle has dropped Commercial support for Glassfish as of version 4.0. Glassfish will therefore be only the Reference Implementation for Java EE.
    - BootsFaces is therefore first tested for compliance in Glassfish, then tested on other Application Servers such as WildFly/JBoss and TomEE.

    -

    Note2: Glassfish 3.2 is installed with an old version of the JSF library(2.1.6) with a known bug fixed in version 2.1.8. - we suggest you to update the library to the latest version.

    -     - -



    -     -     -     + + BootsFaces: next-gen JSF Framework + + + + + + +

    Requirements

    + + +

    BootsFaces is targeted at Java EE 6/7 and requires a Java 1.6 or later VM.

    +

    JSF 2.0, 2.1 and 2.2 are supported.

    +

    Oracle Mojarra 2.2+ or Apache MyFaces 2.2+

    +

    Note1: Oracle has dropped Commercial support for Glassfish as of version 4.0. Glassfish will therefore be only the Reference Implementation for Java EE.
    + BootsFaces is therefore first tested for compliance in Glassfish, then tested on other Application Servers such as WildFly/JBoss and TomEE.

    +

    Note2: Glassfish 3.2 is installed with an old version of the JSF library(2.1.6) with a known bug fixed in version 2.1.8. + we suggest you to update the library to the latest version.

    +     + +



    +     +     +     diff --git a/src/main/webapp/resources/customComponents/ajaxButton.xhtml b/src/main/webapp/resources/customComponents/ajaxButton.xhtml index 279a276a..175ec215 100644 --- a/src/main/webapp/resources/customComponents/ajaxButton.xhtml +++ b/src/main/webapp/resources/customComponents/ajaxButton.xhtml @@ -1,24 +1,24 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:composite="http://java.sun.com/jsf/composite"> - - - - - + + + + + - - - + + + diff --git a/src/main/webapp/resources/customComponents/blueButton.xhtml b/src/main/webapp/resources/customComponents/blueButton.xhtml index f9b3c121..96a0500c 100644 --- a/src/main/webapp/resources/customComponents/blueButton.xhtml +++ b/src/main/webapp/resources/customComponents/blueButton.xhtml @@ -1,25 +1,25 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:composite="http://java.sun.com/jsf/composite"> - - - - + + + + - - - - + + + + diff --git a/src/main/webapp/resources/customComponents/greenButton.xhtml b/src/main/webapp/resources/customComponents/greenButton.xhtml index 22c7dde8..fd82494f 100644 --- a/src/main/webapp/resources/customComponents/greenButton.xhtml +++ b/src/main/webapp/resources/customComponents/greenButton.xhtml @@ -1,25 +1,25 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:composite="http://java.sun.com/jsf/composite"> - - - - + + + + - - - - + + + + diff --git a/src/main/webapp/resources/customComponents/redButton.xhtml b/src/main/webapp/resources/customComponents/redButton.xhtml index 437a7138..77ef8ed9 100644 --- a/src/main/webapp/resources/customComponents/redButton.xhtml +++ b/src/main/webapp/resources/customComponents/redButton.xhtml @@ -1,25 +1,25 @@ + xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:composite="http://java.sun.com/jsf/composite"> - - - - + + + + - - - - + + + + diff --git a/src/main/webapp/resources/images/bsf.simple.white.ico b/src/main/webapp/resources/images/bsf.simple.white.ico new file mode 100644 index 00000000..25d7ee34 Binary files /dev/null and b/src/main/webapp/resources/images/bsf.simple.white.ico differ diff --git a/src/main/webapp/test/horizontaltest.xhtml b/src/main/webapp/test/horizontaltest.xhtml index b7b8df9c..e9625fad 100644 --- a/src/main/webapp/test/horizontaltest.xhtml +++ b/src/main/webapp/test/horizontaltest.xhtml @@ -6,621 +6,621 @@ xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" > - - BootsFaces rocks! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + BootsFaces rocks! + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/test/horizontaltest2.xhtml b/src/main/webapp/test/horizontaltest2.xhtml index eda73050..af8bae7a 100644 --- a/src/main/webapp/test/horizontaltest2.xhtml +++ b/src/main/webapp/test/horizontaltest2.xhtml @@ -6,621 +6,621 @@ xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" > - - BootsFaces rocks! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + BootsFaces rocks! + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main/webapp/test/index.xhtml b/src/main/webapp/test/index.xhtml index 29613b78..52be3584 100644 --- a/src/main/webapp/test/index.xhtml +++ b/src/main/webapp/test/index.xhtml @@ -7,30 +7,30 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> - -

    Automated test results

    - - - - - - - - - - - - - - - - - - - - - - -     - \ No newline at end of file + +

    Automated test results

    + + + + + + + + + + + + + + + + + + + + + + +     + diff --git a/src/main/webapp/test/template.xhtml b/src/main/webapp/test/template.xhtml index ab8bc971..370b6d53 100644 --- a/src/main/webapp/test/template.xhtml +++ b/src/main/webapp/test/template.xhtml @@ -6,26 +6,26 @@ xmlns:b="http://bootsfaces.net/ui" xmlns:p="http://primefaces.org/ui" > - - BootsFaces rocks! - - - - - - - + + BootsFaces rocks! + + + + + + + - - + + - - - + + + - - - - \ No newline at end of file + + + + diff --git a/src/main/webapp/undocumented.xhtml b/src/main/webapp/undocumented.xhtml index fe0a5f66..7200c9e8 100644 --- a/src/main/webapp/undocumented.xhtml +++ b/src/main/webapp/undocumented.xhtml @@ -1,23 +1,23 @@ - - - -

    Undocumented components

    -

    BootsFaces contains several components that haven't been documented yet.

    -
      + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:b="http://bootsfaces.net/ui" + xmlns:ui="http://java.sun.com/jsf/facelets"> + + + +

      Undocumented components

      +

      BootsFaces contains several components that haven't been documented yet.

      +
      • pillLink (related to navLink?)
      • tabLink (related to navLink?)
      • listLink (related to navLink?)
        • -
      - -       +
    + +     - \ No newline at end of file +