Archive for March, 2008

Implementation Spotlight: Jama Contour

Monday, March 31st, 2008

One thing we plan to do more often is focus on how Ext is being implemented by real companies doing real business. As a perfect example, we recently ran across a company called Jama Software whose flagship product, Contour, a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It’s easily one of the most sophisticated and visually polished Ext applications we’ve seen yet. We decided to find out more about Contour, so we interviewed 2 of the co-founders of Jama Software, Sean Tong and Derwyn Harris, who lead the Contour development team.

Tell us a little bit about Contour and your goals for the application.

Contour is designed to provide project teams a collaborative approach to requirements management. Traditionally, requirements were locked away in massive specification documents or bulky proprietary desktop apps that only a few people on a team controlled and these approaches too often resulted in frustration, errors and delays. We wanted to provide an alternative that embodies much of what Web 2.0 is all about, where the application is 100% Web-based – unlocking the requirements, use cases and other items, giving everyone instant access to the system and thus enabling teams to work faster.

From a developer’s perspective we wanted to build an application that was light-weight and flexible, which meant that the architecture had to be designed such that sections could be ripped out and changed. The UI has always been the hardest part.

Jama Contour Screenshot

You must have evaluated other popular JavaScript libraries when starting work on Contour. Why did you choose Ext?

When we started building Contour about 2 years ago we knew we wanted a rich interface and actually debated using Web Start or XUL. However we ended up using Spring, Hibernate, and JSP simply because it was what we knew best. We continued to pursue alternatives to making the UI richer and came across DWR which opened our world to Ajax. We then started evaluating different JavaScript libraries for the UI and finally settled on Dojo…Ext never even came up.

A year or so later with Dojo fully in place, Dojo announced it was developing their .9 with little or no support for .4 which we were on. Knowing there was an imminent migration it was as good a time as any to re-evaluate our choice. Around this same time a buddy of mine mentioned Jack Slocum and Ext. The documentation, UI and support were impressive so we did some evaluations and decided to switch to Ext. Our choice came down to documentation, layout, tree, and grid support.

What has been your experience so far using Ext in your project?

The documentation has been wonderful, the code is clean and the structure makes sense. It seems well thought out. The forum is very active and the Ext team is doing a wonderful job to respond to questions quickly. The community as well is quite involved in sharing best practices and tips which is always a good sign. When we have questions, we can usually find answers in either the API or the forum.

The migration of Contour from Ext 1.1 to Ext 2.0 took us more than 2 months, which is longer than what we expected. But we think the effort was worthwhile since Ext 2.0 is faster, cleaner and more consistent. We certainly hope future migrations such as 3.0 will be easier.

How does Ext fit into your overall application architecture?

Ext is 100% of our UI at this time. Basically our architecture is such that our UI is almost purely Ajax driven which provides a clean separation from UI logic and Server Logic. Our backend is developed using Spring, Spring MVC and Hibernate. The communication between client and server is through DWR. We have built 180+ custom Ext widgets for forms, dialogs, grids, trees etc. and the main application is a single HTML-less page.

We see a lot of opportunity to open our application up with Web Services and plug-ins. Ext’s architecture being configuration driven makes it possible to fit in our future plug-in framework.

What’s missing in Ext, or what do you wish it did better?

The biggest areas we’d like to see are best practices for memory management (e.g., properly destroying widgets, managing memory leaks, etc.), and continued enhancements to layouts and forms (enhanced layout flexibility when designing complex forms, integrated support for hiding/showing fields based on configuration rules, etc.).

Do you have any advice for developers just starting out with Ext for the first time?

Ext has great documentation. Pouring through all of that is essential. It’s clear and very helpful. Then check out the examples, reading the source to see how it is done. Then start creating your own, checking the API and forums for help.

ColdExt Project Updated With New Beta Release, Wiki and Tutorials

Thursday, March 27th, 2008

ColdExt project lead Justin Carter announced today that he has enabled a new ColdExt Wiki to begin organizing the project’s documentation and tutorials:

