4.10.1 Use of PrimeFaces Components for All Views (Compulsory Exercise)

Following the same approach as for the already-revised components, utilize PrimeFaces components in the Facelets listDonations.xhtml and donateMoney.xhtml. Following your adjustments, the views should look th same as those in ‎Fig. 4-14: and ‎Fig. 4-15. The changes effected in the course of this task should not be reversed. Without them, you will not be able to complete later stages of the workshop properly. To be sure your results are right, you can compare them with our GitHub repository. Find it at: https://github.com/marcusschiesser/my-aktion-2nd/tree/jsf-primefaces.

4.10.2 Localization of the Button “Update URL”

In section ‎4.9.2, we inserted a button in the Facelet editDonationForm.xhtml that uses AJAX to update the URL displayed on the page when clicked. The label of the button reads “Update URL.” Localize this label!

1. In the properties files messages_en.properties and messages_de.properties (directory src\main\resources), introduce a key that can refer to either to the English label “Update URL” or the German label “URL aktualisieren”.
2. Adjust the Facelet editDonationForm.xhtml such that a label in the correct language is displayed in place of the fixed label “Update Url” through use of the variables msg and the newly introduced key.

The changes effected by this exercise do not need to be reversed. They will not affect future stages of the workshop if left in.

4.10.3 Use of Inline Labels Throughout the Application

In section 4.6.7 we learned how to implement inline labels for text fields in JSF using the tag <f:passThroughAttribute> and the HTML5 attribute placeholder.  We used the concept in the editCampaign.xhtml Facelet (‎Listing  4-21) for the input field of the campaign name. Now use the concept for the remaining input fields of the Facelet  .

1. Insert suitable keys and the translations for each of the inline labels in the properties file messages_en.properties and messages_de.properties (directory src\main\resources).
2. Embed the <f:passThroughAttribute> tag with the attribute placeholder in all input fields (using the same approach as for the tag <p:inputText> with id="a_name").

The changes effected by this exercise do not need to be reversed. They will not affect future stages of the workshop if left in.

 1.10.4 “Decoupling”  of the Properties of a Donation Form

So far, the color settings for the donation form have been managed in the EditDonationFormController controller itself. If more properties are added (font size and family, heading text, etc.), it makes sense to manage the settings in a separate FormConfig class.

Decoupling of the Properties in a Class

1. Create the class FormConfig in the package de.dpunkt.myaktion.model. Remove the the attributes bgColor and textColor from the EditDonationFormController class and move them to the FormConfig class. The class requires corresponding getter and setter methods for both attributes.
2. Add a new FormConfig attribute of the type FormConfig to the EditDonationFormController class along with the corresponding getter and setter methods. Remove the getter and setter methods of the deleted attributes bgColor and textColor. Insert a parameter-less constructor that initializes the attribute formConfig.
3. Adjust the EL expressions in the editDonationForm.xhtml Facelet for the binding of the color attribute to the color selection component. Remember that the new attribute formConfig of the EditDonationFormController controller bean is the one that must be bound.

Adding Other Form Properties

Now we’ve introduced the class FormConfig, it is very easy for us to add other properties to the form. As an example, we want to parameterize the H1 title and the title of the donation form. Up until now, the form has contained the fixed title “Donate money”.

1. Introduce a new title attribute of the type String in the FormConfig domain class and provide it with the corresonding getter and setter methods. To make this step simpler, you can temporarily disregard the internationalization of the application and specify that the attribute should initially contain the value “Donate money”.
2. The Facelet editDonationForm.xhtml will be expanded with a further text field (tag <h:inputText>) for the heading and bound to the title attribute of the FormConfig bean using an EL expression.
3. In the class EditDonationFormController, we must adjust the method that generates the URL. The URL must now reflect the new title attribute.

We must use the new property in the donateMoney.xhtml Facelet. This requires two actions. First, we must introduce a new title attribute of the type String in the DonateMoneyController class with the corresponding getter and setter methods. Secondly, we must bind the attribute to a new view parameter in the Facelet itself and use an EL-Expression that points to the attribute title of the class DonateMoneyController as the value for the H1 heading in the Facelet.

 

Fig. 4-14     The list of donors with PrimeFaces components

 

Fig. 4-15     The donation form with PrimeFaces components