JavaScript DHTML/SmartClient/Canvas

Материал из Web эксперт
Перейти к: навигация, поиск

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>


Canvas overflow: hidden

   <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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/Canvas&oldid=3853»