sandbox/event/test_widget_render_event_indented.html

	test_widget_render_event_indented.html revision 9cdb1aa8d3a7901f789c2ad7a6ea00e804a9abeb
<!DOCTYPE html>

<html>
	<head>
		<title>Testing the widget:render event</title>
        <style>
            .yui-skin-sam .yui-console .yui-console-entry {
                padding:2px;
                margin:0px;
                min-height:0;
            }
        </style>
	</head>

	<body class="yui-skin-sam">
		<h1>Testing the widget:render event</h1>
		<div id="container"></div>

		<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
		<script type="text/javascript">

			YUI.add('mywidget', function(Y){

				var MyWidget;

				MyWidget = function (config) {
					MyWidget.superclass.constructor.apply(this, arguments);
				};

				Y.mix(MyWidget, {
					NAME : 'mywidget'
				});

				Y.extend(MyWidget, Y.Widget, {

					renderUI : function () {
						var contentBox = this.get('contentBox');
						contentBox.append('<p>MyWidget\'s rendered text<\/p>');
						Y.log("[SRC, RENDER, DEF_BEHAVIOR]" + ' mywidget.renderUI appended the contentBox', 'info');
					}

				});

				Y.MyWidget = MyWidget;

			}, '3.0.0', { requires: ['widget'] });
		</script>
		<script type="text/javascript">

			YUI({
				filter		: 'raw',

				modules		: {
					'mywidget'	: {
						type		: 'js',
						fullpath	: '',
						requires	: ['widget']
					}
				}

			}).use('mywidget', 'console', 'dump', function(Y){

                (new Y.Console({
                    newestOnTop : false,
                    width:"45em",
                    height:"30em",
                    entryTemplate: '<pre class="{entry_class} {cat_class} {src_class}">{message}</pre>'
                }).render());

                var tab = "    ";

				Y.on('mywidget:render', function(e){
					Y.log(tab + "[BUBBLE, RENDER, ON]" + ' Y.on mywidget:render was passed: '+Y.dump(e.parentNode.get("id")), 'info');
				});

				Y.after('mywidget:render', function(e){
					Y.log( tab + "[BUBBLE, RENDER, AFTER]" + ' Y.after mywidget:render was passed: '+Y.dump(e.parentNode.get("id")), 'info');
				});

                Y.on('mywidget:renderedChange', function(e){
                    Y.log(tab + tab + "[BUBBLE, RENDEREDCHANGE, ON]" + ' Y.on mywidget:renderedChange was passed: '+ Y.dump(e.newVal), 'info');
                });

				Y.after('mywidget:renderedChange', function(e){
					Y.log(tab + tab + "[BUBBLE, RENDEREDCHANGE, AFTER]" + ' Y.after mywidget:renderedChange was passed: '+ Y.dump(e.newVal), 'info');
				});

				// *** myWidget, a MyWidget instance *** //

				var myWidget = new Y.MyWidget({
					on : {
						render : function(e) {
                            Y.log("[SRC, RENDER, ON]" + ' mywidget.on render was passed: '+ Y.dump(e.parentNode.get("id")), 'info');
						},

                        renderedChange: function(e) {
                            Y.log(tab + "[SRC, RENDEREDCHANGE, ON]" + ' mywidget.on renderedChange was passed: '+ Y.dump(e.newVal), 'info');
                        }
					},

					after	: {
						render : function (e) {
                            Y.log("[SRC, RENDER, AFTER]" + ' mywidget.after render was passed: '+ Y.dump(e.parentNode.get("id")), 'info');
						},

                        renderedChange: function(e) {
                            Y.log(tab + "[SRC, RENDEREDCHANGE, AFTER]" + ' mywidget.on renderedChange was passed: '+ Y.dump(e.newVal), 'info');
                        }
					}
				});

				myWidget.addTarget(Y);
				myWidget.render('#container');

			});

		</script>

	</body>
</html>