Bind jqxGrid to MySQL Database Using JSF (JavaServer Faces)

In this tutorial you will learn how to bind a jqxGrid to a MySQL database using JSF (JavaServer Faces), a technology which simplifies building user interfaces for JavaServer applications.

1. Set Up a Database

Our goal is to populate a jqxGrid from a MySQL database. In the example presented here, we will be using the Northwind database. To learn how to set it up, please follow Step 1 from the help topic Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.

2. Create a New Project in Eclipse

In this tutorial, we will be using Eclipse IDE for Java EE Developers, version Luna.

1. Go to File → New → Maven Project.
2. In the New Maven Project window, make sure Create a simple project (skip archetype selection) is unchecked and click Next.
   
3. In the next window, click Add Archetype... and set Archetype Group Id to org.apache.maven.archetypes, Archetype Artifact Id to maven-archetype-webapp and Archetype Version to 1.0. Then click OK.
   
4. Select the newly added archetype and click Next.
   
5. In the final window of the new project setup, set the Group Id to com.jqwidgets, the Artifact Id to jqwidgets-faces and the Package to war. Finally, click Finish.
   

3. Configure the Project

Add the necessary project dependencies and plugins in the file pom.xml in the root of the project:

The file web.xml, found in src\main\webapp\WEB-INF, defines everything about the application that the server needs to know. Configure it as follows:

4. Create the Managed Bean

The Managed Bean (which acts as a Controller) will retrieve employee data from the database, format it as a JSON string and return it to the View (Step 5). Create a new class, EmployeeController in the package com.jqwidgets with the following content:

5. Add the Necessary jQWidgets Scripts and Stylesheets to the Project

Create a resources folder in src\main\webapp and in it add two more folders - js and css. Include in them all (or only the necessary) jQWidgets files - the scripts (including jqxcore.js and the specific widget files) in js and the stylesheets (jqx.base.css and any themes and associated images) in css. Remember to include a version of jQuery in js, too.

6. Create the View

The View is where the jqxGrid with the employee data will be displayed. Create a new XHTML Page in src\main\webapp\WEB-INF and name it grid.xhtml. This page will serve as the View. Here is its content:

7. Run the Grid Page

Before running the View, please make sure you have the Apache Tomcat server installed and configured as explained in Steps 5 and 6 from the tutorial Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.

Right-click the project and select Run As → Run on Server. In the window that appears, select Tomcat v8.0 Server at localhost and click Finish.

Go to http://localhost:8080/jqwidgets-faces/grid.xhtml to view the grid page: