Scribd
Upload
156 views12 pages

Getting Started With JSF 4.0 On WildFly 27 - Mastertheboss

This article provides an overview of getting started with JSF 4.0 on WildFly 27 application server. It describes how to create JSF views programmatically, use the new ClientWindowScope, and upload files. The document also includes code samples to set up a basic JSF 4.0 application on WildFly 27.

Uploaded by

h2oo2h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
156 views12 pages

Getting Started With JSF 4.0 On WildFly 27 - Mastertheboss

This article provides an overview of getting started with JSF 4.0 on WildFly 27 application server. It describes how to create JSF views programmatically, use the new ClientWindowScope, and upload files. The document also includes code samples to set up a basic JSF 4.0 application on WildFly 27.

Uploaded by

h2oo2h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

2024. 04. 20. 18:34 Getting started with JSF 4.

0 on WildFly 27 - Mastertheboss

Mastertheboss

Getting started with JSF 4.0 on WildFly 27


14 August 2022 by F.Marchioni

This article contains a preview of Jakarta Faces 4.0 which is an MVC framework for building user interface with Jakarta EE 10.

To get started with Jakarta EE 10, you need to download the latest release of WildFly 27 which you can use to preview Jakarta EE 10
features. At the time of writing, the latest release is WildFly 27 Alpha 5 which contains support for Jakarta EE 10 bundles.

Firstly, download WildFly 27 from https://www.wildfly.org/downloads/.

Next, unpack the application server in a folder of your likes.

We are ready to go!

A First sip of Jakarta Faces 4.0

If you are new to JSF technology, we recommend checking some tutorials available in the JSF category.

Looking at the release notes, you can find the list of enhancements added in many of its components or attributes. In this article, we
will test the following enhancements:

How to create programmatically Facelets


The new ClientWindowScope available
How to upload single or multiple files using JSF 4.0

Before getting started, it is worth to remind you that since Jakarta EE 9 you have to update the namespace of your packages and
application resources from “javax” to “jakarta“.

In terms of application resources, make sure your HTML pages include the following schemas:

1. <html
2. xmlns:faces="jakarta.faces"
3. xmlns:ui="jakarta.faces.facelets"
4. xmlns:f="jakarta.faces.core"
5. xmlns:h="jakarta.faces.html"
6. xmlns:pt="jakarta.faces.passthrough"
7. xmlns:cc="jakarta.faces.composite"
8. xmlns:my="jakarta.faces.component"
9. xmlns:c="jakarta.tags.core"
10. xmlns:fn="jakarta.tags.functions"
11. >

Next, to run on Jakarta Faces 4.0 must include the following schema declaration in faces-config.xml:

1. <faces-config
2. xmlns="https://jakarta.ee/xml/ns/jakartaee"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4. xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
5. https://jakarta.ee/xml/ns/jakartaee/web-facesconfig_4_0.xsd"
6. version="4.0">

Creating Facelets programmatically

Facelets is a page declaration language used to create JavaServer Faces (JSF) views with XHTML. Basically, it is a visualisation
technology, responsible for the appearance of the web page. In addition to the Facelets tag libraries, JavaServer Faces and JSTL,

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 1/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss
Facelets also supports Expression Language (EL).

You can find a getting started article about Facelets here: Facelets tutorial: Using Templates

Before JSF 4.0 the only option to use Facelets was to add the single page views in your project. You can now create your views
programmatically by extending the Class jakarta.faces.view.facelets.Facelet.

Here is a sample View which creates an HTML form with some basic components:

1. import static jakarta.faces.application.StateManager.IS_BUILDING_INITIAL_STATE;


