JavaScript DHTML/SmartClient/Event — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:27, 26 мая 2010
Содержание
- 1 Add keyboard listener to Label
- 2 Change mouse cursor
- 3 Custom event editing
- 4 Event from parent
- 5 Event logging example
- 6 Event overlap
- 7 Extend setDisabled() to change visual state and cursor and init disabled state
- 8 Focus event
- 9 Get cursor position from mouse clicked event
- 10 Hover event
- 11 Mouse in/out event
- 12 Mouse move event
- 13 Show event detailed info
Add keyboard listener to Label
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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">
<div id="gridDiv">
<SCRIPT>
isc.Label.create({
ID: "theLabel",
canFocus: true,
showEdges: true,
padding:4,
contents: "Click me, then move me with arrow keys.",
keyPress : function () {
var left = this.getOffsetLeft();
var top = this.getOffsetTop();
switch (isc.Event.getKey()) {
case "Arrow_Left":
left -= 10; break;
case "Arrow_Right":
left += 10; break;
case "Arrow_Up":
top -= 10; break;
case "Arrow_Down":
top += 10; break;
default : return;
}
// don"t go out of bounds
if (left < 0) left = 0;
if (top < 0) top = 0;
this.setLeft(left);
this.setTop(top);
}
});
</SCRIPT>
</div>
</BODY>
</HTML>
Change mouse cursor
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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">
<div id="gridDiv">
<SCRIPT>
isc.IButton.create({
ID: "saveButton",
title: "Save"
});
isc.IButton.create({
left: 150,
title: "Disable Save",
click: function () {
if (this.title == "Disable Save") {
this.setTitle("Enable Save");
saveButton.disable();
} else {
this.setTitle("Disable Save");
saveButton.enable();
}
}
});
isc.defineClass("DragLabel", "Label").addProperties({
align:"center", padding:4, showEdges:true,
minWidth:70, minHeight:70, maxWidth:300, maxHeight:200,
keepInParentRect:true,
canDragReposition:true,
dragAppearance:"target"
})
isc.DragLabel.create({
left:80, top:80,
contents:"Resize from any side",
canDragResize:true,
edgeMarginSize:10 // easier to grab than the default 5px margin
})
isc.DragLabel.create({
left:280, top:80,
contents:"Resize from bottom or right",
canDragResize:true,
resizeFrom:["B","R","BR"],
edgeMarginSize:10
})
</SCRIPT>
</div>
</BODY>
</HTML>
Custom event editing
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
var _today = new Date;
var _start = _today.getDate() - _today.getDay();
var _month = _today.getMonth();
var _year = _today.getFullYear();
var eventData = [
{
eventId: 1,
name: "Meeting",
description: "Shareholders meeting: monthly forecast report",
startDate: new Date(_year, _month, _start + 2, 9),
endDate: new Date(_year, _month, _start + 2, 14)
},
{
eventId: 2,
name: "Realtor",
description: "Breakfast with realtor to discuss moving plans",
startDate: new Date(_year, _month, _start + 3, 8 ),
endDate: new Date(_year, _month, _start + 3, 10)
},
{
eventId: 3,
name: "Soccer",
description: "Little league soccer finals",
startDate: new Date(_year, _month, _start + 4, 13),
endDate: new Date(_year, _month, _start + 4, 16)
},
{
eventId: 4,
name: "Sleep",
description: "Catch up on sleep",
startDate: new Date(_year, _month, _start + 4, 5),
endDate: new Date(_year, _month, _start + 4, 9)
},
{
eventId: 5,
name: "Inspection",
description: "Home inspector coming",
startDate: new Date(_year, _month, _start + 4, 10),
endDate: new Date(_year, _month, _start + 4, 12),
eventWindowStyle: "testStyle",
canEdit: false
},
{
eventId: 6,
name: "Airport run",
description: "Pick James up from the airport",
startDate: new Date(_year, _month, _start + 4, 1),
endDate: new Date(_year, _month, _start + 4, 3)
},
{
eventId: 7,
name: "Dinner Party",
description: "Prepare elaborate meal for friends",
startDate: new Date(_year, _month, _start + 4, 17),
endDate: new Date(_year, _month, _start + 4, 20)
},
{
eventId: 8,
name: "Poker",
description: "Poker at Steve"s house",
startDate: new Date(_year, _month, _start + 4, 21),
endDate: new Date(_year, _month, _start + 4, 23)
},
{
eventId: 9,
name: "Meeting",
description: "Board of directors meeting: discussion of next months strategy",
startDate: new Date(_year, _month, _start + 5, 11),
endDate: new Date(_year, _month, _start + 5, 15)
}
];
// using a client-only dataSource so that test data is always relative to the current date
isc.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate", type: "datetime"},
{name:"endDate", type: "datetime"}
],
clientOnly: true,
testData: eventData
});
isc.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate"},
{name:"endDate"}
],
clientOnly: true,
testData: eventData
});
isc.Calendar.create({
ID: "eventCalendar",
dataSource: eventDS,
autoFetchData: true,
eventEditorFields: [
// specify the last field from the default fields so that subsequent fields come after the
// default fields
{name: "description"},
// custom fields below
{type:"header", defaultValue:"Event Options"},
{name: "repeats", title: "Repeats", type: "select", colSpan: 4, defaultToFirstOption: true,
valueMap: ["Does not repeat", "Daily","Weekly", "Monthly", "Yearly"]
},
{name: "reminderType", title: "Reminder", type: "select", width: 70, defaultToFirstOption: true,
valueMap: ["Pop-up", "Email"]
},
{name: "reminderValue", showTitle: false, type: "text", width: 60, defaultValue:10},
{name: "reminderUnits", showTitle: false, type: "select", width: 70, defaultToFirstOption: true,
valueMap: ["minutes", "hours", "days"]
}
],
eventDialogFields: [
{name: "name"},
{name: "sharing", title: "Sharing", type: "radioGroup",
valueMap: ["Public", "Private"], vertical: false, width: 50
}
]
});
</SCRIPT>
</BODY>
</HTML>
Event from parent
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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?")"
});
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?")"
});
topWidget.addChild(parentWidget);
</SCRIPT>
</BODY>
</HTML>
Event logging example
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
Event logging 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
---------------------------->
<!-- HTML form containing event log fields and controls -->
<DIV STYLE="padding:0px 0px 0px 20px" CLASS="normal">
<form action="" method="POST" name="f">
<table><tr>
<td CLASS="normal"><textarea name="eventlog" cols="25" rows="20"></textarea></td>
<td valign=bottom CLASS="normal"><input type="Button" name="clearlog" value="Clear Log" onClick="clearEventLog()"> </td>
<td valign=bottom CLASS="normal"><A HREF="javascript:void alert("click -> anchor")" ONMOUSEOVER="if (isc.Page.isLoaded()) logEvent("mouseover -> anchor");">An anchor</A></td>
</tr></table>
<br><br>
<input name="mousemovelog" size="40"> Last mouseMove/dragMove event<br><br>
<input name="mousestilldownlog" size="40"> Last mouseStillDown event<br><br>
<input type="Checkbox" name="logPageEvents">Log page events
<input type="Checkbox" name="disableDragWidget" onclick="this.checked ? green.disable() : green.enable()">Disable green widget
<input type="Checkbox" name="disableDropWidget" onclick="this.checked ? blue.disable() : blue.enable()">Disable blue widget<br><br>
<input name="pageeventlog" size="40"> Last page level mouse event
</form>
</DIV>
<SCRIPT>
// --------------------------------------------------
// drag & drop widgets with event handlers
// --------------------------------------------------
// pink widget -- normal widget, no dragging properties
Canvas.create({
ID:"pink",
// visual properties
left: 340,
top:50,
width:80,
height:80,
contents:"normal widget",
backgroundColor:"pink",
// event handlers
mouseDown:"logEvent("mouseDown -> pink")",
mouseStillDown:"mouseStillDownField.value="mouseStillDown -> pink ("+timeStamp()+")"",
mouseUp:"logEvent("mouseUp -> pink")",
click:"logEvent("click -> pink")",
doubleClick:"logEvent("doubleClick -> pink")",
mouseOver:"logEvent("mouseOver -> pink")",
mouseMove:"mouseMoveField.value="mouseMove -> pink "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"logEvent("mouseOut -> pink")",
dragStart:"logEvent("dragStart -> pink")",
dragStop:"logEvent("dragStop -> pink")"
});
// green widget: draggable with "drag target" drag style
Canvas.create({
ID:"green",
// visual properties
left: 440,
top:50,
width:80,
height:80,
contents:"drag me (canDrag)",
backgroundColor:"lightgreen",
// drag & drop properties
canDrag:true,
canDrop:true,
dragAppearance:"tracker",
setDragTracker:function(){EventHandler.setDragTracker(this.imgHTML("yinyang_icon.gif",20,20),20,20)},
// event handlers
mouseDown:"logEvent("mouseDown -> green")",
mouseStillDown:"mouseStillDownField.value="mouseStillDown -> green ("+timeStamp()+")"",
mouseUp:"logEvent("mouseUp -> green")",
click:"logEvent("click -> green")",
doubleClick:"logEvent("doubleClick -> green")",
mouseOver:"logEvent("mouseOver -> green")",
mouseMove:"mouseMoveField.value="mouseMove -> green "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"logEvent("mouseOut -> green")",
dragStart:"logEvent("dragStart -> green")",
dragMove:"mouseMoveField.value="dragMove -> green "+this.getOffsetX()+","+this.getOffsetY()",
dragStop:"logEvent("dragStop -> green")"
});
// blue widget: accepts drop of other widgets
Canvas.create({
ID:"blue",
// visual properties
left: 340,
top:150,
width:80,
height:80,
contents:"drop on me (canAcceptDrop)",
backgroundColor:"skyblue",
// drag & drop properties
canAcceptDrop:true,
// event handlers
mouseDown:"logEvent("mouseDown -> blue")",
mouseStillDown:"mouseStillDownField.value="mouseStillDown -> blue ("+timeStamp()+")"",
mouseUp:"logEvent("mouseUp -> blue")",
click:"logEvent("click -> blue")",
doubleClick:"logEvent("doubleClick -> blue")",
mouseOver:"logEvent("mouseOver -> blue")",
mouseMove:"mouseMoveField.value="mouseMove -> blue "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"logEvent("mouseOut -> blue")",
dropOver:"logEvent("dropOver -> blue")",
dropMove:"mouseMoveField.value="dropMove -> blue "+this.getOffsetX()+","+this.getOffsetY()",
dropOut:"logEvent("dropOut -> blue")",
drop:"logEvent("drop -> blue")"
});
// yellow widget: can drag reposition, can drop
Canvas.create({
ID:"yellow",
// visual properties
left: 540,
top:50,
width:80,
height:80,
contents:"drag reposition me (canDragReposition, canDrop)",
backgroundColor:"yellow",
// drag & drop properties
canDragReposition:true,
canDrop:true,
dragAppearance:"target",
// event handlers
mouseDown:"logEvent("mouseDown -> yellow")",
mouseStillDown:"mouseStillDownField.value="mouseStillDown -> yellow ("+timeStamp()+")"",
mouseUp:"logEvent("mouseUp -> yellow")",
click:"logEvent("click -> yellow")",
doubleClick:"logEvent("doubleClick -> yellow")",
mouseOver:"logEvent("mouseOver -> yellow")",
mouseMove:"mouseMoveField.value="mouseMove -> yellow "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"logEvent("mouseOut -> yellow")",
dragRepositionStart:"logEvent("dragRepositionStart -> yellow");",
dragRepositionMove:"mouseMoveField.value="dragRepositionMove -> yellow "+this.getOffsetX()+","+this.getOffsetY()",
dragRepositionStop:"logEvent("dragRepositionStop -> yellow")"
});
// purple widget: can resize and move, can"t drop
Canvas.create({
ID:"purple",
// visual properties
left: 540,
top:150,
width:150,
height:100,
contents:"resize and move me (canDragResize, canDragReposition)",
backgroundColor:"orchid",
overflow:"hidden",
// drag & drop properties
canDragResize:true,
canDragReposition:true,
// event handlers
mouseDown:"logEvent("mouseDown -> purple")",
mouseStillDown:"mouseStillDownField.value="mouseStillDown -> purple ("+timeStamp()+")"",
mouseUp:"logEvent("mouseUp -> purple")",
click:"logEvent("click -> purple")",
doubleClick:"logEvent("doubleClick -> purple")",
mouseOver:"logEvent("mouseOver -> purple")",
mouseMove:"mouseMoveField.value="mouseMove -> purple "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"logEvent("mouseOut -> purple")",
dragResizeStart:"logEvent("dragResizeStart -> purple")",
dragResizeMove:"mouseMoveField.value="dragResizeMove -> purple "+this.getOffsetX()+","+this.getOffsetY()",
dragResizeStop:"logEvent("dragResizeStop -> purple")",
dragRepositionStart:"logEvent("dragRepositionStart -> purple")",
dragRepositionMove:"mouseMoveField.value="dragRepositionMove -> purple "+this.getOffsetX()+","+this.getOffsetY()",
dragRepositionStop:"logEvent("dragRepositionStop -> purple")"
});
// button
Button.create({
ID:"button",
// visual properties
left: 340,
top:250,
width:150,
title:"A Button",
overflow:"hidden",
showDown:true,
// drag & drop properties
// event handlers
mouseDown:"this.Super("mouseDown");logEvent("mouseDown -> button")",
mouseStillDown:"this.Super("mouseStillDown");mouseStillDownField.value="mouseStillDown -> button ("+timeStamp()+")"",
mouseUp:"this.Super("mouseUp");logEvent("mouseUp -> button")",
click:"this.Super("click");logEvent("click -> button")",
doubleClick:"this.Super("doubleClick");logEvent("doubleClick -> button")",
mouseOver:"this.Super("mouseOver");logEvent("mouseOver -> button")",
mouseMove:"this.Super("mouseMove");mouseMoveField.value="mouseMove -> button "+this.getOffsetX()+","+this.getOffsetY()",
mouseOut:"this.Super("mouseOut");logEvent("mouseOut -> button")"
});
// --------------------------------------------------
// global event handlers
// --------------------------------------------------
Page.setEvent("load", "initializeForm()");
// set global handlers to log page events
Page.setEvent("load", "logPageEvent("load")");
Page.setEvent("unload", "if (pageEvents.checked) alert("unload")");
Page.setEvent("resize", "logPageEvent("resize")");
Page.setEvent("showContextMenu", "logPageEvent("showContextMenu")");
// set global handlers to log mouse events
Page.setEvent("mouseOver", "logPageEvent("mouseOver")");
Page.setEvent("mouseMove", "if (pageEvents.checked) pageEventField.value = "mouseMove -> Page "+EventHandler.getX()+","+EventHandler.getY()");
Page.setEvent("mouseOut", "logPageEvent("mouseOut")");
Page.setEvent("mouseDown", "logPageEvent("mouseDown")");
Page.setEvent("mouseUp", "logPageEvent("mouseUp")");
Page.setEvent("click", "logPageEvent("click")");
Page.setEvent("doubleClick", "logPageEvent("doubleClick")");
// set global handlers to log drag-and-drop events
Page.setEvent("dragStart", "logPageEvent("dragStart")");
Page.setEvent("dragOver", "logPageEvent("dragOver")");
Page.setEvent("dragMove", "if (pageEvents.checked) pageEventField.value = "dragMove -> Page "+EventHandler.getX()+","+EventHandler.getY()");
Page.setEvent("dragOut", "logPageEvent("dragOut")");
Page.setEvent("dragStop", "logPageEvent("dragStop")");
// set global handlers to log drag-and-drop events
Page.setEvent("dragRepositionStart", "logPageEvent("dragRepositionStart")");
Page.setEvent("dragRepositionMove", "if (pageEvents.checked) pageEventField.value = "dragRepositionMove -> Page "+EventHandler.getX()+","+EventHandler.getY()");
Page.setEvent("dragRepositionStop", "logPageEvent("dragRepositionStop")");
// set global handlers to log drag-and-drop events
Page.setEvent("dragResizeStart", "logPageEvent("dragResizeStart")");
Page.setEvent("dragResizeMove", "if (pageEvents.checked) pageEventField.value = "dragResizeMove -> Page "+EventHandler.getX()+","+EventHandler.getY()");
Page.setEvent("dragResizeStop", "logPageEvent("dragResizeStop")");
// set global handlers to log drag-and-drop events
Page.setEvent("dropOver", "logPageEvent("dropOver")");
Page.setEvent("dropMove", "if (pageEvents.checked) pageEventField.value = "dropMove -> Page "+EventHandler.getX()+","+EventHandler.getY()");
Page.setEvent("dropOut", "logPageEvent("dropOut")");
Page.setEvent("drop", "logPageEvent("drop")");
// --------------------------------------------------
// scripts for working with the HTML form
// --------------------------------------------------
// shortcut references to form elements
var eventLog = document.f.eventlog;
var mouseMoveField = document.f.mousemovelog;
var pageEventField = document.f.pageeventlog;
var mouseStillDownField = document.f.mousestilldownlog;
var pageEvents = document.f.logPageEvents;
// add a new line to the event log
function logEvent(msg) {
eventLog.value += msg+(Browser.isMac ? "\r" : "\n");
}
// log a page event if the logPageEvents checkbox is ticked
function logPageEvent(msg) {
if (pageEvents.checked) logEvent(msg+" -> Page");
}
// clear the event log
function clearEventLog() {
eventLog.value = "--- Event Log ---\n";
mouseMoveField.value = "";
mouseStillDownField.value = "";
pageEventField.value = "";
}
// initialize the form
function initializeForm() {
clearEventLog();
pageEvents.checked = false;
document.f.disableDragWidget.checked = false;
document.f.disableDropWidget.checked = false;
}
</SCRIPT>
</BODY>
</HTML>
Event overlap
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
var _today = new Date;
var _start = _today.getDate() - _today.getDay();
var _month = _today.getMonth();
var _year = _today.getFullYear();
var eventOverlapData = [
{
eventId: 1,
name: "Meeting",
description: "Shareholders meeting: monthly forecast report",
startDate: new Date(_year, _month, _start + 3, 9),
endDate: new Date(_year, _month, _start + 3, 14)
},
{
eventId: 2,
name: "Realtor",
description: "Breakfast with realtor to discuss moving plans",
startDate: new Date(_year, _month, _start + 3, 8 ),
endDate: new Date(_year, _month, _start + 3, 10)
},
{
eventId: 3,
name: "Soccer",
description: "Little league soccer finals",
startDate: new Date(_year, _month, _start + 4, 8),
endDate: new Date(_year, _month, _start + 4, 12)
},
{
eventId: 4,
name: "Sleep",
description: "Catch up on sleep",
startDate: new Date(_year, _month, _start + 4, 9),
endDate: new Date(_year, _month, _start + 4, 11)
},
{
eventId: 5,
name: "Inspection",
description: "Home inspector coming",
startDate: new Date(_year, _month, _start + 4, 10),
endDate: new Date(_year, _month, _start + 4, 12),
eventWindowStyle: "testStyle",
canEdit: false
},
{
eventId: 6,
name: "Dinner Party",
description: "Prepare elaborate meal for friends",
startDate: new Date(_year, _month, _start + 4, 11),
endDate: new Date(_year, _month, _start + 4, 14)
},
{
eventId: 7,
name: "Poker",
description: "Poker at Steve"s house",
startDate: new Date(_year, _month, _start + 4, 13),
endDate: new Date(_year, _month, _start + 4, 16)
}
];
isc.Calendar.create({
ID: "eventCalendar",
data: eventOverlapData,
// the following are the Calendar"s defaults and would still have been set without this code
eventAutoArrange: true,
eventOverlap: true,
eventOverlapPercent: "10",
eventOverlapIdenticalStartTimes: false
});
</SCRIPT>
</BODY>
</HTML>
Extend setDisabled() to change visual state and cursor and init disabled state
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
<SCRIPT>
/*----------> SimpleSlider_7.js <----------*/
// Step 7
// * extend setDisabled() to change visual state and cursor
// * init disabled state
ClassFactory.defineClass("SimpleSlider", Canvas);
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 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 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:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(""); return false",
mouseDown:"this.setState("down")",
mouseUp:"this.setState(""); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = 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 = 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) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
},
setDisabled : function (disabled) {
this.Super("setDisabled",arguments);
if (!disabled) {
this._track.setState("");
this._thumb.setState("");
this._thumb.setCursor(Canvas.HAND);
} else {
this._track.setState("off");
this._thumb.setState("off");
this._thumb.setCursor(Canvas.DEFAULT);
}
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
// override default skin directory to pick up local slider images
Page.setSkinDir("");
//--------------------------------------------------
// display area for targeted sliderMove events
//--------------------------------------------------
Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event<br>" +
slider.getID() + ": " + slider.value);
}
});
//--------------------------------------------------
// global handler for sliderMove events
//--------------------------------------------------
Label.create({
ID:"globalDisplay",
left:300,
top:50,
height:20
});
Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler<br>" + eventInfo.ID + ": " + eventInfo.value);"
);
//--------------------------------------------------
// sliders
//--------------------------------------------------
SimpleSlider.create({
ID:"vSlider",
left:100,
top:100,
value:0.3,
sliderTarget:display
});
SimpleSlider.create({
ID:"hSlider",
left:300,
top:180,
vertical:false,
value:0.5,
sliderTarget:display
});
//--------------------------------------------------
// display areas for observed slider values
//--------------------------------------------------
Label.create({
ID:"vSliderObserver",
left:20,
top:320,
height:20
});
vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver",
left:300,
top:320,
height:20
});
hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
//--------------------------------------------------
// buttons to enable/disable sliders
//--------------------------------------------------
Button.create({
left:70,
top:20,
width:120,
title:"Enable sliders",
click:"vSlider.enable();hSlider.enable()"
});
Button.create({
left:220,
top:20,
width:120,
title:"Disable sliders",
click:"vSlider.disable();hSlider.disable()"
});
</SCRIPT>
</BODY>
</HTML>
Focus event
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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">
<div id="gridDiv">
<SCRIPT>
isc.HStack.create({
showEdges: true,
canAcceptDrop: true,
animateMembers: true,
dropLineThickness: 4,
members: [
isc.Img.create({
ID:"bluePawn",
layoutAlign: "center",
width:48, height:48,
canFocus: true,
src: "pieces/48/pawn_blue.png",
canDragReposition: true,
canDrop: true,
dragAppearance: "target",
draw : function () {
this.Super("draw", arguments);
this.focus();
},
focusChanged : function (hasFocus) {
focusLabel.setFocusWidget(this, hasFocus);
}
}),
isc.DynamicForm.create({
ID:"simpleForm",
layoutAlign: "center",
height: 48,
fields: [
{name: "field1", type: "select", valueMap: ["Option 1", "Option 2"]},
{name: "field2", type: "date"}
],
focusChanged : function (hasFocus) {
focusLabel.setFocusWidget(this, hasFocus);
}
}),
isc.Img.create({
ID:"greenPawn",
layoutAlign: "center",
width:48, height:48,
canFocus: true,
src: "pieces/48/pawn_green.png",
canDragReposition: true,
canDrop: true,
dragAppearance: "target",
focusChanged : function (hasFocus) {
focusLabel.setFocusWidget(this, hasFocus);
}
})
]
});
isc.Label.create({
ID:"focusLabel",
align:"center",
top:150,
width:300,
height:50,
setFocusWidget : function (widget, hasFocus) {
if (hasFocus) this.setContents(widget.getID() + " has focus");
else this.setContents("");
}
});
</SCRIPT>
</div>
</BODY>
</HTML>
Get cursor position from mouse clicked event
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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.Window.create({
ID: "theWindow",
title: "Window with footer",
width: 200, height: 200,
canDragResize:true,
showFooter: true,
items: [
isc.Label.create({
contents: "Click me",
align: "center",
padding: 5,
height: "100%",
click : function () {
theWindow.setStatus("Click at: "+isc.Event.getX()+", "+isc.Event.getY());
}
})
]
});
</SCRIPT>
</BODY>
</HTML>
Hover event
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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">
<div id="gridDiv">
<SCRIPT>
isc.ListGrid.create({
width: "80%", height: 84, leaveScrollbarGap:false,
hoverWidth:300,
fields: [
{name:"commonName", hidden:true, title:"Animal"},
{name:"scientificName", title:"Scientific Name"},
{name:"diet", title:"Diet"},
{name:"information", title:"Interesting Facts", showHover: true}
],
data: [
{commonName:"Platypus",scientificName:"Ornithorhynchus Anatinus",diet:"Insects and Larvae",lifeSpan:"10-15 years",information:"Were thought to be a hoax when first discovered. The male has a venemous spur on his hind legs. Capable of many vocalizations including sounds like a growling puppy and a brooding hen."},
{commonName:"Elephant (African)",scientificName:"Loxodonta africana",diet:"Herbivore",lifeSpan:"40-60 years",information:"The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat."},
{commonName:"Alligator (American)",scientificName:"Allligator mississippiensis",diet:"Carnivore",lifeSpan:"50 years",information:"In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called "el largo" meaning "the lizard". The name "el largo" gradually became pronounced "alligator"."}
]
});
isc.IButton.create({
top: 150,
disabled: true,
title: "Close Issue",
prompt: "You cannot close this issue - see the owner",
hoverWidth:150
});
isc.Img.create({
left: 180,
top: 100,
width: 90,
height: 47,
src: "other/eyes.jpg",
prompt: "360px by 188px<BR>25k<BR>JPEG high quality",
hoverWidth:120,
hoverOpacity:75,
hoverStyle: "interactImageHover"
});
isc.DynamicForm.create({
left: 220,
top: 190,
width: 200,
itemHoverWidth: 200,
itemHoverStyle: "interactFormHover",
fields: [{
name: "severityLevel",
title: "Severity Level",
type: "staticText",
defaultValue: "Severity 2",
prompt: "<b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +
"is corrupting data, and the error severely impacts the user"s operations." +
"<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +
"is not available in production, and the user"s operations are restricted." +
"<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +
"system occurs, but it does not seriously affect the user"s operations."
}]
});
</SCRIPT>
</div>
</BODY>
</HTML>
Mouse in/out event
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
Getting event details
</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>
Canvas.create({
ID:"redWidget",
left:50,
top:75,
width:100,
height:100,
contents:"show mouseDown details",
backgroundColor:"red",
mouseDown:"showEventInfo("mouseDown", this)",
mouseOut:"clearEventInfo()"
});
Canvas.create({
ID:"blueWidget",
left:100,
top:125,
width:100,
height:100,
contents:"show mouseUp details",
backgroundColor:"blue",
mouseUp:"showEventInfo("mouseUp", this)",
// showContextMenu event triggered by right mouse button coming up.
// Note: We return false to prevent the native browser context menu from being displayed.
showContextMenu:"showEventInfo("showContextMenu", this); return false;",
mouseOut:"clearEventInfo()"
});
Canvas.create({
ID:"greenWidget",
left:150,
top:175,
width:100,
height:100,
contents:"show mouseMove details",
backgroundColor:"green",
mouseMove:"showEventInfo("mouseMove", this)",
mouseOut:"clearEventInfo()"
});
Label.create({
ID:"statusArea",
top:100,
left:300,
width:250,
height:125,
overflow:"hidden",
backgroundColor:"white",
border:"1px solid black",
valign:"top",
padding:3
});
function showEventInfo(eventName, obj) {
var result = "<b>" + eventName + ":</b><br>" +
"Global: " + EventHandler.getX() + "," + EventHandler.getY() + "<br>" +
"Local: " + obj.getOffsetX() + "," + obj.getOffsetY() + "<br>"
;
if (EventHandler.rightButtonDown()) result += " (Right Button)";
if (EventHandler.leftButtonDown()) result += " (Left Button)";
if (EventHandler.shiftKeyDown()) result += " (Shift)";
if (EventHandler.ctrlKeyDown()) result += " (Ctrl)";
if (EventHandler.altKeyDown()) result += " (Alt)";
result += "<br><br>";
if (redWidget.containsEvent()) result+= " <i>(red widget contains event)</i><br>";
if (blueWidget.containsEvent()) result+= " <i>(blue widget contains event)</i><br>";
if (greenWidget.containsEvent()) result+= " <i>(green widget contains event)</i><br>";
statusArea.setContents(result);
}
function clearEventInfo () {
statusArea.setContents("");
}
</SCRIPT>
</BODY>
</HTML>
Mouse move event
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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">
<div id="gridDiv">
<SCRIPT>
isc.Label.create({
ID: "mouser",
contents: "<b>Mouse Me</b>",
align: "center",
overflow: "hidden",
showEdges: "true",
backgroundColor: "lightblue",
styleName:"blackText",
width: 200,
height: 200,
top: 40,
minSize: 40,
maxSize: 400,
zoomMultiplier: 15,
mouseWheel : function () {
var wheelDelta = isc.EventHandler.getWheelDelta();
// stay within min/maxSize bounds
var newSize = this.getWidth() + wheelDelta * this.zoomMultiplier;
if (newSize < this.minSize) newSize = this.minSize;
else if (newSize > this.maxSize) newSize = this.maxSize;
this.setWidth(newSize);
this.setHeight(newSize);
eventTracker.setLastEvent("mouseWheel");
},
mouseStillDown : function () {
var opacity = this.opacity == null ? 100 : this.opacity;
this.setOpacity(Math.max(0, opacity - 5));
eventTracker.setLastEvent("mouseStillDown");
},
mouseUp : function () {
this.setOpacity(100);
eventTracker.setLastEvent("mouseUp");
},
mouseMove : function () {
// scale to 1
var xScale = this.getOffsetX()/this.getWidth();
var yScale = this.getOffsetY()/this.getHeight();
// increasing red intensity on the x axis, green on the y axis. Blue stays at zero.
this.setBackgroundColor("rgb(0,"+Math.round(255*xScale)+","+Math.round(255*yScale)+")");
eventTracker.setLastEvent("mouseMove");
},
mouseOut : function () {
// restore settings
this.setBackgroundColor("lightblue");
this.setOpacity(100);
eventTracker.setLastEvent("mouseOut");
}
});
isc.Label.create({
ID: "eventTracker",
contents: "<nobr>Last event: (mouse over the canvas below...)</nobr>",
height: 20,
setLastEvent : function (event) {
var localX = mouser.getOffsetX(),
localY = mouser.getOffsetY();
this.setContents("<nobr>Last event: <b>"+event+"</b> ("+localX+", "+localY+")</nobr>");
}
});
</SCRIPT>
</div>
</BODY>
</HTML>
Show event detailed info
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are
licensed under the terms of the GNU Lesser General Public License, version 3.
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL,
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge,
but may not be used as part of screen designs separate from SmartClient components without a purchase
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008.
-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->
<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>
Getting event details
</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>
Canvas.create({
ID:"redWidget",
left:50,
top:75,
width:100,
height:100,
contents:"show mouseDown details",
backgroundColor:"red",
mouseDown:"showEventInfo("mouseDown", this)",
mouseOut:"clearEventInfo()"
});
Canvas.create({
ID:"blueWidget",
left:100,
top:125,
width:100,
height:100,
contents:"show mouseUp details",
backgroundColor:"blue",
mouseUp:"showEventInfo("mouseUp", this)",
// showContextMenu event triggered by right mouse button coming up.
// Note: We return false to prevent the native browser context menu from being displayed.
showContextMenu:"showEventInfo("showContextMenu", this); return false;",
mouseOut:"clearEventInfo()"
});
Canvas.create({
ID:"greenWidget",
left:150,
top:175,
width:100,
height:100,
contents:"show mouseMove details",
backgroundColor:"green",
mouseMove:"showEventInfo("mouseMove", this)",
mouseOut:"clearEventInfo()"
});
Label.create({
ID:"statusArea",
top:100,
left:300,
width:250,
height:125,
overflow:"hidden",
backgroundColor:"white",
border:"1px solid black",
valign:"top",
padding:3
});
function showEventInfo(eventName, obj) {
var result = "<b>" + eventName + ":</b><br>" +
"Global: " + EventHandler.getX() + "," + EventHandler.getY() + "<br>" +
"Local: " + obj.getOffsetX() + "," + obj.getOffsetY() + "<br>"
;
if (EventHandler.rightButtonDown()) result += " (Right Button)";
if (EventHandler.leftButtonDown()) result += " (Left Button)";
if (EventHandler.shiftKeyDown()) result += " (Shift)";
if (EventHandler.ctrlKeyDown()) result += " (Ctrl)";
if (EventHandler.altKeyDown()) result += " (Alt)";
result += "<br><br>";
if (redWidget.containsEvent()) result+= " <i>(red widget contains event)</i><br>";
if (blueWidget.containsEvent()) result+= " <i>(blue widget contains event)</i><br>";
if (greenWidget.containsEvent()) result+= " <i>(green widget contains event)</i><br>";
statusArea.setContents(result);
}
function clearEventInfo () {
statusArea.setContents("");
}
</SCRIPT>
</BODY>
</HTML>