Ra-Ajax 0.5.3 Released

As promised, we will try as hard as we can to have more frequent releases of Ra-Ajax. We are very happy to introduce Ra-Ajax version 0.5.3. We have fixed several bugs and did major refactoring on the Style logic but the two major feature are the addition of two Window widgets and enhancements to the Effects.

Window and WindowLight

The Window widget is richer, looks nicer out-of-the-box and is more suitable for skinning, while WindowLight has far less DOM elements and is meant to be for situations where you might need a window that is super fast and uses minimal DOM elements and CSS. Check out our Window Sample that features both of these widgets.

We use sprite images for the Window widget to have a minimum number of image files. Thomas published a blog post about it and you can read it here if you are interested in knowing more about sprite images and how to use them in your applications.

Enhancements to Effects

We believe that the Effects foundation in Ra-Ajax is very solid now and it has some features that are very hard to find somewhere else. First of all, you can combine Effects in Ra-Ajax in two different ways, the benefit of combining Effects is that you will end up with very efficient use of resources on the client and the Effects will run very smoothly and you will not end up with jagged or irregular rendering for them due to the excessive use of timeouts, specially if you are rendering a large number of Effects either simultaneously or sequentially.

Joining Effects

The first way of combining or grouping Effects is by Joining them, you can simply Join effects like this:

new EffectSize(pnl, 600, 160, 300).JoinThese(
  new EffectHighlight(), 
  new EffectBorder(5)
).Render();

This effectively combines EffectSize, EffectHighlight and EffectBorder into one Effect that renders all of these things for you simultaneously. This means that only one setTimeout (timer) will be used in rendering all these Effects which is very efficient in terms of resources and will make the Effects run softly without irregularities. You can pass in any number of Effects to the Join method as you see fit. Note also that you don't need to create any variables to join the effects, you just create a new Effect, Join some other Effects with it and call Render() immediately. This makes it very easy for you to use Effects with maximum flexibility and minimum code. You can see Effects Joining in action at our Effects Sample Page, just click on the first "Click Me" button. Joined Effects should be used with the same Control.

Chaining Effects

The second way of combining Effects is by Chaining them, like this:

new EffectFadeIn(pnl2, 1000).ChainThese(
  new EffectHighlight(pnl2, 1000),
  new EffectSize(pnl2, 500, -1, 500), 
  new EffectBorder(pnl2, 500, 5),
  new EffectTimeout(500),
  new EffectHighlight(pnl2, 500)
).Render();

What this does is it will make these Effects run successively one after the other, in the order specified above. But they will also run in a way that is efficient on resources, mainly because only one timer will be running at any given time. And when one Effect finishes, it starts the next one. Again this means that the Chained Effects will run smoothly without jagging or irregularities. You can see Effects Chaining in action at our Effects Sample Page, simply click the "Click Me" button at the bottom of the page.

EffectTimout

We thought that with Chaining Effects as described above, it would be useful and handy to have an Effect that helps in pausing the sequence of Effects for a specified number of millie-seconds and that's what EffectTimout is for. If you check the snippet of code above, you will notice that after EffectBorder runs, there will be a pausing period of half a second due to using 'new EffectTimeout(500)' and after that period EffectHighlight will run.

We hope you will find these features useful and that you will like them. Your thoughts and recommendations are welcome, please use our forum to let us know what you think.