Developing an Enterprise Application with JavaFX 2.0 and Java EE 7

Overview

Purpose

This tutorial covers how to build an enterprise application client with JavaFX 2.0 and JavaFX Scene Builder. It also covers how to build a RESTful web service that provides data to the enterprise application. The client application uses the JAX-RS 2.0 Client and the Java API for JSON Processing, both new APIs in Java Platform, Enterprise Edition 7 (Java EE 7).

Time to Complete

Approximately 90 minutes

Introduction

JavaFX is a front-end tool that allows developers to create rich internet applications (RIAs). JavaFX is designed to provide a lightweight, hardware-accelerated platform for enterprise applications that allows developers to build their applications entirely in the Java language.

In this tutorial, you perform the following to create a JavaFX application:

On the server side:

  1. Create a RESTful web service to extract data from a DB and publish it through the web service. To do this, you create the web service, an entity Customer, and an Enterprise JavaBeans (EJB) CustomerFacade class to retrieve data from the DB.
  2. Run the web service locally.

On the client side:

  1. Create the application UI by using JavaFX Scene Builder.
  2. Create the business logic by creating classes like the Customer class, the CustomerMessageBodyReader class (which parses JSON data from the web service by using the new Java API for JSON Processing), and the SampleController class (which uses the new JAX-RS 2.0 Client API to communicate with the web service).

Hardware and Software Requirements

The following is a list of hardware and software requirements:

  • Download and install the latest JDK from this link.
  • Download and install JavaFX Scene Builder from this link. The version used in this tutorial is 1.1.
  • Download and install NetBeans 7.3.1 with Java EE 7, which includes GlassFish 4.0, from this link. During installation, be sure to select the check box to install GlassFish. JUnit is an optional installation and is not required for this tutorial.

Prerequisites

Before starting this tutorial, you should:

  • Have installed the required software.
  • Ensure that NetBeans is running.

Creating the RESTful Web Service

In this section, you create a RESTful web service that provides data to the enterprise application client.

Creating the Project

  1. In NetBeans, select File > New Project.

    New Project
  2. In the New Project dialog box, perform the following steps on the Choose Project page:

    1. Select Java Web from Categories.
    2. Select Web Application from Projects.
    3. Click Next.
    alt description here
  3. On the Name and Location page, enter ServerSide as the project name and click Next.

    alt description here
  4. On the Server and Settings page, click Finish.

    alt description here

The ServerSide project is created in NetBeans.

Creating the Entity Class

In this section, you create an Entity class based on the Customers table, which is a table in the default database schema in NetBeans.
  1. Right-click the Source Packages folder and select New > Other.

    alt description here
  2. In the New File dialog box, perform the following steps on the Choose File Type page:

    1. Select Persistence from Categories.
    2. Select Entity Classes from Database from File Types.
    3. Click Next.
    alt description here
  3. In the New Entity Classes from Database dialog box, perform the following steps on the Database Tables page:

    1. Select jdbc/sample from Data Source. 
    2. Select CUSTOMER table from Available Tables and move it to Selected Tables.
    3. Deselect the Include Related Tables check box.
    4. Click Next.
    alt description here
  4. In the New Entity Classes from Database dialog box, perform the following steps on the Entity Classes page:

    1. Enter com.samples.entity as the package name.
    2. Make sure that the Generate Named Query Annotations for Persistent Fields check box and the Generate JAXB Annotations check box are not selected.
    3. Click Finish.
    alt description here

The Customer.java entity class is created under the com.samples.entity folder.

Creating the RESTful Web Service

