JSF Internationalization • JSF has full support for Java I18n • Backing beans can load messages through standard ResourceBundle loading techniques • faces-config entries allow for internationalization in the View • JSF detects the browser locale and loads the corresponding resource bundle (if available) JSF Resource bundle declaration <!-- JSF 1.2 allows for resource bundles to be declared in faces config <!-- JSF 1.2 allows for resource bundles to be declared in faces config instead of <f:loadBundle />--> <resource-bundle> <base-name>Msgs</base-name> <var>msgs</var> </resource-bundle> JSF Resource bundle usage <h:outputText styleClass="propertyLabel" value="#{msgs['component.title']}" /> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Localized Application Messages • JSF handles localized error and informational messages that occur as a result of conversion, validation, or other application actions during the request processing lifecycle. • Default required=“true” message: javax.faces.component.UIInput.REQUIRED = {0}: Validation Error: Value is required • The specification says: Replace the last parameter substitution token with the input component’s label attribute. If the input token with the input component’s label attribute. If the input component’s label attribute is not specified, use the component’s client identifier. • This will produce an undesirable message like this in the GUI: j_id1:firstName: Validation Error: Value is required. www.icefaces.org ICESOFT TECHNOLOGIES INC.
Override Standard Application Messages • Create JSF-override_en.properties • Override message(s): javax.faces.component.UIInput.REQUIRED=Value is required • Supply a <message-bundle> element in the application configuration resources by adding the following entry to the <application> section of faces-config.xml: <application> section of faces-config.xml: <message-bundle>JSF-override</message-bundle> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Exercise: Overview • The goal of this exercise is to implement internationalization • We will do this by changing the value attributes of each of the h:outputLabel components to a ValueBinding • Each ValueBinding will correspond to an entry in a resource bundle bundle www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 1: Create Resource Bundle • Create a file in the “src” folder named Msgs_en.properties and paste the following into it: firstName=First Name lastName=Last Name travelPercentage=Travel Percentage travelPercentage=Travel Percentage dateOfBirth=Date of Birth submitApplication=Submit Application www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 2: Create Value Bindings • In the faces-config.xml file, add the resource bundle to the application node: <!-- JSF 1.2 allows for resource bundles to be declared in faces config instead of <f:loadBundle />--> <resource-bundle> <base-name>Msgs</base-name> <base-name>Msgs</base-name> <var>msgs</var> </resource-bundle> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 2: Create Value Bindings In the applicantForm.xhtml file, change the value attribute of each h:outputLabel: <h:outputLabel for="firstName" value=" #{msgs.firstName} " /> <h:outputLabel for=“lastName" value=" #{msgs.lastName} " /> /> <h:outputLabel for=“travelPercentage" value=" #{msgs.travelPercentage} " /> <h:outputLabel for=“dateOfBirth" value=" #{msgs.dateOfBirth} " /> <h:commandButton action="#{applicantForm.submit}" value ="#{msgs.submitApplication} " /> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 3: Override Standard JSF Messages • Sometimes it is desirable to change the default values of standard JSF error messages • Create a file in the “src” folder named JSF-override_en.properties and paste the following into it: javax.faces.component.UIInput.REQUIRED=Value is required • Open the faces-config.xml file in the IDE • Add the following entry to the <application> section: <message-bundle>JSF-override</message-bundle> • JSF 1.2 message keys are listed in the JSF- override_en.properties in the exercise solutions folder. www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 4: Run Application • Re-publish/deploy the jobApplication project • Run the application in the browser and verify that the labels look correct • Change some of the label values in the Msgs_en.properties file and verify that the changes show up in the browser www.icefaces.org ICESOFT TECHNOLOGIES INC.
JSF Value Change Listeners • JSF provides two ways to detect when values change inside of components that implement EditableValueHolder: – Add the valueChangeListener attribute to the component – Add the f:valueChangeListener component as a child of the component www.icefaces.org ICESOFT TECHNOLOGIES INC.
Exercise: Overview • The goal of this exercise is to demonstrate usage of the valueChangeListener attribute on an h:inputText component • We will add three new fields to the form: – City – Province – Province – Postal Code • When the user types a postal code, the valueChangeListener will be called which will populate the City and Province fields www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 1: Add id attribute to form • Open the applicantForm.xhtml file in the IDE • Add the following attribute to the h:form tag: id="applicantForm" www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 2: Add City Markup • Paste the following table row in applicantForm.xhtml: <tr> <td><h:outputLabel for="city" value="#{msgs.city}" /></td> <td><h:inputText id="city" required="true" value="#{applicant.city}" /></td> <td><h:message for="city" /></td> </tr> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 3: Add Province Markup • Paste the following table row in applicantForm.xhtml: <tr> <td><h:outputLabel for="province" value="#{msgs.province}" /></td> <td><h:inputText id="province" required="true" value="#{applicant.province}" /></td> <td><h:message for="province" /></td> </tr> www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 4: Add Postal Code Markup • Paste the following table row in applicantForm.xhtml: <tr> <td><h:outputLabel for="postalCode" value="#{msgs.postalCode}" /></td> <td><h:inputText id="postalCode" immediate ="true" onchange ="this.form.submit()" required="true" value="#{applicant.postalCode}" valueChangeListener ="#{applicantForm.postalCodeListener}" /></td> <td><h:message for="postalCode" /></td> </tr> • Note the onchange attribute: – This will submit the form via JavaScript when the user enters a postal code – This will submit the form via JavaScript when the user enters a postal code and tabs out of the field • Note the immediate attribute: – This is the first step in bypassing Process Validations phase, since it causes ValueChangeListeners to fire earlier in the lifecycle – The second step is to call FacesContext.renderResponse() in the listener – Typical use case for the immediate attribute is a “cancel” button • Note the valueChangeListener attribute: – Specifies an EL MethodBinding that listens to the ValueChangeEvent www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 5: Add New Fields • Open the Applicant.java file in the IDE • Add the following fields: private String city; private String province; private String postalCode; • Generate getters and setters for these fields • Generate getters and setters for these fields www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 6: Add ValueChangeListener • Paste the following in ApplicantForm.java: public void postalCodeListener(ValueChangeEvent valueChangeEvent) { FacesContext facesContext = FacesContext.getCurrentInstance(); UIViewRoot uiViewRoot = facesContext.getViewRoot(); String newPostalCode = (String) valueChangeEvent.getNewValue(); if ("32801".equals(newPostalCode)) { UIInput cityInputText = (UIInput) uiViewRoot.findComponent("applicantForm:city"); String city = "Orlando"; cityInputText.setValue(city); cityInputText.setValue(city); cityInputText.setSubmittedValue(city); UIInput provinceInputText = (UIInput) uiViewRoot.findComponent("applicantForm:province"); String province = "FL"; provinceInputText.setValue(province); provinceInputText.setSubmittedValue(province); facesContext.renderResponse(); } } • This is the listener code that will populate the City and Province fields accordingly www.icefaces.org ICESOFT TECHNOLOGIES INC.
Step 7: Add Locale Messages • Paste the following table row in Msgs_en.properties: city=City province=State postalCode=ZIP Code www.icefaces.org ICESOFT TECHNOLOGIES INC.
Recommend
More recommend
