• Author / Uploaded
• orangota

• Categories
• Caras del servidor Java
• Elemento HTML
• Bootstrap (marco frontal)
• Hipertexto
• ciberespacio

Citation preview

Toggle navigation BootsFaces

* * * * Getting Started**

o // Requirements

o // Download

o // Quick Start

o // PrimeFaces

o // OmniFaces

o // AngularFaces

* * Layout**

o // Basic Layout and Grid System

o // Sidebars (NavLinks)

o // Menus (Navbars)

o // Panels

o // Grids

o // Icons

o Jumbotron

o Wells

* * Forms**

o Buttons

o Button Groups and Toolbars

o Command Button

o Fetch Bean Infos (Validations)

o Input Text

o // Input Secret

o Checkbox

o Combobox (SelectOneMenu)

o Multiple Choice Combobox (SelectMultiMenu)

o // Poll

o // Messages

* * Bootstrap Widgets**

o // Alerts

o DropButton

o // Labels and Badges

o Modals

o // Thumbnails

o // Tab

o // Tooltip

* * jQueryUI Widgets**

o // Slider

o // More Sliders

o // DatePicker

* // Examples

Integration with AngularFaces

Starting with AngularFaces 2.1 and BootsFaces 0.6.0, both frameworks are aligned to each other. AngularFaces offers special support for BootsFaces, and BootsFaces is tested to work with AngularFaces. Teaser Consider the form below and the corresponding XHTML source code. As you can see, this is a pretty relaxed, almost HTML-like style of writing a JSF view: * live demo

* JSF markup

* AngularJS Controller

* i18n.properties (optional)

* i18n_de.properties (optional)

* JSF bean

* CSS

brand Select your car How much do you want to pay at most? â ¬.00 engine power HP i agree to the terms and conditions Look which cars are available || | ||| | || | | ||| | || (Please select)| | || Fiat | | || Honda | | ||Opel | | || | | ||| | ||(Please select)| | || Cinquecento | | || Civic | | || Astra | | || Megane | | || | | || | | ||| | ||| | || | | ||| | ||| | ||| | || | | ||| | ||| | ||| | ||| | || | | || | | ||| | ||| | ||| || |angular.module("IntegrationApp", [ "angularfaces" ])| |.controller('IntegrationController', ['$scope', function($scope) {| | ||initJSFScope($scope);| |}]);| i18n files can be useful even if you don't want to support foreign languages. If you don't define a label manually, AngularFaces guesses a label for you. You can replace this label by a more adequate label using the property file. This way, you can write very concise JSF code, which is nice for rapid prototyping. In case the texts aren't up to your customer's liking, you can fix them later in a properties file. Put the |i18n.properties| into the root folder of your class path. |brand=Select your car brand:| |engine power=How much engine power ||do| |you need?| AngularFaces supports foreign languages out of the box. Simply put an |i18n_{language}.properties| file into the root folder of your class path ({language} being a placeholder for the two-letter code of the target language). For example, if you set the browser to "German", it shows the live demo in German language - including labels and error

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

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

| | | |

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

| | | | | | | | |}|

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

AngularFaces and AngularJS add a CSS class to an erroneous input field and its label and error message. For maximum flexibility, that's three different classes. It's up to you to decide whether you want to highlight a violated validation constraint in the label, the field, the error message or a combination of them. The example below colors everything red - not exactly decent, but making it almost impossible to ignore a mistake: ||

Why is AngularFaces interesting? We can mention only a few advantages of AngularFaces here: * It opens the world of AngularJS programming to JSF programmers. Notice the mustaches in the JSF source code. They refer both to the AngularJS model and the JSF bean. AngularFaces synchronizes both models for you. * You can use (and write) widgets that are rendered on the client side. For instance, ng-table is a great replacement for JSF datatables. * Labels and error messages are optionally generated automatically. * Labels and messages are translated to foreign languages automatically. * Most JSR303 bean validations are evaluated on the client. * Optionally you can adopt an HTML-like style. For instance, you can omit the |b:| prefixes. For instance, |b:row| simply becomes |row|. Note the || in the example above. It almost passes for a native HTML || widget. Read the full story on the AngularFaces manual page.

Getting started You have to add both the BootsFaces and the AngularFaces jar files. AngularFaces also requires a Json serializer - currently either Gson or Jackson: * Maven

* Gradle

* Others

Add these lines to your Maven pom.xml file: || | ||de.beyondjava| | ||angularFaces-core| | ||2.1.0-RC2| || || | ||net.bootsfaces| | ||bootsfaces| | ||0.6.6| | ||compile| || AngularFaces also needs a Json serializer. As of AngularFaces 2.1, Jackson and Gson are supported. Activate one of the following dependencies: ||

| ||com.fasterxml.jackson.jaxrs| | ||jackson-jaxrs-json-provider| | ||2.5.0| || | | | ||com.google.code.gson | | ||gson | | ||2.2.4 | || |compile ||'de.beyondjava:angularFaces-core:2.1.+'| |compile ||'net.bootsfaces:bootsfaces:0.6.6'| |compile ||'com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.5.0'| AngularFaces also needs a Json serializer. As of AngularFaces 2.1, Jackson and Gson are supported. Activate one of the following dependencies: |compile ||'com.google.code.gson:gson:2.2.4'| |compile ||'com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.5.0'| AngularFaces is available at Maven Central. You also need a Json serializer. As of AngularFaces 2.1, Jackson and Gson are supported. Configuration You have to add a few lines to the web.xml. For the sake of convenience, we show both the entire minimal |web.xml| and the complete minimal |faces-config.xml| files: * web.xml

* faces-config.xml

|| || | ||| | ||| | ||javax.faces.SEPARATOR_CHAR| | ||_|

|

|||

| ||| | ||| | ||BootsFaces_USETHEME| | ||true| | ||| | ||| | ||Faces Servlet| | ||javax.faces.webapp.FacesServlet| | ||1| | ||| | ||| | ||Faces Servlet| | ||*.jsf| | ||/javax.faces.resource/*| | ||| || || || | ||| | ||net.bootsfaces.render.UnmappedResourceHandler| | ||| || Pitfalls form and ng-controller It's important to put the form inside the div containing the ng-controller. Otherwise, everything works fine - but you never see the validation error messages. Multiple forms AngularFaces supports only one controller per JSF view and one form per controller. Don't put more than one form in a controller. separatorchar and prependId AngularJS doesn't cope with Java's default separator char which is used internally in ids. The best solution is to clear the form attribute |prependId=false|. Alternatively, you can set the separator charactor to "%" in the |web.xml.| However, the latter solution is not officially

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

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

Toggle navigation ©2013-2015 TheCoder4Eu

BootsFaces v0.7.0-OSP on Mojarra 2.2.11, PrimeFaces 5.2, AngularFaces 2.1.6 and OmniFaces 1.10