Component IMAGEMAP

Overview

The component IMAGEMAP is an image with additional definition of sensitive areas.

The areas are defined by the attribute IMAGEAREAS and consist a semicolon separated list of definitions, each one including an id, a description and a pixel definition of the area.

Please note: there is a more general approach of overlaying components using the component OVERLAYAREA which is more flexible and more adaptable.

Attribute summary

Typically used attributes

All attributes are

General attributes are

Positioning

Used inside: ADAPTIVETILECONTAINER, ADAPTIVETOOLBAR, AREASELECTOR, BLOCKABLEAREA, COLSYNCHEDROW, DRAWAREA, FOLDABLEPANEHEADERROW, GRIDCOL, GRIDFOOTER, GRIDHEADER, GRIDHEADERLABEL, GRIDLAYOUTROW, LABELCONTAINER, OVERLAYAREABASEITEM, OVERLAYAREAITEM, PAGEBEANROOT, PAINTAREAITEM, REPEAT, ROW, ROWADAPTIVELINE, ROWFLEXCOLUMNCONTAINER, ROWFLEXLINECONTAINER, ROWFOOTER, ROWHEADER, ROWTITLEBAR, SCHEDULEITEM, SPANGRIDCOL, STABLEAREA, TEXTWITHCONTROLS, TREENODE

Attribute details

accessiblename

Text that is passed as control content to the accessible support devices (e.g. screen readers).

actionListener

Binding to server side method that processes the events coming from this component.

#{methodBinding}Method binding

adapterbinding

Special binding to component adapter object instance on server side. The component adapter must be an instance of IComponentAdapterBinding. For some components (e.g. FIXGRID) there is an extended interface (e.g. IFIXGRIDComponentAdapterBinding).

#{tobedefined}Binding to IComponentAdapter instance

attributemacro

Name of macro that is used for generating certain attributes of this component. Please pay attention: the value of this attribute is read one time for each control and cannot be changed afterwards.

border

Defintion of border of control. Either defined as straight color value, with then having a border of 1 pixel. Or: an explicit per-side definition as comma separated list of border definition values.

#8080801 pixel border in color dark gray.
top:1;color:#808080top:1;color:#808080 : border only on top, 1 pixel height, color #808080
top:1;bottom:1;left:1;right:1;color:#FF0000top:1;bottom:1;left:1;right:1;color:#FF0000 : red border of 1 pixel size
top:1;bottom:1;left:1;right:1;color:#FF0000;dashing:5,2top:1;bottom:1;left:1;right:1;color:#FF0000 : red border of 1 pixel size, dashed with segments of 5 pixesl and 2 pixels; dashing only supported with FX Client!
noborderDefines that no border is painted - esp. in cases when empty borders are normally added (e.g. in grid cells)

colalignmentx

In case the space provided by the container (e.g. gridlayoutcontainer) for the component is wider than the component itself: definition where to place the component

leftLeft (default)
centerCenter
rightRight

comment

Comment that can be asigned to any component. The comment is not operationally used.

Any textAny text

configinfo

Configuration information that is attached to this component. This information is not functionally used by CaptainCasa, but may be used for any application specific purpose.

dragroundtrip

If set to true then an event is triggered on server side when the user starts a drag operation. The event is of type BaseActionEventDragStarted.

falseNo event triggered (default)
trueEvent triggered

dragsend

Description of object that can be dragged from this component. The description consists out of a type and and id. A component may have multiple objects that can be associated.

article:4711Example: article
file:harry.txt;content:Hello world!Example: Multiple object descriptions

droprastertext

Text that is shown when dragging over the component. The text is only shown if a drop is possible (DROPRECEIVE definition).

 (default) No text shown
 pixel(5) Current drop pixel position - in steps of 5 (or any other value)
 pixelX(5) Current drop pixel position - only the x-position
 pixelY(5) Current drop pixel position - only the y-position
 percentage(5) Current drop pixel position as percentage number - in steps of 5 (or any other value)
 percentageX(5) Current drop pixel position as percentage number - only the x-position
 percentageY(5) Current drop pixel position as percentage number - only the y-position
 textX(0,left,25,middle,75,right) Text that is shown depending from percentage x-position

