widget_attachment.html

Home / sm-shop / src / main / webapp / resources / smart-client / components / components / widget_attachment.html
151 lines | 4.69 kB Blame History Raw Download
<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>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

	Dynamic containment and attachment example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

	Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<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:"<B>A1 Parent/Peer:</B>",    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:"<B>B1 Parent/Peer:</B>",    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:"<B>A2 Peer:</B>",    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:"<B>B2 Peer:</B>",    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>