is this forum active?

[LiterateParticipant]

Hello, I tried to complete the tutorial:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

following the instructions, the xhtml does not populate

anyone have any success with the same tutorial?

[LiterateParticipant]

The linked instructions DO NOT WORK…
I am going to go through it STEP-BY-STEP and share what does not work…

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

This initial tutorial begins with stating:

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.

which will not CONNECT to the current tutorial at

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

because:

1. The file directory structure is NOT created the same.
To explore in detail, step-by-step:

[LiterateParticipant]

beginning with:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/configure-mysql-eclipse-tomcat.htm#Step1

1. Set Up a Database – DONE

completed using MySQL WorkBench following this additional tutorial:
http://www.inoreader.com/article/3a9c6e7fdc3fe2ac-creating-a-mysql-database-via-the-command-line

tested using SHOW DATABASES;
to confirm

[LiterateParticipant]

2. Create a New Project in Eclipse

NOTE:
Dynamic Web Project. In the window that appears, type the project’s name (we will name it “jQWidgetsJSP”) and click Finish.

The second part is a JSF web application: Bind jqxGrid to MySQL Database Using JSF (JavaServer Faces)

2. Create a New Project in Eclipse – DONE

In this tutorial, we will be using Eclipse IDE for Java EE Developers, version Luna. You can get it from here: https://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2. Run Eclipse and go to File → New → Dynamic Web Project. In the window that appears, type the project’s name (we will name it “jQWidgetsJSP”) and click Finish.

[LiterateParticipant]

3. Add Necessary Classes to the Java Build Path

Downloaded:

java-rt-jar-stubs-1.5.0.jar
mysql-connector-java-5.1.40-bin.jar
gson-2.8.0.jar

Then followed: Here is how to add these to the Eclipse project:

(even though I normally put these in the lib folder under WEB-INF, shall follow this tutorial as given)

1. The above jar files are NOT already present in JRE System Library.

Next is the first DISCREPANCY —

The added JARs should appear in Java Resources\Libraries and be ready for use:
NOPE, they do not appear there…

step-by-step:
1. Select jQWidgets JSP in Project Explorer
2. Right-click on the project and click Properties
3. Select Java Build Path on the left and then the Libraries tab
4. Click Add External JARs… and browse for the aforementioned files.
5. The added JARs should appear in Java Resources\Libraries and be ready for use

NOPE, they appear in a new folder called Referenced Libraries (this may impact the run as it may or may not know where to find the jars)

Shall find out as we continue the tutorial
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/configure-mysql-eclipse-tomcat.htm#Step1

[LiterateParticipant]

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

Create two folders in the project folder WebContent – 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.

downloaded jqwidgets-ver4.4.0
in folder jqwidgets selected ALL ninety (90) FILES with js extension
copied and pasted into WebContent/js folder

and the stylesheets (jqx.base.css and any themes and associated images) in css
THIS part is not clear – I copied the jqwidgets/styles/jqx.base.css
and pasted it into WebContent/css folder

Remember to include a version of jQuery in js, too.
downloaded current version jquery-3.1.1.min.js
copied and pasted into WebContent/js folder

DONE

DONE

[LiterateParticipant]

5. Configure the Apache Tomcat Server

my Tomcat and AWS Elastic Beanstalk is already set up

BUT, SHALL FOLLOW tutorial — deleting existing tomcat installation and redoing according to the tutorial

downloaded current version 8.5 tomcat

In Eclipse, go to Window → Preferences. Choose Server → Runtime Environments on the left
Click Add. In the window that appears, choose Apache Tomcat v8.0 and check Create a new local server
Click Next, browse for the Tomcat installation directory, then click Finish and OK in the previous window

ABOVE ALL DONE
NEXT…
Right-click the project and choose Properties. In the Properties window, select Project Facets on the left and then the tab Runtimes on the right. Check Apache Tomcat v8.0. Finally, click Apply and OK.

note, JavaServer Faces IS NOT SELECTED as a Project Facet

DONE

[LiterateParticipant]

6. Start the Server and Configure Its Classpath

In the bottom panel of Eclipse, select the Servers tab.
Right-click on Tomcat v8.0 Server at localhost and click Start

DONE

