Adding buttons that change the theme without using ThemeSwitcher

We are now going to add code to the morecomponents.xhtml page, which allows us to switch themes without using the ThemeSwitcher component. We are going to add them at the end because the code needs to be explained so that you have a clear understanding of how this is done. I chose commandButton for the task, but we just as easily could have used other components that support the action attribute and have the ability to cause the page to be requested in full or allow us to update the entire page using an AJAX request.

Here is the code that we need to add immediately after the form tag with id="mainform":

<p:panelGrid columns="3">
  <p:column>
    <p:commandButton ajax="false" value="Switch to Aristo" actionListener="#{currentTheme.setTheme('aristo')}"/>
  </p:column>
  <p:column>
    <p:commandButton ajax="false" value="Switch to Afterwork" actionListener="#{currentTheme.setTheme('afterwork')}"/>
  </p:column>
  <p:column>
    <p:commandButton ajax="false" value="Switch to Vader" actionListener="#{currentTheme.setTheme('vader')}"/>
  </p:column>
</p:panelGrid>

The panelGrid component lays out child components in a table. Because we used the PrimeFaces panelGrid component, the table and cells have a border, and each cell has a background image or color depending on the theme that is currently being used. We want to have each button laid out horizontally. Hence, we set the columns attribute with a value of 3 so that we have only one row.

The column tag defines the content of each cell in panelGrid and each column tag contains one commandButton.

Each commandButton has a similar function, and the attributes defined are also similar. The attribute common to each button is ajax="false". The PrimeFaces commandButton is AJAX-enabled by default. Like its JSF standard counterpart, it also submits the contents of its parent form. However, submission is performed by default by an AJAX request. We want to use a PrimeFaces commandButton for the theme but, because we are changing the theme using it, we need to either update the entire page using AJAX or simply perform a full POST request for the page. This will result in the page being sent in its entirety to the browser. To do this, we tell the component that it should not use AJAX.

The value attribute sets the label for commandButton, and its value should be self explanatory. The actionListener attribute for each commandButton is the most interesting because we use it to call the theme property setter method to set the theme explicitly.

Here is one of the actionListener attributes, which sets the theme to vader:

actionListener="#{currentTheme.setTheme('vader')}"

The EL expression used here calls the setter method with a string value 'vader', and the method is called when you click on the button as if you had a field that contained the value of 'vader', which would be submitted as part of the POST request. The JSF framework does make things like this very easy, and PrimeFaces leverages JSF to the fullest.

If you look at the EL Expression in chaptersTemplate, the theme is accessed without having to call a method. It simply references the name of the property, which is the theme in this case. This is a very powerful feature of EL because if we reference a property, the EL evaluation is context-sensitive, that is, it will call the getter or setter method, depending on the situation. If you look at the ThemeSwitcher, it has a value attribute with references to the currentTheme Bean's theme property. The getter method is called to set the currently selected theme in the session for the user, but the setter method is called when we change the theme to be used. We don't need to worry about which method to call though; EL does this for us as long as we use a property reference.

The one thing that we haven't specified is the page that we send the request to and respond with. This isn't specified in the form tag with an action attribute. So, how does JSF know which page needs to be requested?

Unless we specify the action attribute of commandButton, JSF assumes that we are requesting the same page and sends it in response. Because we no longer specify an action in the form, it is very easy to request a page depending on the component clicked. We can indeed even make the components action-dependent on the values submitted by calling a method that returns the page as a string, which is what we want to be sent in response.

The actionListener attribute of each of the commandButton components sets a different theme and causes the entire page to be sent to the browser.

Save the changes and then refresh the page in the browser. The following screenshot shows how things look now:

Click on one of the theme switcher buttons to see what happens. Because a complete page is requested from the server, there is a noticeable flicker in the browser, and things take much longer to complete. However, we demonstrated the ability to change themes without having to use a ThemeSwitcher component.

The real-world uses for this include being able to switch themes depending on the customer requirements for different company designs of the same application, or choosing a theme depending on the time of the day for the user.