2.
3. import java.io.IOException;
4. import java.util.List;
5.
6. import jakarta.enterprise.context.ApplicationScoped;
7. import jakarta.faces.annotation.View;
8. import jakarta.faces.component.UIComponent;
9. import jakarta.faces.component.UIOutput;
10. import jakarta.faces.component.html.*;
11. import jakarta.faces.context.FacesContext;
12. import jakarta.faces.view.facelets.Facelet;
13.
14.
15. @View("/demo.xhtml")
16. @ApplicationScoped
17. public class DemoFacelet extends Facelet {
18.
19. @Override
20. public void apply(FacesContext facesContext, UIComponent root) throws IOException {
21. if (!facesContext.getAttributes().containsKey(IS_BUILDING_INITIAL_STATE)) {
22. return;
23. }
24.
25. ComponentBuilder components = new ComponentBuilder(facesContext);
26. List<UIComponent> rootChildren = root.getChildren();
27.
28. UIOutput output = new UIOutput();
29.
30. output.setValue("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
31. rootChildren.add(output);
32.
33. HtmlBody body = components.create(HtmlBody.COMPONENT_TYPE);
34. rootChildren.add(body);
35.
36. HtmlForm form = components.create(HtmlForm.COMPONENT_TYPE);
37. form.setId("form");
38. body.getChildren().add(form);
39.
40. HtmlOutputLabel label = components.create(HtmlOutputLabel.COMPONENT_TYPE);
41. label.setValue("Enter your name");
42. form.getChildren().add(label);
43.
44. HtmlInputText message = components.create(HtmlInputText.COMPONENT_TYPE);
45. message.setId("message");
46. form.getChildren().add(message);
47.
48. HtmlOutputText text = components.create(HtmlOutputText.COMPONENT_TYPE);
49. form.getChildren().add(text);
50.
51. HtmlCommandButton actionButton = components.create(HtmlCommandButton.COMPONENT_TYPE);
52. actionButton.setId("button");
53. actionButton.addActionListener(e -> text.setValue("Hi " + message.getValue()));
54. actionButton.setValue("Do action");
55. form.getChildren().add(actionButton);
56.
57. output = new UIOutput();
58. output.setValue("</html>");
59. rootChildren.add(output);
60. }
61.
62. private static class ComponentBuilder {
63. FacesContext facesContext;
64.
65. ComponentBuilder(FacesContext facesContext) {
66. this.facesContext = facesContext;
67. }

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 2/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss
68.
69. @SuppressWarnings("unchecked")
70. <T> T create(String componentType) {
71. return (T) facesContext.getApplication().createComponent(facesContext, componentType, null);
72. }
73. }
74. }

As you can see, every HTML Component has a matching Class in the jakarta.faces.component.html package. They can be created
through the ComponentBuilder factory or in the standard Java way (“new Class()”). Then, you need to add the Component to the
HtmlForm or directly to the HtmlBody.

The most interesting aspect, is that you can add actionlisteners to HTML components (such as press button) directly in Java without
any Javascript coding.

Testing the template

To build Jakarta Faces 4 application the dependency to include is jakarta.faces-api :

1. <dependency>
2. <groupId>jakarta.faces</groupId>
3. <artifactId>jakarta.faces-api</artifactId>
4. <version>4.0.0</version>
5. </dependency>

On the other hand, you can also build the application by adding the full Jakarta EE 10 dependency:

1. <dependency>
2. <groupId>jakarta.platform</groupId>
3. <artifactId>jakarta.jakartaee-api</artifactId>
4. <version>10.0.0</version>
5. <scope>provided</scope>
6. </dependency>

Then, build your application and deploy it on WildFly:

1. mvn install wildfly:deploy

When run, request the page demo.xhtml which will render our Html form:

Using ClientWindowScoped in your Beans

Jakarta Faces 4. introduces a new scope for managed beans: jakarta.faces.lifecycle.ClientWindowScoped. This is not totally new for
JSF developers as it is essentially bound to the lifetime of the existing jakarta.faces.lifecycle.ClientWindow object.

1. @Named
2. @ClientWindowScoped()
3. public class SignupBean implements Serializable {
4. //
5. }

Besides the annotation, you also need to enable CLIENT_WINDOW_MODE in your web.xml otherwise you will get a
ContextNotActiveException at runtime:

1. <context-param>
2. <param-name>jakarta.faces.CLIENT_WINDOW_MODE</param-name>
3. <param-value>url</param-value>
4. </context-param>

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 3/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss
When you reference a @ClientWindowScoped bean in your page, the request parameter “jfwid” will be created and added to the
URL, as you navigate through the pages of your application.

The lifecycle of a @ClientWindowScoped bean will terminate as soon as you open a new browser window or tab on the same URL. It
will also terminate if you try to manipulate the value fo the “jfwid” parameter during the navigation. In either case, the JSF engine will
create a new @ClientWindowScoped bean.
There is, however, a maximum number of ClientWindow instances per HTTP session, which defaults to ten per session in the Mojarra
JSF implementation. You can change the default value through the following context parameter in the web.xml file:

1. <context-param>
2. <param-name>jakarta.faces.NUMBER_OF_CLIENT_WINDOWS</param-name>
3. <param-value>50</param-value>
4. </context-param>

Uploading Files with JSF 4.0

Uploading files is a built-in features of JSF 2.x. To upload single or multiple files, you can use the <h:inputFile /> component and bind
the File name with a CDI Bean. When using JSF 4.0 there is an additional attribute “accept” which specifies the file format which you
can use for upload. Before that, you had to include a validator to include or exclude some file formats.

Let’s create a sample index.html page with an inputFile in it:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html
4. xmlns:faces="jakarta.faces"
5. xmlns:ui="jakarta.faces.facelets"
6. xmlns:f="jakarta.faces.core"
7. xmlns:h="jakarta.faces.html"
8. xmlns:pt="jakarta.faces.passthrough"
9. xmlns:cc="jakarta.faces.composite"
10. xmlns:my="jakarta.faces.component"
11. xmlns:c="jakarta.tags.core"
12. xmlns:fn="jakarta.tags.functions"
13. >
14. <h:body>
15. <h2>JSF Basic demo</h2>
16. <h:form id="formpanel" enctype="multipart/form-data">
17. <h:panelGrid columns="2" styleClass="default">
18. <h:inputFile id="inputfile" value="#{uploadBean.part}"
accept="image/jpeg,image/png,image/gif" />
19. <h:commandButton value="Upload"
20. action="#{uploadBean.uploadFile}"/>
21. </h:panelGrid>
22. </h:form>
23. </h:body>
24. </html>

Firstly, notice the html tag which contains the new jakarta namespaces to reference the JSF components.

Next, check the inputFile component which includes the accept attribute with a set of file formats.

Finally, the Form includes a commandButton which starts the File upload.

For the sake of completeness, we will include here also the UploadBean which is referenced by the view:

1. import jakarta.enterprise.inject.Model;
2. import jakarta.faces.application.FacesMessage;
3. import jakarta.faces.context.FacesContext;
4. import jakarta.servlet.http.Part;

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 4/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss
5.
6. import java.io.*;
7.
8. @Model
9. public class UploadBean {
10. private Part part;
11.
12. public Part getPart() {
13. return part;
14. }
15.
16. public void setPart(Part part) {
17. this.part = part;
18. }
19.
20.
21. public String uploadFile() throws IOException {
22. // Extract file name from content-disposition header of file part
23. String fileName = getFileName(part);
24. String basePath = "/tmp/";
25. File outputFilePath = new File(basePath + fileName);
26. // Copy uploaded file to destination path
27. InputStream inputStream = null;
28. OutputStream outputStream = null;
29. try {
30. inputStream = part.getInputStream();
31. outputStream = new FileOutputStream(outputFilePath);
32.
33. int read = 0;
34. final byte[] bytes = new byte[1024];
35. while ((read = inputStream.read(bytes)) != -1) {
36. outputStream.write(bytes, 0, read);
37. }
38. printMessage("Success! File upload completed!");
39. } catch (IOException e) {
40. e.printStackTrace();
41. printMessage("Error! File upload error!");
42. } finally {
43. if (outputStream != null) {
44. outputStream.close();
45. }
46. if (inputStream != null) {
47. inputStream.close();
48. }
49. }
50. return null;
51. }
52.
53. private void printMessage(String message) {
54. FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, message, null);
55. FacesContext.getCurrentInstance().addMessage(null, facesMsg);
56. }
57.
58. private String getFileName(Part part) {
59. final String partHeader = part.getHeader("content-disposition");
60. for (String content : part.getHeader("content-disposition").split(";")) {
61. if (content.trim().startsWith("filename")) {
62. return content.substring(content.indexOf('=') + 1).trim()
63. .replace("\"", "");
64. }
65. }
66. return null;
67. }
68. }

