Gallery

<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.09-21-32',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
        }
    }
}).use('gallery-aui-component', function(Y) {
 
		// Just this instance of the component will have the css class "lfr-panel" on it's boundingBox
		// and "lfr-panel-content" on it's contentBox
		var component1 = new Y.Component({
			cssClass: 'lfr-panel'
		}).render();
 
		// Create a component to clone from
		var component2 = new Y.Component({
			visible: false,
			width: 30
		}).render();
 
		// Clone component2
		var component3 = component2.clone();
 
		// Clone component2 with new options
		var component4 = component2.clone({
			width: 100
		});
 
		// Toggle component4
		component4.toggle(); // component4 is now visible
 
		// Creating new Component classes
 
		var UserComponent = Y.Component.create({
			NAME: 'usercomponent',
			ATTRS: {
				age: {
					value: 0
				},
				firstName: {
					value: ''
				},
				lastName: {
					value: ''
				}
			},
 
			UI_ATTRS: ['age', 'firstName', 'lastName'],
 
			prototype: {
				renderUI: function() {
					this.ageField = Y.Node.create('<input id="age" />');
					this.firstNameField = Y.Node.create('<input id="firstName" />');
					this.lastNameField = Y.Node.create('<input id="lastName" />');
 
					this.get('contentBox').append([this.ageField, this.firstNameField, this.lastNameField]);
				},
 
				_uiSetAge: function(value) {
					this.ageField.set('value', value);
				},
 
				_uiSetFirstName: function(value) {
					this.firstNameField.set('value', value);
				},
 
				_uiSetLastName: function(value) {
					this.lastNameField.set('value', value);
				}
			}
		});
 
		// Create a new instance of our custom component
		var nateCavanaugh = new UserComponent({
			age: 10,
			firstName: 'Nate',
			lastName: 'Cavanaugh'
		}).render();
 
		// Updating the data (ui is automatically synced)
		nateCavanaugh.set('age', 30);
 
});