In this article I will introduce the blog series EXTJS in XPages and discuss why this important to your XPages development knowledge
Introduction
For ever and a day it has been the dream of Lotus Notes developers to be able to “modernize” their notes client applications and provide their clients an interactive user interface which is similar enough to the notes view interface to seem “familiar” but it different and “cool” enough to help them make the decision to modernize. I believe EXTJS used correctly, provides that user experience and compelling business demands to upgrade.
I have spent the last year introducing the world to the possibilities of jQuery in XPages and my next challenge/learning experience is EXTJS grids. I am on a learning curve with this JavaScript library and we can follow along together.
Recreating the notes view of data
Ahhhh the notes view – we have all used it, probably most of us for longer than the age of our oldest children – but the notes view still rocks………..until you want to display it on the web. In XPages we have the View Panel which is a great and simple way to get data onto the webpage in no time at all and have the users at least navigate to their desired documents. View Panels are good, and repeat controls are better, giving the developer more control over the format and layout of the data displayed while still serving the data from the trusty view on the back end. But do the user’s “dig it”? Maybe…I guess it depends on how well you have managed their high expectations 🙂 My guess is not really…
The view Panel?
A view panel does not look like a notes view. It does not function like a notes view. It really doesn’t provide the user with a simple way to find their data in a large set.
Score: Effort for the developer to create – 2 – 2 Experience for the user
The repeat control
A repeat control is better….well it should be from the user’s perspective, but is it really? It is actually harder for the developer to create a repeat control, but at the same time is more flexible than a view control to create a custom layout which meets the users requirements. But does it make a better user interface for the user ?- not unless the developer is also a graphics designer.
Score: Effort for the developer to create – 5 – 3 Experience for the user
EXTJS Grids
Just take a quick look at grids in the http://dev.sencha.com/deploy/ext-4.0.0/examples/ library, I will wait for you………don’t get distracted by the cool charts, tabs, windows, layout managers and all that stuff your users don’t care about (riiight) let’s at least stay focused on the grids.
If you came back from that not being impressed by the examples then you need to either look again stupid, or walk away now.
EXTJS is more than a JavaScript library, it is a JavaScript Library collection which has been developed over many years and has grown into a one stop shop bonanza of amazing web interfaces.
In this series of articles I am going to show how some of the EXTJS grids can be easily used in XPages applications by simply looking at the examples and then applying what we know about them and XPages to implement a grid within the XPages environment.
Turn this
Into this
Score: Effort for the developer to create (the first time) – 7 – 9 Experience for the user
In about 60 minutes (give or take)
This is going to be a fun ride and I hope you enjoy it with me 🙂
Thank you
I have to say thank you to a great team of guys at PSC who I came to work with this past summer and introduced me to what they were doing with EXTJS:- Imran Bhaidani, Steve “Slobo” Lohja, Andrew Barickman and Troy Reimer. Imran was the grids genius and spent many many hours learning their capabilities. I know a thing or two now about EXTJS but I jumped into the project in the middle and I wanted to go back and learn it properly from scratch myself. I am not using any of their code, this is all me, learning it as I go along 🙂
Xomino 
I am really looking forward to this, thanks Mark.
Nooo pressure eh? 🙂
Excellent, Mark! My task for the weekend was to sit down and figure out the exact same thing! Seeing how grids worked at Connect-o-sphere was one of the best things about the conference (though third to jQuery and karaoke). So, expect plenty of repartee, witty or not.
Looking forward to it mate 🙂
Sorry guys, looks like I missed hitting the post comment button. 🙂 Anyway, Rich Waters and I have been working on a project called Extnd since ExtJS version 1 and are in the process of now converting it to work with ExtJS 4. You can find out more on our github site > http://extnd.github.com/.
Jack – thanks I will definitely check it out 🙂
Mark – Great post. Looking forward to more. Let me just suggest that in addition to comparing EXTJS to XPages Core Controls you also compare it to features in jQuery and Dojo. The EXT JS demo site looks great. But I guess I’m wondering what that has that jQuery doesn’t etc… I’d be worried about having an app that uses Dojo, jQuery and EXT JS. So any comments you have on that as you go would be great.
Dave that is an excellent point – this should not include any jQuery and I do not know enough and dojo grids to compare at this time – but as we go along I expect dojo grid proponents will jump in with free abandon 🙂
Great stuff Mark ! It would also be interesting to see other ExtJS components used in xpages in the future. E.g forms / dialogs with binding to store getting data using ExtLib REST or DAS (with full CRUD support), layout managers, calender etc.. Keep up the excellent work 🙂
Petter – ABSOLUTELY, but there is so much fun to be had with grids it might be a while until I get there 🙂
Anyone else feel free to jump in and do some parallel blogging
Looking forward to this Marky.
Above you mentioned the viewPanel and Repeat controls, but what about the Data View (xe:dataView)? It’s a little bit tricky to get going on but does pay back with what it can do for the presentation on view data.
On the EXTJS I saw your presentation on EXTJS grids in your session at connectophere and I was impressed. The usability and user experience is very good and this is only thing that is not always to the fore.
Paul, yes I always forget the DataView!
The user experience is the reason I am doing these – the fact that they are easy for the developer is a bonus
I’m looking forward to getting some knowledge from you. As the guy who wrote the chapter on Views in the Extension Library, what about those? There are pros and cons of all. They may not be appropriate for all requirements, but some like iNotes List View offer closer fidelity to Notes Client, Dojo Data Grid is also available and the Data View is an off-the-shelf view control on steroids.
Paul, I am certainly not as familiar with the dojo grids as I should be. Looking at the examples there seems to be a number of similarities and I will certainly learn more about the dojo grids as I go along. It would be appropriate to do comparisons between the two capabilities but that was not in my initial plan for this. I would love to get someone who knows the dojo grids to be able to help do a comparison though 🙂
You’ll find that using EXT, now Sencha, translates its api directly to “Sencha touch”. So investing time here will also help you go mobile a lot faster. Its a good framework, very mature and stable.
yes, it does, doesn’t it 🙂
The ExtJS grids look like they provide similar functionality to the DevExpress grids that some of our guys have used on .Net projects. Looking forward to seeing how you get on with this.
[…] reading this post, it’s likely that you’ve also seen Mark Roden’s recent posts on using the ExtJS grid in XPages. I’ve been enjoying that series and learning along with it, but it made me realize that I […]
[…] the overview and the list of […]