JavaScript DHTML/SmartClient/Label
Содержание
- 1 Call draw method to draw a label
- 2 Create a Label
- 3 Create a Label and set HTML content
- 4 Create label for
- 5 Define custom border for Label
- 6 Label aligned to center
- 7 Put html tag into Label
- 8 Set autoDraw to true for Label
- 9 Set height, padding, style, align, valign, wrap, showEdges, showShadow for Label
- 10 Set label alignment
- 11 Set label content
- 12 Show Label edge
- 13 Static form label
- 14 Update label content
Call draw method to draw a label
<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.Label.create({
ID:"label1", left:50, top:50, showEdges:true, contents:"autoDraw:true", autoDraw:true
}) isc.Label.create({
ID:"label2", left:200, top:50, showEdges:true, contents:"autoDraw:false", autoDraw:false
}) isc.IButton.create({
title:"Draw", left:200, click:"label2.draw()"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Create a Label
<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.Label.create({
contents: "Hello world!"
})
</SCRIPT> </BODY> </HTML>
</source>
Create a Label and set 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.Label.create({
height: 30, padding: 10, align: "center", valign: "center", wrap: false, icon: "http://www.wbex.ru/style/logo.png", showEdges: true, contents: "Approved for release"
})
</SCRIPT>
</BODY> </HTML>
</source>
Create label for
<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>
Define custom border for Label
<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> Label.create({
ID:"myLabel", left:50, top:75, height:50, contents:"This label is centered", align:"center", border:"groove blue 4px", backgroundColor:"lightgrey"
}); </SCRIPT> </BODY> </HTML>
</source>
Label aligned to center
<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> Label.create({
ID:"myLabel", left:50, top:75, height:50, contents:"This label is centered", align:"center", border:"groove blue 4px", backgroundColor:"lightgrey"
}); </SCRIPT> </BODY> </HTML>
</source>
Put html tag into Label
<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> Label.create({
ID:"myLabel", left:50, top:75, height:50, contents:"This label is centered", align:"center", border:"groove blue 4px", backgroundColor:"lightgrey"
}); </SCRIPT> </BODY> </HTML>
</source>
Set autoDraw to true for Label
<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.Label.create({
ID:"label1", left:50, top:50, showEdges:true, contents:"autoDraw:true", autoDraw:true
}) isc.Label.create({
ID:"label2", left:200, top:50, showEdges:true, contents:"autoDraw:false", autoDraw:false
}) isc.IButton.create({
title:"Draw", left:200, click:"label2.draw()"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Set height, padding, style, align, valign, wrap, showEdges, showShadow for Label
<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.Label.create({
height: 50, styleName: "helloWorldText", padding: 4, backgroundColor: "#ffffd0", align: "center", valign: "center", wrap: false, showEdges: true, showShadow: true, icon: "http://www.wbex.ru/style/logo.png", contents: "Hello world!"
})
</SCRIPT> </BODY> </HTML>
</source>
Set label alignment
<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> <SCRIPT>
/*----------> SimpleLabel.js <----------*/
ClassFactory.defineClass("SimpleLabel",Canvas);
SimpleLabel.addProperties({
align:"left", valign:"center", borderSize:2, height:20, getInnerHTML : function () {return "
" + this.contents + " |
}, setAlign : function (newValue) { this.align = newValue; this.markForRedraw(); }
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
SimpleLabel.create({
ID:"myLabel", left:20, top:20, width:150, align:"center", valign:"top", borderSize:2, contents:"Hello World"
});
Button.create({
left:200, top:60, width:150, title:"setAlign("left")", click:"myLabel.setAlign("left")"
});
</SCRIPT> </BODY> </HTML>
</source>
Set label 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/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleLabel.js <----------*/
ClassFactory.defineClass("SimpleLabel",Canvas);
SimpleLabel.addProperties({
align:"left", valign:"center", borderSize:2, height:20, getInnerHTML : function () {return "
" + this.contents + " |
}, setAlign : function (newValue) { this.align = newValue; this.markForRedraw(); }
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
SimpleLabel.create({
ID:"myLabel", left:20, top:20, width:150, align:"center", valign:"top", borderSize:2, contents:"Hello World"
});
Button.create({
left:200, top:20, width:150, title:"setContents("goodbye")", click:"myLabel.setContents("goodbye")"
});
</SCRIPT> </BODY> </HTML>
</source>
Show Label edge
<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.Label.create({
ID:"label1", left:50, top:50, showEdges:true, contents:"autoDraw:true", autoDraw:true
}) isc.Label.create({
ID:"label2", left:200, top:50, showEdges:true, contents:"autoDraw:false", autoDraw:false
}) isc.IButton.create({
title:"Draw", left:200, click:"label2.draw()"
})
</SCRIPT>
</BODY>
</HTML>
</source>
Static form label
<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> var abcdArray = ["a", "b", "c", "d"],
abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},
formItems = [ {name:"item1", type:"header", defaultValue:"header value"}, {name:"item2", type:"blurb", defaultValue:"blurb value"}, {type:"rowSpacer"}, {name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"}, ];
DynamicForm.create({
ID:"itemsForm", left:20, top:40, width:400, items:formItems, canSubmit:true // Required for the submit button to be operative
}); </SCRIPT> </BODY> </HTML>
</source>
Update label 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/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Global dialog methods |
Isomorphic SmartClient SDK |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
Button.create({
ID:"askButton", title:"launch ISC ask()", left:100, top:100, width:200, height:25, click:"ask("This is an ask() dialog.", \ {yesClick: function () { \ outputLabel.setContents("ask() dialog - [YES] clicked"); \ return this.Super("yesClick", arguments); \ }, \ noClick: function () { \ outputLabel.setContents("ask() dialog - [NO] clicked"); \ return this.Super("noClick", arguments); \ } \ } \ );"
});
Label.create({
ID:"outputLabel", contents:"Dialog test output.", padding:2, left:350, top:100, width:250, height:20, backgroundColor:"white", border:"1px solid black"
}); </SCRIPT> </BODY> </HTML>
</source>