JavaScript DHTML/SmartClient/Canvas
Содержание
- 1 Add click event handler to Canvas
- 2 Add one Canvas to
- 3 Call scrollTo to scroll a canvas
- 4 Canvas overflow: clipH
- 5 Canvas overflow: clipV
- 6 Canvas overflow: hidden
- 7 Canvas overflow: scroll and auto
- 8 Canvas: overflow = visible
- 9 Refresh from server
- 10 Set string content to Canvas
- 11 Set text content to a Canvas
Add click event handler to Canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/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?")"
});
</SCRIPT> </BODY> </HTML>
</source>
Add one Canvas to
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> Canvas.create({
ID:"topWidget", left:50, top:75, width:300, height:300, contents:"top", backgroundColor:"skyblue", click:"return confirm("top received click event. Continue?")"
});
Canvas.create({
ID:"parentWidget", autoDraw:false, left:50, top:50, width:200, height:200, contents:"parent", backgroundColor:"khaki", click:"return confirm("parent received click event. Continue?")"
}); topWidget.addChild(parentWidget); </SCRIPT> </BODY> </HTML>
</source>
Call scrollTo to scroll a canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic clipping and scrolling example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
// HTML for the image to use in all of the canvas widgets below
var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200);
// overflow: hidden
Canvas.create({
overflow:"hidden", ID:"hiddenCanvas", left:20, top:345, width:100, height:100, contents:theImage
}); Label.create({
left:20, top:545, width:200, height:20, contents:"overflow:"hidden"", align:"center"
}); // buttons for scrolling content of the hiddenCanvas Button.create({
left:45, top:465, width:50, height:20, title:"TL", click:"hiddenCanvas.scrollTo(0,0)"
}); Button.create({
left:145, top:465, width:50, height:20, title:"TR", click:"hiddenCanvas.scrollTo(100,0)"
}); Button.create({
left:95, top:485, width:50, height:20, title:"Center", click:"hiddenCanvas.scrollTo(50,50)"
}); Button.create({
left:45, top:505, width:50, height:20, title:"BL", click:"hiddenCanvas.scrollTo(0,100)"
}); Button.create({
left:145, top:505, width:50, height:20, title:"BR", click:"hiddenCanvas.scrollTo(100,100)"
});
</SCRIPT> </BODY> </HTML>
</source>
Canvas overflow: clipH
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // HTML for the image to use in all of the canvas widgets below var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200); // overflow: clipH Canvas.create({
overflow:"clip-h", left:270, top:45, width:100, height:100, contents:theImage
}); Label.create({
left:270, top:245, width:200, height:20, contents:"overflow:"clip-h"", align:"center"
}); </SCRIPT> </BODY> </HTML>
</source>
Canvas overflow: clipV
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // HTML for the image to use in all of the canvas widgets below var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200); // overflow: clipV Canvas.create({
overflow:"clip-v", left:520, top:45, width:100, height:100, contents:theImage
}); Label.create({
left:520, top:245, width:200, height:20, contents:"overflow:"clip-v"", align:"center"
}); </SCRIPT> </BODY> </HTML>
</source>
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
Dynamic clipping and scrolling example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
// HTML for the image to use in all of the canvas widgets below
var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200);
// overflow: hidden
Canvas.create({
overflow:"hidden", ID:"hiddenCanvas", left:20, top:345, width:100, height:100, contents:theImage
}); Label.create({
left:20, top:545, width:200, height:20, contents:"overflow:"hidden"", align:"center"
}); // buttons for scrolling content of the hiddenCanvas Button.create({
left:45, top:465, width:50, height:20, title:"TL", click:"hiddenCanvas.scrollTo(0,0)"
}); Button.create({
left:145, top:465, width:50, height:20, title:"TR", click:"hiddenCanvas.scrollTo(100,0)"
}); Button.create({
left:95, top:485, width:50, height:20, title:"Center", click:"hiddenCanvas.scrollTo(50,50)"
}); Button.create({
left:45, top:505, width:50, height:20, title:"BL", click:"hiddenCanvas.scrollTo(0,100)"
}); Button.create({
left:145, top:505, width:50, height:20, title:"BR", click:"hiddenCanvas.scrollTo(100,100)"
});
</SCRIPT> </BODY> </HTML>
</source>
Canvas overflow: scroll and auto
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Dynamic clipping and scrolling example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
// HTML for the image to use in all of the canvas widgets below
var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200);
// overflow: scroll Canvas.create({ overflow:"scroll", left:270, top:345, width:116, height:116, contents:theImage }); Label.create({ left:270, top:545, width:200, height:20, contents:"overflow:"scroll"", align:"center" });
// note that the width of this last widget is 217, allowing for all
// of the image"s width PLUS the width of the vertical scrollbar, so
// the horizontal scrollbar is unnecessary
// overflow: auto
Canvas.create({ overflow:"auto", left:520, top:345, width:217, height:100, contents:theImage });
Label.create({ left:520, top:545, width:200, height:20, contents:"overflow:"auto"
(width = 217)", align:"center" });
</SCRIPT> </BODY> </HTML>
</source>
Canvas: overflow = visible
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> // HTML for the image to use in all of the canvas widgets below var theImage = Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200);
// overflow: visible Canvas.create({
overflow:"visible", left:20, top:45, width:100, height:100, contents:theImage
}); Label.create({
left:20, top:245, width:200, height:20, contents:"overflow:"visible"", align:"center"
}); </SCRIPT> </BODY> </HTML>
</source>
Refresh from server
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
RefreshFromServer example |
Isomorphic SmartClient SDK |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
Canvas.create({
ID:"refreshMe", left:100, top:100, canDragReposition:true, backgroundColor:"silver", contents:"Before refreshFromServer
I am a small, silver, draggable canvas"
}); Button.create({
title:"refreshFromServer", left:100, top:400, width:200, click: function () { refreshMe.refreshFromServer("refresh_response.html", null, "Refreshing..."); }
}); </SCRIPT> </BODY> </HTML>
</source>
Set string content to Canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/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?")"
});
</SCRIPT> </BODY> </HTML>
</source>
Set text content to a Canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.VLayout.create({
width: 200, height: 300, border:"1px solid blue", layoutMargin:5, members: [ isc.HTMLFlow.create({ ID: "textCanvas", prefix: "Message from Rob:
", padding:5, height: 1 }), isc.DynamicForm.create({ numCols: 2, height: "*", colWidths: [60, "*"], fields: [ {name: "subject", title: "Subject", type: "text", width: "*", defaultValue: "Re: your message" }, {name: "message", type: "text", length: 5000, showTitle: false, colSpan: 2, height: "*", width: "*" } ] }) ]
}); isc.Button.create({
left: 250, title: "Short message", message: "I"ll be in town Saturday. Give me a call on my cell and we"ll get a bite to eat.", click: function () { textCanvas.setContents(textCanvas.prefix+this.message) }
}); isc.Button.create({
ID: "longMessageButton", top:30, left: 250, title: "Long message", message: "I"ll be in town Saturday. Give me a call on my cell and we"ll check out the new Thai" +" restaurant on Polk Street. Jamie said it"s great but too spicy for him, shouldn"t be" +" a problem for you :)", click: function () { textCanvas.setContents(textCanvas.prefix+this.message) }
});
longMessageButton.click();
</SCRIPT> </BODY> </HTML>
</source>