<!-- Copyright (c)2003 Isomorphic Software, Inc. (www.isomorphic.com) All rights reserved. -->
<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/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<!--------------------------
Example code starts here
---------------------------->
<SCRIPT>
//
// Simple Matrix class - a VStack of HStacks that allows Canvii to be dropped in
//-----------------------------------------------------------------------------------------
isc.defineClass("Matrix", "VStack").addProperties({
// These two properties work in tandem. When autoShowEmptyRowWhenFull is set to true, we'll
// show an empty HStack below the last row when the previous HStack has a number of members
// equal to or greater than numCols. In effect, this auto-creates a new row to be used as a
// drop target when the last row is full.
numCols: 3,
autoShowEmptyRowWhenFull: true,
border: "1px solid red",
layoutMargin: 10,
membersMargin: 10,
// This is the class we'll create for new rows
rowClass: "HStack",
// These are the properties we'll use for the rowClass by default
rowDefaults : {
border: "1px solid black",
autoDraw: false,
canAcceptDrop: true,
dropLineThickness: 1,
membersMargin: 10,
layoutMargin: 10,
height: 60,
// whenever components are added or removed, notify the outer VStack so it can auto-create
// or auto-destroy the last empty row as appropriate.
addMember: function () {
this.Super("addMember", arguments);
this.container.dataChanged();
},
removeMember: function () {
this.Super("removeMember", arguments);
this.container.dataChanged();
}
},
initWidget : function () {
this.Super("initWidget", arguments);
// can take an initial set of data - format is array of arrays where the inner arrays are
// rows that contain Canvii
this.setData(this.data);
},
setData : function (data) {
// if we have data, destroy the member arrays (but not their contents) so we don't leak
// them
if (this.members) {
for (var i = 0; i < this.members.length; i++) {
var row = this.members[i];
row.removeMembers(row.getMembers());
row.destroy();
}
}
// create member HStacks for rows and populate them with the passed in Canvii
if (data) {
// each entry is an array containing items to be placed in an HStack in that row.
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
// create a new member row
var row = this.createNewRow();
// add the row to our VStack
this.addMember(row);
for (var j = 0; j < rowData.length; j++) {
// add the item to the row
row.addMember(rowData[j]);
}
}
}
this.data = null;
this.dataChanged();
},
// this is called whenever members are added or removed on the HStack members
dataChanged : function () {
var members = this.getMembers();
// remove any empty rows in the grid except last row - that case is handled below
for (var i = 0; i < members.length; i++) {
var row = members[i];
if (row.getMembers().length == 0 && i+1 < members.length-1) {
row.destroy();
i--;
}
}
// automatically add or remove the last row based on how the previous row's member length
// compares to our numCols setting
if (this.autoShowEmptyRowWhenFull) {
var lastRow = members[members.length-1];
// if the lastRow's member length is equal to or exceeds the numCols setting, create a
// new empty HStack so that items can be dropped into it.
if (!lastRow || lastRow.getMembers().length >= this.numCols) {
var emptyRow = this.createNewRow();
this.addMember(emptyRow);
} else if (lastRow && lastRow.getMembers().length == 0) {
// if the last row is an empty row and the row before has space (member length <
// numCols), then destroy the empty last row since the user can drop into the
// previous row instead.
if (members.length-2 >= 0 && members[members.length-2].getMembers().length < this.numCols) {
lastRow.destroy();
}
}
}
},
// creates a new empty HStack from the config properties set on this class
createNewRow : function () {
// Note: adds our ref as the 'container' property so that these class instances can call
// this.container.dataChanged()
return isc.ClassFactory.getClass(this.rowClass).create(this.rowDefaults, {container: this});
},
// XXX not implemented - APIs to add/remove members at particular positions
add : function (x, y) {
},
remove : function (x, y) {
}
});
// End of Matrix class
// Test code
//-----------------------------------------------------------------------------------
isc.Img.create({
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/cube_blue.png",
canDrag: true,
canDrop: true
});
isc.Img.create({
left: 50,
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/cube_green.png",
canDrag: true,
canDrop: true
});
isc.Img.create({
left: 100,
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/cube_yellow.png",
canDrag: true,
canDrop: true
});
isc.Img.create({
left: 150,
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/pawn_blue.png",
canDrag: true,
canDrop: true
});
isc.Img.create({
left: 200,
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/star_red.png",
canDrag: true,
canDrop: true
});
isc.Matrix.create({
ID: "matrix",
left: 50,
top: 50,
data: [
[
isc.Img.create({
width:48, height:48,
src: "/isomorphic/system/reference/exampleImages/pieces/48/cube_frame.png",
canDrag: true,
canDrop: true
})
]
]
});
</SCRIPT>
</SCRIPT>
</BODY>
</HTML>
Comment