YUI Library Examples: Layout Manager: Simple Application

Create the Panel

First we must create the panel instance, like this:


1	<div id="demo"></div>
	view plain \| print \| ?


1	var panel = new YAHOO.widget.Panel('demo', {
2	close: false,
3	underlay: 'none',
4	width: '700px',
5	xy: [100, 100]
6	});
7	panel.render();
	view plain \| print \| ?

Now let's give it some content. Note that we are adding a DIV to the body with an id of layout. This will be the element we anchor the layout to.


1	var panel = new YAHOO.widget.Panel('demo', {
2	close: false,
3	underlay: 'none',
4	width: '700px',
5	xy: [100, 100]
6	});
7	panel.setHeader('Simple Application');
8	panel.setBody('<div id="layout"></div>');
9	panel.render();
	view plain \| print \| ?

Adding the Layout instance

Now we need to listen for the beforeRender event to render our Layout.

Inside of the beforeRender event, we will wait for the element layout to appear in the document, then we will setup our Layout instance.

The layout instance we are creating will have top, left, bottom and center units configured below:


1	panel.setBody('<div id="layout"></div>');
2	panel.beforeRenderEvent.subscribe(function() {
3	Event.onAvailable('layout', function() {
4	layout = new YAHOO.widget.Layout('layout', {
5	height: 400,
6	units: [
7	{ position: 'top', height: 30, header: 'Date Editor', gutter: '2' },
8	{ position: 'left', width: 205, body: '', gutter: '0 5 0 2' },
9	{ position: 'bottom', height: 25, id: 'status', body: 'Status', gutter: '2' },
10	{ position: 'center', body: 'Select a date..', gutter: '0 2 0 0' }
11	]
12	});
13	layout.render();
14	});
15	});
16	panel.render();
	view plain \| print \| ?

Make the Panel resizable

After we have rendered our panel, we can attach the Resize Utility to it like this:


1	panel.render();
2	resize = new YAHOO.util.Resize('demo', {
3	handles: ['br'],
4	autoRatio: true,
5	status: true,
6	proxy: true,
7	useShim: true,
8	minWidth: 700,
9	minHeight: 400
10	});
	view plain \| print \| ?

Now give the resize handle a little CSS to make it look nicer.


1	#demo .yui-resize-handle-br {
2	height: 11px;
3	width: 11px;
4	background-position: -20px -60px;
5	background-color: transparent;
6	}
	view plain \| print \| ?

This will place a handle at the bottom right corner of the panel. This will only resize the outside portion of the panel, but we want the inside to resize properly.

Now we need to listen for the resize event on the Resize instance and do a little math.


1	resize.on('resize', function(args) {
2	var h = args.height;
3	var hh = this.header.clientHeight;
4	var padding = ((10 * 2) + 2); //Sam's skin applied a 10px padding and a 1 px border to the element..
5	var bh = (h - hh - padding);
6	Dom.setStyle(this.body, 'height', bh + 'px');
7	}, panel, true);
	view plain \| print \| ?

Now we have the Panel resizing the way we want, but the layout is not resizing to match. Inside the resize event from the Resize instance we need to add this at the bottom:


1	layout.set('height', bh);
2	layout.set('width', (args.width - padding));
3	layout.resize();
	view plain \| print \| ?

Now we have a resizable panel with a fixed layout inside.

Adding the calendar

Now we listen for the layout's render event and setup our Calendar.

Inside the render event we will call the layout method getUnitByPosition('left') to get the left unit's instance. Then we will create an empty DIV and append it to the body element of the left unit.

Then we will pass that element as the root node for the Calendar Control and render it.


1	layout.on('render', function() {
2	var l = layout.getUnitByPosition('left');
3	var el = document.createElement('div');
4	l.body.appendChild(el);
5	cal = new YAHOO.widget.Calendar(el);
6	cal.render();
7	}, layout, true);
	view plain \| print \| ?

Adding the Rich Text Editor

