Introduction
This is an article where the main focus is to show how to use InputText component. It is an UI which is part of the Primefaces framework. It is showing how to use a single basic InputText component. Actually, this article is a modification from the previous one. In that previous one, it is getting an input text in the InputText component. Following after, printing it in the console. But in this article, the InputText component is available in the form with a single button. It demonstrates an input of string of name into the InputText component. Clicking the button automatically submit the form and update another component exist in the form. Instead of printing it to the console, it will print it an OutputLabel component. That component also an UI which is part of the Primefaces framework.
Step to print value from InputText to OutputLabel in Primefaces Java Web Application
Before getting into the steps, just check the project setting and environment. Actually, the demonstration is following the project setting and environment is following the one available from several previous articles. Make sure that it is a Java web project as in the article with the title of ‘How to Create maven-based Web Application in NetBeans IDE’ in this link. Furthermore, it support JSF Framework as in this link which is an article with the title of ‘How to Add JSF Library to a maven-based Web Application in NetBeans IDE’. Finally, add the Primefaces Framework in the project as in the article of ‘How to Add Primefaces Library to a maven-based Java Web Application in NetBeans IDE’ in this link. After all of that preparation, follow the steps below :
-
Start with an XHTML file with the name of ‘basic-input-text.xhtml’. Just choose any name for the file. Put it in the ‘Web Pages’ of the project. The following is the content of the file :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <head> <title>TODO supply a title</title> <meta name="viewport" content="width-device-width, initial-scale=1.0"> </head> <body> <div>TODO content</div> <div class="card"> <h:form> <h5>Form User with only Basic InputText</h5> <h5>Hello, <p:outputLabel for="username" value="#{basicInputTextView.username}"></p:outputLabel></h5> <p:inputText id="username" value="#{basicInputTextView.username}"/> <p:commandButton update="@form" value="Submit" /> </h:form> </div> </body> </html>The main different from the previous article which is only trying to print an input text to the console is in the additional attribute of the CommandButton component. There is an ‘update’ attribute with the value of ‘@form’ as in the following part without having the actionListener attribute as follow :
<p:commandButton update="@form" value="Submit" />
-
Another one, is the Java Bean file with the name of ‘BasicInputTextView’ which it have the value of ‘basicInputTextView’ as its own value of the annotation. Furthermore, since the actionListener attribute is not necessary, just remove the submit method from the BasicInputTextView with the complete content as follows :
/* * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license * Click nbfs://nbhost/SystemFileSystem/Templates/Classes/Class.java to edit this template */ package com.company.web.view; import java.io.Serializable; import javax.annotation.ManagedBean; import javax.annotation.PostConstruct; import javax.enterprise.context.RequestScoped; import javax.faces.view.ViewScoped; import javax.inject.Named; /** * * @author Mark Spectre */ @Named(value = "basicInputTextView") @ViewScoped public class BasicInputTextView implements Serializable { private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } } -
Build and run it. In this context, the process exist in the NetBeans IDE. The following image will appear :
How to Print value from InputText Component to OutputLabel Component of Primefaces Framework in Java Web Application -
Type a name into the InputText component. Click the submit button, it will update the OutputLabel with the value of the input string character from the InputText component as in the image below :
How to Print value from InputText Component to OutputLabel Component of Primefaces Framework in Java Web Application
One thought on “How to Print value from InputText Component to OutputLabel Component of Primefaces Framework in Java Web Application”