A Step-by-step Guide to Creating NetBeans Web Apps

Monday Aug 21st 2017 by Manoj Debnath
Share:

Learn how to create a Web application in NetBeans using the bare minimum of tools and technologies.

Web application refers to a software solution that is deployed in a server and can be accessed online through a Web browser. These types of applications typically intertwine more than one technology; creating one from scratch has numerous approaches. The basic idea is that one must have a good understanding of the technologies involved and programming practices like MVC. NetBeans as an IDE provides a lot of features to ease the development process. This article shows how to create a Web application in NetBeans using the bare minimum of tools and technologies.

Web or Enterprise Application Project in NetBeans

Web applications basically run in a Web Server such as Tomcat (which also is a Servlet container) whereas an Enterprise Application comprises EJB components and needs an Application Server like GlassFish, Wildfly, and so forth, as the enterprise container. This is the basic difference between Web and enterprise application projects from the perspective of the NetBeans IDE.

In NetBeans, when we create a Web application project using a web server like Tomcat, the choice is to use non-EJB techs for server-side scripting. (One such technology, called Spring, has become a widely used and popular choice among developers.) However, if we opt to use an Application Server like Glassfish or Wildfly, we are open to use both Servlet/JSP and EJBs etc. Therefore, if we use one of such application servers to create a pure Web application, we are actually using more than we need. No harm there, but it is a misuse of resources because application servers are clearly "heavier" that Web servers.

Another distinctive trait between them is that the final archive file created by a Web Application Project is called WAR file and the final archive file create by Enterprise Application Project is an EAR archive. Therefore, they have their relevant file extension, .WAR and .EAR, respectively.

Parts of a Web Application

A typical Web application has three parts to it, called Front tier, Middle tier, and the End tier or Back end database tier.

The front tier typically uses HTML, CSS, JavaScript, and so on, for client-side processing and rendering. There are many other JavaScript-enabled, client-side toolkits like Jquery, Flex, Vaadin, GWT, and the like, that may be used to fetch data from the server side, or we can intertwine more than one technology.

The middle tier contains the business logic of the application and does all the server-side processing with the Web Server such as session management, data persistence, transaction management, request/response processing, and so forth. In Java, we may use a Servlet, JavaBeans, or EJB to implement the middle tier business logic.

The database tier interfaces with the database with JDBC. It typically creates a bridge to interact with the middle tier for further processing.

This is grossly how a Web application project is designed. Apart from this simplified view, there are many other technologies may be interleaved to enhance the responsiveness and functionalities of a Web application. But here, in the following project, we'll stick to using minimal technologies. The idea, however, may be used to include other techs such as JPA, AJAX, JavaScript, Web Services, and EJBs.

Tomcat is a open source Web Server developed by Apache Software Foundation (ASF). It is a bit more than just a Web Server because it implements some of the Java EE specifications such as Java Servlet, Java Server Pages (JSP), Java EL, and WebSocket apart from being a pure HTTP Web server. Because it does not implement the EJB specification, it cannot be called a complete Java EE compliant application server. However, there is an enterprise version of this Web Server called Apache TomEE; at the time this article was written, it is still not Java EE 7 compliant, but is Java EE 6 compliant.

Problem Statement

With the emphasis on the steps to create a Web application in NetBeans, the problem we try to implement is rudimentary. We'll use JSF and HTML to send a number to the Server, which would respond back with an appropriate number converted to binary, hexadecimal, or octal. The result will be rendered in the browser along with the user input interface.

Step 1: Create a Web Application Project

  1. Open NetBeans. File → New Project...

    Starting a new project
    Figure 1: Starting a new project

  2. Select Java Web from the Project categories and Web Application from the list of Projects. Click Next.
  3. Give a Project Name, for example WebProject1. Click Next.

    Naming the project
    Figure 2: Naming the project

  4. Select the Server, for example Apache Tomcat, leave the other values as default. Click Next.

    Selecting the server
    Figure 3: Selecting the server

  5. Select the Web Application Framework JavaServer Faces from the list of frameworks. Leave the configuration as its default. Click Finish.
  6. This will create the Project structure as follows.

    Selecting the Project structure
    Figure 4: Selecting the Project structure

Step 2: Create the Model Class

  1. Right-click the Source Package in the project tree structure and select New... → Java Class.

    Selecting a new Java class
    Figure 5: Selecting a new Java class

  2. Enter the class name, for example Converter. Provide the package name, such as org.webproject1.model and click Finish. This will create a Java class file with the given name. The content of this file is given below.
package org.webproject1.model;

public class Converter {

   private int number;
   private String result;

   public int getNumber() {
      return number;
   }

   public void setNumber(int number) {
      this.number = number;
   }

   public String getResult() {
      return result;
   }

   public void setResult(String result) {
      this.result = result;
   }

   public void toBinary() {
      result = Integer.toBinaryString(number);
   }

