I will be attaching a ExtJS Ajax Best Practices document in my next post. The code in that document will reference the more elaborate demo's code. The document explains my ultimate goal in researching ExtJS, communication (successful and unsuccessful (HTTP Errors, Application Errors and Validation Errors)) between the client and server. We all know they have fantastic looking and functioning widgets.
The Demo uses Java HttpServlet's to accept requests and generate responses. The 3rd demo (more elaborate one) uses an HttpSession object as the data store.
Attached you will find a zip file of 3 demo's/tutorials that I have written using ExtJS and Java.
You will need the following to get the demo's working:
Follow the following steps to get the demo's working:
- Java (I used Java 5)
- A servlet container (I used Apache Tomcat 6)
- FlexJson (Open Source Java to Json serializer)
- ExtJS 2.1
Before copying the .html, .js, .css and .class files onto the servlet container, you must create the directory structure to place these files into.
- Install Java
- Install the servlet container.
- Install ExtJS 2.1 onto the servlet container.
- Copy the FlexJson jar file to the servlet container's lib directory
- Compile the Java source for the demo's (don't forget to include the Servlet and FlexJson jar files when compiling).
- Copy the .html, .js, .css and .class files onto the servlet container.
Create a directory structure within the servlet container under its webapps directory called 'ext'. Within 'ext' create the 'WEB-INF' directory and place the web.xml file there. Within the 'WEB-INF' directory create a 'classes' directory:
Within the 'classes' directory copy the compiled demo source code. It should look like this:
Downloading and installing ExtJS 2.1 should have created a directory structure that looks like this in your servlet container:
WEB-INF -> web.xml
person -> Address.class, Person.class, Phone.class, Zipcode.class
servlets -> ExtJsArrayServlet.class, ExtJsJsonServlet.class, PersonCRUDServlet.class
util -> JsonObjectResponse.class, JsonResponseGeneratorUtil.class
Create a new directory called 'tutorials' under the ext-2.1 directory in your servlet container and copy the .html, .js, and .css files into it.
The 'tutorials' directory should look like this:
Start up your servlet container and point your browser to one of three urls:
tutorials -> ExtArrayStart.html, ExtArrayStart.js, ExtJsonStart.html, ExtJsonStart.js, PersonCRUD.html, ExtStart.css
person -> CreatePerson.js, DeletePerson.js, EditPerson.js, ListPersons.js, StartApp.js
http://localhost:8080/ext-2.1/tutori...rrayStart.html To view the grid
http://localhost:8080/ext/strutsORsp...ReturningArray To view the array response from the server that populates the grid.
http://localhost:8080/ext-2.1/tutori...JsonStart.html To view the grid
http://localhost:8080/ext/strutsORsp...CReturningJson To view the Json response from the server that populates the grid.
For demo 3 the Json is printed to the servlet container's console.
PLEASE DOWNLOAD THE FILE USING FIREFOX.