JavaScript DHTML/SmartClient/HTMLFlow

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

Embed Javascript code to HTMLFlow

   <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> currentUser = "Secret Agent X"; isc.Label.create({ 

   wrap:false,
   icon:"icons/16/person.png",
   contents:"Logged in as: ${currentUser}",
   dynamicContents:true

}) isc.HTMLFlow.create({ 

   top:100,
contents:"
Today"s date is ${new Date().toUSShortDate()}
", 
   dynamicContents:true

})

</SCRIPT>

</BODY> </HTML> 

 </source>


Resize HTMLFlow by

   <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/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({ 

   ID:"ajaxDefinition",
   top:50, width:75, height:45,
   overflow:"hidden", styleName:"exampleTextBlock", showEdges:true,
   contents:"Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)"

}) isc.IButton.create({ 

   title:"Expand",
   click:"ajaxDefinition.resizeBy(235,150);"

}) isc.IButton.create({ 

   title:"Collapse", left:120,
   click:"ajaxDefinition.resizeTo(75,45);"

})


</SCRIPT> </BODY> </HTML> 

 </source>


Resize HTMLFlow 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/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({ 

   ID:"ajaxDefinition",
   top:50, width:75, height:45,
   overflow:"hidden", styleName:"exampleTextBlock", showEdges:true,
   contents:"Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)"

}) isc.IButton.create({ 

   title:"Expand",
   click:"ajaxDefinition.resizeBy(235,150);"

}) isc.IButton.create({ 

   title:"Collapse", left:120,
   click:"ajaxDefinition.resizeTo(75,45);"

})


</SCRIPT> </BODY> </HTML> 

 </source>


Set style name for HTMLFlow

   <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> <style> .exampleStyleOnline { 

   color:black;
   background-color:white;
 font-family: verdana,arial,helvetica,sans-serif;
 font-size: 10px;
 line-height: 16px;
 padding: 4px;
 border: 1px dotted black;

} .exampleStyleLegal { 

   color:black;
   background-color:white;
 font-family: times new roman,times,serif;
 font-size: 12px;
 text-align: justify;
 padding-left: 4px;
 border-left: 1px solid black;
 padding-right: 4px;
 border-right: 1px solid black;

} .exampleStyleCode { 

 font-family: lucida console,bitstream vera sans mono,courier new,monospace;
 font-size: 14px;
 font-weight: bold;
 color: white;
 background-color: black;
 padding: 8px;

} .exampleStyleInformal { 

 font-family: lucida handwriting,cursive;
 font-size: 14px;
 line-height: 22px;
 color: midnightblue;
 background-color: oldlace;
 padding: 8px;
 border: 2px solid midnightblue;

} </style> <BODY BGCOLOR="silver">

<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.HTMLFlow.create({ 

   ID:"textBox",
   left:100, width:300,
   contents:exampleText,
   styleName:"exampleStyleOnline"

}) isc.FormLayout.create({ 

   items:[{
       type:"radioGroup",
       showTitle:false,
       valueMap:{
           "exampleStyleOnline":"Online",
           "exampleStyleLegal":"Legal",
           "exampleStyleCode":"Code",
           "exampleStyleInformal":"Informal"
       },
       defaultValue:"exampleStyleOnline",
       change:"textBox.setStyleName(value); textBox.markForRedraw()"
   }]

})

</SCRIPT>

</BODY> </HTML> 

 </source>


Use HTMLFlow to hold html content

   <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.HTMLFlow.create({ 

   width:230,
   styleName:"exampleTextBlock",
contents:"
Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications.
"

})

</SCRIPT>

</BODY> </HTML> 

 </source>


Use HTMLFlow to hold html content and resize it

   <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/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({ 

   ID:"ajaxDefinition",
   top:50, width:75, height:45,
   overflow:"hidden", styleName:"exampleTextBlock", showEdges:true,
   contents:"Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)"

}) isc.IButton.create({ 

   title:"Expand",
   click:"ajaxDefinition.resizeBy(235,150);"

}) isc.IButton.create({ 

   title:"Collapse", left:120,
   click:"ajaxDefinition.resizeTo(75,45);"

})


</SCRIPT> </BODY> </HTML> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/SmartClient/HTMLFlow&oldid=3791»