JavaScript DHTML/SmartClient/SmartClient Controls
Содержание
Component reuse
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> // Define the SimplePortlet class, extending from VLayout // ------------------------------------------------------ isc.defineClass("SimplePortlet", "VLayout"); isc.SimplePortlet.addProperties({
defaultWidth:250, defaultHeight:200,
canDragResize:true, minWidth:150, minHeight:100,
headerMargin:2, headerHeight:23,
showEdges:true,
// use CSS style names to allow CSS-based skinning
styleName:"portletBackground",
headerStyleName:"portletHeader",
titleStyleName:"portletTitle",
// at init, create subcomponents
initWidget : function () {
this.Super("initWidget", arguments);
// store a reference to created components in order to
// call methods on them later
this.headerLabel = isc.Label.create({
contents: this.title, wrap:false,
styleName: this.titleStyleName,
overflow:"hidden", width:"*",
canDragReposition:true,
dragTarget:this
});
this.header = isc.HLayout.create({
// pass properties through to create configurability
height:this.headerHeight,
layoutMargin:this.headerMargin,
styleName:this.headerStyleName,
members : [
this.headerLabel,
isc.ImgButton.create({
// use special path prefixes to allow image skinning
src : "[SKIN]Window/close.png", width:18, height:18,
layoutAlign:"center",
// create interactivity by passing a reference
// to the creating component, so subcomponents
// can call methods on their creator
portlet: this, click:"this.portlet.hide()"
})
]
});
// build up the layout programmatically by adding
// components as members
this.addMember(this.header);
this.addMember(isc.HTMLFlow.create({
contents : this.portletContents, padding: 5,
height:"*"
// pass a properties object through to
// create complete configurability
}, this.contentProperties));
// allow additional components to be added
if (this.customFooter) this.addMembers(this.customFooter);
},
// provide dynamic updates by calling methods on subcomponents
setHeaderTitle : function (newTitle) {
this.headerLabel.setContents(newTitle);
}
}); // Use the newly defined component // -------------------------------------------------- isc.SimplePortlet.create({
title:"Creating new components",
portletContents:
"This portlet is an instance of the "SimplePortlet"" +
" custom component created in this example" +
"To creating new, reusable SmartClient components," +
" simply construct subcomponents at initialization."
});
isc.SimplePortlet.create({
title:"Configurable components",
portletContents:
"This is also an instance of the "SimplePortlet"" +
" with customized appearance<P>" +
"To make components configurable, just pass " +
"properties through to subcomponents.",
left:300, height:300,
contentProperties : { padding:5, backgroundColor:"lightblue" },
customFooter : isc.Label.create({
contents:"Status: OK",
height:22, padding:3,
border:"1px solid black", backgroundColor:"#CCCCCC"
})
});
isc.SimplePortlet.create({
ID:"dynamicWindow",
title:"Dynamic components",
top:350,
portletContents:
"The form to the right will change the title of this " +
"portlet by calling the custom method setHeaderTitle()<P>" +
"To make components dynamic, create methods " +
"that change properties on subcomponents."
});
isc.DynamicForm.create({
ID:"setTitleForm",
left:260, top:350,
fields : [
{ name:"title", type:"text", showTitle:false, defaultValue:"[Enter new title]" },
{ type:"button", title:"Set Title",
click:"dynamicWindow.setHeaderTitle(setTitleForm.getValue("title"))" }
]
});
</SCRIPT>
</BODY>
</HTML>
</source>
Move object by offset
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.IButton.create({
ID:"van", title:"obj", left:50, top:50, width:96, height:96, src:""
}) isc.IButton.create({
title :"left", width:48, height:48, showRollOver:true, click:"van.moveTo(50,50)"
}) isc.IButton.create({
title:"right", left:50, width:48, height:48, showRollOver:true, mouseStillDown:"van.moveBy(20,20)"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Move to front/back to a layer
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"red", left:50, top:75, width:100, height:100, backgroundColor:"red"
}); Canvas.create({
ID:"green", left:100, top:125, width:100, height:100, backgroundColor:"green"
});
Canvas.create({
ID:"blue", left:150, top:175, width:100, height:100, backgroundColor:"blue"
}); Canvas.create({
ID:"widget", left:200, top:225, width:100, height:100, backgroundColor:"khaki", contents:"widget
(drag me)", canDragReposition:true, dragAppearance:"target"
});
// // buttons to manipulate the above // Button.create({ left:350, top:75, width:175, height:30,
title:"widget.bringToFront()",click:"widget.bringToFront()"
});
Button.create({ left:350, top:125, width:175, height:30,
title:"widget.sendToBack()", click:"widget.sendToBack()"
});
Button.create({ left:350, top:175, width:175, height:30,
title:"widget.moveAbove(green)", click:"widget.moveAbove(green)"
});
Button.create({ left:350, top:225, width:175, height:30,
title:"widget.moveBelow(green)", click:"widget.moveBelow(green)"
}); </SCRIPT> </BODY> </HTML>
</source>
Position the widgets
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"widget", left:200, top:225, width:100, height:100, overflow:"hidden", backgroundImage:"http://www.wbex.ru/style/logo.png"
});
// -------------------------------------------------- // top move/grow/shrink buttons // -------------------------------------------------- Button.create({ left:150, top:75, width:50, height:50, title:"Move",
//mouseStillDown:function(){widget.setTop(widget.getTop()-20)}
mouseStillDown:function(){widget.moveBy(0,-20)}
}); Button.create({ left:225, top:75, width:50, height:50, title:"Grow",
//mouseStillDown:function(){widget.setRect(null, widget.getTop()-20, null, widget.getHeight()+20)}
mouseStillDown:function(){widget.moveBy(0,-20); widget.resizeBy(0,20);}
}); Button.create({ left:300, top:75, width:50, height:50, title:"Shrink",
//mouseStillDown:function(){widget.setRect(null, widget.getHeight() > 0 ? widget.getTop()+20 : null, null, Math.max(widget.getHeight()-20,0))}
mouseStillDown:function(){widget.moveBy(0, widget.getHeight() > 0 ? 20 : 0); widget.setHeight(Math.max(widget.getHeight()-20,0));}
});
// -------------------------------------------------- // bottom move/grow/shrink buttons // -------------------------------------------------- Button.create({ left:150, top:425, width:50, height:50, title:"Move",
//mouseStillDown:function(){widget.setTop(widget.getTop()+20)}
mouseStillDown:function(){widget.moveBy(0,20)}
}); Button.create({ left:225, top:425, width:50, height:50, title:"Grow",
//mouseStillDown:function(){widget.setBottom(widget.getBottom()+20);}
mouseStillDown:function(){widget.resizeBy(0,20)}
}); Button.create({ left:300, top:425, width:50, height:50, title:"Shrink",
//mouseStillDown:function(){widget.setBottom(Math.max(widget.getBottom()-20,widget.getTop()));}
mouseStillDown:function(){widget.setHeight(Math.max(widget.getHeight()-20,0))}
});
// -------------------------------------------------- // left move/grow/shrink buttons // -------------------------------------------------- Button.create({ left:50, top:175, width:50, height:50, title:"Move",
//mouseStillDown:function(){widget.setLeft(widget.getLeft()-20)}
mouseStillDown:function(){widget.moveBy(-20,0)}
}); Button.create({ left:50, top:250, width:50, height:50, title:"Grow",
//mouseStillDown:function(){widget.setRect(widget.getLeft()-20, null, widget.getWidth()+20, null)}
mouseStillDown:function(){widget.moveBy(-20,0); widget.resizeBy(20,0);}
}); Button.create({ left:50, top:325, width:50, height:50, title:"Shrink",
//mouseStillDown:function(){widget.setRect(widget.getWidth() > 0 ? widget.getLeft()+20 : null, null, Math.max(widget.getWidth()-20,0), null)}
mouseStillDown:function(){widget.moveBy(widget.getWidth() > 0 ? 20 : 0, 0); widget.setWidth(Math.max(widget.getWidth()-20,0));}
});
// -------------------------------------------------- // right move/grow/shrink buttons // -------------------------------------------------- Button.create({ left:400, top:175, width:50, height:50, title:"Move",
//mouseStillDown:function(){widget.setLeft(widget.getLeft()+20)}
mouseStillDown:function(){widget.moveBy(20,0)}
}); Button.create({ left:400, top:250, width:50, height:50, title:"Grow",
//mouseStillDown:function(){widget.setRight(widget.getRight()+20);}
mouseStillDown:function(){widget.resizeBy(20,0)}
}); Button.create({ left:400, top:325, width:50, height:50, title:"Shrink",
//mouseStillDown:function(){widget.setRight(Math.max(widget.getRight()-20,widget.getLeft()));}
mouseStillDown:function(){widget.setWidth(Math.max(widget.getWidth()-20,0))}
});
</SCRIPT> </BODY> </HTML>
</source>
Refernece object by ID
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.IButton.create({
ID:"van", title:"obj", left:50, top:50, width:96, height:96, src:""
}) isc.IButton.create({
title :"left", width:48, height:48, showRollOver:true, click:"van.moveTo(50,50)"
}) isc.IButton.create({
title:"right", left:50, width:48, height:48, showRollOver:true, mouseStillDown:"van.moveBy(20,20)"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Show/hide a control
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({
ID:"textbox", align:"center", showEdges:true, padding:5, left:50, top:50, width:200, contents:"The future has a way of arriving unannounced.", visibility:"hidden"
}) isc.IButton.create({
title:"Show", left:40, click:"textbox.show();"
}) isc.IButton.create({
title:"Hide", left:160, click:"textbox.hide();"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Three level controls hierarchy and event propagation
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"topWidget",
left:50,
top:75,
width:300,
height:300,
contents:"top",
backgroundColor:"skyblue",
click:"return confirm("top received click event. Continue?")",
children:[
Canvas.create({
ID:"parentWidget",
autoDraw:false,
left:50,
top:50,
width:200,
height:200,
contents:"parent",
backgroundColor:"khaki",
click:"return confirm("parent received click event. Continue?")",
children:[
Canvas.create({
ID:"targetWidget",
autoDraw:false,
left:50,
top:50,
width:100,
height:100,
contents:"target",
backgroundColor:"lightgreen",
click:"return confirm("target received click event. Continue?")"
})
]
})
]
}); </SCRIPT> </BODY> </HTML>
</source>
Use isc namespace to eliminate the possibility of JS name collisions
<source lang="html4strict">
<HTML><HEAD> <SCRIPT>
var isc_useSimpleNames = false; var isomorphicDir = "isomorphic/";
</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_9.js <----------*/ // Step 9 // * use "isc" namespace to eliminate the possibility of JS name collisions isc.ClassFactory.defineClass("SimpleSlider", isc.Canvas);
isc.SimpleSlider.addClassProperties({
VERTICAL_SRC_PREFIX:"v", HORIZONTAL_SRC_PREFIX:"h", DOWN:"down", UP:"", ON:"", OFF:"off", EVENTNAME:"sliderMove"
});
isc.SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
this.setDisabled(this.disabled);
},
_createTrack : function () {
return isc.StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return isc.Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:isc.EventHandler.NONE,
cursor:isc.Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:isc.EventHandler.stopBubbling,
dragStop:"this.setState(isc.SimpleSlider.UP); return false",
mouseDown:"this.setState(isc.SimpleSlider.DOWN)",
mouseUp:"this.setState(isc.SimpleSlider.UP); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = isc.EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = isc.EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.SimpleSlider.EVENTNAME, this);
},
setValue : function (newValue) {
if (!isc.isA.Number(newValue)) return;
this.value = Math.max(0, Math.min(newValue, 1));
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.SimpleSlider.EVENTNAME, this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
},
setDisabled : function (disabled) {
this.Super("setDisabled",arguments);
if (!disabled) {
this._track.setState(isc.SimpleSlider.ON);
this._thumb.setState(isc.SimpleSlider.UP);
this._thumb.setCursor(isc.Canvas.HAND);
} else {
this._track.setState(isc.SimpleSlider.OFF);
this._thumb.setState(isc.SimpleSlider.OFF);
this._thumb.setCursor(isc.Canvas.DEFAULT);
}
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images isc.Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //-------------------------------------------------- isc.Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- isc.Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); isc.Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
); //-------------------------------------------------- // sliders //-------------------------------------------------- isc.SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); isc.SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- isc.Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
isc.Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
//-------------------------------------------------- // buttons to enable/disable sliders //-------------------------------------------------- isc.Button.create({
left:70, top:20, width:120, title:"Enable sliders", click:"vSlider.enable();hSlider.enable()"
});
isc.Button.create({
left:220, top:20, width:120, title:"Disable sliders", click:"vSlider.disable();hSlider.disable()"
});
</SCRIPT> </BODY> </HTML>
</source>
Widget attachment
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic containment and attachment example |
Isomorphic SmartClient |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
//
// widgets you manipulate on the page
//
// the big gray fields
Canvas.create({
ID:"P1", left:300, top:50, width:200, height:200, overflow:"hidden", canDragReposition:true, dragAppearance:"target", backgroundColor:"lightgrey", contents:"P1"
}); Canvas.create({
ID:"P2", left:550, top:50, width:200, height:200, overflow:"hidden", canDragReposition:true, dragAppearance:"target", backgroundColor:"lightslategray", contents:"P2"
});
// the smaller colored boxes Canvas.create({
ID:"M1", left:75, top:100, width:50, height:50, canDragReposition:true, dragAppearance:"target", backgroundColor:"khaki", contents:"M1"
}); Canvas.create({
ID:"A1", left:25, top:50, width:50, height:50, canDragReposition:true, dragAppearance:"target", backgroundColor:"lightseagreen", contents:"A1"
}); Canvas.create({
ID:"A2", left:125, top:50, width:50, height:50, canDragReposition:true, dragAppearance:"target", backgroundColor:"lightskyblue", contents:"A2"
}); Canvas.create({
ID:"B1", left:25, top:150, width:50, height:50, canDragReposition:true, dragAppearance:"target", backgroundColor:"lightsalmon", contents:"B1"
}); Canvas.create({
ID:"B2", left:125, top:150, width:50, height:50, canDragReposition:true, dragAppearance:"target", backgroundColor:"yellow", contents:"B2"
}); //B1.addPeer(B2);
// // labels and buttons to manipulate the above // Label.create({ left:80, top:295, width:150, height:20, contents:"A1 Parent/Peer:", align:"center" }); Button.create({ left:80, top:325, width:150, height:30, title:"P1.addChild(A1)", click:"P1.addChild(A1)" }); Button.create({ left:80, top:365, width:150, height:30, title:"P2.addChild(A1)", click:"P2.addChild(A1)" }); Button.create({ left:80, top:405, width:150, height:30, title:"M1.addPeer(A1)", click:"M1.addPeer(A1)" }); Label.create({ left:240, top:295, width:150, height:20, contents:"B1 Parent/Peer:", align:"center" }); Button.create({ left:240, top:325, width:150, height:30, title:"P2.addChild(B1)", click:"P2.addChild(B1)" }); Button.create({ left:240, top:365, width:150, height:30, title:"P1.addChild(B1)", click:"P1.addChild(B1)" }); Button.create({ left:240, top:405, width:150, height:30, title:"M1.addPeer(B1)", click:"M1.addPeer(B1)" }); Label.create({ left:400, top:295, width:150, height:20, contents:"A2 Peer:", align:"center" }); Button.create({ left:400, top:325, width:150, height:30, title:"A1.addPeer(A2)", click:"A1.addPeer(A2)" }); Button.create({ left:400, top:365, width:150, height:30, title:"B1.addPeer(A2)", click:"B1.addPeer(A2)" }); Button.create({ left:400, top:405, width:150, height:30, title:"M1.addPeer(A2)", click:"M1.addPeer(A2)" }); Label.create({ left:560, top:295, width:150, height:20, contents:"B2 Peer:", align:"center" }); Button.create({ left:560, top:325, width:150, height:30, title:"B1.addPeer(B2)", click:"B1.addPeer(B2)" }); Button.create({ left:560, top:365, width:150, height:30, title:"A1.addPeer(B2)", click:"A1.addPeer(B2)" }); Button.create({ left:560, top:405, width:150, height:30, title:"M1.addPeer(B2)", click:"M1.addPeer(B2)" }); </SCRIPT> </BODY> </HTML>
</source>
