<html>
<head>
<title>FloatingPane Widget Programatic Creation</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.FloatingPane");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.ComboBox");
dojo.require("dojo.widget.DebugConsole");
dojo.require("dojo.widget.TaskBar");
</script>
<script>
// description of parameters for floating pane
var paramDesc = [
//basic
{name: "widgetId", type: "string", value: ""},
{name: "title", type: "string", value: "Window"},
{name: "href", type: "string", value: "doc0.html"},
{name: "iconSrc", type: "image", values: ["images/note.gif", "images/flatScreen.gif", "images/openFolder.gif"] },
// hide/show
{name: "displayCloseAction", type: "boolean"},
{name: "displayMinimizeAction", type: "boolean"},
{name: "displayMaximizeAction", type: "boolean"},
{name: "toggle", type: "string", values: ["wipe", "fade", "explode"]},
{name: "toggleDuration", type: "number", value: 500},
{name: "taskBarId", type: "string", value: "mytaskbar"},
{name: "resizable", type: "boolean"},
{name: "windowState", type: "string", values: ["normal", "minimized", "maximized"]},
// appearance
{name: "hasShadow", type: "boolean"}
];
// must also specify size/position parameters
var sizeDesc = [
{name: "top", type: "string", value: "100px"},
{name: "left", type: "string", value: "200px"},
{name: "width", type: "string", value: "400px"},
{name: "height", type: "string", value: "300px"}
];
// creates a form for setting the parameters in descriptor
function makeTable(descriptor){
// make table of parameters
var text = "";
dojo.lang.forEach(descriptor, function(item){
text += "<tr><td>" + item.name + "</td><td>";
var values = item.type=="boolean" ? [true, false] : item.values;
if(values){
dojo.lang.forEach(values, function(val){
text += "<input type='radio' name='" + item.name + "' value='" + val + "'> " +
((item.type=="image" && val != "none") ? "<img src='"+val+"'>" : val);
});
}else{
text += "<input id='" + item.name + "' name='" + item.name + "' value='" + (item.value||"") + "'>";
}
text += "</td></tr>";
});
return "<table class='params'>"+text+"</table>";
}
// Runs on page load
function init(){
// Fill in tables with parameters the user can set
var form = dojo.byId("params");
form.innerHTML= makeTable(paramDesc);
var sizeForm = dojo.byId("size");
sizeForm.innerHTML= makeTable(sizeDesc);
}
dojo.addOnLoad(init);
// return all the values in the given form as name/value pairs
// (see also dojo.io.encodeForm)
function serializeForm(formNode, description){
formNode=dojo.byId(formNode);
var params = {};
for(var i = 0; i < formNode.elements.length; i++){
var elm = formNode.elements[i];
if(elm.type=="checkbox"){
params[elm.name]= elm.checked ? true : false;
}else if(elm.type=="radio"){
if(elm.checked){
switch(elm.value){
case "true":
params[elm.name]=true;
break;
case "false":
params[elm.name]=false;
break;
default:
params[elm.name]=elm.value;
}
}
}else{
if(elm.value!=""){
if(/^[0-9]*$/.test(elm.value)){
params[elm.name]=parseInt(elm.value);// convert from string --> number
}else{
params[elm.name]=elm.value;
}
}
}
}
return params;
}
// Make a floating pane according to user set parameters
var cnt=0;
function makePane(){
// get parameters for this floating pane (as json object)
var params = serializeForm("params");
dojo.debug("Making pane w/parameters:");
for(var p in params){ dojo.debug(" " + p + ": " + params[p]); }
// get size for floating pane, and setup dummy div to hold it
var size = serializeForm("size");
var div=document.createElement("div");
div.style.position="absolute";
div.innerHTML="Initial <i>dummy</i> <b>div</b> contents";
document.body.appendChild(div); // this didn't used to be necessary ?!
for(var s in size){
div.style[s] = size[s];
}
dojo.debug("Sizing div CSS: " + div.style.cssText);
// make the widget
var widget = dojo.widget.createWidget("FloatingPane", params, div);
// pop-up a window so we can see what we created
if( dojo.byId("debug").checked ){
dojo.debugDeep(widget);
}
dojo.debug("**Created widget " + widget.widgetId);
// change the title for next time
dojo.byId("title").value="Window #" + (++cnt+1);
// setup so we can test methods on this div
dojo.byId("id").value=widget.widgetId;
}
// Return current (most recently created) widget
function currentPane(){
var widgetId = dojo.byId("id").value;
return dojo.widget.byId(widgetId);
}
</script>
<style>
html, body {
height: 100%;
width: 100%;
}
#params, #size {
background: #eeeeee; border: solid black 3px;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>FloatingPane Widget Programatic Creation</h1>
<!-- the above code will fill in these divs -->
<div dojoType="TabContainer" style="width: 100%; height: 70%">
<div dojoType="ContentPane" label="Create">
<table valign=top id="creator">
<tr><td><h3>Parameters</h3></td><td><h3>Sizing</h3></td></tr>
<tr>
<td>
<form id="params"></form>
</td>
<td valign=top>
<form id="size"></form>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<button onClick="makePane();">Create</button>
<input type="checkbox" id="debug"> Debug widget
</td>
</table>
</div>
<div id="methods" dojoType="ContentPane" label="Methods">
<h3>Method call tests:</h3>
<table>
<tr>
<td>Id:</td>
<td><input id="id"></td>
</tr>
<tr>
<td>Content/URL:</td>
<td><textarea id="content" cols=70 rows=4>Type content or a URL in here. <b>OK?</b></textarea></td>
</tr>
</table>
<br>
<div align=center>
<button onclick="currentPane().destroy();">destroy()</button>
<button onclick="currentPane().show();">show()</button>
<button onclick="currentPane().hide();">hide()</button>
<button onclick="currentPane().setUrl(dojo.byId('content').value);">setUrl()</button>
<button onclick="currentPane().setContent(dojo.byId('content').value);">setContent()</button>
</div>
</div>
</div>
<div dojoType="DebugConsole" title="Debug output"
style="position: absolute; width: 300px; height: 300px; right: 50px; top: 300px;">
</div>
<div dojoType="TaskBar" id="mytaskbar" hasShadow="true" resizable="false";
style="width: 90%; height: 72px;margin: 0px; padding:0px; bottom: 30px; left: 5%; overflow: hidden;">
</div>
</body>
</html>