Go to Run → Run Configurations…
In the pop-up window, select Apache Tomcat → Tomcat v8.0 Server at localhost on the left and then the Classpath tab. Add the external JARs mysql-connector-java-5.1.34-bin.jar and gson-2.3.1.jar:

note — there is NO POP UP WINDOW

I right clicked on the Project and selected Run As / Run Configurations…
and completed the above SAME instructions

select Apache Tomcat → Tomcat v8.0 Server at localhost on the left and then the Classpath tab. Add the external JARs mysql-connector-java-5.1.34-bin.jar and gson-2.3.1.jar:

Apply the settings and click Close.
Your project is now set up and you can proceed with any of the following tutorials showcasing jQWidgets components loaded through JSP:

DONE

NOTE: THIS IS THE jQWidgetsJSP Project that has been created.

Moving on to

Bind jqxGrid to MySQL Database Using JSF (JavaServer Faces)
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

which is NOT a JSP project, but a JSF project

[LiterateParticipant]

Ran a validate on jQWidgetsJSP

got 3 warnings:

Runtime ClassNotFoundException may result

on all three jars:

gson-2.8.0.jar
java-rt-jar-stubs-1.5.0.jar
mysql-connector-java-5.1.40-bin.jar

am going to try to copy and paste the same three files into the WEB-INF/lib folder
to see if the same validation errors occur

same three validation errors

shall change class path to match those within the lib as INTERNAL jars not EXTERNAL

EXCELLENT, no more validation errors…

ok, now on to the next tutorial to get the web app up and running

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

[LiterateParticipant]

NOTE, THIS specific tutorial is difficult to find:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=
Bind jqxGrid to MySQL Database Using JSF (JavaServer Faces)

I found it by google and NOT by any link on the http://www.jqwidgets.com website

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.

DONE ALREADY and confirmed using

tested using SHOW DATABASES;
to confirm

[LiterateParticipant]

Go to File → New → Maven Project.

DO NOT CREATE NEW PROJECT… as we are using our current JSP project that must made into a JSF project (not included in the tutorial)

jumping to step 4
4. Create the Managed Bean
Package name: com.jqwidgets
Java Class name: EmployeeController

copied the exact code in the tutorial and pasted into EmployeeController.java

Create a new class, EmployeeController in the package com.jqwidgets with the following content:

DONE

NOTE: 4 errors I think may be due to FACES not included
including JavaServer Faces in Project Facets now

EXCELLENT… all 4 errors went away!

continuing…

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.

ALREADY COMPLETED PRIOR IN THE ABOVE POSTS

[LiterateParticipant]

6. Create the View
NOTE, the “controller” does not have the usual Model and uses a managed bean for both the data connection and the model without any getters or setters?

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:

copied the exact code as is in the tutorial

shall attempt to run grid.xhtml

[LiterateParticipant]

did not work
first error is something that has to do with Access denied for user ‘root’@localhost’ (using password: YES)

HAS ANYONE GOTTEN the tutorial to work?

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsf.htm?search=

I am going to try this tutorial OVER HERE to see if I can resolve a JSON STRING data binding to jqxGrid, jqxCalendar, jqxSchedule.

If anyone is interested in how I may or may not have succeeded, that is if you also have interest in data binding, please place a note here.

Off to find a solution that will work, as the posted tutorial does not seem to work.

http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html

[DimitarParticipant]

Hello Literate,

The steps from the tutorial Bind jqxGrid to MySQL Database Using JSF (JavaServer Faces) result in the jqxGrid shown in the screenshot at the bottom of the page. Please note that you need to follow only Step 1 of the Configure MySQL, Eclipse and Tomcat for Use with jQWidgets tutorial (as specified). Please also note that the tutorial has been written a while ago and the screenshots and steps pertain to the specified versions of all technologies (i.e. IDE, server, .jar files, etc.) This does not mean the grid cannot be configured with the latest versions of aforementioned technologies, only that there may be some discrepancies (for example in the UI of the latest version of Eclipse).

Please also note that this is a community forum. Timed responses to your queries can be expected if you contact us by email.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[LiterateParticipant]

Yes, you are the best Dimitar. Please say Hi to Peter.

Shall continue the detailed review using email, THANK YOU!

Am very excited that your wonderful components shall work.

Jon

[Author]

Posts