SplitDesktop

An innovative GUI paradigm. It works the opposite way of usual desktops: It hides all functionalities until the user decides to explore the space. It's up to the developer to design a path of actions for the user to discover the functionalities when the user needs them. It is inspired by human centered design principles as described by Donald Norman.

It builds upon the marvellous YUI 3 Javascript library. Following the installation instructions below will be enough to have a well functioning SplitDesktop to play with.

Download and example

You can popup a functioning example and download the SplitDesktop directly from Github .

Installation instructions

You need to include the YUI 3 "seed file". It will download automatically all dependencies for you. It is hosted for free on YAHOO! CDN. All dependencies (YUI 3 files) will also be downloaded from there. Of course you can also host the YUI 3 library on your own server, the method is the same, just change the URL for the seed file.

Including the YUI 3 seed file

Include the css file

In our example the SplitDesktop itself is hosted on our servers, and the path is: /split-desktop/assets/split-desktop.css. Use your own server until the SplitDesktop is published on the YUILibrary CDN



<link rel="stylesheet" type="text/css" href="/split-desktop/assets/skins/sam/gallery-split-desktop.css"/>

Write a page skeleton

Inside the body of the page write the divs that make up the desktop. The css file will style them. You can configure a different prefix to the ids than 'ea_', however in this case you will have to edit the css manually to make the style rules match.

 


	
	

    


		See what I have
 
	




	
		
		

    

    

    

	...and more here

Set up the SplitDesktop

Include this chunk of javascript just before the closing </body> element.

Configure as you see fit. All configuration settings are shown below.


<script>

YUI({
base: 'http://yui.yahooapis.com/3.3.0/build/yui/',
modules: {
        'gallery-split-desktop': {
            fullpath: '/split-desktop/gallery-split-desktop-min.js',
            requires: ['dd-constrain','widget']
            }
        }
}).use('gallery-split-desktop', function(Y) {
 
var sdt = new Y.Widget.SplitDesktop(
	{
		srcNode: 'body'
		/* 	// See all configurable default values below. Uncomment what you need.
			// If you need to change the prefix of your ids, remember to 
			// edit all prefixes in the provided css file too
		,prefix: 	'ea_'
		,pageWidth: 	960
		,bordersColor: 	'#99cccc'
		,pathToImages: 	'/split-desktop/assets/'
		,dragHereImg: 	'drag-here.png'
		,borderPixImg: 	'pix-blue.gif'
		,handleImg: 	'center-handle.png'
		,dragHereLeft: 	162
		,dragHereTop: 	7
		,mainHeight: 	700
		,crownHeight: 	30
		*/
	}
);
 
sdt.render();
 
 
 
});
</script>

Try it out

Click here to try out an example of the functioning SplitDesktop.

NB! The SplitDesktop paradigm is not a "jack of all trades", it is useful in special use cases. Think about these features:

Overview of features:

Three mutually dependent resizable panes
No scrollbars visible on the panes (however the panes are scrollable)
Bottom pane has fixed height
North-east and north-west panes are limited in width, not in height
Start position is always visible in pretty much every screen at every resolution

Download

Download it from Github

or find it on the YUILibrary

Issues

For any issues encountered with SplitDesktop, you're welcome to write in its forum

None

Open source tools

From The Blog