JavaScript DHTML/SmartClient/SmartClient Controls
Содержание
Component reuse
<!--
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>
// 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<P>" +
"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 <code>setHeaderTitle()</code><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>
Move object by offset
<!--
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.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>
Move to front/back to a layer
<!--
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:"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<BR>(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>
Position the widgets
<!--
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:"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>
Refernece object by ID
<!--
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.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>
Show/hide a control
<!--
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.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>
Three level controls hierarchy and event propagation
<!--
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?")",
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>
Use isc namespace to eliminate the possibility of JS name collisions
<!--
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 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<br>" +
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<br>" + 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>
Widget attachment
<!--
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>
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>