AJAX and NetBeans - jMaki and ZK
By jonasdias on Out 27, 2008
Hi everybody,
Last Thursday I did a Tech Demo about developing AJAX web apps using the powerful NetBeans 6.1 at Federal University of Rio de Janeiro.
I started talking about AJAX and how it improves usability and creates user friendly interfaces for the Web. Many people thinks that having ajax apps will overload the server and network just because you have a prettier interface. People have the idea that how more sophisticated is the app, heavier it will be. AJAX shows that it's not true.
The division of concepts let the server deal only with the data requested from Javascripts at client side. The interface refreshing is done all by the browser. So, instead of sending full and big HTML blocks to the client each time he refresh or navigate to a different page, the server just send the information requested and the browser deal with page drawing dynamically.
A great doubt about developing an AJAX app is to choose a framework. I suggested 2!
First I talked about jMaki. ()
I did a demo showing the features of jMaki framework and its cool plugin for NetBeans.
jMaki is a client-server framework that encapsulates many AJAX components from other frameworks in the form of a Widget. With the NetBeans plugin, it let you create your pages dragging and dropping widgets to your JSP. You only need to customize your page changing the CSS file as you like and choosing the best widgets to compose your web page.
To start learning about jMaki, I suggest these links:
NetBeans jMaki Introduction Tutorial
jMaki Screencast
To get a little more advanced learning, try this Another jMaki NetBeas tutorial with RESTful WS
Later I started talking about ZK framework to build AJAX RIA using NetBeans.
When a friend showed me ZK, I got really impressed. It's a complete framework and it let you develop your app programming only in Java.
Yes! All the server side AND the client side scripts can be written in pure Java language (sweet Java)! Check some videos and examples at ZK Home Page
I did a simple demo using ZK to build a Web Telephone List.
WARNING: I don't use a database on this demo, but it's just to leave things faster. On a real world implementation , you should really consider that, specially because ZK has great tools to deal with Database and Persistence. If you understand Brazilian Protugese, check this blog post.
Now let's start our demo.
First, install NetBeans ZK plugin:
There are 2 plugin options:
1. ZK Designer plugins for netbeans 6.1
2. REM for NetBeans 6.0
The first let you develop your ZUL web pages dragging and dropping the components into your xml, but the second one is the one with code completion and highlighting.
Actually, in a very near future they will became only one plugin. Stay tuned for next release of REM plugin because it will came with the visual ZK designer bundled too!
Download the plugin and install it on NetBeans through the Tools->Plugins window.
For my Demo, I chose the first plugin that let me create my pages faster using drag n drop.
So now, let's create a New Project.
1. Go to File -> New Project
2. Choose a new Web / Web Application
3. Choose a name for your project (like ZKDemo)
4. Choose your server (GlassFish)
5. Choose the framework you would like to use. Here you must choose ZK!
The project opens with two index files: the index.jsp and index.zul. Delete the JSP and keep the ZUL. ZK support JSP includes, but its main ajax components are arranged to compose your web page on a XML file called ZUL file.
The index.zul file comes with a simple window page like this:
Try some drag and drop with the ZK components of the palette and then Run you project to check some ZK features!! Not all the ZK components are already on the palette! To see a full list of ZK Components, check: ZK Explorer!
For our Telephone List project you will need this index.zul file.
Copy it's content on your index.zul.
You will also need the catalog.zul file that is included on our index.zul and the catalog.zs file that is used by the ZSCRIPT tag on the begining of the index.zul file.
Just save catalog.zul and catalog.zs on your project page at your NetBeansProjects/YourProjectName/Web folder!.
Then go to NetBeans and open the ZS file. Look! It's Java code! No Javascript in here :D! See that it does 2 imports:
import ufrj.zkdemo.Catalog;
import ufrj.zkdemo.Contact;
This classes need to be created! But it's quite simple! Remember that if you create your classes on a diferent package, you will need to update the ZS file with yourpackage.Catalog and yourpackage.Contact imports!
Download Catalog.java class.
Download Contact.java class.
And put them on your project's source code packages!
Now Run your application and enjoy your veeeery simple telephone ajax catalog! See that, since we are using Lists and a Map to store the data, every time you Refresh your Web Page, you will have your telephone data ERASED!! Yes, this is not a very useful Tel catalog, but I encourage you to improve this project using a Database!
Cheers,
Jonas