gpapayia

Today we released the (0.7.1.1) EGL Dojo Widgets for RBD 7.5.1.4. These are the same widgets that were released in the EGL Community Edition (CE), just for RBD. Not to worry though, from this point forward all releases of EGL Dojo Widgets will work in both RBD and CE. We also made available a great Gallery Sample showcasing all Dojo widgets in a single sample! Take a look at it here.

Our apologies for this, but any existing EGL applications using the 0.6.0 version of the Dojo Widgets will most likely require changes to bring them forward. That said, the current API has been firmly defined and will not experience significant changes in future releases.

To download the EGL Dojo Widgets for RBD click here. Be sure to also take a look at the great documentation attached to the page to get a feel for the API.

Late last week we released an early version (0.6) of the EGL Dojo Widgets on the Cafe. For those that don't know, the Dojo Toolkit is an open source JavaScript library for developing web-based applications. It's available for free from the Dojo website and provides an array of widgets including menus, tabs, tables, dynamic charts and more.

One of the best parts of EGL RUI is that your not restricted to a single widget library. This early version of the EGL Dojo widgets shows how easy it is to create your own set of widgets and easily consume them within EGL RUI.

The 0.6 version includes 17 EGL Dojo widgets with samples for each of them to show you how to get started. Even better we have the EGL Dojo Samples running on the Cafe right now. Head over to the Dojo Widgets for EGL RUI page and give them a try!

The Dojo Build System

The second part of this post is going to talk about the Dojo Build System. The Dojo Toolkit is a big (and I do mean BIG) JavaScript library. If your Dojo application uses, for example, the Dojo widgets: Button, Line Graph, Checkbox, Title Pane and Progress Bar, you don't want to include the Dojo library in your application as is. It would just slow down the loading time of your application, since the Dojo dependencies would be downloaded as GET requests as the page loads.

Thankfully, Dojo provides a way to create a custom build to include only the runtime JavaScript your application uses. Most importantly, all this JavaScript is included in the main Dojo.js file, so your application isn't loading dependencies through GET requests. Numerous sites have adopoted this type of methedology to allow for a production and development server.

So how do you use the Build System? The first step to get the full Dojo Runtime code from the Dojo Toolkit download page. The EGL Dojo widgets are built using version 1.2.3. Once the Dojo Runtime is downloaded and extracted you'll see four folders, one of them being the util folder.

Within the util folder you'll see the buildsystem folder, which is were all the magic happens. The Dojo Buildsystem uses a notion of a profile, you need to tell the Buildsystem which files to include in the custom Dojo.js. So within util\buildscripts\profiles create a new js profile file and call it customBuild.js.

Following the format specified in the other samples in that folder, you need to specify the list of Dojo import statments you want included in the Dojo.js file. So for the EGL Dojo Widget Samples, I specified this:



From the list, you can see the Buildsystem uses standard Dojo import statments, the same as if you were developing a Dojo application from scratch. The last step is to run your profile through the Buildsystem and create your custom Dojo build. The Buildsystem uses Java and is run by this command:

java -Xms256m -Xmx256m -jar ../shrinksafe/custom_rhino.jar build.js profile=standardCustomBase cssOptimize=comments action=release

After this command is executed a new folder will be created at the top level called release. Within here will be your new Dojo build. All the Dojo JavaScript will be included here, the only difference is the code your application is using will be in the single Dojo.js, and won't be dynamically included via GET requests.

You can re-run this command with action=clean to delete the release folder. You'll also notice the cssOptimize=comment. This forces the Buildsystem to remove CSS comments and combine all the CSS files into each individual theme rather than including each CSS file as a seperate @import statment.