In this section, you create the RESTful web service to expose data from the CUSTOMER table in JSON format.
  1. Right-click the project and select New > Other.

  2. In the New File dialog box, perform the following steps on the Choose File Type page:

    1. Select Web Services from Categories.
    2. Select RESTful Web Services from Patterns from File Types.
    3. Click Next.
    alt description here
  3. In the New RESTful Web Services from Patterns dialog box, click Next on the Select Pattern page.

  4. Perform the following steps on the Specify Resource Classes page:

    1. Enter com.samples.rest as the resource package name.
    2. Enter customer as the path.
    3. Enter CustomerREST as the class name.
    4. Select application/json from MIME Type.
    5. Click Finish.
    alt description here

    NetBeans creates the CustomerREST and ApplicationConfig classes under the com.samples.rest folder.

  5. In the CustomerREST class, enter the following lines of code:

    @RequestScoped
    
    @Inject
    private CustomerFacade customerFacade;
    alt description here
  6. Press Ctrl + Shift + I to solve imports. Be sure to select javax.enterprise.context.RequestScoped if import options are listed for RequestScoped.
    The CustomerFacade class is not resolved until the class is created.

  7. In the same CustomerREST class, update the getJson method as follows:

    @GET
    @Produces({"application/json"})
    public List<Customer> getJson() {
        return customerFacade.findAll();
    }
  8. In the same CustomerREST class, add the findByName method:

    @GET
    @Path("/search/{name}")
    @Produces({"application/json"})
    public List<Customer> findByName(@PathParam("name") String name) {
       return customerFacade.findByName(name);
    }
    alt description here
  9. Press Ctrl + Shift + I to solve imports.

  10. Right-click the com.samples.rest folder and select New > Other.

  11. In the New File dialog box, perform the following steps on the Choose File Type page:

    1. Select Enterprise JavaBeans from Categories.
    2. Select Session Bean from File Types.
    3. Click Next.
    alt description here
  12. In the New Session Bean dialog box, on the Name and Location page, enter CustomerFacade for EJB Name and click Finish.

    alt description here

    NetBeans creates a stateless session bean. This bean is the interface between the DB and its operations.

  13. Add the following code to the CustomerFacade class:

    @PersistenceContext(unitName = "ServerSidePU")
    private EntityManager em;
      
    public List<Customer> findAll() {
      return em.createQuery("select c from Customer c").getResultList();
    }
      
    public List<Customer> findByName(String name) {
      return em.createQuery("select c from Customer c where UPPER(c.name) LIKE :custName").
                             setParameter("custName", "%" + name.toUpperCase() + "%").getResultList();
    }
    alt description here

    In this file, you create an EntityManager that is associated with a Persistent Context and a Persistent Unit (PU) named ServerSidePU. The PU is defined in the persistence.xml file.
    You also create two methods: findAll and findByName. The first method returns data from the Customer table, and the second method returns only the names that match the name received.

  14. Press Ctrl + Shift + I to solve imports.

  15. Right-click the project and select Run.

    alt description here

    GlassFish runs and the project is deployed on Glassfish. NetBeans launches the default browser with the http://localhost:8080/ServerSide URL.

  16. Enter the following address in the recently opened browser and then press Enter:

    http://localhost:8080/ServerSide/webresources/customer

    alt description here

    When you call this URL, the getJson() method from the CustomerREST class is invoked.

  17. Enter the following URL and then press Enter:

    http://localhost:8080/ServerSide/webresources/customer/search/John

    alt description here

    When you call this URL, the findByName() method from the CustomerREST class is invoked and sends John as a parameter.

Creating the Client Application with JavaFX

In this section, you create the search desktop application that displays the information delivered by the web service.

Creating the JavaFX Project

  1. In NetBeans, select File > New Project.

    alt description here
  2. In the New Project dialog box, perform the following steps on the Choose Project page:

    1. Select JavaFX from Categories.
    2. Select JavaFX FXML Application from Projects.
    3. Click Next.
    alt description here
  3. In the New JavaFX Application dialog box, perform the following steps on the Name and Location page:

    1. Enter JavaFXApplicationCustomerSearch for Project Name.
    2. Enter CustomerSearch for FXML name.
    3. Click Finish.
    alt description here
  4. Right-click the project that you just created and select Run.

    alt description here

    The project compiles and executes and shows a window with a button. This is the application that is created by default:

    alt description here

    NetBeans creates three files within the project: CustomerSearch.fxml, which is the user interface in FXML language; CustomerSearchController.java, which is associated with the graphic elements of the FXML document and coordinates the behavior of these elements; and the JavaFXApplicationCustomerSearch.java class, which is the entry point for the application:

    alt description here
  5. Open the JavaFXApplicationCustomerSearch.java file and add the following code:

    stage.setTitle("JavaFX Demo");
    stage.setWidth(650);
    stage.setHeight(650);
    alt description here

Creating the User Interface