Using the same technique as above, we will add a Rich Text Editor to the center unit.

Using the layout's getUnitByPosition('center') method, we will set the body of the unit to the textarea that we will convert into an Simple Editor instance. We will also set a custom toolbar to limit the number of buttons.


1	layout.on('render', function() {
2	var c = layout.getUnitByPosition('center');
3	c.set('body', '<textarea id="editor"></textarea>');
4	editor = new YAHOO.widget.SimpleEditor('editor', {
5	height: '305px',
6	width: c.get('width') + 'px',
7	dompath: false,
8	animate: false,
9	toolbar: {
10	grouplabels: false,
11	buttons: [
12	{ group: 'textstyle', label: 'Font Style',
13	buttons: [
14	{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
15	menu: [
16	{ text: 'Arial', checked: true },
17	{ text: 'Arial Black' },
18	{ text: 'Comic Sans MS' },
19	{ text: 'Courier New' },
20	{ text: 'Lucida Console' },
21	{ text: 'Tahoma' },
22	{ text: 'Times New Roman' },
23	{ text: 'Trebuchet MS' },
24	{ text: 'Verdana' }
25	]
26	},
27	{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
28	{ type: 'separator' },
29	{ type: 'push', label: 'Bold', value: 'bold' },
30	{ type: 'push', label: 'Italic', value: 'italic' },
31	{ type: 'push', label: 'Underline', value: 'underline' },
32	{ type: 'separator' },
33	{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
34	{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
35	]
36	}
37	]
38	}
39	});
40	editor.on('editorContentLoaded', function() {
41	var d = new Date();
42	var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
43	dateSelected = [today];
44	layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
45	cal.cfg.setProperty('selected', today);
46	cal.render();
47	});
48	editor.render();
	view plain \| print \| ?

layout.on('render', function() {
    var c = layout.getUnitByPosition('center');
    c.set('body', '<textarea id="editor"></textarea>');
    editor = new YAHOO.widget.SimpleEditor('editor', {
        height: '305px',
        width: c.get('width') + 'px',
        dompath: false,
        animate: false,
        toolbar: {
            grouplabels: false,
            buttons: [
                { group: 'textstyle', label: 'Font Style',
                    buttons: [
                    { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                        menu: [
                            { text: 'Arial', checked: true },
                            { text: 'Arial Black' },
                            { text: 'Comic Sans MS' },
                            { text: 'Courier New' },
                            { text: 'Lucida Console' },
                            { text: 'Tahoma' },
                            { text: 'Times New Roman' },
                            { text: 'Trebuchet MS' },
                            { text: 'Verdana' }
                        ]
                    },
                    { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                    { type: 'separator' },
                    { type: 'push', label: 'Bold', value: 'bold' },
                    { type: 'push', label: 'Italic', value: 'italic' },
                    { type: 'push', label: 'Underline', value: 'underline' },
                    { type: 'separator' },
                    { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                    { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                    ]
                }
            ]
        }
    });
    editor.on('editorContentLoaded', function() {
        var d = new Date();
        var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
        dateSelected = [today];
        layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
        cal.cfg.setProperty('selected', today);
        cal.render();
    });
    editor.render();

Make the Editor resize with the Layout and Panel

Now we need to add some code to the resize event to resize the Editor instance when the Layout and Panel are resized.


1	//Editor Resize
2	var th = (editor.toolbar.get('element').clientHeight + 2); //It has a 1px border..
3	var eH = (h - th);
4	editor.set('width', args.width + 'px');
5	editor.set('height', eH + 'px');
	view plain \| print \| ?

Making them talk to each other

Now we need to connect the Calendar selectEvent to the Layout Manager.


1	cal = new YAHOO.widget.Calendar(el);
2	cal.selectEvent.subscribe(function(ev, args) {
3	var d = args[0][0];
4	layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
5	});
6	cal.render();
	view plain \| print \| ?

Now the top unit's header will be updated with the selected date of the Calendar and the Editor will be enabled.

From here, we will set up some pseudo code for saving and storing the data entered on each date selection.

Basically the code below does the following:

When a date is selected, set the var dateSelected to the date.
Then select that date
If the object editorData contains a key matching this date, update the Editor's content with the value.
If the var dateSelected was already set, do this:
- Update the body of the bottom unit with an animated image and status message.
- Save the Editor HTML to a var html
- Add a key to editorData for the date and assign its value to the html from the Editor.
- Fire the Connection Manager request to save the data (this example doesn't do that).
- Clear the Editor's content.


1	cal = new YAHOO.widget.Calendar(el);
2	cal.selectEvent.subscribe(function(ev, args) {
3	if (dateSelected) {
4	//Connection Manager
5	layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
6	var html = editor.getEditorHTML();
7	var url = 'assets/post4.php?html=' + html;
8	editorData[dateSelected] = html;
9	conn = YAHOO.util.Connect.asyncRequest('POST', url, {
10	success: function() {
11	layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
12	},
13	failure: function() {
14	}
15	});
16	editor.setEditorHTML(' ');
17	}
18	var d = args[0][0];
19	dateSelected = d[1] + '/' + d[2] + '/' + d[0];
20	layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
21	if (dateSelected && editorData[dateSelected]) {
22	editor.setEditorHTML(editorData[dateSelected]);
23	}
24
25	var dates = [dateSelected];
26	for (var i in editorData) {
27	dates[dates.length] = i;
28	}
29	cal.cfg.setProperty('selected', dates.join(','));
30	cal.render();
31	});
32	cal.render();
	view plain \| print \| ?

cal = new YAHOO.widget.Calendar(el);
cal.selectEvent.subscribe(function(ev, args) {
    if (dateSelected) {
        //Connection Manager
        layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
        var html = editor.getEditorHTML();
        var url = 'assets/post4.php?html=' + html;
        editorData[dateSelected] = html;
        conn = YAHOO.util.Connect.asyncRequest('POST', url, {
            success: function() {
                layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
            },
            failure: function() {
            }
        });
        editor.setEditorHTML(' ');
    }
    var d = args[0][0];
    dateSelected = d[1] + '/' + d[2] + '/' + d[0];
    layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
    if (dateSelected && editorData[dateSelected]) {
        editor.setEditorHTML(editorData[dateSelected]);
    }

var dates = [dateSelected];
    for (var i in editorData) {
        dates[dates.length] = i;
    }
    cal.cfg.setProperty('selected', dates.join(','));
    cal.render();
});
cal.render();

Full Example Source


1	(function() {
2	var Dom = YAHOO.util.Dom,
3	Event = YAHOO.util.Event,
4	layout = null,
5	cal = null,
6	editor = null,
7	conn = null,
8	panel = null,
9	dateSelected = null,
10	editorData = {};
11
12	panel = new YAHOO.widget.Panel('demo', {
13	width: '700px',
14	underlay: 'none',
15	close: false,
16	xy: [100, 100]
17	});
18	panel.setHeader('Editor');
19	panel.setBody('<div id="layout"></div>');
20	panel.renderEvent.subscribe(function() {
21	Event.onAvailable('layout', function() {
22	layout = new YAHOO.widget.Layout('layout', {
23	height: 400,
24	units: [
25	{ position: 'top', height: 25, header: 'Date Editor', gutter: '2' },
26	{ position: 'left', width: 205, body: '', gutter: '0 5 0 2' },
27	{ position: 'bottom', height: 25, id: 'status', body: 'Status', gutter: '2' },
28	{ position: 'center', body: 'Select a date..', gutter: '0 2 0 0' }
29	]
30	});
31
32	layout.on('render', function() {
33	var c = layout.getUnitByPosition('center');
34	c.set('body', '<textarea id="caleditor"></textarea>');
35	editor = new YAHOO.widget.SimpleEditor('caleditor', {
36	height: '305px',
37	width: c.get('width') + 'px',
38	dompath: false,
39	animate: false,
40	focusAtStart: true,
41	toolbar: {
42	grouplabels: false,
43	buttons: [
44	{ group: 'textstyle', label: 'Font Style',
45	buttons: [
46	{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
47	menu: [
48	{ text: 'Arial', checked: true },
49	{ text: 'Arial Black' },
50	{ text: 'Comic Sans MS' },
51	{ text: 'Courier New' },
52	{ text: 'Lucida Console' },
53	{ text: 'Tahoma' },
54	{ text: 'Times New Roman' },
55	{ text: 'Trebuchet MS' },
56	{ text: 'Verdana' }
57	]
58	},
59	{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
60	{ type: 'separator' },
61	{ type: 'push', label: 'Bold', value: 'bold' },
62	{ type: 'push', label: 'Italic', value: 'italic' },
63	{ type: 'push', label: 'Underline', value: 'underline' },
64	{ type: 'separator' },
65	{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
66	{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
67	]
68	}
69	]
70	}
71	});
72	editor.on('editorContentLoaded', function() {
73	var d = new Date();
74	var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
75	dateSelected = [today];
76	layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
77	cal.cfg.setProperty('selected', today);
78	cal.render();
79	});
80	editor.render();
81	var l = layout.getUnitByPosition('left');
82	var el = document.createElement('div');
83	l.body.appendChild(el);
84	cal = new YAHOO.widget.Calendar(el);
85	cal.selectEvent.subscribe(function(ev, args) {
86	if (dateSelected) {
87	//Connection Manager
88	layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
89	var html = editor.getEditorHTML();
90	var url = 'assets/post4.php?html=' + html;
91	editorData[dateSelected] = html;
92	conn = YAHOO.util.Connect.asyncRequest('POST', url, {
93	success: function() {
94	layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
95	},
96	failure: function() {
97	}
98	});
99	editor.setEditorHTML(' ');
100	}
101	var d = args[0][0];
102	dateSelected = d[1] + '/' + d[2] + '/' + d[0];
103	layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
104	if (dateSelected && editorData[dateSelected]) {
105	editor.setEditorHTML(editorData[dateSelected]);
106	}
107
108	var dates = [dateSelected];
109	for (var i in editorData) {
110	dates[dates.length] = i;
111	}
112	cal.cfg.setProperty('selected', dates.join(','));
113	cal.render();
114	});
115	cal.render();
116	});
117	layout.render();
118	});
119	});
120	panel.render(document.body);
121	resize = new YAHOO.util.Resize('demo', {
122	handles: ['br'],
123	autoRatio: true,
124	status: true,
125	proxy: true,
126	useShim: true,
127	minWidth: 700,
128	minHeight: 400
129	});
130	resize.on('resize', function(args) {
131	var h = args.height;
132	var hh = this.header.clientHeight;
133	var padding = ((10 * 2) + 2); //Sam's skin applied a 10px padding and a 1 px border to the element..
134	var bh = (h - hh - padding);
135	Dom.setStyle(this.body, 'height', bh + 'px');
136	layout.set('height', bh);
137	layout.set('width', (args.width - padding));
138	layout.resize();
139
140	//Editor Resize
141	var th = (editor.toolbar.get('element').clientHeight + 2); //It has a 1px border..
142	var eH = (h - th);
143	editor.set('width', args.width + 'px');
144	editor.set('height', eH + 'px');
145	}, panel, true);
146	resize.on('endResize', function() {
147	//Fixing IE's calculations
148	this.innerElement.style.height = '';
149	//Focus the Editor so they can type.
150	editor._focusWindow();
151	}, panel, true);
152
153	})();
	view plain \| print \| ?

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        layout = null,
        cal = null,
        editor = null,
        conn = null,
        panel = null,
        dateSelected = null,
        editorData = {};

panel = new YAHOO.widget.Panel('demo', {
        width: '700px',
        underlay: 'none',
        close: false,
        xy: [100, 100]
    });
    panel.setHeader('Editor');
    panel.setBody('<div id="layout"></div>');
    panel.renderEvent.subscribe(function() {
        Event.onAvailable('layout', function() {
            layout = new YAHOO.widget.Layout('layout', {
                height: 400,
                units: [
                    { position: 'top', height: 25, header: 'Date Editor', gutter: '2' },
                    { position: 'left', width: 205, body: '', gutter: '0 5 0 2' },
                    { position: 'bottom', height: 25, id: 'status', body: 'Status', gutter: '2' },
                    { position: 'center', body: 'Select a date..', gutter: '0 2 0 0' }
                ]
            });
            
            layout.on('render', function() {
                var c = layout.getUnitByPosition('center');
                c.set('body', '<textarea id="caleditor"></textarea>');
                editor = new YAHOO.widget.SimpleEditor('caleditor', {
                    height: '305px',
                    width: c.get('width') + 'px',
                    dompath: false,
                    animate: false,
                    focusAtStart: true,
                    toolbar: {
                        grouplabels: false,
                        buttons: [
                            { group: 'textstyle', label: 'Font Style',
                                buttons: [
                                    { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                                        menu: [
                                            { text: 'Arial', checked: true },
                                            { text: 'Arial Black' },
                                            { text: 'Comic Sans MS' },
                                            { text: 'Courier New' },
                                            { text: 'Lucida Console' },
                                            { text: 'Tahoma' },
                                            { text: 'Times New Roman' },
                                            { text: 'Trebuchet MS' },
                                            { text: 'Verdana' }
                                        ]
                                    },
                                    { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                                    { type: 'separator' },
                                    { type: 'push', label: 'Bold', value: 'bold' },
                                    { type: 'push', label: 'Italic', value: 'italic' },
                                    { type: 'push', label: 'Underline', value: 'underline' },
                                    { type: 'separator' },
                                    { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                                    { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                                ]
                            }
                        ]
                    }
                });
                editor.on('editorContentLoaded', function() {
                    var d = new Date();
                    var today = d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
                    dateSelected = [today];
                    layout.getUnitByPosition('top').set('header', 'Editing Date: ' + today);
                    cal.cfg.setProperty('selected', today);
                    cal.render();
                });
                editor.render();
                var l = layout.getUnitByPosition('left');
                var el = document.createElement('div');
                l.body.appendChild(el);
                cal = new YAHOO.widget.Calendar(el);
                cal.selectEvent.subscribe(function(ev, args) {
                    if (dateSelected) {
                        //Connection Manager
                        layout.getUnitByPosition('bottom').set('body', '<img src="assets/progress.gif"> Sending Data...');
                        var html = editor.getEditorHTML();
                        var url = 'assets/post4.php?html=' + html;
                        editorData[dateSelected] = html;
                        conn = YAHOO.util.Connect.asyncRequest('POST', url, {
                            success: function() {
                                layout.getUnitByPosition('bottom').set('body', 'Data Saved..');
                            },
                            failure: function() {
                            }
                        });
                        editor.setEditorHTML(' ');
                    }
                    var d = args[0][0];
                    dateSelected = d[1] + '/' + d[2] + '/' + d[0];
                    layout.getUnitByPosition('top').set('header', 'Editing Date: ' + d[1] + '/' + d[2] + '/' + d[0]);
                    if (dateSelected && editorData[dateSelected]) {
                        editor.setEditorHTML(editorData[dateSelected]);
                    }

//Editor Resize
        var th = (editor.toolbar.get('element').clientHeight + 2); //It has a 1px border..
        var eH = (h - th);
        editor.set('width', args.width + 'px');
        editor.set('height', eH + 'px');
    }, panel, true);
    resize.on('endResize', function() {
        //Fixing IE's calculations
        this.innerElement.style.height = '';
        //Focus the Editor so they can type.
        editor._focusWindow();
    }, panel, true);
    
})();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.