“The ColdExt Wiki is now enabled on RIAForge and I have started out with baby steps by writing a Getting Started Tutorial which covers the absolute basic requirements of getting up and running with ColdExt.

I have a number of pages and tutorials planned for the wiki (some of which I have already made notes of on the wiki home page) and will get around to adding them as soon as I can. If anyone would like to help out with documentation (rofl!) or start a discussion about what documentation is needed the ColdExt Forums could be a good place to do it. I am open to suggestions!”

In addition, Justin recently released beta 1 of the ColdExt ColdFusion library which serves as a wrapper to make server-side use of the Ext framework easy for ColdFusion developers. Some of the newest features include:

  • 7 new tags, 3 new grid demos
  • 90%+ of the tags have been updated with inline documentation
  • EditorGridPanel provides support for editable grids (only supports input and comboBox fields at this time, more to come very soon)
  • GroupingStore and GroupingView can now be used for grouping in both GridPanel and EditorGridPanel
  • GridRowNumberer can be used as a numbered column in Grids (though it doesn’t support paged grids – by design from the Ext Team)
  • New <ext:html> tag for including arbitrary chunks of HTML inside panels and forms
  • Tags which don’t require a closing tag will now work as a single tag without a trailing slash (partial support)
  • Tags which require a closing tag will throw an error if the closing tag is missing (partial support)
  • Initial implementation of attribute validation in some tags (starting with the panel tags to assist with rendering issues)
  • Support for including the Ext debugging JS
  • The bundled version of CFJSON has been updated to the latest v1.9
  • CFEclipse tag insight (/dictionary/coldext.xml)

ColdExt Beta 1 can be downloaded from RIAForge.

Ext.ux.FileTreePanel for Ext 2.0

Monday, March 17th, 2008

Ext Core Team member Jozef Sakalos has a great reputation in the community for building exciting extensions to the Ext framework. His latest creation doesn’t disappoint and continues along his well-known path of building extensions that just make sense.

Ext.ux.FileTreePanel

Allowing users to manage files remotely is a very common use case providing tremendous flexibility for applications that need to handle various files such as images, word processing documents, or spreadsheets. Ext.ux.FileTreePanel is a widget which can be used within Ext to provide easy file management of a directory structures stored on a server. Leveraging the ubiquitous tree metaphor, the component makes it easy for users to understand how directories are structured and which files are included within a tree node.

Saki added a tremendous amount of functionality allowing:

  • Files to be dragged and dropped to different folders
  • Renaming of files and folders
  • Deletion of files and folders
  • Creation of new folders
  • Uploading of multiple files
  • Opening files
  • Download of files

How It Was Built

Taking a very modular approach, Saki built the FileTreePanel component using 5 independent classes, each of which is usable outside of the FileTreePanel component:

Ext.ux.FileUploader:
This class is responsible for file uploads and has no UI. It has to have configured a store with some mandatory and some optional fields that contains mainly references to file input elements that hold file names to upload. It feature two modes of upload. Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request. Multiple upload mode creates one form for one input and uploads each file in its own request.

Other features:

  • extends Ext.util.Observable
  • start/stop all or individual uploads
  • set path to upload to
  • full set of events, both for individual files and whole upload
  • upload progress support (not working for more than one file with PHP uploadprogress backend)
  • client/server communication specification is same as for my Ext 1.x version

Ext.ux.UploadPanel:
Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design.

Other features:

  • extends Ext.Panel
  • add files to queue, queue display
  • remove files from queue one-by-one or all at once
  • UI to stop whole upload or individual files
  • icons for many file types
  • icons for status of files

Ext.ux.FileTreeMenu:

