If you are writing Rich UI applications, having a robust set of widgets to choose from can speed up your development time. With the release of Rational Business Developer (RBD) version 8.0.1, Dojo widgets are incorporated into the product and officially supported. The palette in the Rich UI visual editor contains a number of Dojo widgets for layout, display and input, and data visualization:
Other Dojo widgets can also be used but didn't seem to make sense to put on the palette, such as Context Menu.
Why Dojo?Dojo is one of the most popular widget toolkits in use today because of its rich capabilities. IBM likes the Dojo toolkit since it is open source, as opposed to other proprietary JavaScript toolkits. IBM is an active contributor to the Dojo community. Many IBM products use Dojo widgets, so we can provide a consistent UI across our products as well as provide consistent, useful resources in our development tools.
The Dojo projectsWith RBD v8.0.1, we provide a Dojo widget project and a choice of Dojo runtime projects. Plus, we provide a Dojo sample that shows each of the widgets in action, as well as a few extras like Map, Dialog, and Portal widgets.
When you create a new EGL Rich UI project, you'll see the option to add EGL Dojo support is pre-selected under Widget Libraries. The Dojo 1.0.0 widget set is based on Dojo toolkit 1.5.
When you click Finish in the new project wizard, the EGL Dojo widget project, the Dojo local runtime project, and the EGL Rich UI widget project are automatically added to your workspace along with your new project.
Using Dojo runtimes
In order to use Dojo, you need to specify a Dojo runtime in your project's EGL Build Path. There are 3 Dojo runtime options, 1 local and 2 remote. The local Dojo toolkit provider brings the toolkit into your workspace, so that you can develop while not connected to the internet. You can also use the Dojo runtimes provided by Google or AOL if you develop while connected to the internet. The Google runtime requires a Google API key to be entered in the /WebContent/config/includeDojo.html file of the runtime project. For more info, refer to the readme file in that project. To change between Dojo runtimes, edit the EGL Build Path to select the runtime you want to use. The runtime projects all depend on the Dojo widget project.
Getting the Dojo sample
The Dojo sample provides a useful way to learn how to use the Dojo widgets. You can get the Dojo sample from the Help system. In the Help Contents, go to Samples > Technology samples > EGL > EGL Dojo widgets. Click "Get the sample" link to import the Dojo sample into your workspace. If you don't already have the Rich UI, Dojo widget, and Dojo runtime projects in your workspace, you can use the links on this help page to import those projects as well. Start by opening EGLSource/dojo.samples/Gallery.egl in the EGL Rich UI editor and trying it out in Preview mode.
New in Dojo 1.5
Dojo toolkit 1.5 contains several widget enhancements and fixes, as well as some performance improvements. For EGL's Dojo support, we added Border Container as a new layout widget, in addition to the variety of widgets that were provided in earlier technical preview versions of EGL Dojo which were based on Dojo 1.4 or earlier. RBD v8.0.1 also added DataGrid as a new non-Dojo widget, but that's for another blog. We will continue to add more widgets over time. Add a comment to this blog to let us know which widgets you would like to see.
One main new feature of Dojo 1.5, is the new Claro theme. The Claro theme has several aims:
- to deliver a modern and engaging visual style for rich internet applications, with the visual enhancements of transparent gradient background images, drop shadows, and appropriate CSS animation;
- to deliver the 'fit and finish' professional quality with consistent padding, font treatment and alignment; and fix missing expected behavioral states (hover, active and selected) in widgets;
- to improve ease of customizing the theme CSS that allows designers to easily create their own theme by styling elements such as padding and color, without designing new background images.
Claro's light, clear style, consistent visual layout and behavior, and improved CSS make it one of the best JavaScript themes available. We hope you make use of the Claro theme, if even just to borrow from it for your own styles.
So try out Dojo in your next Rich UI application, and when asked "Do you Dojo?", you can answer "Hai!"
Theresa