dropreceive

Semicolon separated list of object types that can be dropped onto this component.

articleExample: articles can be dropped
article;customerExample: articles and customers can be dropped

dropshape

focusable

Defines if the component is focusable. The default depends on the component: typical input components (field, check box, ...) are focusable by default, while typical structure components (pane, label, ...) are not focusable by default.

trueFocusable
falseNot focusable

helpid

Help id that is part of the online help management.

helpidId pointing to a server side online help file.
ccnof1helpExplicitly switching off default F1 help. This is sometimes required in case you want to explicitly react on F1-key as hotkey.

image

Reference to image within your web application. The image is defined in an absolute way (e.g. /images/abc.png) - the root directory for absolute addressing is the directory of the web application.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

imageareainvokeevent

Invoke event that is valid for each map area item, that you add via the IMAGEAREAS attribute.

clickMouse click (both mouse buttons)
leftclickMouse click (left mouse button)
rightclickMouse click (right mouse button)
doubleclickMouse double click
leftanyclickBoth click and double click are transferred, check event BaseActionEventInvoke on server side for click count
mousedownLeft mouse button down

imageareas

Semicolon separated string of area information that is layes over the image.

poly(areaId,x,y,x,y,x,y,x,y)Polygon area
rect(areaId,x1,y1,x2,y2)Rectangle area
poly(..);poly(..);rect(..)Concatenation of areas

popupmenu

Reference to the id of a POPUPMENU definition that is available either in this page or in a page that includes this page.

popupmenuloadroundtrip

If set to true, then an explicit roundtrip is triggered when the user presses the right mouse button in order to open a popup menu. As result you can define the popup menu dynamically (using DYNAMICCONTENT) and prepare the popup menu at this point of time when the user want to open it.

falseMenu is already defined in layout, no roundtrip (default)
trueMenu is dynamically created, roundtrip is triggered

reference

Reference to an outside object that is the content behind the component. E.g. a field is representing a certain field of a database table: in this case you could define the value table;column. The reference plays a siginficant role within the attributemacro management.

refOne reference
ref1;ref2Two references
ref1;ref2;ref3Three references

rendered

Flag that indicated if this component is rendered at all. If set to false then the component is not rendered - there is no component data sent to the client.

trueComponent is rendered (default)
falseComponent is not rendered

rounding

Rounding radius of edges of border/background. This is optical rounding - so has nothing to do with mathematical rounding...

0Straight edges
5Rounding with radius 5
10Rounding with radius 10

rowalignmenty

If more than one component is arranged within one row, then components need to decide how they want to be aligned vertically inside the row - in case the height of the row exceeds the height of the component itself.

topTop
centerCenter (default)
bottomBottom

shadow

Shadow of component. The definition is done by several inner values: hoffset, voffset, blur and color.

hoffset:5;voffset:5;blur:5;color:#C0C0C0full shadow definition
color:#C0C0C0Definition only via color, rest of values is set to default values

styleseq

Style class names that are applied to this component.

stylevariant

In CaptainCasa you can define styles definitions for components. A style definition is a definition of a set of default attribute values that are applied to the component. In case you want to differenciate between different usage types of the component you can apply multiple styles - and use the stylevariant attribute to select between.

tooltip

Text that is shown as hint when the user stays with the mouse on top of the control for a while.

...anytext...Text that is displayed as tooltip.
server:trueIndicator that tooltip for the component is managed on server side. The actionListener will be invokde with events BaseActionEventTooltipStarted and BaseActionEventTooltipEnde. On server side you may implement some modeless popup in order to show some more complex tooltip
server:true;opendelay:1000Duration in milliseconds after which a tooltip event is triggered when the user moves the mouse on top of this component

x

x-pixel-position: this attribute is only used if the component is directly placed into a PAINTAREA!

y

y-pixel-position: this attribute is only used if the component is directly placed into a PAINTAREA!