In this section, you create the application UI by using Scene Builder.
  1. Right-click the CustomerSearch.fxml FXML file and select Open.

    alt description here

    NetBeans opens the file in Scene Builder showing the main pane (AnchorPane) with a Click Me! button on it.

    alt description here
  2. In Scene Builder, perform the following steps:

    1. Click the AnchorPane.
    2. Press Ctrl + 8 to show the right panel.
    3. In the Layout section of the right panel, enter 620 in the Pref Width field and 600 in the Pref Height field.
    4. Press Enter.
    alt description here
  3. Move the Click Me! button to the upper-right corner of the pane.

    Hint: By pressing Ctrl + 8, you can hide and show the right panel; and Ctrl + 7 for the left panel.

    alt description here
  4. Click the Click Me! button and then perform the following steps:

    1. In the Properties section of the right panel, enter Search in the Text field.
    2. Press Enter.
    3. alt description here
  5. In the Code section, enter buttonSearch in the fx:id field and handleSearchAction in the On Action field.

    alt description here
  6. Select and drag a Text Field element from the left panel to the upper-left corner of the AnchorPane.

    alt description here
  7. Resize the text field to your preferred size.

  8. Perform the following steps:

    1. Click the Text Field.
    2. In the Code section of the right panel, enter textFieldSearch in the fx:id field and handleSearchAction in the On Action field.
    3. Press Enter.
    alt description here
  9. Select and drag a Table View element from the left panel to the AnchorPane.

    alt description here
  10. In the AnchorPane, select the table view and drag its bottom right corner to adjust the table size.

    alt description here
  11. Perform the following steps:

    1. Under TableView from the left panel, select and right-click any TableColumn.
    2. Select Duplicate from the shortcut menu.
    alt description here

    The table now has an extra column.

  12. Resize the columns in the table by performing the following steps:

    1. Select the first TableColumn from the left panel.
    2. Enter 170 in the Pref Width field, under the Layout section in the right panel.
    3. Press Enter.
    4. Repeat steps a, b, and c for the second and third columns, assigning them a width of 190 and 210, respectively.
    alt description here
  13. Click the Table View in the pane and under the Code section from the right panel, enter tableView in the fx:id field.

    alt description here
  14. Name the three TableColumn in the left panel by entering Name, Address, and Email, respectively.

    alt description here
  15. Press Ctrl + S to save the file. (You can also select File > Save). Disregard possible warnings.

  16. Perform the following steps to manually add the <cellValueFactory> XML tag to each <TableColumn> tag in the CustomerSearch.fxml file:

    1. Go to NetBeans.
    2. Right-click the CustomerSearch.fxml file.
    3. Select Edit.
    alt description here
  17. Perform the following steps:

    1. Add the following code to the file:

      <?import javafx.scene.control.cell.*?>
      
      <cellValueFactory>   
          <PropertyValueFactory property="name" />
      </cellValueFactory>
      
      <cellValueFactory>            
          <PropertyValueFactory property="addressline1" />          
      </cellValueFactory>
      
      <cellValueFactory>            
          <PropertyValueFactory property="email" />
      </cellValueFactory>
    2. Remove the slash (/) from the <TableColumn> elements and add </TableColumn> instead (because <cellValueFactory> is added as a child of <TableColumn>.
    3. Make sure that the import line goes under the <xml> tag.
    alt description here

    The <cellValueFactory> element under <TableColumn> binds the columns in the UI with the columns from the Customer table in the DB.

Developing the Controller

In this section, you create the CustomerSearchController.java class, which instantiates the javax.ws.rs.client.Client class to make RESTful web service calls.
  1. From the following link, download the file, and extract the folder to your disk. The lib folder contains some Java EE 7 libraries, like the JAX-RS 2.0 Client.

  2. Right-click the Libraries folder and select Add JAR/Folder.

    alt description here
  3. Select all JARs in the lib folder and click Open.

    alt description here
  4. In NetBeans, open the CustomerSearchController.java file and perform the following steps:

    1. Replace the name of the handleButtonAction method with handleSearchAction.
    2. Delete the input parameter from this method.
    alt description here
  5. Replace the existing code in the handleSearchAction() method with the following code:

    WebTarget clientTarget;
    ObservableList<Customer> data = tableView.getItems();
    data.clear();
    Client client = ClientBuilder.newClient();
    client.register(CustomerMessageBodyReader.class);
    if (textFieldSearch.getText().length() > 0) {
        clientTarget = client.target("http://localhost:8080/ServerSide/webresources/customer/search/{beginBy}");
        clientTarget = clientTarget.resolveTemplate("beginBy", textFieldSearch.getText());
    } else {
        clientTarget = client.target("http://localhost:8080/ServerSide/webresources/customer");
    }   
    GenericType<List<Customer>> listc = new GenericType<List<Customer>>() {
        };
    List<Customer> customers = clientTarget.request("application/json").get(listc);
    
    for (Customer c : customers) {
        data.add(c);
        System.out.println(c.toString());
    }
    alt description here
  6. Press Ctrl + Shift + I to solve imports. Some classes are not resolved until they are created.

  7. In the same file, add the following lines of code:

    @FXML
    private TextField textFieldSearch;
    @FXML
    private Button buttonSearch;
    @FXML
    private TableView<Customer> tableView;
    alt description here
  8. Press Ctrl + Shift + I to solve imports. The Customer class is not resolved until the class is created.

  9. In the same CustomerSearchController class, add the following line of code to the initialize method:

    handleSearchAction();
    alt description here

    The CustomerSearchController class contains two classes that are not yet defined: Customer and CustomerMessageBodyReader. You create these classes in the next section.

Creating the Parser with the Java API for JSON Processing

In this section, you create the Customer class and the JSON parser by using the new Java API for JSON processing in Java EE 7.
  1. Right-click the javafxapplicationcustomersearch folder and select New > Java Class.

    alt description here
  2. In the New Java Class dialog box, on the Name and Location page, enter Customer for Class Name and click Finish.

    alt description here
  3. In the Customer.java file, add the following code:

    import java.io.Serializable;
    
    implements Serializable
    
    private String name;
    private String addressline1;
    private String email;
    alt description here
  4. Perform the following steps:

    1. Place your cursor after the variables declaration and press Alt + Insert to show the Insert Code window.
    2. Select Getter and Setter.
    alt description here
  5. In the Generate Getters and Setters dialog box, select addressline1 : String, email : String, and name : String, and then click Generate.

    alt description here
  6. Save your file.

  7. Right-click the javafxapplicationcustomersearch folder and select New > Java Class.

    alt description here
  8. In the New Java Class dialog box, on the Name and Location page, enter CustomerMessageBodyReader for Class Name and click Finish.

    alt description here
  9. Enter the following code in the CustomerMessageBodyReader class:

    @Provider
    @Consumes({"application/json"})
    
    implements MessageBodyReader<List<Customer>>
    
    @Override
    public boolean isReadable(Class<?> type, Type type1, Annotation[] antns, 
                                               MediaType mt) {
        return true;
    }
    alt description here
  10. Press Ctrl + Shift + I to fix imports. Be sure to select java.lang.reflect.Type for Type when import options are listed.

    alt description here
  11. Enter the following method code in the same CustomerMessageBodyReader class:

    @Override
    public List<Customer> readFrom(Class<List<Customer>> type, Type type1, Annotation[] antns, MediaType mt, MultivaluedMap<String, String> mm, InputStream in) throws IOException,  WebApplicationException {
        if (mt.getType().equals("application") && mt.getSubtype().equals("json")) {
          Customer customer = new Customer();
          List<Customer> customers = new ArrayList();
          JsonParser parser = Json.createParser(in);
          while (parser.hasNext()) {
            JsonParser.Event event = parser.next();
            switch (event) {
              case START_OBJECT:
                customer = new Customer();
                break;
              case END_OBJECT:
                customers.add(customer);
                break;
              case KEY_NAME:
                String key = parser.getString();
                parser.next();
                switch (key) {
                  case "name":
                    customer.setName(parser.getString());
                    break;
                  case "addressline1":
                    customer.setAddressline1(parser.getString());
                    break;
                  case "email":
                    customer.setEmail(parser.getString());
                    break; 
                  default:
                    break;
                }
                break;
              default:
                break;
            }
          }
          return customers;
        }
        throw new UnsupportedOperationException("Not supported MediaType: " + mt);
      }
    alt description here
  12. Press Ctrl + Shift + I to fix imports.

  13. Right-click the project and select Build.

    alt description here

Launching the Application

  1. Right-click the JavaFXApplicationCustomerSearch.java file.
  2. Select Run File.

    alt description here

    The application launches and gets data from the RESTful web service. To search for data, enter a name in the text field and click the Search button.

    alt description here

Summary

In this tutorial, you learned to:

  • Create a RESTful web service that gets data from a DB through a Facade class and by using JPA
  • Create the application's UI by using JavaFX Scene Builder
  • Create the application's business logic by using the JAX-RS 2.0 Client and JSON 1.0 APIs
  • Link the application logic (controller) with the user interface (FXML)

Resources

Credits

  • Curriculum Developer: Edgar Martinez
  • Editor: Susan Moxley
  • QA: Juan Quezada

To navigate this Oracle by Example tutorial, note the following:

Topic List:
Click a topic to navigate to that section.
Expand All Topics:
Click the button to show or hide the details for the sections. By default, all topics are collapsed.
Hide All Images:
Click the button to show or hide the screenshots. By default, all images are displayed.
Print:
Click the button to print the content. The content that is currently displayed or hidden is printed.

To navigate to a particular section in this tutorial, select the topic from the list.