The (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:

  • various open modes
  • create folder
  • rename file/folder
  • delete file/folder
  • upload file
  • reload/expand/collapse of tree nodes

Ext.ux.FileTreePanel:
The server file tree UI that integrates everything together.

Features:

  • extends Ext.tree.TreePanel
  • file type icons for many file types
  • inline editing of file/folder names
  • drag & drop operations
  • context sensitive context menu
  • optional top toolbar in addition to context menu (especially good for Opera users)

Saki also used the Ext.ux.BrowseButton by loeppky because “it is good and working and because loeppky promised support and debugging if necessary”.

Suggestions for Saki and Contributing to the Code

Saki has posted about FileTreePanel on the Ext forums and this is the best place to ask him questions about his new extension and even contribute to future enhancements. The extension is currently in a beta phase but Saki has mentioned that the code is very stable and usable.

Saki is one of many contributers to the Ext Community Forums which are both helpful and excellent contributors to the community. The User Extensions and Plugins section is constantly updated with new and exciting extensions for every type of functionality imaginable.

Learning Ext: Many Resources Available

Tuesday, March 11th, 2008

The Ext JavaScript library is a robust framework encompassing components for many typical development needs. With support for DOM traversal/manipulation, UI controls, data binding and more, Ext provides the hooks and tools to help build engaging applications.

We’re frequently asked about online resources that can help developers become more proficient with Ext. There’s a wealth of information provided on the Ext Learning Center section of our website that can be extremely effective in helping Ext developers become more proficient in the framework.

Hosted Tutorials

The Ext Learning Center is one of the best places to get material to learn about Ext. The tutorials cater to both new and experienced Ext developers and cover a broad range of topics including application design, DOM manipulation using DomQuery, Drag and Drop and Grid implementation to name of few. If you’re new to Ext, you definitely want to start off with the Introduction to Ext 2.0 tutorial. It’s an excellent starting point which highlights the usage of some very important features and helps to build the foundation for you to work from.

Advanced developers can take advantage of other tutorials such as Extending an Ext Class or Writing Ext 2 Plugins. These tutorials, along with several others, are clearly geared towards advanced Ext developers and are designated as such.

“In the Wild” Ext Tutorials

A number of developers have created some great tutorials and examples on their personal sites. Here are just a few tutorials found via Google which cover a variety of topics and development platforms:

Again, this is only a small subset of the numerous Ext JS postings that can be found via Google. Remember, Google is your friend. :)

Ext Sample Applications

One of the best ways to get familiar with Ext best practices is by reviewing code from quality applications. The Ext demo applications, conveniently found on the Ext homepage, are excellent examples of how to use a wide variety of Ext’s powerful functionality. The applications are included in the downloadable version of the Ext JS framework and are an excellent resource for improving your Ext skills.

Ext Onsite Training

If you really want to have a more personal experience, then Ext’s onsite training service is a great solution to get your team ramped up. Conducted by a Ext Core Team member, the onsite training class offers a hands-on, instructor-led environment where developers can learn from an expert. This is by far the best method of getting familiar with Ext as it’s 2 days of intensive training in the core areas of the Ext framework coupled with the ability to get immediate feedback from an instructor. If you’re interested in having an onsite training class, please visit the Ext Training page for more details about the class.

Many Options to Choose From

Providing information to help Ext developers refine their skills is extremely important to the team and hopefully, you’ll now have more resources at your disposal. We will continue to add more resources, both Ext-driven and community-submitted, to the site to help developers build top-notch applications.

Themes for Ext 2.0

Monday, March 3rd, 2008

A common question we get asked relates to themes and if the look-and-feel of Ext applications can be enhanced further than the stock themes included in the framework. The answer is a resounding “Yes!”. Ext themes are just CSS and images and anyone with a good understand of CSS and image editing software can be as creative as they’d like.

Community Contributions

Several Ext community members have gone through the steps to produce exceptional themes that greatly complement the Ext JS framework and allow developers to have a unique feel for their applications. Some great examples of community contributed themes include:

User madrabaz:

Black Theme [UPDATED 2008-02-15]]

Dark Gray Theme

Purple Theme

Olive Theme

User J.C.:

Slate

User DigitalSkyline:

Peppermint

Chocolate

User Condor:

Themed checkboxes and radio buttons

More Themes Available

So as you can see, Ext is quite extensible in terms of skinning and while not an exhaustive list, the screenshots above demonstrate the possibilities in terms of creating your own look-and-feel for your Ext applications. The Ext forums provide a wealth of information regarding skinning and if you’re interested in seeing more examples of cool themes, be sure to do a simple search for the keyword “theme”.