JavaScript DHTML/SmartClient/Vertical Layout
Change draggable label layer: to front, go back and move to
<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({
align:"center", showEdges:true, backgroundColor:"lightblue", styleName:"blackText", contents:"Bottom"
}) isc.Label.create({
ID:"middleWidget", left:60, top:60, align:"center", showEdges:true, backgroundColor:"lightgreen", styleName:"blackText", contents:"Middle"
}) isc.Label.create({
left:120, top:120, align:"center", showEdges:true, backgroundColor:"pink", styleName:"blackText", contents:"Top"
}) isc.Label.create({
ID:"dragWidget", left:120, top:0, align:"center", showEdges:true, backgroundColor:"lightyellow", styleName:"blackText", contents:"Drag Me", canDragReposition:true, dragAppearance:"target"
}) isc.VStack.create({
left:250, membersMargin:10, members:[
isc.IButton.create({title:"Front", click:"dragWidget.bringToFront()"}),
isc.IButton.create({title:"Back", click:"dragWidget.sendToBack()"}),
isc.IButton.create({title:"Above Middle", click:"dragWidget.moveAbove(middleWidget)"}),
isc.IButton.create({title:"Below Middle", click:"dragWidget.moveBelow(middleWidget)"})
]
})
</SCRIPT>
</BODY>
</HTML>
</source>
Put a VLayout inside a HLayout
<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.HLayout.create({
width: "100%",
height: "100%",
members: [
isc.Label.create({
contents: "Navigation",
align: "center",
overflow: "hidden",
width: "30%",
showResizeBar: true,
border: "1px solid blue"
}),
isc.VLayout.create({
width: "70%",
members: [
isc.Label.create({
contents: "Listing",
align: "center",
overflow: "hidden",
height: "30%",
showResizeBar: true,
border: "1px solid blue"
}),
isc.Label.create({
contents: "Details",
align: "center",
overflow: "hidden",
height: "70%",
border: "1px solid blue"
})
]
})
]
});
</SCRIPT> </BODY> </HTML>
</source>
VLayout Demo
<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.defineClass("BlueBox", "Label").addProperties({
align:"center", border:"1px solid #808080", backgroundColor:"lightblue", styleName:"blackText"
}) isc.HLayout.create({
width:"100%", height:"100%", membersMargin:20,
members:[
isc.VLayout.create({
showEdges:true,
width:150,
membersMargin:5, layoutMargin:10,
members:[
isc.BlueBox.create({height:50, contents:"height 50"}),
isc.BlueBox.create({height:"*", contents:"height *"}),
isc.BlueBox.create({height:"30%", contents:"height 30%"})
]
}),
]
})
</SCRIPT>
</BODY>
</HTML>
</source>
