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.
227 lines
6.6 KiB
227 lines
6.6 KiB
2 years ago
|
<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>
|