Netbeans Ide Tutorial For Web Applications

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 minimal 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 peladen-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,
.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.

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.

middle tier
contains the business logic of the application and does all the server-side processing with the Web Peladen 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.

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 paling kecil 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 peladen. However, there is an enterprise version of this Web Server called Apache TomEE; at the time this article was written, it is still titinada 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 penyakit 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

    Web Application

    from the list of
    Projects. Click
  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
    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
  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
    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.acuan;  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
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
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"    ""> <html        xmlns_h=""       xmlns_f="">    <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

Run → Run Project
from the NetBeans menu. This will automatically compile the Java classes, tiba up the Tomcat Peladen, deploy the project in the Peladen 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


If we delve into technologies used in a Web project, there are too many and a lotre 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.