Mocha UI beta version 0.7

Introduction

Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.

Explore the navigation bar and see the windows to the right for more information.

- Greg Houston

Download

Download Mocha UI v0.7 r26

Screen 2, some other content here.

Screen 3, different content again.

Overview

Features

No images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag.
Windows can be focused, dragged, resized, maximized, minimized, restored and closed.
Adjustable rounded corner radius.
Dynamically create new windows on demand.
Create modal dialog windows
Optional "desktop" toolbars
Minimal HTML markup required.
Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.
Validates as XHTML 1.0 Strict if you use no target attributes in your anchors and validates as XHTML 1.0 Transitional if you do.

Bugs

Scrollbars show through GUI in Firefox on the Mac. This is a known bug.
In Opera 9, though the scrollbars in windows do not show through windows with a higher z-index, you can grab and scroll a scrollbar in a window that is behind another window with a higher z-index.
Also see the tickets on Google Code.

Change Log

v0.5 - 11/17/2007

Initial release

v0.6 - 11/26/2007

Fixed the IE6 select issue
Added a couple more class options
Minor code optimizations

v0.7 - 12/03/2007

Added minimize functionality (Scott F. Frederick)
Added mouseover "title" to close, maximize, and minimize buttons (Scott F. Frederick)
Added onmouseover "title" to minimized window buttons displaying full header title (Scott F. Frederick)
The close, maximize, and minimize buttons are now individually optional
Added the MochaWindow and MochaWindowForm classes
Added several options for setting the properties and style of new windows
Added additional ajax and iframe support
Reconfigured how the core class is loaded so it is easier to access the class methods
Added optional toolbars to the "desktop"
Added modal dialog windows
Code optimizations

v0.7 r22 - 12/11/2007

Iframes now resize when you resize a window
Fixed it so that if the desktop toolbars are removed the rest of the code still works
Modal windows can now be used standalone without any Mocha UI html markup
Removed the inline javascript from the example html
Added optional autohide to the dock (Scott F. Frederick)
Added the following options to new windows: onContentLoaded, onFocus, onResize, onMinimize, onMaximize, onClose and onCloseComplete (Joel Lindau)
Added screens/workspaces (Joel Lindau)
Pulled the slider function out of the core class
Code optimizations

Coming in the Next Update

Hopefully in the next update we can focus a bit more on code patterns, optimization, and how to implement plugins and modules.

Resources

Mootools

Mootools is an Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.

ExplorerCanvas

Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based drawing. ExplorerCanvas is a javascript file that brings the same functionality to Internet Explorer.

Corner Radius Slider

Move the slider to change the radius of the rounded corners on these windows.

Corner Radius: XX