You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
6.6 KiB
226 lines
6.6 KiB
<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>
|
|
|