Now the layout is loaded into the application directly from the file. This is nice, but what I really want is to save and load the layout, and be able to switch between them. In order to achieve this I first create a model that loads the file.
And we change the appsettings element to retrieve the data from the model.
<j:appsettings layout="mdlLayouts:layout[1]" />
Now we can use the API on the jpf.layoutServer object to load and save the xml from the model. We’ll add two buttons that represent each layout. When clicked it will save the current state of the layout and load the layout it represents.
<j:button caption="layout1" onclick='
jpf.layoutServer.saveXml();
var xml = mdlLayouts.data.selectSingleNode("layout[1]");
jpf.layoutServer.loadXml(xml)' />
<j:button caption="layout2" onclick='
jpf.layoutServer.saveXml();
var xml = mdlLayouts.data.selectSingleNode("layout[2]")
jpf.layoutServer.loadXml(xml)' />
Docking
Wow, this really is starting to look like something. It would be really cool if this process could be extended to include docking windows. That would make this engine somewhat feature complete.
Javeline PlatForm assumes you want docking when you use alignment to position a j:modalwindow component. In the following example I took 10 modalwindows to be used in the layout system. It has two extra small windows. One with a list that binds on the mdlLayouts and gives you the choice to switch, add and remove layouts on the fly. The other one lets you bring back windows that you closed.
Check out the example using the button on the right. Use view source to see the jml. It also includes a 35 line JavaScript file to add some logic for the maintenance windows.
I hope you are impressed with the breadth of possibilites with layouting using Javeline PlatForm 0.98.2. You can download the latest version from http://developer.javeline.net/downloads.php. It’s a first release of a new big system, so expect some issues to exist. Please use the bugtracker to enter any new ones you find.
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.
Hi!
I find myself really stupid, not being able to start on with a simple example. Referring to the article by Ruben on “Alignment, layout and docking” http://www.rubendaniels.com/2008/06/15/alignment-layout-docking-and-its-state/1/
I tried to run the first example on http://demo.rubendaniels.com/docking/index1.html. I saved the page on my desktop with the required files: jfw_release.js and skins.xml
Than i launched the index1.html but the page didn’t look like expected. Can any body give me some basic ideas about working with Javaline?
