overthinkings

of Ruben Daniels

Alignment, Layout, Docking and it’s State

June 15, 2008 at 6:03 pm · Filed under Javeline

It was somewhere in 2002 or 2003 when I was looking for a method to position widgets on a plane. It was an early version of Javeline PlatForm and up until that moment I had only positioned elements using anchoring. I remembered a nice feature of Visual Basic, which allowed you to align components to one of the 4 directions. I could align a tree to the left, a toolbar to top and a statusbar to bottom.

I made an implementation of that and extended it by allowing N number of elements to have the same alignment. I also added a ‘middle’ alignment. Javeline PlatForm up until 0.98.1 supported only this way way of dealing with alignment. The latest version supports a new layouting engine. It works with vbox/hbox-es like many other GUI systems. What’s kinda new is the way it can load and save the layout state and how it implements a window docking system similar to Aptana, Eclipse and Visual Studio.

The align=”" method

I’ll first show you the original way of dealing with a layout in Javeline PlatForm. In this example we’ll use bar objects to keep it simple, but this could be any javeline component.

<j:bar align="top" height="20" />
<j:bar align="left-splitter" width="20%"/>
<j:bar align="right-splitter" height="40%" />
<j:bar align="right" />
<j:bar align="bottom" height="20" />

The above example creates a simple outlook like layout with two splitters. By adding more elements and by using nested alignment scheme’s we can make a way more advanced looking layout. We’ll add two buttons that modify the layout runtime by hiding/showing certain elements.

<j:button caption="Hide" onclick="
  b0.hide(); b1.hide(); b2.hide();
  b3.hide(); b4.hide();" />

<j:button caption="Show" onclick="
  b0.show(); b1.show(); b2.show();
  b3.show(); b4.show();" />

The ‘bX’ variables refer to each bar component by it’s id. (N.B. You could also use a state component to set the states of multiple components). The process of hiding and showing multiple components has been optimized such that the layout is recalculated only once.

Pages: 1 2 3

Permalink

12 Comments »

Kai Tischler wrote @ June 16th, 2008 at 7:12 pm

These layout examples are very impressive and seem to function properly in FF and IE.
BUT: I have just updated my Opera browser to version 9.5; in this version, the layout
examples are shot after having moved a splitter.

Ruben wrote @ June 16th, 2008 at 9:08 pm

Hi Kai,

Thanks for letting me know. I’ve fixed it. It is a nasty Opera bug, but I’ve implemented a workaround.

Regards,

Ruben

AzRAeL wrote @ June 17th, 2008 at 12:31 pm

wow! an immense amount of coolness to you for this! love it

Ajaxian » Eclipse-like Dockable Frames using Javeline wrote @ June 17th, 2008 at 3:29 pm

[…] I’ve never been a big fan of the Eclipse IDE’s user interface, but personal biases aside, Ruben Daniels has come up with a pretty impressive feature in his Javeline framework: a dockable frames system for Ajax applications. […]

Jean-Philippe Encausse wrote @ June 18th, 2008 at 10:40 am

Hi,

This is reeeaaally impressive and cool !

Unfortunatly I’m a prototype/scriptaculous user and adding JavaLine would be too heavy for my web application

Is there a way to use the latest example as a standalone feature ? What are the minimum JavaLine component needed to make it works ? Is JavaLine compatible with Prototype ?

Regards,
Jp

Ruben wrote @ June 18th, 2008 at 7:13 pm

Hey Jp,

Thanks for the nice compliment!

We are working on compatibility with js solutions that enhance coding and animation. This is planned for v0.99. We will integrate with jquery, prototype, scriptaculous first. You can use the Javeline Packager (available on http://developer.javeline.net/downloads.php) to repackage Javeline Platform with just the components you need. Be aware, that Javeline PlatForm is a development platform for Ajax Applications/Sites. It is a declarative solution where you create an application using namespaced tags in html. Check out the other articles on my blog to get more info on what you can do with it. (If you use JPF, you will probably not only use docking windows, but also many of the other widgets to create your GUI. Like <j:tree /> etc)

To answer your questions directly. Yes, from the next version you will be able to easily combine it with prototype (you might already, but it’s untested. Javeline PlatForm has everything nicely in one namespace, but you might have the window.onload problem). Yes, you can make it smaller, but it will still be 80kb compressed minimum. Hope this helps. You can join the PlatForm mailinglist if you wanna ask more questions. http://developer.javeline.net/mailinglists.php.

Kind Regards,
Ruben

BuCzO wrote @ June 19th, 2008 at 8:42 am

Hi when are you going to integrated this real cool gui with jquery , i would like to implement this in my web apps for studies . Thx Best regards

Ruben wrote @ June 19th, 2008 at 11:23 am

I will try to do this by the first of july. Please register to the PlatForm mailinglist to stay up to date on new releases. http://developer.javeline.net/mailinglists.php.

Vinicius wrote @ June 20th, 2008 at 1:20 pm

Congratulations.
Great examples.

Yuvaraj Thiagarajan wrote @ June 28th, 2008 at 6:37 am

Can Javeline be used as a stand-alone client-side framework for developing javascript applications without the need for using any other Javascript libraries? I am trying to understand what Javeline Framework actually is and how it compares to other frameworks like Dojo, YUI, jQuery or Sproutcore.

Ruben wrote @ June 29th, 2008 at 12:38 am

Hi Yuvaraj,

I’ve answered your question in a seperate blog article here:

http://www.rubendaniels.com/2008/06/29/what-is-javeline-platform-and-how-does-it-compare/

Regards,
Ruben

overthinkings » What is Javeline PlatForm, and how does it compare? wrote @ June 29th, 2008 at 12:41 am

[…] supports Anchoring, Alignment and position using a grid (similar to a table in […]