[ng-dhtml] [Dojo-checkins] cal - r1909 - in trunk: src/widget tests/widget

Bill Keese bill at dojotoolkit.org
Wed Oct 26 00:16:41 CDT 2005


Hi Cal.  The problem now is that since LayoutPanePanel and 
SplitPanePanel descend from HtmlLayoutPane, they are classified as 
isContainer=true, which I think is really only valid if a widget ONLY 
contains other widgets, rather than a mixture of widgets and plain HTML 
DOM nodes. SplitPanePanel, for example, can contain a widget and/or 
plain HTML.

Also, HtmlLayoutPane::postCreate() does

        for(var i=0; i<this.children.length; i++){
            this.domNode.appendChild(this.children[i].domNode);

Again, this isn't valid if the the widget contains a mixture of 
sub-widgets and normal HTML objects, since at a minimum things will be 
put out-of-order.

Probably, there should be a separate base class that doesn't assume 
container or non-container.  What do you think?

dojo-checkins at dojotoolkit.org wrote:
> Author: cal
> Date: Tue Oct 25 19:31:51 2005
> New Revision: 1909
>
> Added:
>    trunk/tests/widget/test_SplitPane_2.html   (contents, props changed)
> Modified:
>    trunk/src/widget/HtmlLayoutPane.js
>    trunk/src/widget/HtmlSplitPane.js
> Log:
> descend split pane and split panels from the layout pane so we can lay stuff out easily. all existing layout tests still work apart from bill's test_Layout.html which is doing something special. new test added to show "hot nesting action!!!!"
>
> Modified: trunk/src/widget/HtmlLayoutPane.js
> ==============================================================================
> --- trunk/src/widget/HtmlLayoutPane.js	(original)
> +++ trunk/src/widget/HtmlLayoutPane.js	Tue Oct 25 19:31:51 2005
> @@ -231,9 +231,17 @@
>  	},
>  
>  	onResized: function(){
> +
> +		// layout our children
> +		// this will in turn call obj.onResized() for each child, so they can layout *their* children
> +
> +		this.layoutChildren();
> +
> +
>  		// If any of my children are widgets (ex: split pane),
>  		// then resize them.  TODO: what if my children are normal HTML objects but
>  		// my grandchildren (etc.) are widgets?
> +
>  		for(var child = dojo.dom.getFirstChildElement(this.domNode); child;
>  			child = dojo.dom.getNextSiblingElement(child) ) {
>  			if ( child.onResize ) {
>
> Modified: trunk/src/widget/HtmlSplitPane.js
> ==============================================================================
> --- trunk/src/widget/HtmlSplitPane.js	(original)
> +++ trunk/src/widget/HtmlSplitPane.js	Tue Oct 25 19:31:51 2005
> @@ -10,13 +10,14 @@
>  //
>  
>  dojo.require("dojo.widget.*");
> +dojo.require("dojo.widget.HtmlLayoutPane");
>  dojo.require("dojo.html");
>  dojo.require("dojo.style");
>  dojo.require("dojo.dom");
>  
>  dojo.widget.HtmlSplitPane = function(){
>  
> -	dojo.widget.HtmlWidget.call(this);
> +	dojo.widget.HtmlLayoutPane.call(this);
>  
>  	this.widgetType = "SplitPane";
>  
> @@ -55,7 +56,15 @@
>  		this.isActiveResize = (this.activeSizing == '1') ? 1 : 0;
>  	}
>  
> -	this.onResize = function(e) {
> +	this.layoutChildrenx = function(){
> +
> +		// do nothing!
> +	}
> +
> +	this.onResized = function(e){
> +
> +		//dojo.widget.HtmlLayoutPane.onResized.call(this);
> +
>  		this.paneWidth = dojo.style.getContentWidth(this.domNode);
>  		this.paneHeight = dojo.style.getContentHeight(this.domNode);
>  		this.layoutPanels();
> @@ -122,16 +131,16 @@
>  		// size the panels once the browser has caught up
>  		//
>  
> -		var h3 = (function(){ return function(){ self.onResize(); } })();
> +		var h3 = (function(){ return function(){ self.onResized(); } })();
>  		window.setTimeout(h3, 0);
>  		
>  		//
>  		// Handle resize events due to window resizing and/or resize commands
>  		// from my container.
>  		//
> -		dojo.event.connect(this.domNode, "onresize", this, "onResize");
> -		dojo.addOnLoad(this, "onResize");
> -		dojo.event.connect(window, "onresize", this, "onResize");
> +		dojo.event.connect(this.domNode, "onresize", this, "onResized");
> +		dojo.addOnLoad(this, "onResized");
> +		dojo.event.connect(window, "onresize", this, "onResized");
>  	}
>  
>  
> @@ -514,7 +523,7 @@
>  
>  dojo.widget.HtmlSplitPanePanel = function(){
>  
> -	dojo.widget.HtmlWidget.call(this);
> +	dojo.widget.HtmlLayoutPane.call(this);
>  
>  	this.widgetType = "SplitPanePanel";
>  	this.sizeActual = 0;
> @@ -534,22 +543,10 @@
>  		var frag = parser.parseElement(input, null, true);
>  		var ary = dojo.widget.getParser().createComponents(frag);
>  	}
> -
> -	this.onResized = function() {
> -		// If any of my children are widgets (ex: split pane inside of a split pane),
> -		// then resize them.  (TODO: what if my children are normal HTML objects but
> -		// my grandchildren (etc.) are widgets?)
> -		for(var child = dojo.dom.getFirstChildElement(this.domNode); child;
> -			child = dojo.dom.getNextSiblingElement(child) ) {
> -			if ( child.onresize ) {
> -				child.onresize();
> -			}
> -		}
> -	}
>  }
>  
> -dojo.inherits(dojo.widget.HtmlSplitPane, dojo.widget.HtmlWidget);
> -dojo.inherits(dojo.widget.HtmlSplitPanePanel, dojo.widget.HtmlWidget);
> +dojo.inherits(dojo.widget.HtmlSplitPane, dojo.widget.HtmlLayoutPane);
> +dojo.inherits(dojo.widget.HtmlSplitPanePanel, dojo.widget.HtmlLayoutPane);
>  
>  dojo.widget.tags.addParseTreeHandler("dojo:SplitPane");
>  dojo.widget.tags.addParseTreeHandler("dojo:SplitPanePanel");
>
> Added: trunk/tests/widget/test_SplitPane_2.html
> ==============================================================================
> --- (empty file)
> +++ trunk/tests/widget/test_SplitPane_2.html	Tue Oct 25 19:31:51 2005
> @@ -0,0 +1,73 @@
> +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> +<html>
> +<head>
> +
> +<title>SplitPane Widget Demo</title>
> +
> +<script type="text/javascript">
> +
> +	var djConfig = {isDebug: true };
> +
> +</script>
> +<script type="text/javascript" src="../../dojo.js"></script>
> +<script language="JavaScript" type="text/javascript">
> +
> +	dojo.require("dojo.widget.HtmlLayoutPane");
> +	dojo.require("dojo.widget.HtmlSplitPane");
> +	dojo.hostenv.writeIncludes();
> +</script>
> +</head>
> +<body style="padding: 50px;">
> +
> +<p>HTML before</p>
> +<p>HTML before</p>
> +<p>HTML before</p>
> +
> +<div dojoType="SplitPane"
> +	orientation="vertical"
> +	sizerWidth="5"
> +	activeSizing="1"
> +	style="border: 2px solid black; width: 700px; height: 400px;"
> +>
> +	<div dojoType="SplitPanePanel" sizeMin="60" sizeShare="1">
> +
> +		woo
> +
> +	</div>
> +
> +	<div dojoType="SplitPanePanel" sizeMin="100" sizeShare="3">
> +
> +		<div dojoType="SplitPane"
> +			orientation="horizontal"
> +			sizerWidth="5"
> +			activeSizing="1"
> +			layoutAlign="client"
> +			style="border: 2px solid black;"
> +		>
> +
> +			<div dojoType="SplitPanePanel" sizeMin="100" sizeShare="80">
> +
> +				<div dojoType="LayoutPane" layoutAlign="right" style="background-color: #b39b86; padding: 8px;">
> +					right<br />bar
> +				</div>
> +
> +				<div dojoType="LayoutPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
> +					main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
> +				</div>
> +
> +			</div>
> +
> +			<div dojoType="SplitPanePanel" sizeMin="60" sizeShare="20">
> +				yay
> +			</div>
> +		</div>
> +	</div>
> +</div>
> +
> +
> +<p>HTML after</p>
> +<p>HTML after</p>
> +<p>HTML after</p>
> +
> +</body>
> +</html>
> _______________________________________________
> Dojo-checkins mailing list
> Dojo-checkins at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-checkins
>   




More information about the NG-DHTML mailing list