More and more people ask me to finish the job I started in 2011 on the PureMVC Employee Admin demo for jQuery. So I recently took the time to finish it completely.
The project uses:
- objs for the definition of classes, inheritance and namespaces
- jQuery for communication with the DOM
- jQuery UI for UI components layer
- jqGrid for the data grid UI
- YUIcompressor and ANT to minify generated application files
Before continuing note that using PureMVC Standard or PureMVC JS Native Port (Cliff spoke recently on Twitter ) instead of Objs would be really easy. It is only syntactic sugar. The libraries used, the architecture, implementation choices will be kept the same.
Also note that this project does not depend on any specific PureMVC for jQuery framework, here jQuery only provides the UI layer, PureMVC and UI layers always stands to be two distincts entities. I found this port illustrate this perfectly.
Selection of libraries
For the project, jQuery was obviously essential. I hesitated for cons of using jQuery UI. I have used at work. I'm not really satisfied. There are few graphical components, and are often poorly implemented.
The buttons in the demonstration are managed with jQuery UI. Advantages of jQuery UI here are that it provides theme for the buttons that can easily be changed. The effect hover the button, but also, what I find essential for this demo, is it allow to disable buttons. Nothing else to say here except that the syntax to disable the buttons in jQuery is inadequate and has changed several times during the project.
I was not able to find acceptable graphical component to redefine the two combobox for departments and user roles. Despite being something really simple that exist in many other existing graphics chipsets. I've done a test with jQuery UI autocomplete combobox feature. But aside from changing the file myself, which was not the purpose of demonstration, it would have been impossible to use here.
I tried several jQuery Data Grid UI component before deciding to use jqGrid. The test with SlickGrid has failed because I have not been able to use two components instance on the same page simultaneously.
In general jqGrid performs well, it seems quite scalable and has many options. My biggest complaint is that it is not possible to define user data in addition to the data associated with each line, which forced me to make some compromises in writing code. Another complaint would be that it is not possible to hide the empty scrollbar space when there is not enough data to completely fill the grid.
There is nothing specific to do to make PureMVC Objs and jQuery cohabit. Unlike when it comes to PureMVC for Mootools , PureMVC for ExtJS , PureMVC for Prototype as they need specific hooks when used in conjunction with jQuery.
As said previously, it is really important for you to note that there is no specific need of a PureMVC for jQuery framework, as jQuery only provides the UI layer in a web application.
For cons, the visual layer requires some adjustments to be really well decoupled from the framework. Here I used a base class for all UI components. This class provides an EventDispatcher for all UI components. So there is a minimum of work to do to listen to the events emitted by the graphical components from the framework. I'm pretty happy with this implementation.
For the rest, this is the architecture and structure of the project EmployeeAdmin that we all know.
I really hesitate to make a different version of what I had already made for Mootols. Something which more respects current habits in contemporary web interfaces. As instead of presenting all forms side by side, to have them each on a page. But as this is only a basic demo I did not.
You will see in the PureMVC for jQueryMobile demo I am preparing that the presentation changes completely. Since this is not possible to do everything live on the same page. I prefer the mobile version a lot.