The Upload bean performs the Upload through the mediation of the jakarta.servlet.http.Part, which contains a reference to the File
name.

Here is our JSF File upload in action:

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 5/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

Uploading Multiple Files

In order to upload multiple files, one option consists in adding a set of <h:inputFile /> components and bind each one with a Servlet
Part. A simpler approach could be to use the multiple=true attribute which is available in JSF 4.0. When this attribute is set to true, you
will be able to select multiple files in one shot from the Browse button.

Here is an example:

1. <h:inputFile value="#{uploadBeanMultiple.files}" accept="image/jpeg,image/png,image/gif"


multiple="true" />

Then, in the backing Bean, we will reference a List of Part objects and loop through them in the upload method:

1. @Model
2. public class UploadBeanMultiple {
3. private List<Part> files;
4.
5. public List<Part> getFiles() {
6. return files;
7. }
8.
9. public void setFiles(List<Part> files) {
10. this.files = files;
11. }
12.
13. public String uploadFile() throws IOException {
14.
15. for (Part part : files) {
16. String fileName = Paths.get(part.getSubmittedFileName()).getFileName().toString();
17. // Same code here
18. }
19. return null;
20. }
21.
22. }

Conclusion

This article is a walk through some Jakarta Faces 4.0 goodies. We have discussed how to create programmatically Facelets, the new
ClientWindowScope available and how to upload single or multiple files using JSF 4.0.

References: https://balusc.omnifaces.org/2021/11/whats-new-in-faces-40.html

Found the article helpful? if so please follow us on Socials

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 6/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 7/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 8/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 9/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

JSF
JPA Entity Listeners
Getting started with AtlasMap

Don’t miss these tips!

Email Address *

Subscribe our Mailing List

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 10/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss

Search …

Follow us on Socials

Recent Posts

How to debug Quarkus applications


How to configure Keycloak Log Level
Speed your migration to JBoss EAP 8 with Windup
A Beginner’s Guide to Ansible Ad Hoc Commands
Simplifying migration to Jakarta EE with tools

🌟 Support us buying a book 🙌

Top 10 Tutorials

Solving java.net.socketexception connection reset


Keycloak tutorial
Solving source release 17 requires target release 17
Solving java.lang.outofmemoryerror: metaspace
Keycloak REST API

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 11/12
2024. 04. 20. 18:34 Getting started with JSF 4.0 on WildFly 27 - Mastertheboss
Solving unable to create new native thread
How to solve java.lang.OutofMemoryError gc overheadlimit exceeded/
How to initialize an array in Java
How to export/import a realm in Keycloak
Keycloak OAuth/OpenId tutorial
Keycloak with Quarkus

Privacy Policy

© 2024 Mastertheboss • Built with GeneratePress

https://www.mastertheboss.com/java-ee/jsf/getting-started-with-jsf-4-0-on-wildfly-27/ 12/12

You might also like