The eXSuite/JS library includes several HTML5 standalone-components, written in pure JavaScript, that uses no third-party libraries. The eXSuite/JS library includes different type of components such as:
Any caption the /JS component displays supports exHTML
tags. For instance, the caption / Caption / GetCaption() / SetCaption(value)
method of the Column object specifies the caption the column shows into the
control's header. For instance, "Column <b>1</b>" shows as
"Column 1". Shortly, you can use exHTML tags to specify
different font attributes for different parts of the caption.
The following exHTML tags support additions as explained:
<fgcolor=RRGGBB>?</fgcolor> displays text with a specified foreground color.
The fgcolor supports also <fgcolor CSSColor>?</fgcolor>
format where CSSColor
can be any CSS legal color values, as explained bellow. For example, "<fgcolor
blue>caption</fgcolor>" shows "caption" in
blue.
<bgcolor=RRGGBB>?</bgcolor> displays text with a specified background color.
The bgcolor supports also <bgcolor CSSColor>?</bgcolor>
format where CSSColor
can be any CSS legal color values, as explained bellow. For example, "<bgcolor
blue>caption</bgcolor>" shows "caption"'s
background in blue.
<gra rrggbb;mode;blend> ... </gra> defines a gradient text.
The gra supports also <gra CSSColor;mode;blend> ... </gra>
format where CSSColor
can be any CSS legal color values, as explained bellow. For example, "<gra blue;1;1>caption</gra>" shows
"caption" in gradient (from black (current foreground color) to
blue.
<out rrggbb;width> ... </out> shows the text with outlined characters.
The out supports also <out CSSColor;width> ... </out> format where CSSColor
can be any CSS legal color values, as explained bellow. For example, "<out blue;2>caption</out>" shows
"caption" outlined.
<sha rrggbb;width;offset> ... </sha> define a text with a shadow
The out supports also <sha CSSColor;width;offset> ... </sha>
format where CSSColor
can be any CSS legal color values, as explained bellow. For example, "<sha
blue;4;2>caption</sha>" shows "caption" with a
blue shadow.
<img>number[:width]</img> inserts an icon inside the text.
This syntax is not supported, instead you have to use the <img>key[:width]</img>
as explained next.
CSSColor or CSS legal color values can be specified by the following methods:
Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.
For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
Hexadecimal colors with transparency, is specified with: #RRGGBBAA,
where AA (alpha) value must be between 00 and FF. For example, #0000ff80
defines a semi-transparent blue.
RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255.
For example, rgb(0,0,255) defines the blue color.
RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green,
blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of
colors. For example, hsl(240, 100%, 50%) defines the blue color.
HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object
as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification.
For example, blue defines the blue color.
In conclusion, the following statements are equivalents:
<fgcolor=0000FF>caption</fgcolor>
<fgcolor #0000FF>caption</fgcolor>
<fgcolor #0000FFFF>caption</fgcolor>
<fgcolor rgb(0,0,255)>caption</fgcolor>
<fgcolor rgba(0,0,255,1)>caption</fgcolor>
<fgcolor hsl(240, 100%, 50%)>caption</fgcolor>
<fgcolor hsla(240, 100%, 50%,1)>caption</fgcolor>
<fgcolor blue>caption</fgcolor>
For example, if you need to display plain-text only (ignore the exHTML tags),
you need to add exontrol.DrawTextFormatEnum.exPlainText flag to ft / formatText
/ GetFormatText() / SetFormatText(value) property. The following sample adds a column named "Plain" where all cells
are shown in in plain-text ("<b>caption</b>" is displayed
as is it, instead bolding the caption):
Any caption the /JS component displays can show images or pictures using the
<img> tag. The <img>key[:width]</img> inserts a custom size picture into the text.
The exontrol.HTMLPicture.Add(key, source) method loads the picture with
specified source and associates the key to it, so you can anytime refer using
the <img>key</img> tag.
The exontrol.HTMLPicture.Add(key, source) method supports the following parameters:
key {string}, specifies the unique key to identify the image or picture
source {any}, specifies an object of HTMLImageElement type, or a string
that defines the path to the image
For instance, exontrol.HTMLPicture.Add("logo",
"images/exontrol.logo.png") loads the "exontrol.logo.png"
image, which can be displayed anywhere using the <img>logo</img>
tag. The exontrol.HTMLPicture.Add(key, source) method is asynchronous so the
picture or image may be displayed later only after fully load.
The following sample shows how you can display images (the
sample uses exontrol.OrgChart type, but the idea is the same for any of our /JS
component):
where oOrgChart variable is an object of exontrol.OrgChart type. The sample
displays the node's picture using the <img> tag and image property as
well.
The result may look as follows:
If loading the pictures fails (picture not found, network errors, ...), the control may shows as:
Also, the exontrol.HTMPicture object supports the following methods:
Count(), returns the number of pictures within the collection
Remove(name), removes the picture with specified name
Clear(), removes all picture objects from the collection
Draw(name, ctx, client), draws the picture with specified name on the canvas's context
at specified location
DrawS2(ctx, name, client, limits, location), draws, scales and/or stretches the picture on specified context using giving
limits (the picture holder is shown if the picture has not been loaded yet).
GetSize(name), returns the an object of {width, height} type that indicates the original size of the
picture
forEachU(callback, thisArg), enumerates the pictures using the callback(oHPic, name)
{any} until it returns a truly value or no more pictures. The forEachU
method returns the last result the callback returns.
the IDENTIFIER is the ID of the object being added. The ID attribute can be used by a JavaScript (via the HTML DOM) or by CSS to make changes or style the element with the specified id.
The id attribute specifies a unique id for an HTML element
the CLASSIDENTIFIER is the object's class identifier as
CD481F4D-2D25-4759-803F-752C568F53B7
The CLASSIDENTIFIER is unique for each /COM
object, and can be found on control's documentation on the main object page,
where something like follows is displaying, or
explained here;
Tip The /COM object can be placed on a HTML page (with
usage of the HTML object tag: <object classid="clsid:...">)
using the class identifier: {CD481F4D-2D25-4759-803F-752C568F53B7}. The
object's program identifier is: "Exontrol.G2antt". The /COM
object module is: "ExG2antt.dll"
The following sample adds the eXG2antt component to a web page:
where the IDENTIFIER is the ID of the object being handled, and the EVENT
is the name of the event being handled. The PARAMETERS gets the list of
parameters that the event carries.
Using the FOR and EVENT attributes to associate events
gives you access to custom events fired by embedded objects and to any
parameters that an event generates. Unlike standard events that can be bound
using attributes or properties, in the case of custom objects these are not
available.
Use the FOR attribute to specify which element or object to
handle, assigning it an identifier or the name of an object, application, or
control. If you don't specify this attribute, the handler is bound to the
window by default. Notice that JScript is case-sensitive, so you must type
the identifier or name exactly as it appears in the corresponding element or
object.
Use the EVENT attribute to specify which event to associate to,
assigning it an event name. If the event generates parameters (few
predefined events do), you can also specify a list of comma-separated
parameter names enclosed in parentheses immediately after the event name.
The parameters are untyped. Because JScript is case-sensitive, make sure you
always spell event names in lowercase letters. Also, if you give a parameter
list, VBScript requires that all parameters defined for the event be listed,
even if they are not used.
The following JScript example displays a message box when the user clicks
an anchor element in the gantt control:
Some of the events pass the parameters by reference. Such of event could be
the KeyDown
event, where the KeyCode parameter is passed by reference, so user can
change it runtime.
For instance, the following JScript sample changes the TAB behavior, so
if user presses the TAB, the control sends instead the RIGHT key, so it
advance to the next editable field:
locate and click the bold identifier (main object) in the control's objects list ( G2antt
)
Under the object's help you will find:
Tip The /COM object can be placed on a HTML page (with
usage of the HTML object tag: <object classid="clsid:...">)
using the class identifier: {CD481F4D-2D25-4759-803F-752C568F53B7}. The
object's program identifier is: "Exontrol.G2antt". The /COM object
module is: "ExG2antt.dll"