A KISS Desktop UI Implemented in JavaFX

some minor, probably not very impressive ideas, came to mind over the last few weeks to adapt the common desktop ui experience to my needs. i am not familiar with apple's os, which is known to provide good ui and has possibly already implemented my ideas. if this is the case, this post is only here to show some effects and components implemented in javafx. note that i am not a specialist for good looking user interfaces! i have never read any ui guidelines,  and i am not proud of that. for specialists refer to kirill grouchnikov (-> pushing-pixels ), joshua marinacci (-> blog ), jonathan giles (-> blog ), …

more intuitve items to log-off

the first change is to show all the possible log-off possibilities with more intuitive icons and not only in raw text. the user should be able to determine the right thing faster (on mouse over or click a description could pop up)

in clockwise direction or from left to right:

1. lock screen
2. user log out
3. restart
4. save to disc
5. save to ram
6. and the last one: shutdown.

some of the icons were taken from the great amarok player some were backed by my crude designer heart.

tags instead menu

another idea was that the normal application menu is somewhat complicated to use. even in vista/win7 or kde 4 you need to browse through the menu if you don’t know the name of the application, although i had to admit that i really like the search functionality in vista/win7 (btw that was the only thing i liked about vista). the point is that the menu items should be clickable and then filter the application list on the right side. so the menu items behave like tags:

… select ‘internet’ and ‘office’ to find my email client:

the textbox can be used to further filter the applications by name:

taskbar == application chooser

the next idea is a taskbar which is at the same time the application chooser which is normally triggered from alt+tab. so instead of the known taskbar (here kde):

and the application chooser (gnome/kde):

i want to have only one unified bar to keep things simple (see kiss ). in the first try i though i will put the unified taskbar on the bottom like it is normally done with the ordinary taskbar:

in this example i used some images to fake application content. the images were taken from a javafx example .

the window switching and menu-pop-up is triggered from a simple ‘mouse over’ not from a time consuming mouse click. or sometimes i prefer keyboard then i can use alt + left/right. now the desktop is like i wanted it, but what should be shown when i close all apps? and there is a lot of unused space between the last icon and the log-off menu which is ugly. but moving this menu to the left could cause a lot of trouble for the user. then one solution could be to move it where it does not fit: into the finder or apps menu (like some os vendors did).

second try with desktop ground

so we need to introduce the desktop ground as a special window available from the taskbar to make things even more simple. all the ’starter’-icons from the apps-menu then will go onto our dockable desktop ground. even the finder-menu and the log-off menu will be there as docked apps which can be arranged like the user wants it. the idea of ‘docks’ is stolen from my current window manager called window maker . of course those docks could be used to display weather, stocks, tweets, … .

to further improve the experience for me as a developer i will put the unified taskbar in the center of the screen. omg, what? yes, this bar is only displayed on e.g. ubuntu key (at the moment this is implemented with the alt key instead). i guess, this is the point where ui experts would like to hit me, but i think this is a good solution – at least for me, because:

1. it is simple
2. the average distance from any point to the center is less than to the bottom of the screen, so we have faster acces to any of the current running applications.
3. we save pixels because our taskbar is not omnipresent

so here a screenshot of this centered unified taskbar:

always fullscreen

we even could go further to avoid bars on the top of each application window. to close an application we could put a small ‘close’-icon (like it is the case for tabs for your browser) on each preview image of the unified taskbar. so the applications could then be always full screen like it is the case for mobile devices. hmmh, but then we cannot see two apps at the same time!? for that we could implement resizing applications in the unified taskbar via mouse scroll and dragging via ubuntu key +mouse dragging. now the desktop has two states:

• editing mode, where the taskbar is shown and application windows (except the desktop) could be closed, resized, moved and we can switch applications
• application mode, where normally only one application is visible in full screen

so now look at the applications’ desktop where each of the docks (two icon docks, the find-menu dock and the log-off dock) could be dragged around to suit your needs:

click here to start the webstart version.

the things which are currently not implemented in the javafx application:

• closing, resizing and dragging of application windows
• if the user hits enter in the find-menu dock it should start that command and if this command does not exist it will start a desktop search
• alt+tab does not work with javafx so i had to use alt+left and alt+right
• the current time could be displayed instead of an icon for the desktop

conclusion

i would really like to see some of my ui ideas in kde or gnome. or gnome-do should replace all the bars in a common gnome ui. i think those ideas are simplifications and usage boosts and not only eye catchers in my humble opinion. like the most ui ‘improvements’ were in the last time … keyword: compiz.

and are there developers of javafx out there who read this?

then first of all: thanks a lot for javafx!

and secondly:

• why do i need a compiler for javafx?? i would really like to ‘press f5′ and see my minor layout changes or see my minor code changes. this is not a nice to have. this is a must-have, i think. this should be possible!
• the language reference should be improved with examples otherwise it is senseless to the intented audience: developers and ui designers. and i couldn’t found the for loop!? only the for expression … strange.
• the toolkits (ie. netbeans) need further, if not a lot, work . these words are a bit harsh, i know, but i am a fastidious java developer and know how well ides could work.
  first of all the most pain is the debugger. i know how well this works for java, but i only needed the content of my variable at a specific moment, but netbeans wasn’t able to show this, although it shows the content of ‘native’ objects like rectangle:
  
  so i needed to use println(“{item}”)
• unit tests should be as easy as for normal java projects
• other anoying bugs occured: if you format e.g. the sourcecode of appitem where some brackets (of a function) will move one column to the right on each format call. the same appears for e.g. ‘public-read var width;’ where the semicolon moves to the right, too. problems while operating within strings and variables in the string. the code completion is case insensitive :-/ the “if else” construct is not that nicely formated if you don’t specifythe brackets. there was no javadocs for ‘native’ javaclasses. there are no boolean operations for sequence like ‘and’, ‘or’, …. which would be nice to have.

so that’s a lengthy list, but to be honest: while working with javafx i had fun! try it out!

resources

clone the latest and greatest status of the project here:

hg clone http://timefinder.hg.sourceforge.net:8000/hgroot/timefinder/desktopbar/

(source code is under public domain the pics shouldn't be reused)

or try it out now !

from http://karussell.wordpress.com/2010/04/20/a-kiss-desktop-ui-implemented-in-javafx/