exsys GbR Emden Java applets and applications java.exsys.net |
The creation of a complete project consists of 3 parts represented by different files. These are:
HTML file
The
amount of specifications in the HTML file is as
small as possible and consists of the required indication
of the project file name and the optional indication of
the colors and the text displayed while loading a project.
Project file
The project file describes the basic project
structure and contains some settings needed at startup, like scrollbar
settings.
The basic project structure is described by listing all the
used layers, where the
layer names, the files containing the corresponding layer data
and the layer controlled by the user at
startup are specified. The order the layers are
listed will also specify their display order.
Layer file
The content of each layer will be specified in a separate file. This file contains
the structure, the content and the behaviour of the corresponding layer. Each layer
can access other layers by their names, which are specified in the project
file, and are therefore able to influence their behaviour.
The display information within the layer file is structured by different block types. This means, that the information consists of data and organization blocks, to which specific operations can be applied.
The most elemental block type is the Container Block, whose purpose is to host other blocks and to determine whether the contained blocks are organized in columns or in rows. Container Blocks can also contain presettings for contained blocks, like text colors or the target of hyperlink calls. These presettings are passed to the contained blocks regardless of their definition depth but can be overwritten within any block. Container Blocks can contain any number of additional Container Blocks, Text Blocks and Image Blocks.
Text Blocks (TB) and Image Blocks (IB) contain the corresponding display data (i.e. text and images).
Because the different
contents/themes in a layer are mostly structured by individual Container
Blocks specified at top level (not within another Container Block) and are
therefore separated from each other, it is possible to apply additional
operations on those content blocks by using Space Blocks
(SB).
Each top level Container Block can be aligned vertically respectively to the previous
and the following Container Block by using Space Blocks.
In the simplest form this will be
done by inserting a given amount of space specified in
pixels, but it can also be done by applying
a specific rule, like the automatic insertion of empty
spaces to center a Container or to display
its content at the top or the bottom while ensuring that
other top level containers are not visible.
Commands can be executed by selecting an Active Component , by occurance of an event (e.g. mouse pressed) and in dependency of the display position of the corresponding layer. Such position dependent command sequences are also defined at top level (not within any Container Block) and can be combined with Space Blocks, e.g. to pause the automatic scrolling for a given duration after centering the Container Block.
Command sequences of any type (incl. Free Macros and Event Macros ) are specified by listing all the single commands to be executed when the command sequence is invoked. Each command of the sequence refers to the last stated layer within the sequence or even to all layers.
Commands of any layer can refer to any layer of the current project and can also be reassigned or redefined at runtime.
Insertion of Comments
Comments can be inserted at any position within project and layer files. A comment line is initiated by 2 slash chars // and lasts till end of line.
Example:
// comment: Definition of event macros
Init={start} // comment: will start the
automatic scrolling after initializing this layer
// comment: Definition of used images
Images={
img1='images/logo.gif'
}
// comment: Definition and Layout of the display
information
{ Columns
TB = {
Width='30'
Text='This text
will be displayed in the first column'
}
// comment: this container organizes its
components in rows and will be centered within its parent container
{ Rows; Center
TB={ Width='70'
Text='This text will be displayed in the first row of the second column'
}
IB={ Width='70';
Center // comment: image will be centered in the second row of the second column
Image='img1'
}
}
TB = { Width='100'
Text='This
text will be displayed in the third column'
}
}
SB='Center' // comment: This will center the whole
container
Commands={Pause='3000'} // comment: the automatic
scrolling will be paused for 3 seconds after centering the container
SB='1' // comment: layer will only scroll, if it is larger than the display area
2 Integration of the Applet in the HTML File
The applet and all accompanying class files are compressed in only one jar-file. This reduces both, the data to be transmitted and the connections to be made to the server.
The following applet contained therein can be used:
The amount of parameters in the HTML file is as small as possible and consists therefore of values needed at startup.
Important:
The applet needs the author
parameter, which must be identical to:
<PARAM NAME="Author" VALUE="JET - Java Extended Ticker - (c) exsys GbR Emden - www.java.exsys.net">
Please, copy and paste this value to prevent typing errors.
Parameter:
Name: | ProjectFile (required) |
Description: |
Information relevant to the whole project, in particular the definition of the used layers. The settings of this file are explained in an own chapter. The recommended extension for project files is .prj |
Values: | Name of the project file |
Default: | - |
Name: | LoadingBGColor (optional) |
Description: |
Background color while the project is loading. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | black |
Name: | LoadingTextColor (optional) |
Description: |
Text color used to display the LoadingMessage |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | white |
Name: | LoadingMessage (optional) |
Beschreibung: | Text displayed while the project is loading |
Werte: | Text |
Default: | - |
Example:
<APPLET CODE="Ticker.class" WIDTH="360" HEIGHT="240" ARCHIVE="jet.jar" NAME="jet_name" MAYSCRIPT>
<PARAM NAME="Author" VALUE="JET - Java Extended Ticker - (c) exsys GbR Emden - www.java.exsys.net">
<PARAM NAME=ProjectFile VALUE="demo.prj">
<PARAM NAME=LoadingBGColor VALUE="0x000000">
<PARAM NAME=LoadingTextColor VALUE="0x999999">
<PARAM NAME=LoadingMessage VALUE="Loading...">
</APPLET>
Consider that the JAR-file must be indicated in the applet parameter.
The MAYSCRIPT indication is only required, if there are any calls from the applet to JavaScript.
The assignment of an applet name (in the example: Name="jet_name") is only required, if the applet is controlled/accessed via JavaScript.
Not every browser supports the communication between Java and JavaScript.
Basic project settings are specified in the project
file. Nevertheless some of this settings can be modified at runtime.
Beside of the scrollbar configuration, the activation or deactivation of the
drag mode and the definition of the background color, this file is also
the location where all the layers and their hierarchy are defined. The
recommended extension for project files is .prj
Parameter:
Name: | BGColor |
Description: | Background color displayed at runtime |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | black |
Name: | DragMode |
Description: | Enabling or disabling the possibility to adjust the visible area of a layer by dragging it with the mouse |
Values: | Yes, On, True or No, Off, False |
Default: | Yes |
Name: | ScrollbarPosition |
Description: | Determines the display position of the scrollbar or disables the scrollbar to prevent its display |
Values: | Left, Right, Hide |
Default: | Right |
Name: | ScrollbarActive |
Description: |
Determines whether the scrollbar is active or inactive at startup. In the inactive mode, the scrollbar will also be displayed, but will not be connected to any layer, so that it will have no functionality |
Values: | Yes, On, True or No, Off, False |
Default: | Yes |
Name: | ScrollbarWidth |
Description: |
Display width of the scrollbar. The minimum value is 9 pixel |
Values: | integer value >= 9 |
Default: | 11 |
Name: | ScrollbarLeftMargin |
Description: | Left margin of the scrollbar |
Values: | integer value >= 0 |
Default: | 0 |
Name: | ScrollbarRightMargin |
Description: | Right margin of the scrollbar |
Values: | integer value >= 0 |
Default: | 0 |
Name: | ScrollbarBGColor |
Description: | Background color of the scrollbar |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | black |
Name: | ScrollbarMarginColor |
Description: |
Color of the margin area generated by ScrollbarLeftMargin and/or ScrollbarRightMargin |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | black |
Name: | ScrollbarButtonColor |
Description: |
Color of the scrollbar buttons to scroll up and down |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | grey (0xAAAAAA) |
Name: | ScrollbarSliderColor |
Description: | Color of the scrollbar slider |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | grey (0xAAAAAA) |
Name: | ScrollbarLineColor |
Description: |
Color of the line that connects the scrollbar buttons to scroll up and down |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | grey (0xAAAAAA) |
Name: | ScrollbarArrowColor |
Description: |
Color of the arrows on the scrollbar buttons to scroll up and down |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | black |
Name: | ScrollbarActiveArrowColor |
Description: |
Color of the active arrows on the scrollbar buttons to scroll up and down. The arrows will become active, as soon as the mouse moves over them |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | red |
Name: | Layer |
Description: |
Each used layer
must be defined in the project file, whereby their definition
order also determines their display order. The first defined
layer will be displayed on top and will therefore
cover the remaining layers. Thus the last defined layer will be
displayed behind all the others. |
Values: | see description in 'Keywords related to Layer' |
Default: | - |
Keywords related to Layer:
The specification of a layer is made by the following keywords:
Name: | Name |
Description: |
The layer name is the only required keyword. The freely selectable name is valid during the whole lifetime of the project and will be used to reference the layer by other layers. The name will also remain valid when the layer content is afterwards replaced by a load command. |
Values: | Text |
Default: | - |
Name: | File |
Description: |
Determines the file containing the display information of the corresponding layer. This parameter is optional, so that the layer can obtain its content (data) at runtime. |
Values: | Name of the layer file |
Default: | - |
Name: | UserControl |
Description: |
This keyword gets no value assignment. The layer to which this keyword is assigned will be the layer the user is able to control at startup via the scrollbar and by dragging the visible area with the mouse. |
Values: | - |
Default: | - |
Example of a project file:
BGColor = '0x000000'
DragMode='no'
ScrollbarActive='no'
ScrollbarPosition='Right'
ScrollbarWidth='11'
ScrollbarLeftMargin='3'
ScrollbarRightMargin='0'
ScrollbarBGColor='0x000000'
ScrollbarMarginColor='0x000000'
ScrollbarButtonColor='0xAAAAAA'
ScrollbarSliderColor='0xAAAAAA'
ScrollbarLineColor='0xAAAAAA'
ScrollbarArrowColor='0x000000'
ScrollbarActiveArrowColor='0xFF0000'
Layer={
Name='loading'; File='loadinglayer.jet'
}
Layer={
Name='menu'; File='menulayer.jet'
}
Layer={
Name='help'; File='helplayer.jet'
}
Layer={
Name='info'; File='info_eng.jet'
UserControl
}
Layer={
Name='bg'; File='bglayer1.jet'
}
A layer file contains all information needed to its display and process. The position of each layer within the display hierarchy and also their names will be determined in the project file and are valid for the whole runtime. The recommended extension for layer files is .jet
A layer file consists of the following category groups:
Example of a layer file:
// comment: Definition of event macros
Init={start} // comment: starts the automatic scrolling
after initializing this layer
MouseEnter={stop} // comment: stops automatic scrolling
when mouse enters area
MouseExit={Start} // comment: starts automatic scrolling
when mouse leaves area
// comment: Definition of used fonts
Fonts={
Name='normalFont'; Size='12';
Style='bold'; font='TimesRoman' |
Name='bigFont'; Size='18'; Style='bold'+'italic';
font='TimesRoman'
}
// comment: Definition of used images
Images={
img1='images/logo.gif' |
offImg='images/passive.gif' |
onImg='images/active.gif'
}
// comment: Definition and Layout of the display information
Label='Main' // comment: sets a label to
jump to this position using the jump command
{ Columns
TB = { Width='30'
Text='This text will be displayed
in the first column'
}
// comment: this container organizes its
components in rows and will be centered within its parent container
{ Rows; Center
TB={ Width='70'
Text='This
text will be displayed in the first row of the second column'
}
IB={ Width='70';
Center // comment: image will be centered in the second row of the second column
Image='img1'
}
}
TB = { Width='100'
Text='This
text will be displayed in the third column'
}
}
SB='Center' // comment: This will center the whole
container
Commands={Pause='3000'} // comment: the automatic
scrolling will be paused for 3 seconds after centering the container
{ Target='_blank'; Font='normalFont' // comment: default is
rows
TB={ Center; TextAlignment='Right'
// comment: the block will be centered and ist content aligned to the right
side
Text='This
text contains a '
URL='www.exsys.net'
Commands={Jump='Main'}
UnderLine='yes'
Font='bigFont'
ActiveText='link'
// comment: Active Component executes hyperlink call and command
UnderLine='no'
Font='normalFont'
Text='
that will be underlined and displayed with a bigger font and executes a hyperlink
call and a command'
}
IB = {
Image='offImg';
ActiveImage='onImg' //comment: switches between both images in dependency of
the mouse position
}
}
SB='Bottom' // comment: this container will be alligned
to the bottom when the first container leaves the visible area
The basic settings in a layer file determine some fix values needed as base to evaluate the following data or determine additional features, that can be defined one time for each layer file.
Parameter:
Name: | BaseWidth (optional) |
Description: |
This value
determines the width that should be equivalent to 100%. If BaseWidth is set to the display resolution, it's
possible to place the single display elements precisely at the
indicated position. |
Values: | integer value |
Default: | 100 |
Example: | BaseWidth='100' |
Name: | ReloadInterval (optional) |
Description: |
Determines the amount of time in seconds that has to elapse in order to automatically reload/replace the content of the layer. The automatic reloading process occurs periodically, i.e. the timer will be reinitiated after the given period elapses. |
Values: | integer value >= 5 (interval in seconds) |
Default: | - |
Example: | ReloadInterval='60' |
Name: | ReloadFile (optional) |
Description: |
Indicates what layer file should be loaded when the time indicated by ReloadInterval elapses. By indicating a new layer file, it's possible to replace the layer content and consequently to present different information/products in an automatically rotating manner without the need of any user interaction. If this parameter is not defined or no value is assigned to it, the reloaded file will be the current layer file. |
Values: | Name of the layer file |
Default: | - |
Example: | ReloadFile='info2.jet' |
Name: | ScrollingMode (optional) |
Description: |
This parameter determines the behaviour of the scrollbar as well as the behaviour while dragging the display area with the mouse. When using the normal mode, the last displayed position of a layer will be the last contained information block. The ticker mode, which should be used when using the automatic scrolling feature, adds a transition from the ending of a layer to its beginning, so that a continous and smoothly scrolling can be achieved. |
Values: |
Normal: Recommended, when the layer is not
using the automatic scrolling feature |
Default: | Ticker |
Example: | ScrollingMode='normal' |
4.2 Definition of Event Macros
Event Macros are command sequences, that will be performed automatically when the corresponding event occurs. The definition of Event Macros is optional, but it is recommended to add the Start command to the Init Event Macro in order to initiate the automatic scrolling.
The following rules are valid when defining Event Macros:
Example: Event Macros:
Init={start} // comment: will start the
automatic scrolling after initializing this layer
MouseEnter='MouseOnApplet' // comment:
executed when mouse enters area; Assignment of Free Macro name
MouseExit='MouseOffApplet' // comment:
executed when mouse leaves area; Assignment of Free Macro name
ReloadRequest={Layer='LoadMsg';
ShowIncrement} // comment: executed when layer requests
reload
ReloadIndication={Layer='LoadMsg';
HideIncrement} // comment: executed when layer is
reloaded
Listing of available Event Macros:
Init:
Will be executed
when the layer gets new data. This happens when a layer gets its first
layer file (mostly after loading the project file) and also when the
content of a layer is replaced by another layer file (different file
name) using the Load command. This macro will
not be executed if the current layer file
is reloaded (e.g. using the Reload command).
If the automatic scrolling should be initiated at
startup, it's necessary to add at least the Start command (with or without priority) to this
macro. Further it's recommended to specify the scrolling speed and
direction within this macro.
ReloadRequest:
Will be
executed when a layer requests the replacement of its current layer
file using the Load or Reload command. It will not be executed if the layer has no layer file
assigned at that time (at startup or when the layer gets its first layer file),
because in that case there is no layer content and therefore no Event Macros
defined. Such a situation can be handled by the Init macro of the loaded layer file.
ReloadIndication:
This
macro will always be executed after replacing the content of a
layer (layer file) by the Load or Reload command. It doesn't matter if the layer
file is replaced by a new content file or the same content file (same file
name). This macro will not be executed
if a layer file is loaded (initiated by another layer) to a previously
empty layer (layer that has no layer file assigned at that time).
Consider that this Event Macro will be executed after the
loading process is finished, so that the ReloadIndication macro of the loaded layer
file will be taken.
MouseEnter:
Will be
executed each time the mouse enters the applet area
MouseExit:
Will be
executed each time the mouse leaves the applet area
MouseOnLink:
Will be
executed as soon as the mouse is on an Active
Component
MouseOffLink:
Will be
executed as soon as the mouse leaves the area of an Active Component
MousePressed:
This Event
Macro will be executed as soon as the mouse button is pressed on the applet
area. It will not be executed by the
user controlled layer (layer the user can control via scrollbar
and/or dragging of the visible area with the mouse) if the drag mode is
enabled. In that case the Event Macro will be ignored and the automatic
scrolling will be paused.
MouseReleased:
This Event
Macro will be executed as soon as the pressed mouse button is released. It
will not be executed by the user
controlled layer (layer the user can control via scrollbar
and/or dragging of the visible area with the mouse) if the drag mode is
enabled. In that case the Event Macro will be ignored and the automatic
scrolling will be restarted if it was previously paused by the MousePressed macro.
ShowLayer:
The ShowLayer macro will be executed after unhiding a
previously hidden layer.
HideLayer:
The HideLayer macro will be executed when a layer is
set to be hidden.
LayerResized:
Will be
executed when the display area is resized. This is the case when modifying the
applet size or after enabling or disabling the display of the scrollbar.
This Event Macro is mostly not needed, but can
be used when implementing some special effects.
Free Macros are command sequences only specified to be assigned to a Commands keyword or an Event Macro. They are used to facilitate the usage of repetitive command sequences by defining them only once as Free Macro and also to enable the definition of rotating states of a command (commands switching between different states). The definition of Free Macros is optional.
The following rules are valid when defining Free Macros:
Example: Free Macros
// Definition of Free Macros
Macros={
helpOn={Layer='help'; Show;
Set='helpOff'} |
helpOff={Layer='help'; Hide;
Set='helpOn'}
}
// Assignment of a Free Macro
{
TB={
Commands='helpOn' // comment: Assignment of a Free Macro, that
rotates between 2 states
ActiveText='Help
on/off'
}
}
All fonts used in a layer must be defined within the font list and can be referenced by their names.
The following rules are valid when defining the font list:
Comment:
The different text colors are defined within the
corresponding container and/or text blocks.
Example:
Fonts={
Name='F1'; Size='20'; Style='bold' + 'italic'; font='Serif' |
Name='F2'; Size='9'; Style='plain';
font='SansSerif'
}
// Some Data followed by more font-styles
Fonts={
Name='F3' Size='12' Style='italic' font='Serif' |
Name='F4' Size='12' Style='plain'
font='MonoSpaced'
}
Parameter:
Name: | Fonts |
Description: | List of all used font styles |
Values: | see description in 'Keywords related to Fonts' |
Default: | - |
Keywords related to Fonts:
Name: | Name |
Description: |
Freely selectable name in order to be able to reference the font from a container and/or text block |
Values: | Text |
Default: | - |
Name: | Font |
Description: |
Determines which font should be used |
Values: |
|
Default: | SansSerif |
Comment:
MS IE
distinguishes between capital and small letters when specifying fonts
Name: | Size |
Description: | Size of the font |
Values: | integer value |
Default: | 9 |
Name: | Style |
Description: |
Style of the font. The available font styles can be combined by the ‘+‘-character (see above-mentioned example), whereby double designations can lead to falsifications |
Values: |
|
Default: | Plain |
All images and animations, that should be displayed in a layer, must be defined within the image list and can be referenced by their name.
The following rules are valid when defining the image list:
Example:
Images={
img1='img/square1.jpg' |
img2='img/square2.jpg'
}
// Some Data followed by more images
Images={
img3='img/product_animation.gif' |
img4='img/cube.gif'
}
4.6 Design: Declaration of the Display Information
The structuring of the
display information (layout) is mainly done by container and space
blocks, whereas the real display data is represented by text and image
blocks, which are located within the container blocks.
Container blocks can be considered as flexible
one-dimensional tables (as rows or columns), that also have properties and
presettings for the contained blocks. Nevertheless, container blocks
can be nested to get multi-dimensional tables.
Space blocks are used to vertically separate adjacent top
level container blocks (mostly representing different
topics/themes) from each other by generating blank areas, which can
be stated as fix value or as rule.
Each block,
except space blocks, can get an alignment within the container it's
included, whereas the parent container of top level blocks is represented by the
applet window. Blocks can be centered, aligned to the right or left side or to
the top or bottom, depending if they are structured in rows or columns. In
addition it's also possible to align the content of a data block by using the
same rules.
The most elementary
block type to structure the information is the container block, which is used to
host additional blocks and to indicate what kind of structure
should be applied on them (columns or rows). Further it's possible to define
some presettings within a container block, like text colors and target of
hyperlinks, which will be used by incorporated blocks. Nevertheless those
presettings can be overwritten within any of the included blocks.
In order to be
able to get the desired appearance/structure, it's also possible to
nest various container blocks, so that a row-oriented container can be
inserted within a column-oriented container.
Container blocks can contain any amount of container, text
and image blocks.
Syntax:
A container block will be defined by the curly brackets {
and }
Example:
{ ROWS; CENTER; Color='0xFF0000';
Target='_blank' // comment: opening first container block
{ COLUMNS // comment:
opening second container block
IB = {
// specify
image block content
}
TB = {
// specify
text block content
}
} // comment: closing second
container block
TB= {
// specify text block
content
}
} // comment: closing first container
block
Parameter:
Names: | Columns, Rows |
Description: |
Determines the structure of the container, i.e. whether to structure the contained blocks in rows or in columns |
Values: | - |
Default: | Rows |
Names: | Center, Top, Bottom, Left, Right |
Description: |
Alignment of the container within its parent container. If the parent container is structuring its childs in rows, than only center, left and right will be applicable. Otherwise, if it is structuring in columns, than only center, top and bottom will be applicable. |
Values: | - |
Default: | Within a
container structuring in rows: Left Within a container structuring in columns: Top |
Comment:
The main
container (applet window) structures its childs (container blocks) in
rows
Name: | BGColor |
Description: |
Determines the background color, that should be drawn beneath the container. Its scope can be limited by the various BGMargin parameters. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | - |
Name: | BGImage |
Description: |
Determines the background image, that should be drawn beneath the container. Its scope can be limited by the various BGMargin parameters. |
Values: | Image name stated in the image list |
Default: | - |
Names: | BGMargin, BGTopMargin, BGBottomMargin, BGLeftMargin, BGRightMargin |
Description: |
This values determine the margin between the block border
and the background border. This values are only needed, if the container
is using a background color and/or image. |
Values: | integer value or no value to reset to 0 |
Default: | 0 |
Name: | Font |
Description: |
Presetting of the font used by the text blocks contained in the container. The value can be overwritten in any contained container and text block. |
Values: | Name of the font stated in the font list |
Default: | If no font was defined in a parent container: Name:Default; Font: SansSerif; Size: 9; Style: Plain |
Name: | Color |
Description: |
Presetting of the normal text color used by the text blocks contained in the container. The value can be overwritten in any contained container and text block. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | white |
Name: | OffMouseColor |
Description: |
Presetting of the color of Active Text Components (Hyperlinks, JavaScript calls and/or commands) used by the text blocks contained in the container. The value can be overwritten in any contained container and text block. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | red |
Name: | OnMouseColor |
Description: |
Presetting of the color of Active Text Components (Hyperlinks, JavaScript calls and/or commands) while in active state (mouse pointing on them) used by the text blocks contained in the container. The value can be overwritten in any contained container and text block. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | yellow |
Name: | Target |
Description: |
Defines the target window/frame of hyperlink calls made by Active Components of any text or image block within the container. |
Values: |
|
Default: | - |
Comment:
If both, target
and url, are defined in a container, this will connect all Active
Components in that container.
Name: | URL |
Description: |
Address of the page to load after selecting an Active Component of a text or image block within the container. |
Values: |
Either a relative address to the CodeBase (directory in which the applet is) or an absolute address |
Default: | - |
Comment:
Because
the definition of a target and an URL
within a container will produce a connection of all Active
Components in that container, this will be the primary purpose to
define the URL within a container.
Name: | JSCall |
Description: |
Determines a JavaScript function, that should be assigned to the Active Components defined in the text and image blocks within the container. The definition of this value in a container will result in a connection of all Active Components defined in the text and image blocks within that container. |
Values: | JavaScript function incl. its parameters |
Default: | - |
Name: | Commands |
Description: |
Determines a command sequence, that should be assigned to the Active Components defined in the text and image blocks within the container. The definition of this value in a container will result in a connection of all Active Components defined in the text and image blocks within that container. |
Values: | Command sequence or name of a Free Macro |
Default: | - |
Name: | TB |
Description: | Definition of a text block to display text, that should be added to the container |
Values: | Description and content of the text block |
Default: | - |
Name: | IB |
Description: |
Definition of an image block to display an image (or two in case of an Active Component), that should be added to the container |
Values: | Description and content of the image block |
Default: | - |
More Container Blocks
In order to be able to increase
the structuring possibilities to display the information, it is possible to
add more container blocks to a container, to which the same parameters and rules
described above can be applied.
Information transfered to blocks within the container:
Text blocks (TB) are
always defined within a container block and are used to specify any kind of
text to be displayed.
The whole displayed text is a
composition of any amount of individual Text
and ActiveText components, that will be displayed
like one text component. Each Text and ActiveText component will get the properties (e.g.
color, font, underlining and in case of ActiveText
also command sequence, URL, target, JavaScript function) valid at the time
of its declaration.
It's also possible to define optional wordwraps at any position, on any text component and as much as desired. This wordwraps will only be used, if the available space is too small to display the whole word. In such a case the word will be separated at the most appropriate position. This kind of wordwrapping will considerably reduce the maintenance efforts compared to hard wordwrapping, when modifying the applet size, the display structure or the content. The optional wordwraps are also useful at runtime when the display size is altered by adding or removing the scrollbar display, because the text will adapt and therefore reformat its display to fit the new circumstances.
Consider that any line break (carriage return) within a Text or ActiveText declaration will also be displayed. Whereas tabulators will be filtered and are therefore not displayed, so that they can be used to format the source code.
Syntax: optional wordwraps
Optional
wordwraps are defined by the characters \-, whereby an additional \ character in
front of the sequence will lead to its display, but also has the effect of
eliminating its functionality as optional wordwrap. By adding further \
characters, it's possible to combine its display and its functionality.
Examples: optional wordwraps
in\-for\-ma\-tion: has 3 optional wordwraps
\\- will be displayed as \- and has no optional wordwrap
\\\- will be displayed as \ and has one optional
wordwrap
\\-\- will be displayed as \- and has one
optional wordwrap
In addition to the ability to align the whole block, it's also possible to align the content of each text block (each text line) by the parameter TextAlignment to the left or right side or to center it.
Like container blocks, text blocks are also able to get a background color and/or image, which is particularly useful when designing tables or creating menu items. Nevertheless it's mostly better to define table backrounds at the container representing the corresponding row/column than at the text block.
Example:
TB= { Right; TextAlignment='Center'; BGColor='0xFFFFFF';
OffMouseColor='0xFF0000'; OnMouseColor='0x00FF00'; Target='_blank'
Font='standartFont'; Color='0x000000';
Text='This textblock will
be aligned to the right side of its container and each line of its content will
be centerd within the textblock.
'
Color='0x0000FF';
Text='This text starts in a new line, will be
displayed in blue and contains an '
Font='newFont'
URL='www.exsys.net'
Commands={Layer='all'; Stop}
ActiveText='Active Component'
Font='standartFont'
Text=' that will be displayed in another font and
performs a hyperlink call and a command sequence.'
}
Parameter:
Name: | Text |
Description: | Text to be displayed |
Values: | Text |
Default: | - |
Name: | ActiveText |
Description: |
Text, that should represent an Active Component, i.e. text, that performs a hyperlink, a JavaScript function and/or a command sequence |
Values: | Text |
Default: | - |
Name: | File |
Description: |
The content of
the file assigned to this parameter will be displayed like text defined by
the Text parameter. The file text
gets the properties activated at the time of its definition,
like color, font, etc. |
Values: | Text file |
Default: | - |
Name: | Font |
Description: |
Font to be used by following Text, ActiveText and File definitions. If there are different fonts displayed in one line, the line height will be adapted to the height of the largest font and the position of smaller fonts will be adjusted. |
Values: | Name of the font stated in the font list |
Default: | If no font was defined in a parent container: Name:Default; Font: SansSerif; Size: 9; Style: Plain |
Name: | Color |
Description: |
Color to be used by following Text and File definitions. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | white |
Name: | OffMouseColor |
Description: |
Color to be used by following ActiveText definitions as long as the mouse is not on their display area. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | red |
Name: | OnMouseColor |
Description: |
Color to be used by following ActiveText definitions as long as the mouse is on their display area. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | yellow |
Name: | UnderLine |
Description: |
Determines, whether following Text, ActiveText and File definitions should be underlined. The underline will get the same color as the text. |
Values: | Yes, On, True or No, Off, False |
Default: | No |
Name: | Up |
Description: |
Raises the
display position of following Text, ActiveText and File definitions by the assigned value in pixel.
The line height will be adjusted, if the current line height is
exceeded by this operation. |
Values: | integer value >= 0 or no value to reset to 0 |
Default: | 0 |
Name: | Down |
Description: |
Lowers the
display position of following Text, ActiveText and File definitions by the assigned value in pixel.
The line height will be adjusted, if the current line height is
exceeded by this operation. |
Values: | integer value >= 0 or no value to reset to 0 |
Default: | 0 |
Name: | LineHeight |
Description: |
Defines a
minimum line height valid for the following Text, ActiveText
and File definitions. This feature is
particularly useful when creating column-oriented tables, where the text
components of the different columns representing a row are using different
fonts and should still be displayed at the same height. |
Values: |
Reference font from the font list or an integer value >= 0 or no value to reset to 0 |
Default: | 0 |
Name: | Target |
Description: |
Defines the
target window of hyperlink calls made by following Active Components, which are defined
in text blocks by the ActiveText
parameter. Hyperlink calls are only performed when both, Target and
URL, are known. |
Values: |
|
Default: | - |
Name: | URL |
Description: |
Address/URL of
the side to be loaded after selecting a following Active Component, specified by the ActiveText parameter in text blocks.
Hyperlink calls are only performed when both, Target and
URL, are known. |
Values: |
Either a relative address to the CodeBase (directory in which the applet is) or an absolute address |
Default: | - |
Name: | JSCall |
Description: |
JavaScript
function (incl. parameters) to be performed after selecting a
following Active Component, specified
by the ActiveText parameter in text
blocks. |
Values: | JavaScript function incl. its parameters |
Default: | - |
Name: | Commands |
Description: |
Command
sequence to be performed after selecting a following Active Component, specified by the ActiveText parameter in text blocks. The command
sequence can be removed/resetted for further Active Components by assigning an empty sequence
like Commands='' or Commands={}. |
Values: | Command sequence or name of a Free Macro |
Default: | - |
Name: | TextAlignment |
Description: |
Determines the
alignment of each text line within the text block. |
Values: | Center, Left or Right |
Default: | Left |
Names: | Center, Top, Bottom, Left, Right |
Description: |
Alignment of
the text block within its container. If the container
is structuring its childs in rows, than only center, left and
right will be applicable. Otherwise, if it is
structuring in columns, than only center, top and bottom will be
applicable. |
Values: | - |
Default: | Within a
container structuring in rows: Left Within a container structuring in columns: Top |
Name: | Width |
Description: |
This parameter determines the display width
of the text block (and also image blocks). Consider, that the width value doesn't really specify the block width, but rather specifies the position of its right border. The left border is automatically 0 or the position of the right border of the previous column. So the width values of 3 columns, each of them having a display width of 33% and a BaseWidth of 100 specified in the layer file, will have a corresponding width value of 33, 66 and 99 assigned. It's also easily possible to generate left and/or right margins by limiting the block width and at the same time aligning the block to a side or by centering it - assuming that there is enough space left in the container to align the block. |
Values: | integer value |
Default: | - (as much as needed) |
Name: | BGColor |
Description: |
Determines the background color, that should be drawn beneath the text block. Its scope can be limited by the various BGMargin parameters. |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | - |
Name: | BGImage |
Description: |
Determines the background image, that should be drawn beneath the text block. Its scope can be limited by the various BGMargin parameters. |
Values: | Image name stated in the image list |
Default: | - |
Names: | Margin, TopMargin, BottomMargin, LeftMargin, RightMargin |
Description: |
The purpose of
this parameters is to define the margins of the
text block, in order to separate it from other blocks - especially if
structured in columns. The margins will be created inside of the
block, so that the specified block width will be maintained. |
Values: | integer value or no value to reset to 0 |
Default: | 0 |
Names: | BGMargin, BGTopMargin, BGBottomMargin, BGLeftMargin, BGRightMargin |
Description: |
This values
determine the margin between the block border and the background border.
This values are only needed, if the block is using a background
color and/or image. |
Values: | integer value or no value to reset to 0 |
Default: | 0 |
Image blocks (IB)
are always defined within a container block and are used to specify the
images (and also gif-animations), that should be displayed within the layer.
Each image block contains an image or up to two in case of
an Active Component, which will be switched
depending whether the mouse is located on their area. When using two images on
an Active Component, the size reserved for the
image display will be determined by the first image, which is the one displayed
while the mouse is outside of the area.
Like text blocks, image blocks can also be aligned
within their container. Further, the alignment of the image(s) within the
image block is also possible, assuming that the block is specified to be
larger than the image(s).
Example:
IB= { Bottom; Width='100'; ImageAlignment='Center';
Target='_blank'
URL='www.exsys.net'
Commands={Layer='info'; Load='exsysInfo.jet'}
Image='img1'
ActiveImage='img2'
}
Parameter:
Name: | Image |
Description: |
Default image to be displayed. In case of an Active Component, this image will represent the image displayed while the mouse is outside of its area. |
Values: | Image name stated in the image list |
Default: | - |
Name: | ActiveImage |
Description: |
Image to be displayed while the mouse is inside of its area. By defining this image, the image block will become automatically an Active Component. |
Values: | Image name stated in the image list |
Default: | - |
Name: | Target |
Description: |
Defines the
target window of hyperlink calls performed when selecting the
image of the Active Component. Hyperlink
calls are only performed when both, Target
and URL, are known. If both, target and
URL, are known, the image block will automatically become an Active Component. |
Values: |
|
Default: | - |
Name: | URL |
Description: |
Address/URL of
the side to be loaded after selecting the image of the Active Component. Hyperlink calls are only
performed when both, Target and URL, are
known. If both, target and URL, are known, the image block will
automatically become an Active Component. |
Values: |
Either a relative address to the CodeBase (directory in which the applet is) or an absolute address |
Default: | - |
Name: | JSCall |
Description: |
JavaScript
function (incl. parameters) to be performed after selecting the image
of the Active Component. By defining this
parameter in an image block, it will automatically become an Active Component. |
Values: | JavaScript function incl. its parameters |
Default: | - |
Name: | Commands |
Description: |
Command
sequence to be performed after selecting the image of the Active Component. By defining this
parameter in an image block, it will automatically become an Active Component. |
Values: | Command sequence or name of a Free Macro |
Default: | - |
Name: | ImageAlignment |
Description: |
Determines the alignment of the image(s) within its image block, assuming that the block is specified to be larger than the image(s). |
Values: | Center, Left or Right |
Default: | Left |
Names: | Center, Top, Bottom, Left, Right |
Description: |
Alignment of the image block within its container. If the container is structuring its childs in rows, than only center, left and right will be applicable. Otherwise, if it is structuring in columns, than only center, top and bottom will be applicable. |
Values: | - |
Default: |
Within a
container structuring in rows: Left |
Name: | Width |
Description: |
This parameter determines the display width
of the image block (and also text blocks). Consider, that the width value doesn't really specify the block width, but rather specifies the position of its right border. The left border is automatically 0 or the position of the right border of the previous column. So the width values of 3 columns, each of them having a display width of 33% and a BaseWidth of 100 specified in the layer file, will have a corresponding width value of 33, 66 and 99 assigned. It's also easily possible to generate left and/or right margins by limiting the block width and at the same time aligning the block to a side or by centering it - assuming that there is enough space left in the container to align the block. |
Values: | integer value |
Default: | - (as much as needed) |
Names: | Margin, TopMargin, BottomMargin, LeftMargin, RightMargin |
Description: |
The purpose of
this parameters is to define the margins
of the image block, in order to separate it from other
blocks - especially if structured in columns. The margins will be created
inside of the block, so that the specified block width will be
maintained. |
Values: | integer value or no value to reset to 0 |
Default: | 0 |
Space blocks (SB) are used to vertically align or separate top level container blocks (not encapsulated in another container block) from each other. Therefore space blocks can only be defined at top level.
Mostly the information of a layer is structured by several top level container blocks, each having a different context and treating a different theme. Often it's desired to visibly separate this context blocks (represented by containers) from each other, or even to ensure that only one container is visible at a time. An usual implementation would be to pause the automatic scrolling after centering (vertically) the context block while ensuring that no other block is visible. This can be done by entering a fix space between the containers, but will be significantly easier by applying a separation rule, because it must not be adjusted when modifying the content or applet size. This rules can align a content block to the top or bottom of the display area, center the block, or even insert a space area, which size depends from the size of the display area. Command sequences defined after a space block will be performed just after reaching the position given by the space block.
The position of labels will also be affected by space blocks. A space block, that places space above of a context/container block (center or bottom), considers already present space areas, so that the position of a label on top of the block will be influenced, because the space block doesn't add the full space and therefore the label isn't placed at the top of the display area. In order to still get the desired label position, there are the substitute rules FixCenter and FixBottom, which will add all the required space, regardless of the already present space.
Example:
Label='main'
{
TB = {
// specify text
block content
}
}
SB = 'Top'
Commands={Pause='3000'}
Label='intro'
{
TB = {
// specify text block
content
}
}
SB = 'FixCenter'
Commands={Pause='5000'}
Space block values and rules
Fix value: integer value >
0:
Inserts a fix space area of the indicated size in
pixel
Center:
Centers the previous container block and takes care
that no other block is visible. This rule considers already present space areas
by subtracting their size.
Top:
Adds as much space as needed to align the previous
container block at the top of the display area while preventing the display
of the following container.
Bottom:
Adds as much space as needed above of the previous
container to align it at the bottom of the display area while
preventing the display of other containers. This rule considers already
present space areas by subtracting their size.
FixCenter:
Centers the previous container block and takes care
that no other block is visible. This rule does not consider already present space areas, so that
the full space will be added.
FixBottom:
Adds as much space as needed above of the previous
container to align it at the bottom of the display area while
preventing the display of other containers. This rule does not consider already present space areas, so that
the full space will be added.
ClearScreen:
Adds a space area as large as the display area.
This rule considers already present space areas by subtracting their size.
FullScreen:
Adds a space area as large as the display area. This
rule does not consider already present
space areas, so that the full space will be added.
Like explaind in the descriptions of text and image blocks, Active Components are represented by images and text components, that are able to perform an action and are therefore having a functionality. This functionality can consist of a hyperlink call, a JavaScript function and/or a command sequence, that will be executed when selecting the component with the mouse. Nevertheless, Active Components can also be defined without functionality and will therefore only perform a visual effect by switching their display state.
Text components representing an Active Component are defined by the ActiveText parameter instead of the Text parameter for normal text output. Their functionality can be assigned by defining a command sequence, a JavaScript function and/or a target and an URL before entering the ActiveText component.
Image blocks representing an Active Component are defined by additionally specifying an alternative image, which will be displayed when the mouse is on its area, and/or by defining a functionality consisting of a command sequence, a JavaScript function and/or a target and an URL.
4.7.1 Connection of Active Components – Container Links
In order to be able to
create an Active Component consisting of text
and images, it's possible to connect
several Active Components with each other,
regardless of their type (text or image) and the amount of components to be
connected.
Connected Active
Components behave like a single Active
Component, so that all connected components will switch their state
when the mouse is on the area of one of this components. Therefore all connected
Active Components will perform the same
actions, regardless what component is selected by the mouse. Every functionality
directly assigned to an individual Active
Component will be ignored after defining its connection with
other components. The connection of Active
Components and also their functionality will be defined within a
container block containing them. A container block can also be created with
the only purpose to connect several Active Components.
Active Components will be connected with each other by defining a command sequence, a JavaScript function and/or a target and an URL within a container block. All Active Components within that container, regardless of their definition depth when using nested containers, will be connected with each other.
Example:
{ CENTER; Columns;
URL='www.exsys.net'; Target='_blank'; JSCall='openWindow("parameter1",
"parameter 2")'
TB={ Width='45'
Text='This is the first column including the first
connected '
ActiveText='Active Component'
}
TB={ Width= '90'
Text='This is the second column including the second
connected '
ActiveText='Active Component'
}
}
4.8 Commands & Command Sequences
Commands are used to
control and to influence the behaviour of a layer at runtime. A command is
always stated as part of a command sequence, which represents a list of commands
to be executed in the specified order when the corresponding event is
triggered.
By
defining a reference layer within the command sequence, it's also possible to
direct the execution of a command to another layer and therefore to
influence its behaviour. This is especially useful when creating a menu
layer, to load/reload the content of another layer or even to manage a
layer containing a loading message displayed while any layer is reloading
its content.
A reference layer will be stated by
assigning the corresponding layer name (stated in the project file) to the
Layer parameter. The reference layer can be stated
at any location and as often as required within the command sequence, and is
valid for all following commands till a new reference layer is stated. As long
as no reference layer is stated, the own layer will be the refence layer.
Beside of assigning a layer name to the
reference layer, there are also the keywords Self to reference the own layer and All to reference all layers at the same
time.
Command sequences are defined within the curly brackets { and }and contain all the commands to be executed as well as any amount of optional reference layer assignments. Commands and statements within a command sequence may be separated by semicolons ; from each other.
Command sequences can be arranged in three different categories. The main difference between these categories consists in the manner they are triggered.
Execution by Active Components
The command
sequence is linked to an Active Component of a
text or image block and will only be executed after selecting the component with
the mouse. The concept of triggering such a command sequence is equivalent
to a hyperlink of a web page. An Active
Component can have the functionality of a command sequence, a hyperlink
and/or a JavaScript function and is therefore able to perform all three
actions.
Example:
TB = {
Target='_blank'; URL='www.exsys.net'
Commands={Layer='All'; Stop; Layer='Self'; Jump='index';
Layer='main'; Reload}
ActiveText='Active Component'
}
Position dependent execution
This kind of command sequence will always be
defined at top level (not within any container or data block) and are executed
in dependency of their definition position and the current display position of
the layer.
Position dependent command sequences
support the additional keywords Top and Bottom, which are used to state whether the
sequence is executed after reaching the top or the bottom of the display
area.
Because each restart of the automatic scrolling checks if a position dependent command sequence must be executed at the current display position, it's recommended to avoid the Stop command within such command sequences. This Stop command will stop the automatic scrolling just after beeing restarted by the Start command. By using the Pause command instead of the Stop command, the command sequence will not be re-executed when the pause elapses or a Start/Continue command is performed.
Example 1:
{
TB = {
// Specify block
content
}
}
Commands={Bottom; Pause='2000'}
Effect:
Regardless of the block
size, the automatic scrolling will be paused for 2 seconds just after the
container block (and therefore also the data block) is aligned at the bottom of
the display area.
Example 2:
{
TB = {
// Specify block
content
}
}
Commands={TOP; Speed='20'}
Effect:
Regardless of the block
size, the speed of the automatic scrolling will be changed just after the
container block (and therefore also the data block) scrolls out of the
display area (at the upper border) and therefore is no longer
visible.
Example 3:
{
TB = {
// Specify block
content
}
}
SB='TOP'
Commands={Bottom; Pause='2000'}
Effect:
Case 1: Container/data block is larger than the
display area
The automatic scrolling will be
paused for 2 seconds as soon as the end of the container block
(and therefore also the data block) is displayed at the bottom of the display
area.
Case 2:
Container/data block is smaller than the display area
The automatic scrolling will be paused for 2
seconds as soon as the container block (and therefore also the
data block) is displayed/aligned at the top of the display area.
Execution by Event
Macros
The command sequence of an Event Macro will automatically be executed by the
occurence of the event represented by the corresponding macro. The event
macros are described in a separate chapter.
Example:
Init = {Stop='1000'}
ReloadRequest =
{Layer='LoadMessage'; ShowIncrement}
ReloadIndication = {Layer='LoadMessage';
HideIncrement}
MouseEnter = {Stop}
MouseExit =
{Start}
MouseOnLink =
{Pause}
MouseOffLink = {Continue; Pause='1200'}
Redefinition of command sequences at runtime
Each command sequence, except Free Macros, can be redefined at runtime, so that it's
possible to define them in order to be executed only once or
to modify their functionality at runtime.
The
redefinition can be specified within the command sequence by assigning
the name of a Free Macro or directly the new command sequence to the Set parameter. The command sequence will be replaced
by the new one just after it completes to
initiate the execution of all original/previous commands. In order to
execute a command sequence only once, it's also possible to assign an empty
command sequence.
Example:
// Free Macros
Macros = {
State1={SetBGColor='0x000000'; Set='State2'} |
State2={SetBGColor='0xFF0000'; Set='State3'} |
State3={SetBGColor='0x00FF00'; Set='State4'} |
State4={SetBGColor='0x0000FF'; Set='State5'} |
State5={SetBGColor='0xFFFFFF'; Set='State1'}
}
// Display
Information
{
TB = {
Commands =
'State1'
ActiveText='Active Component 1, ' // rotating states
Commands = {Load='newFile.jet'; Set={}}
ActiveText='Active
Component 2, ' // use once command
Commands =
{Direction='Back'; Set={Direction='Forward'}}
ActiveText='Active Component 3' // direct
reassignment; only once
}
}
Command sequences can
also be redefined by other command sequences and even from other layers, so
that they must be able to get a name to
be addressable.
The explicit naming is
only valid for command sequences executet by Active Components and also for position
dependent command sequences - Event Macros
and Free Macros have already a name.
The assignment of a name is done within the command
sequence by the Name parameter. A Commands parameter, that gets its command sequence
directly from a Free Macro is therefore not
able to get a name. Such a case, especially when implementing rotating
states, can be handled by firstly assigning the command sequence containing
the name and than handling any further change of state by assigning Free Macros.
Consider, that not the commands sequence itself is named, instead the Commands parameter, which is a placeholder for the sequence, is named.
Command sequences executed by Active Components and position dependent command sequences can be redefined by assigning a command sequence or a Free Macro directly to their name.
Event Macros can be redefined by assigning a command sequence or a Free Macro to their macro name.
Free Macros can not be redefined, because they represent a collection of unchangeable command sequences.
Example:
// Free Macros
Macros = {
State1={SetBGColor='0x000000'; Set='State2'} |
State2={SetBGColor='0xFF0000';
Set='State3'} |
State3={SetBGColor='0x00FF00';
Set='State4'} |
State4={SetBGColor='0x0000FF';
Set='State5'} |
State5={SetBGColor='0xFFFFFF';
Set='State1'}
}
// Display
Information
{
TB = {
Commands =
{Name='ColorSwitcher'; SetBGColor='0x000000'; Set='State2'}
ActiveText='Active Component 1, ' // rotating states
Commands =
{ColorSwitcher='state1'}
ActiveText='Active Component 2, ' // resets command of ‘Active Component
1’
Commands =
{MouseEnter='Stop'; MouseExit='Start'}
ActiveText='Active Component 3, ' // defines MouseEnter & MouseExit
Event-Macros
Commands =
{Layer='info'; ReloadCommand={}}
ActiveText='Active Component 4' // clears command in Layer ‘info’
}
}
Comments:
Command sequences from different instances will be performed
asynchronous, i.e. when two command sequences are executed in quick succession,
than the second one can overtake the first one. The same can also happen to
commands within a command sequence, if they are addressed to different
layers.
All commands are related to the layer and not to the command sequence itself, i.e. a pause command will not pause the execution of further commands, instead it will pause the scrolling of the layer.
Position dependent command sequences are checked whether to be performed at the current display position when the automatic scrolling is restarted by the Start command after being stopped by the Stop command. This does not happen when it was paused by the Pause command and restarted by the Start or Continue command or even when the pause elapses.
Statements within a command sequence
Name: | Layer |
Description: |
Determines the layer addressed by the following commands within the sequence |
Values: | Self, All or name of the layer (stated in the project file) |
Default: | Self |
Example: | Commands={Layer='info'; Reload} |
Namen: | Top, Bottom |
Description: |
Determines whether position dependent command sequences are executed when reaching the top or the bottom of the display area. This keyword has no value assignment and is only useable by position dependent command sequences. |
Values: | - |
Default: | Bottom |
Example: | Commands={Top; Pause} |
Commands
Name: | Speed |
Description: |
Dertermines the speed of the automatic scrolling. The assigned value is a reference value, that determines how much steps in pixel should be performed in one second. |
Values: | integer value > 0 |
Default: | 40 |
Example: | Commands={Speed='50'} |
Name: | Direction |
Description: |
Determines the direction of the automatic scrolling |
Values: | Back, Forward |
Default: | Forward |
Example: | Commands={Direction='Back'} |
Name: | Jump |
Description: |
Performs a jump to the indicated label by adjusting the visible area of the layer according to the label position |
Values: | Name of the label |
Default: | - |
Example: | Commands={Jump='index'} |
Name: | Pause |
Description: |
Pauses the automatic scrolling for the indicated amount of time in ms. If no value is assigned, than the pause duration is unlimited and can only be canceled by a Continue or Start command. |
Values: | Pause duration in ms or no value to initiate an unlimited pause |
Default: | - |
Example: | Commands={Pause='2000'} |
Name: | Continue |
Description: |
Cancels a previously initiated pause, so that the automatic scrolling will be resumed |
Values: | - |
Default: | - |
Example: | Commands={Continue} |
Name: | Start |
Description: |
Starts the automatic scrolling if the stated priority is equal or
higher than the priority previously set by a Stop command. The priority of a Stop command is used to set a condition to determine whether
to ignore further Start commands. This enables to ignore Start commands not desired to be performed at that time. In case that
the priority of a Start command is high enough to be performed, than the priority set
by a Stop command and therefore claimed by the
layer will be resetted. The priority can also be lowered by the LowerStopPriority command without restarting the automatic scrolling,
which would happen by using the Start command. |
Values: | integer value >= 0 or no value (equivalent to a priority of 0) |
Default: | 0 |
Example: | Commands={Start='1000'} |
Name: | Stop |
Description: |
Stops the automatic scrolling. The priority of the Stop
command is used to set a condition to determine whether to ignore
further Start commands. This enables to ignore Start commands not desired to be performed at that time. In case that
the priority of a Start command is high enough to be performed, than the priority set
by the Stop command and therefore claimed by the layer
will be resetted. The priority can also be lowered by the LowerStopPriority command without restarting the automatic scrolling,
which would happen by using the Start command. |
Values: | integer value >= 0 or no value (equivalent to a priority of 0) |
Default: | 0 |
Example: | Init={Stop='100000'} |
Name: | LowerStopPriority |
Description: |
Lowers the priority previously set by a Stop command (condition to fulfil by Start commands) to the indicated value, without performing any further actions. |
Values: | integer value >= 0 |
Default: | - |
Example: | Commands={LowerStopPriority='0'} |
Name: | Reload |
Description: |
Reloads the current layer file |
Values: | - |
Default: | - |
Example: | Commands={Reload} |
Name: | Load |
Description: |
Replaces the content of the layer by the indicated layer file |
Values: | Layer file |
Default: | - |
Example: | Commands={Layer='info'; Load='info2.jet'} |
Name: | LoadProject |
Description: |
Replaces the current project by the indicated project file |
Values: | Project file |
Default: | - |
Example: | Commands={LoadProject='products.prj'} |
Name: | Hide |
Description: |
Disables the display of a layer by setting it invisible |
Values: | - |
Default: | - |
Example: | Commands={Layer='menu'; Hide} |
Name: | Show |
Description: |
Turns an already hidden layer visible |
Values: | - |
Default: | - |
Example: | Commands={Layer='menu'; Show} |
Name: | HideIncrement |
Description: |
Like the Hide command, this one is used to turn a layer invisible.
The difference is, that it increments a counter on each execution
to keep track of its state. The layer will keep invisible as long as the
counter is greater than the amount of ShowIncrement executions. |
Values: | - |
Default: | - |
Example: | ReloadIndication={Layer='loading'; HideIncrement} |
Name: | ShowIncrement |
Description: |
Like the Show command, this one is used to turn an already
hidden layer visible. The difference is, that the HideIncrement
and ShowIncrement commands are using a counter on each
execution to keep track of its state. The layer will keep invisible as
long as the amount of HideIncrement executions is higher than that of the ShowIncrement
command. |
Values: | - |
Default: | - |
Example: | ReloadRequest={Layer='loading'; ShowIncrement} |
Name: | SwitchShowHide |
Description: |
Switches between the visible and invisible state of a layer. The counter used by the commands HideIncrement and ShowIncrement will be adjusted according to the new state. |
Values: | - |
Default: | - |
Example: | Commands={Layer='loading'; SwitchShowHides} |
Name: | SetUserControl |
Description: |
Determines the layer controlled by the user using the scrollbar or by
dragging the visible display area with the mouse. |
Values: | - |
Default: | - |
Example: | Commands={Layer='info1'; Hide; Layer='info2'; SetUserControl; Show} |
Name: | Scrollbar |
Description: |
Determines the display and functionality/status of the scrollbar |
Values: |
Hide: removes the scrollbar |
Default: | according to the definitions in the project file |
Example: | Commands={Scrollbar='Left'; Scrollbar='On'} |
Name: | DragMode |
Description: |
Determines whether the visible display area of the user controlled layer can be modified by dragging it with the mouse |
Values: | Yes, On, True or No, Off, False |
Default: | Yes |
Example: | Commands={DragMode='Off'} |
Name: | SetBGColor |
Description: |
Sets the background color, on which all layers will be displayed |
Values: |
hexadecimal, in the form: 0xrrggbb or #rrggbb |
Default: | - |
Example: | Commands={SetBGColor='0x0000FF'} |
Name: | Set |
Description: |
Redefinition of the command sequence. The current command sequence will be replaced just after invoking all commands of the current sequence. |
Values: | command sequence or the name of a Free Macro |
Default: | - |
Example: |
Macros = { |
Names: | Init, MouseEnter, MouseExit, MouseOnLink, MouseOffLink, MousePressed, MouseReleased, ReloadRequest, ReloadIndication, ShowLayer, HideLayer, LayerResized |
Description: |
Redefinition of the current command sequence of the indicated Event Macro. The command used for the redefinition is always equal to the name of the corresponding Event Macro. |
Values: | command sequence or the name of a Free Macro |
Default: | - |
Example: | Commands={MouseOnLink={Pause}; MouseOffLink={Continue; Pause='1200'}; MousePressed='MPMacro'} |
Labels are always defined at top level (not within any container or data block) and as much as desired. They are used to adapt the visible area of a layer when performing a corresponding Jump command by aligning the definition position of the label at the top of the display area.
The definition of a label is initiated by the keyword Label followed by the assignment of a freely selectable label name, which must be enclosed by single quotes '.
Example:
Label='home'
{
TB={
Text='Jump to Label: '
Commands={Jump='Label2'}
ActiveText='Label 2'
}
}
SB='FixCenter'
Commands={Pause='2000'}
Label='Label2'
{
TB={
Text='Jump to Label: '
Commands={Jump='Home'}
ActiveText='Home'
}
}
SB='Top'
Commands={Pause='2000'}
This tool supports the communication with JavaScript in both directions, i.e. calling a JavaScript function when selecting an Active Component, and also the ability to control this tool via JavaScript by indicating a command sequence to be executed by the tool.
This functionality depends on the utilized browser, but is currently supported by MS Internet Explorer and Netscape Navigator.
5.1 Accessing the Applet via JavaScript
In order to be able to pass a command sequence from JavaScript
to the applet, the method evalCommand(layer, commands) is accessible
from outside.
The second parameter contains the command sequence, that should be executed
from the applet. This command sequence follows the same rules as the command
sequences defined inside of the layer file and consists therefore of any amount
of commands and assignments listed between the curly brackets { and }.
Because the assignment of a reference layer within the command sequence is optional,
it's required to indicate a default reference layer on the first parameter of
the method. This reference layer will be valid till it is redefined within the
command sequence.
Both parameters must be passed to the applet as string.
Syntax:
document.<applet name>.evalCommand(<reference layer>, <command sequence>);
Example:
document.jet_applet.evalCommand("info", "{Load='products.jet'}");
Like shown in the examples, the applet needs a name to be addressable. This name can be assigned via the NAME parameter within the HTML file when defining the applet.
There are further possibilities to address an applet, even methods without the need to name the applet. These are explained and can be found in the corresponding HTML/JavaScript literature.
Example: HTML file
<HTML>
<HEAD></HEAD>
<BODY>
<APPLET CODE="Ticker.class" WIDTH="360" HEIGHT="240" NAME="jet_name"
ARCHIVE="jet.jar" >
<PARAM NAME="Author" VALUE="JET - Java Extended Ticker
- (c) exsys GbR Emden - www.java.exsys.net">
<PARAM NAME=ProjectFile VALUE="demo.prj">
<PARAM NAME=LoadingMessage VALUE="Loading...">
<PARAM NAME=LoadingBGColor VALUE="0x000000">
<PARAM NAME=LoadingTextColor VALUE="0xFFFFFF">
</APPLET>
<FORM NAME="form1">
<INPUT TYPE="text1" SIZE="15" NAME="layer" value="info">
<INPUT TYPE="text2" SIZE="30" NAME="cmd" value="{Layer='All';
Stop}">
<BR><BR>
<INPUT TYPE="button" VALUE="Send Command"
onClick="document.jet_name.evalCommand(document.form1.layer.value,
document.form1.cmd.value)">
</FORM>
</BODY>
</HTML>
5.2 Accessing JavaScript by the Applet
The execution of a JavaScript call is equivalent to
the principle of executing a command sequence or a hyperlink call.
Each Active Component can get a JavaScript function assigned, which
will be executed when selecting the Active Component. Consequently
an Active Component can perform up to three different actions: execution
of a command sequence, a hyperlink and also a JavaScript function.
A JavaScript function is assigned by the JSCall parameter within a
text or image block (or container block to connect the Active
Components) and is linked to all following Active Components.
Any parameter of the JavaScript function must be defined as string using quotation
marks ".
Example:
JSCall='displayText("hello")'
It's required to add the keyword MAYSCRIPT to the applet definition within the HTML file, in order to be able to use this feature.
Example: HTML file
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(text) {
javascript:alert(text);
}
//-->
</SCRIPT>
<APPLET CODE="Ticker.class" WIDTH="360" HEIGHT="240" ARCHIVE="jet.jar"
MAYSCRIPT>
<PARAM NAME="Author" VALUE="JET - Java Extended Ticker
- (c) exsys GbR Emden - www.java.exsys.net">
<PARAM NAME=ProjectFile VALUE="demo.prj">
<PARAM NAME=LoadingMessage VALUE="Loading...">
<PARAM NAME=LoadingBGColor VALUE="0x000000">
<PARAM NAME=LoadingTextColor VALUE="0xFFFFFF">
</APPLET>
</BODY>
</HTML>
Example: Layer file
Init={SPEED='40'; Direction='Forward'; Start}
MouseOnLink={Pause}
MouseOffLink={Continue; Pause='1000'}
{ CENTER
TB={
Text='This '
JSCall='test("hello")'
ActiveText='Active Component'
Text=' calls a JavaScript function
that opens a window with a "hello" message.
'
Text='This '
JSCall='javascript:alert("hello")'
ActiveText='Active Component'
Text=' does the same without calling
the test() function'
}
}
SB='Center'
{
// more information
}
HTML File
<PARAM NAME="Author" VALUE="JET - Java Extended Ticker -
(c) exsys GbR Emden - www.java.exsys.net">
ProjectFile,
LoadingBGColor, LoadingTextColor, LoadingMessage,
Project File
BGColor,
DragMode,
ScrollbarPosition, ScrollbarActive,
ScrollbarWidth, ScrollbarLeftMargin, ScrollbarRightMargin,
ScrollbarBGColor, ScrollbarMarginColor, ScrollbarButtonColor, ScrollbarSliderColor,
ScrollbarLineColor, ScrollbarArrowColor, ScrollbarActiveArrowColor,
Layer
Layer File: Basic Settings
BaseWidth,
ReloadInterval, ReloadFile,
ScrollingMode
Event Macros
Init,
ReloadRequest, ReloadIndication,
MouseEnter, MouseExit,
MouseOnLink, MouseOffLink,
MousePressed, MouseReleased,
ShowLayer, HideLayer,
LayerResized
Free Macros
Font List
Image List
Container Block
Columns, Rows,
Center, Top, Bottom, Left, Right,
BGColor, BGImage,
BGMargin, BGTopMargin, BGBottomMargin, BGLeftMargin,
BGRightMargin,
Font, Color, OffMouseColor, OnMouseColor,
Target, URL, JSCall, Commands,
TB, IB, <more containers>
Text Block
Text, ActiveText, File,
Font, Color, OffMouseColor, OnMouseColor,
UnderLine, Up, Down, LineHeight,
Target, URL, JSCall, Commands,
TextAlignment,
Center, Top, Bottom, Left, Right,
Width,
BGColor, BGImage,
Margin, TopMargin, BottomMargin, LeftMargin, RightMargin,
BGMargin, BGTopMargin, BGBottomMargin, BGLeftMargin,
BGRightMargin
Image Block
Image, ActiveImage,
Target, URL, JSCall, Commands,
ImageAlignment,
Center, Top, Bottom, Left, Right,
Width,
Margin, TopMargin, BottomMargin, LeftMargin, RightMargin
Space Block
<integer value>,
Center, Top, Bottom,
FixCenter, FixBottom,
ClearScreen, FullScreen