Toggle navigationBootsFaces * * * * 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 AngularFacesStarting with AngularFaces 2.1 and BootsFaces 0.6.0, both frameworks arealigned to each other. AngularFaces offers special support forBootsFaces, and BootsFaces is tested to work with AngularFaces. TeaserConsider the form below and the corresponding XHTML source code. As youcan see, this is a pretty relaxed, almost HTML-like style of writing aJSF view: * live demo * JSF markup * AngularJS Controller * i18n.properties (optional) * i18n_de.properties (optional) * JSF bean * CSS brandSelect your carHow much do you want to pay at most?.00engine powerHPi agree to the terms and conditionsLook 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 foreignlanguages. If you don't define a label manually, AngularFaces guesses alabel for you. You can replace this label by a more adequate label usingthe property file. This way, you can write very concise JSF code, whichis nice for rapid prototyping. In case the texts aren't up to yourcustomer'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 classpath ({language} being a placeholder for the two-letter code of thetarget language). For example, if you set the browser to "German", itshows the live demo in German language - including labels and errormessages. The error messages are translated in an error messages fileprovided with AngularFaces. The other messages are translated in the|i18n_de.properties| file:|brand=Bitte whlen Sie die Marke:||engine power=Wie viele PS brauchen Sie?||Select your car=Welches Modell suchen Sie?||How much ||do| |you want to pay at most?=Hchstpreis:||i agree to the terms and conditions=Ich habe die AGBs gelesen und akzeptiert.||Look which cars are available=Suche nach passenden Fahrzeugen||HP=PS||@RequestScoped||@ManagedBean||public| |class| |CarBean {|| ||@NotNull|| ||private| |String brand;| | ||@NotNull|| ||private| |String type;| | ||@NotNull|| ||@Min||(||500||)|| ||@Max||(||50000||)|| ||private| |int| |price;| | ||@NotNull|| ||@Min||(||2||)|| ||@Max||(||999||)|| ||private| |int| |enginePower;|| | | ||private| |boolean| |iAgreeToTheTermsAndConditions=||false||;|| | | ||// getters and setters are omitted for the sake of brevity||}|AngularFaces and AngularJS add a CSS class to an erroneous input fieldand its label and error message. For maximum flexibility, that's threedifferent classes. It's up to you to decide whether you want tohighlight a violated validation constraint in the label, the field, theerror message or a combination of them. The example below colorseverything red - not exactly decent, but making it almost impossible toignore a mistake:||| ||.ng-invalid { ||/* ng-invalid is added to an offending input field. */|| ||border-color||: ||#c33||;|| ||border-width||: ||1px||;|| ||}|| ||.ui-state-error { ||color||:||#d33||;} ||/* ui-state-error is added to labels of erroneous input fields. */|| ||.pui-message { ||color||:||#d33||; } ||/* The puimessage tag displays an error message (similar to ). */|| ||.pui-label { ||width||:||100%||;} ||/* af-label is the CSS class added to an automatically generated label.|| ||Add width:100% to allow for right hand side alignment. */||| 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 startedYou have to add both the BootsFaces and the AngularFaces jar files.AngularFaces also requires a Json serializer - currently either Gson orJackson: * 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 Jsonserializer. As of AngularFaces 2.1, Jackson and Gson are supported. ConfigurationYou 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.FACELETS_DECORATORS|| |||| ||de.beyondjava.angularFaces.core.tagTransformer.AngularTagDecorator|| |||| |||| |||| |||| ||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-controllerIt's important to put the form inside the div containing theng-controller. Otherwise, everything works fine - but you never see thevalidation error messages. Multiple formsAngularFaces supports only one controller per JSF view and one form percontroller. Don't put more than one form in a controller. separatorchar and prependIdAngularJS doesn't cope with Java's default separator char which is usedinternally 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 officiallysupported by the JSF specification, so we don't recommend it. Tag decoratorsBy default, AngularFaces converts HTML tags to JSF or even BootsFacestags very eagerly. Sometimes this stands in your way. If so, you can usethe |ConservativeAngularTagDecorator| instead of the|AngularTagDecorator| in the |faces-config.xml|. The conservativeimplementation only translates |div|, |span|, |messages| and |translate|to AngularFaces tags. Relaxed HTML-like style of writingOnce you've activated AngularFaces, you can write most BootsFaces tagswithout the preceding |b:|. These tags can be written in the relaxedfashion: * 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 * tabToggle navigation2013-2015 TheCoder4EuBootsFaces v0.7.0-OSP on Mojarra 2.2.11, PrimeFaces 5.2, AngularFaces2.1.6 and OmniFaces 1.10