Dijit Layout with HTML 5 convas

headers felixgers | 27 Jun 2012 11:06 · /containerNode/

Hello,

for a computer-graphics demo I embedded a HTML 5 canvas into
a dijit border layout with the canvas in the center contentPane and another
contentPane for controls. The aonvas should use the entire space within 
the center pane and it should resize well without scrollbars. For
positioning
in the canvas I need its current size. What I came up with, is the following
(except I do not know how to capture resize events):

html (start calls the init of the layout.js):
...
	<body class="claro">

	</body>
css: 
....
  #canvas {
	border: 1px solid black;
	background-color: #fafaff;
	position:relative;
	text-align:center;
	width : 100%;
	height : 100%;
}

layout.js (including comments with alternative solutions):
....
	function init() {

		// Create the top div container and append it to the HTML body.
		var body = dojo.body();
		var appLayoutDiv = domConstruct.create("div", {id : "appLayout",
"class":"appLayout"}, body);

		// Create a BorderContainer and attach it to the top appLayout div.
		var appLayout = new BorderContainer({
			design : "headline"
		}, "appLayout");

		// Create content panes within the border container.
		var headerPane = new ContentPane({
        region: "top",
        "class": "edgePanel",
        content: "COG1 Rendering Pipeline"
    	});
    	appLayout.addChild(headerPane);

		// infoPane = new ContentPane({
        // region: "left",
        // "class": "edgePanel",
        // //content: "help"
    	// });		
    	// appLayout.addChild(infoPane);

		helpPane = new ContentPane({
        region: "bottom",
        "class": "edgePanel"
        //content: "help"
    	});		
    	appLayout.addChild(helpPane);

		controlsPane = new ContentPane({
        region: "right",
        "class": "edgePanel"
        //content: "controls"
    	});		
    	appLayout.addChild(controlsPane);

		canvasPane = new ContentPane({
        region: "center",
        "class": "centerPanel"
        //content: "canvas"
    	});		
    	appLayout.addChild(canvasPane);
    	// Give the canvas a pane a custom resize.

		// Now that the basic layout exists, init the GUI.
		ui.init();

		// start up widgets and do layout.
		appLayout.startup();

		//debugger;

		// Create a canvas for the scene.
		// Resize canvas to size of center region.
		// Deduce some small value to avoid scroll bars.
		// The sizes are set directly in the pane and its domNode and its
containerNode:
		// .domNode.scrollWidth;//w
;//containerNode//domNode.style.width//clientHeight;//.containerNode.clientWidth;
		// .domNode.scrollHeight;//h
;//domNode.style.height;//.containerNode.clientHeight;
		//var canvasWidth = canvasPane.w - 25;
		//var convasHeight = canvasPane.h - 25 ;
		//console.log("canvas width x height:"+canvasWidth+" x "+convasHeight);
		var canvas = domConstruct.create("canvas", {
			id : "canvas",
			// use dynamic canvas size from center container.
			//⁄width : canvasWidth,//800,
			//height : convasHeight,//500
			className : "canvas",
		}, canvasPane.domNode, "first");
		canvas.width = canvas.clientWidth;
		canvas.height = canvas.clientHeight;

	}

My questions are: Is this is the way to implement this? and how can I react
to resizes of the page,
and pass the current width/height to the canvas?

Thx,
 Felix Gers
.

--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Dijit-Layout-with-HTML-5-convas-tp3987089.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

Dojo-interest <at> mail.dojotoolkit.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest