How to Get value from InputText Component of Primefaces Framework and Print it into the console in Java Web Application

By Posted on

Introduction

Another article which is showing how to use an InputText component exist as the content in this one. But, for a more detail and specific subject, the content in this article will only focus on how to get a value from an InputText component. The InputText component is part of the UI exist from Primefaces framework. So, the following article will show how to input a string of character as a name. That name as the value of the InputText component will be available for further process. For an example, print it in the console or terminal.

Get value from InputText Component of Primefaces Framework and print it into the console

In order to follow the step below, just prepare a Java web application. In this context, for a reference, just read an article with the title of ‘http://www.dark-hamster.com/software/how-to-create-maven-based-web-application-in-netbeans-ide/’ in this link. Following after, do not forget to add the JSF Framework support into the project of the Java web application. Read the article in this link with the title of ‘How to Add JSF Library to a maven-based Web Application in NetBeans IDE’ to do that. For the last one, just add the Primefaces Framework library as exist in this link. It is an article with the title of ‘How to Add Primefaces Library to a maven-based Java Web Application in NetBeans IDE’. After the above preparation for the Java web application project, just follow the steps below :

  1. The first step, just create a file in the Web Pages folder of the project with the name of ‘basic-input-text.xhtml’ as an example. Just choose whatever suitable name for the file. 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 actionListener="#{basicInputTextView.submit()}" value="Submit" />
                 </h:form> 
            </div>
      </body>
</html>

  2. The second one is the Java file representing the Java Bean. Just add a new Java file in the source folder of the project. In this context, just create with any name. As an example in this context, it is a file with the name of ‘BasicInputTextView’. There is a rule or a standard convention for the naming of the Java Bean file. In order to make it easy for further maintenance, just use the same name which is used as the reference for accessing property and method in the JSF or XHTML file as exist in the previous step. The following is the content of the file : 

    /*
* 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;
     }
     public void submit(){
          System.out.println("Hello, "+this.getUsername()+" Submit...");
     }
}

    The explanation for the above Java Bean file is very important. The first one is the value of the @Named annotation. It must be exact the same one which is exist as a reference in the XHTML file. For an example in : 

    '<p:outputLabel for="username" value="#{basicInputTextView.username}"></p:outputLabel></h5>'

    So, the value attribute of the OutputLabel component will refer to the username property or attribute of the Java Bean with the annotation name of ‘basicInputTextView’. The second one, there is a private property with the name of ‘username’ with its own setter and getter function. Just make sure that the property name is the exact same with the one which is going to be input as in the XHTML file. It is in the part of : 

    '<p:inputText id="username" value="#{basicInputTextView.username}"/>'

    Last but not least, just make sure to add the attribute of ‘actionListener’ in the button as in the following part : 

    '<p:commandButton actionListener="#{basicInputTextView.submit}" value="Submit" />'

    It is important to directly execute the submit method exist in the Java Bean of ‘basicInputTextView’ in order to get the value of the input string character of name in the InputText component and print it in the console.

  3. Run it in the IDE which in this context it is using NetBeans IDE. The following page will appear :

    How to Get value from InputText Component of Primefaces Framework and Print it into the console in Java Web Application

  4. Type a name for an example ‘Michael’, as an example as in the following image :

    How to Get value from InputText Component of Primefaces Framework and Print it into the console in Java Web Application

  5. The console which is showing and printing the input value retrieved from the InputText component will appear as follow :

    How to Get value from InputText Component of Primefaces Framework and Print it into the console in Java Web Application

Leave a Reply