JavaScript DHTML/SmartClient/Slider
Содержание
- 1 Add a custom cursor to the thumb
- 2 Add mouse handlers to set the thumb"s state
- 3 Add value and sliderTarget properties, calculate new value when thumb is moved, send sliderMove message to sliderTarget when thumb is moved
- 4 Add valueChanged() observable method
- 5 Add value setter and getter methods and use setter to init value
- 6 Convert track and thumb to StretchImg and Img widgets
- 7 Create, position, and size the slider and its two children (_track and _thumb) make the thumb drag-repositionable
- 8 Error checking of newValue in setValue()
- 9 Horizontal slider
- 10 Make slider thumb draggable calculate and set constrained thumb position when dragging
- 11 Number slider
- 12 Specify skin directory and images
- 13 Use slider to create a color mixer
- 14 Use Slider to set the border width
- 15 Value changed event for Slider
- 16 Vertical Slider, min value, max value
Add a custom cursor to the thumb
<!--
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_6.js <----------*/
// Step 6
// * convert track and thumb to StretchImg and Img widgets
// * specify skin directory and images
// * add mouse handlers to set the thumb"s state
// * add a custom cursor to the thumb
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);
},
_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 () {
}
});
</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)");
</SCRIPT>
</BODY>
</HTML>
Add mouse handlers to set the thumb"s 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_6.js <----------*/
// Step 6
// * convert track and thumb to StretchImg and Img widgets
// * specify skin directory and images
// * add mouse handlers to set the thumb"s state
// * add a custom cursor to the thumb
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);
},
_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 () {
}
});
</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)");
</SCRIPT>
</BODY>
</HTML>
Add value and sliderTarget properties, calculate new value when thumb is moved, send sliderMove message to sliderTarget when thumb is moved
<!--
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_3.js <----------*/
// Step 3
// * add value and sliderTarget properties
// * calculate new value when thumb is moved
// * send "sliderMove" message to sliderTarget when thumb is moved
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
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());
},
_createTrack : function () {
return Canvas.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,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.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),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_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;
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
//--------------------------------------------------
// 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,
sliderTarget:display
});
SimpleSlider.create({
ID:"hSlider",
left:300,
top:180,
vertical:false,
sliderTarget:display
});
</SCRIPT>
</BODY>
</HTML>
Add valueChanged() observable method
<!--
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_5.js <----------*/
// Step 5
// * add valueChanged() observable method
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
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);
},
_createTrack : function () {
return Canvas.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,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.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),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_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 () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
//--------------------------------------------------
// 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)");
</SCRIPT>
</BODY>
</HTML>
Add value setter and getter methods and use setter to init value
<!--
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_4.js <----------*/
// Step 4
// * add value setter and getter methods
// * use setter to init value
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
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);
},
_createTrack : function () {
return Canvas.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,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.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),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_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;
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);
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
//--------------------------------------------------
// 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
});
</SCRIPT>
</BODY>
</HTML>
Convert track and thumb to StretchImg and Img 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/standard/load_skin.js></SCRIPT>
<SCRIPT>
/*----------> SimpleSlider_6.js <----------*/
// Step 6
// * convert track and thumb to StretchImg and Img widgets
// * specify skin directory and images
// * add mouse handlers to set the thumb"s state
// * add a custom cursor to the thumb
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);
},
_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 () {
}
});
</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)");
</SCRIPT>
</BODY>
</HTML>
Create, position, and size the slider and its two children (_track and _thumb) make the thumb drag-repositionable
<!--
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_1.js <----------*/
// Step 1
// * create, position, and size the slider and its two children (_track and _thumb)
// * make the thumb drag-repositionable, just for fun
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
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());
},
_createTrack : function () {
return Canvas.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,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.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),
canDragReposition:true,
dragAppearance:EventHandler.TARGET,
backgroundColor:"#AAAAAA"
});
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
//--------------------------------------------------
// sliders
//--------------------------------------------------
SimpleSlider.create({
ID:"vSlider",
left:100,
top:100
});
SimpleSlider.create({
ID:"hSlider",
left:300,
top:180,
vertical:false
});
</SCRIPT>
</BODY>
</HTML>
Error checking of newValue in setValue()
<!--
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_8.js <----------*/
// Step 8
// * move constants to class properties
// * error checking of newValue in setValue()
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addClassProperties({
VERTICAL_SRC_PREFIX:"v",
HORIZONTAL_SRC_PREFIX:"h",
DOWN:"down",
UP:"",
ON:"",
OFF:"off",
EVENTNAME:"sliderMove"
});
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.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(SimpleSlider.UP); return false",
mouseDown:"this.setState(SimpleSlider.DOWN)",
mouseUp:"this.setState(SimpleSlider.UP); 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, SimpleSlider.EVENTNAME, this);
},
setValue : function (newValue) {
if (!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) EventHandler.handleEvent(this.sliderTarget, SimpleSlider.EVENTNAME, this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
},
setDisabled : function (disabled) {
this.Super("setDisabled",arguments);
if (!disabled) {
this._track.setState(SimpleSlider.ON);
this._thumb.setState(SimpleSlider.UP);
this._thumb.setCursor(Canvas.HAND);
} else {
this._track.setState(SimpleSlider.OFF);
this._thumb.setState(SimpleSlider.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>
Horizontal slider
<!--
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>
isc.Slider.create({
ID: "hSlider",
vertical: false,
top: 200,
left: 100,
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.vSlider) return;
if (vSlider.getValue() != value) vSlider.setValue(value)
}
});
</SCRIPT>
</BODY>
</HTML>
Make slider thumb draggable calculate and set constrained thumb position when dragging
<!--
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_2.js <----------*/
// Step 2
// * make slider thumb draggable
// * calculate and set constrained thumb position when dragging
ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
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());
},
_createTrack : function () {
return Canvas.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,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.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),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_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);
}
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>
//--------------------------------------------------
// sliders
//--------------------------------------------------
SimpleSlider.create({
ID:"vSlider",
left:100,
top:100
});
SimpleSlider.create({
ID:"hSlider",
left:300,
top:180,
vertical:false
});
</SCRIPT>
</BODY>
</HTML>
Number slider
<!--
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>
isc.DynamicForm.create({
width: 200,
fields: [
{ name: "rating", title: "Rating", editorType: "slider",
minValue: 1, maxValue: 5, numValues: 5, width: 200, titleOrientation: "top"}
],
values: { rating: 4 }
});
</SCRIPT>
</BODY>
</HTML>
Specify skin directory and images
<!--
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_6.js <----------*/
// Step 6
// * convert track and thumb to StretchImg and Img widgets
// * specify skin directory and images
// * add mouse handlers to set the thumb"s state
// * add a custom cursor to the thumb
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);
},
_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 () {
}
});
</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)");
</SCRIPT>
</BODY>
</HTML>
Use slider to create a color mixer
<!--
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="powderblue" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
Slider color mixer example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
Isomorphic SmartClient SDK
</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>
function num2hex(num) {
var lowWord = num%16,
highWord = (num-lowWord)/16;
return num2hexdigit(highWord)+""+num2hexdigit(lowWord);
}
function num2hexdigit(num) {
if (num == 10) return "A";
else if (num == 11) return "B";
else if (num == 12) return "C";
else if (num == 13) return "D";
else if (num == 14) return "E";
else if (num == 15) return "F";
else return ""+num;
}
var colorBox = Canvas.newInstance({
left:400,
top:115,
width:200,
height:200,
red:"77",
green:"77",
blue:"77",
backgroundColor:"777777",
sliderMove:function(event,slider){
var newColor = num2hex(Math.round(slider.value));
if (slider.ID == "sliderRed") this.red = newColor;
else if (slider.ID == "sliderGreen") this.green = newColor;
else if (slider.ID == "sliderBlue") this.blue = newColor;
this.setBackgroundColor(this.red+""+this.green+""+this.blue);
return false;
}
});
Slider.newInstance({
ID:"sliderRed",
title:"Red",
left:60,
top:90,
sliderTarget:colorBox,
value:128,
minValue:0,
maxValue:255
});
Slider.newInstance({
ID:"sliderGreen",
title:"Green",
left:155,
top:90,
//sliderTarget:colorBox,
value:128,
minValue:0,
maxValue:255
});
Slider.newInstance({
ID:"sliderBlue",
title:"Blue",
left:250,
top:90,
//sliderTarget:colorBox,
value:128,
minValue:0,
maxValue:255
});
Slider.newInstance({
ID:"sliderSize",
title:"Size",
left:350,
top:330,
vertical:false,
value:200,
minValue:20,
minValueLabel:"Small",
maxValue:200,
maxValueLabel:"Big",
numValues:10
});
//colorBox.observe(sliderRed, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderGreen, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderBlue, "valueChanged", "observer.sliderMove(null,observed)");
colorBox.observe(sliderSize, "valueChanged", "observer.resizeTo(observed.value,observed.value)");
</SCRIPT>
</BODY>
</HTML>
Use Slider to set the border width
<!--
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>
exampleText = "When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature"s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation."
isc.VStack.create({ID:"outerBox", left:220, top:20, border:"4px solid gray", members:[
isc.HTMLFlow.create({
ID:"textBox", width:240, contents:exampleText,
border: "8px solid slateblue",
padding: 10,
margin: 4
})
]}).draw(); // draw immediately, so the sliders can manipulate this box immediately
isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10,
title:"Margin", value:4,
valueChanged: "textBox.setMargin(value); textBox.markForRedraw();"
})
isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10,
title:"Padding", value:10, left:60,
valueChanged: "textBox.setPadding(value); textBox.markForRedraw();"
})
isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10,
title:"Border", value:8, left:120,
valueChanged: function () {
textBox.setBorder(this.value + "px solid slateblue");
textBox.markForRedraw();
}
})
</SCRIPT>
</div>
</BODY>
</HTML>
Value changed event for Slider
<!--
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>
isc.Slider.create({
ID: "vSlider",
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.hSlider) return;
if (hSlider.getValue() != value) hSlider.setValue(value);
}
});
</SCRIPT>
</BODY>
</HTML>
Vertical Slider, min value, max value
<!--
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>
isc.Slider.create({
ID: "vSlider",
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.hSlider) return;
if (hSlider.getValue() != value) hSlider.setValue(value);
}
});
</SCRIPT>
</BODY>
</HTML>