My Blog

Greg Houston has done a great job with the Mocha UI plugin for MooTools. I started using Mocha UI when it was on version 0.8 which was based off MooTools version 1.1. The latest release is based on MooTools 1.2 which is a much more solid and cleaner looking release. Mocha UI followed suite getting rid of a few minor bugs, improving the plugins modal, and adding some nice features including workspace.

I’ve been working on updating existing web applications based on Mocha UI 0.8 and MooTools 1.1 over to the latest versions and the process has been pretty painless. I’ll post another blog on the workspace later when I have time for more web development. In the meantime here’s how to use the basic Mocha UI functionality:

What you’ll need
The latest version of MooTools and Mocha UI. In the main mocha directory you’ll notice a few examples that Greg included, look in the HTML head of those files to see what scripts and css files you’ll need to include in your own project.

Creating a standard Mocha UI Window

var string = 'hello world';

			new MochaUI.Window({
			        id: 'customerSearchResultWindow',
				title: 'Customer Search Results',
				loadMethod: 'html',
				content: string,
				cornerRadius: 2,
				shadowBlur:3,
				width: 675,
				height: 300
			});

Loading content via XHR “Ajax”

	var xhr = new Request({
		url: location.href,
		method: 'post',
		onComplete: function(){

			new MochaUI.Window({
			    id: 'customerSearchResultWindow',
				title: 'Customer Search Results',
				type:'modal',
				loadMethod: 'hmtl',
				content: xhr.response.text,
				cornerRadius: 2,
				shadowBlur:3,
				width: 675,
				height: 300
			});
		}
	}).send('func=searchCustomer&first_name=' +$('first_name').value+'&last_name='+$('last_name').value);

Using the modal functionality
First you will need to instantiate the MochaUI.Modal class.

window.addEvent('domready', function() {
	MochaUI.Modal = new MochaUI.Modal();
});

Then just set type parameter:

            new MochaUI.Window({
                id: 'app_'+id,
                title: name,
                type: 'modal',
		loadMethod: 'iframe',
		contentURL: 'application.html',
                cornerRadius: 2,
		scrollbars: true,
                shadowBlur: 3,
                width: 917,
                height: 500,
		y: 15+getXY()
            });

Closing a Mocha UI window

MochaUI.closeWindow($('window_id_here'));

This entry was posted on Tuesday, November 25th, 2008 at 1:29 am and is filed under ajax/dom/javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.