Client Side Bean Validation
AngularFaces reads JSR 303 Bean Validation API annotations and evaluates them on the client. You've already seen some of it in the previous examples. The validation constraints are checked on the client side by AngularJS. However, they are defined on the server side, using the new JSR 303 Bean Validation API:
Which annotations are evaluated on the client?
- @NotNull (denotes a mandatory field in AngularFaces - slightly different to the JSR 303 specification)
- @Min and @Max (only for numerical values)
- @Size to define minimal and/or maximal input lengths
Type information
AngularFaces recognizes numerical values and enforces numerical input on the client. As a side effect, number fields automatically bear a spinner in many modern browsers.
Dates are also recognized and rendered as an HTML5 date field. Hence modern browsers automatically add a date picker to simple input fields. Both standard
JSF input fields (<h:inputText>) and the new HTML5-style input fields (<input type="date" jsf:value="..." />) benefit from this feature.
The same applies to <prime:inputText />. AngularFaces converts
simple <prime:inputText /> automatically to HTML5 date fields if the corresponding JSF bean attribute is an instance of java.util.Date. However,
<prime:calendar /> is not modified by AngularFaces, so you're free to choose an HTML5 layout or a PrimeFaces layout.
Internationalization
Of course, AngularFaces translates the error messages to foreign languages. Currently, English, Spanish, French and German are supported out of the box. Please drop me a note if you want to provide another translation or fix an error to an existing translation.
To provide a language that's not supported out of the box, or to modify an existing error message bundle, put a file called messages_(language shortcode).js
in the folder resources/AngularFaces. Best you copy the English version of the original files. It's a simple set of key-value-pairs of English messages and your
translation:
The original message bundles are in the folder "META-INF/resources/AngularFaces" of the jar file. As mentioned above, your translation has to be in the standard JSF resource of your application. For instance, put your portuguese translation "messages_pt.js" here:
AngularFaces automatically chooses the target language according to the browsers settings. For instance, in a European browser the JSF view I showed above might look like so:
Client Side Bean Validation
AngularFaces reads JSR 303 Bean Validation API annotations and evaluates them on the client. You've already seen some of it in the previous examples. The validation constraints are checked on the client side by AngularJS. However, they are defined on the server side, using the new JSR 303 Bean Validation API:
Which annotations are evaluated on the client?
- @NotNull (denotes a mandatory field in AngularFaces - slightly different to the JSR 303 specification)
- @Min and @Max (only for numerical values)
- @Size to define minimal and/or maximal input lengths
Type information
AngularFaces recognizes numerical values and enforces numerical input on the client. As a side effect, number fields automatically bear a spinner in many modern browsers.
Dates are also recognized and rendered as an HTML5 date field. Hence modern browsers automatically add a date picker to simple input fields. Both standard
JSF input fields (<h:inputText>) and the new HTML5-style input fields (<input type="date" jsf:value="..." />) benefit from this feature.
The same applies to <prime:inputText />. AngularFaces converts
simple <prime:inputText /> automatically to HTML5 date fields if the corresponding JSF bean attribute is an instance of java.util.Date. However,
<prime:calendar /> is not modified by AngularFaces, so you're free to choose an HTML5 layout or a PrimeFaces layout.
Internationalization
Of course, AngularFaces translates the error messages to foreign languages. Currently, English, Spanish, French and German are supported out of the box. Please drop me a note if you want to provide another translation or fix an error to an existing translation.
To provide a language that's not supported out of the box, or to modify an existing error message bundle, put a file called messages_(language shortcode).js
in the folder resources/AngularFaces. Best you copy the English version of the original files. It's a simple set of key-value-pairs of English messages and your
translation:
The original message bundles are in the folder "META-INF/resources/AngularFaces" of the jar file. As mentioned above, your translation has to be in the standard JSF resource of your application. For instance, put your portuguese translation "messages_pt.js" here:
AngularFaces automatically chooses the target language according to the browsers settings. For instance, in a European browser the JSF view I showed above might look like so:
A página ainda não foi traduzido para o Português. Por favor, leia a tradução em Inglês. Pedimos desculpas por qualquer inconveniente.
Client Side Bean Validation
AngularFaces reads JSR 303 Bean Validation API annotations and evaluates them on the client. You've already seen some of it in the previous examples. The validation constraints are checked on the client side by AngularJS. However, they are defined on the server side, using the new JSR 303 Bean Validation API:
Which annotations are evaluated on the client?
- @NotNull (denotes a mandatory field in AngularFaces - slightly different to the JSR 303 specification)
- @Min and @Max (only for numerical values)
- @Size to define minimal and/or maximal input lengths
Type information
AngularFaces recognizes numerical values and enforces numerical input on the client. As a side effect, number fields automatically bear a spinner in many modern browsers.
Dates are also recognized and rendered as an HTML5 date field. Hence modern browsers automatically add a date picker to simple input fields. Both standard
JSF input fields (<h:inputText>) and the new HTML5-style input fields (<input type="date" jsf:value="..." />) benefit from this feature.
The same applies to <prime:inputText />. AngularFaces converts
simple <prime:inputText /> automatically to HTML5 date fields if the corresponding JSF bean attribute is an instance of java.util.Date. However,
<prime:calendar /> is not modified by AngularFaces, so you're free to choose an HTML5 layout or a PrimeFaces layout.
Internationalization
Of course, AngularFaces translates the error messages to foreign languages. Currently, English, Spanish, French and German are supported out of the box. Please drop me a note if you want to provide another translation or fix an error to an existing translation.
To provide a language that's not supported out of the box, or to modify an existing error message bundle, put a file called messages_(language shortcode).js
in the folder resources/AngularFaces. Best you copy the English version of the original files. It's a simple set of key-value-pairs of English messages and your
translation:
The original message bundles are in the folder "META-INF/resources/AngularFaces" of the jar file. As mentioned above, your translation has to be in the standard JSF resource of your application. For instance, put your portuguese translation "messages_pt.js" here:
AngularFaces automatically chooses the target language according to the browsers settings. For instance, in a European browser the JSF view I showed above might look like so:
Client Side Bean Validation
AngularFaces liest die JSR 303 Bean Validation API Annotationen aus und wertet sie auf dem Client aus. Das haben wir schon in einigen Beispielen gesehen. Die Plausibilisierungsregeln werden auf dem Client ausgewertet (von AngularJS). Sie werden aber auf dem Server mit Hilfe der JSR-303-Bean-Validation-API definiert:
Welche Annotationen werden auf dem Client ausgewertet?
- @NotNull (stellt in AngularFaces ein Pflichtfeld dar, obwohl das nicht exakt der Spezifikation von JSR 303 entspricht).
- @Min und @Max (nur für numerische Eingaben)
- @Size um die minimale und/oder maximale Länge eines Eingabefeldes zu definieren
Datentypen
AngularFaces berücksichtigt den Datentyp der Beanattribute der Eingabefelder und optimiert den HTML-Code für diesen Datentyp.
Bei numerischen Attributen (int, long, float, double, byte, short)
erzeugt AngularFaces ein numerisches Eingabefeld auf dem Client (type="number"). Als Nebeneffekt bekommen numerische Eingabefelder
automatisch einen Spinner in einigen modernen Browsern.
Ein Datum wird als HTML5 Datumsfeld gerendert (type="date"). Moderne Browser ergänzen automatisch einen Date-Picker. Davon profitieren
sowohl normale JSF-Eingabefelder (<h:inputText>), die in JSF 2.2 eingeführten HTML5-Eingabefelder (<input type="date" jsf:value="..." />)
und PrimeFaces-Eingabefelder (<prime:inputText>). Beispielsweise wird ein <prime:inputText /> automatisch in ein
HTML5-Datumsfeld konvertiert. Ein <prime:calendar /> wird hingegen nicht verändert. Sie haben als die freie Wahl, ob
Sie lieber ein HTML5-Feld oder eine PrimeFaces-Feld verwenden wollen.
Internationalisierung
AngularFaces übersetzt natürlich auch die Fehlermeldung. Momentan Übersetzungen für Englisch, Spanisch, Französisch und Deutsch mitgeliefert. Bitte geben Sie mir Bescheid, wenn Sie eine weitere Übersetzung brauchen oder einen Verbesserungsvorschlag für eine der bestehenden Übersetzungen haben.
Wenn Sie eine Übersetzung in eine weitere Sprache brauchen, oder falls Sie eine der bestehenden Übersetzungen verändern wollen, legen Sie eine Datei
namens messages_(Sprachcode).js in den Ordner resources/AngularFaces Ihres Projektes. Am besten kopieren Sie einfach die englische Version
der Originaldatei. Es handelt sich um ein einfaches Key-Value-Paar der englischen Fehlermeldungen und Ihrer Übersetzung:
Sie finden die mitgelieferten Messagebundle im Ordner META-INF/resources/AngularFaces der AngularFaces.jar Datei.
Wie bereits oben erwähnt, müssen die Übersetzungen im Ressourcen-Ordner Ihrer Anwendung liegen. Beispielsweise legen Sie die portugiesesche Übersetzung der Fehlermeldungen hier ab:
AngularFaces wählt die Anzeigesprache anhand der Browser-Einstellungen aus. Beispielsweise könnte die JSF-Seite von oben in einem europäischen so aussehen:
Der Vollständigkeit halber, hier noch die JSF-Datei: