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.
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.
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.
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.
[…] 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. […]
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 ?
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.
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.
The latest version of Javeline PlatForm is downloadable at http://developer.javeline.net. The docking example itself is simply a matter of saving the html file and running it with the latest version of Javeline PlatForm. If you need any help with it you can use the mailinglist to ask questions. http://developer.javeline.net/mailinglists.php
I can’t save this example too. If I save html and runnig it with Javeline PlatForm - i see the following error:
[Exception… “‘Error: 1077′ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0×8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)” location: “JS frame :: chrome://firebug/content/spy.js :: onHTTPSpyReadyStateChange :: line 491″ data: no]
[Break on this error] null
spy.js (line 491)
switchLayout is not defined
[Break on this error] if(attr[i].nodeName.substr(0,2) == “o…eName, new Function(attr[i].nodeValue));
Firefox 3.0.1
You also have to save the docking.js and docking.js file and skins.xml. In a few weeks we’ll be releasing version 1.0 of Javeline PlatForm which will include this example and many more in an easy to download package.
This is impressive, I’ve had the urge to implement docking windows in my own framework.
But after reading JAcon Nielsens usability book I’ve concluded that no normal users would be able to take advantage of docking windows. Docking windows are really only used in very advanced desktop applications. You would only need this kind of functionality if you’re building a new webbased eclipse or something for simularly advanced users. So be carefull in using this, normal users will not know how to use your application if it has docking windows.
Having said that, if you do have an application for very advanced users, this is great stuff.
I absolutely agree. I wasn’t actually adding a docking feature. I was just getting the alignment engine with splitters in place. Adding docking was just a step further, so I felt an irrational urge to implement that too.