   public void toHex() {
      result = Integer.toHexString(number);
   }

   public void toOctal() {
      result = Integer.toOctalString(number);
   }

   public void clear(){
      result = "";
   }
}

Step 3: Create the Controller Class

In a similar manner as mentioned above, create another Java class called ConverterController in another package named org.webproject1.controller. The contents of the file are listed below.

package org.webproject1.controller;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.component.UIInput;
import javax.faces.component.UIPanel;
import javax.faces.context.FacesContext;
import org.example.model.Converter;

@ManagedBean(name = "converterController")
public class ConverterController {

   private Converter converter = new Converter();
   private UIPanel resultPanel;
   private UIInput numberInput;

   public Converter getConverter() {
      return converter;
   }

   public void setConverter(Converter converter) {
      this.converter = converter;
   }

   public UIPanel getResultPanel() {
      return resultPanel;
   }

   public void setResultPanel(UIPanel resultPanel) {
      this.resultPanel = resultPanel;
   }

   public UIInput getNumberInput() {
      return numberInput;
   }

   public void setNumberInput(UIInput numberInput) {
      this.numberInput = numberInput;
   }

   public String toBinary() {
      FacesContext ctx = FacesContext.getCurrentInstance();
      try {
         converter.toBinary();
         resultPanel.setRendered(true);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_INFO,
            "Decimal number converted to binary", null));
      } catch (Exception ex) {
         resultPanel.setRendered(false);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_ERROR,
            ex.getMessage(), null));
      }
      return null;
   }

   public String toHex() {
      FacesContext ctx = FacesContext.getCurrentInstance();
      try {
         converter.toHex();
         resultPanel.setRendered(true);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_INFO,
            "Decimal number converted to Hexadecimal",
               null));
      } catch (Exception ex) {
         resultPanel.setRendered(false);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_ERROR,
            ex.getMessage(), null));
      }
      return null;
   }

   public String toOct() {
      FacesContext ctx = FacesContext.getCurrentInstance();
      try {
         converter.toOctal();
         resultPanel.setRendered(true);
         ctx.addMessage(null,
               new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Decimal number converted to Octal",
               null));
      } catch (Exception ex) {
         resultPanel.setRendered(false);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_ERROR,
            ex.getMessage(), null));
      }
      return null;
   }

   public String clear() {
      FacesContext ctx = FacesContext.getCurrentInstance();
      try {
         converter.clear();
         resultPanel.setRendered(false);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_INFO,
            "Results Cleared", null));
      } catch (Exception ex) {
         resultPanel.setRendered(false);
         ctx.addMessage(null, new
               FacesMessage(FacesMessage.SEVERITY_ERROR,
            ex.getMessage(), null));
         }
         return null;
   }
}

Step 4: Create the View

Observe that the index.xhtml file is automatically created when we have created the project. Open the file and add the following changes.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
   <h:head>
      <title>Facelet Title</title>
   </h:head>
   <h:body>
      <f:view>
         <h:form id="convForm">
            <h4>Converter</h4>
               <h:panelGrid columns="3">
                  <h:outputLabel value = "Enter Base 10 Number "
                     for = "number"/>
                  <h:inputText id = "number"
                     value="#{converterController.converter
                           .number}"
                        required="true"
                     binding="#{converterController.numberInput}"/>
                  <h:message for="number"/>
               </h:panelGrid>

               <div>
                  <h:commandButton
                     action="#{converterController.toBinary()}"
                     value="Binary"/>
                  <h:commandButton
                     action="#{converterController.toHex()}"
                     value="Hexa"/>
                  <h:commandButton
                     action="#{converterController.toOct()}"
                     value="Octal"/>
                  <h:commandButton
                     action="#{converterController.clear()}"
                     value="clear" immediate="true"/>
               </div>
         </h:form>
         <h:panelGroup
                binding="#{converterController.resultPanel}"
                rendered="false">
            <h4>Result</h4>
            <h:panelGrid columns="1">
               <h:outputText value="Number
                  #{converterController.converter.number}"/>
               <h:outputText value="Result
                  #{converterController.converter.result}"/>
            </h:panelGrid>
         </h:panelGroup>

      </f:view>
   </h:body>
</html>

Step 4: Deploy and Run the Project

Select Run → Run Project from the NetBeans menu. This will automatically compile the Java classes, start up the Tomcat Server, deploy the project in the Server and finally will open the project in a browser. Here is the output we get from the above code.

The project is running
Figure 6: The project is running

Conclusion

If we delve into technologies used in a Web project, there are too many and a lot to understand about using them. Here, we emphasize implementing one from scratch. We also could have used JSP and Servlet, but, JSF seems to be the de facto tech of Java's official Web application development. It seems JSF may take over JSP/Servlet in the future. JSP/Servlet will be deprecated or they will continue as a legacy tech with focused improvement on JSF.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved