Paintable Canvas
Component Palette Icon:
The Paintable Canvas component is a component that can be custom "painted" using Jython scripting. By responding to the component's repaint event, a designer can use Java2D to draw anything within the component's bounds. Whenever any dynamic properties on the component change, the component is re-painted automatically, making it possible to create dynamic, vector-drawn components that can represent anything.
This component is an advanced component for those who are very comfortable using scripting. It is not user-friendly. The upside is that it is extraordinarily powerful, as your imagination is the only limit with what this component can be.
When you first drop a Paintable Canvas onto a window, you'll notice that it looks like a placeholder. If you switch the Designer into preview mode, you'll see an icon of a pump displayed. The pump is an example that comes pre-loaded into the Paintable Canvas. By editing the component's event scripts, you can dissect how the pump was drawn. You will notice that the script uses Java2D. You can read more about Java2D here. You will notice that as you resize the pump, it scales beautifully in preview mode. Java2D is a vector drawing library, enabling you to create components that scale very gracefully.
Tips:
-
Don't forget that you can add dynamic properties to this component, and use the styles feature. Use the values of dynamic properties in your repaint code to create a dynamic component. The component will repaint automatically when these values change.
-
You can create an interactive component by responding to mouse and keyboard events
-
You can store your custom components on a custom palette and use them like standard components.
|
Name |
Description |
Property Type |
Scripting |
Category |
|
Background Color |
The background color of the component. |
Color |
.background |
Appearance |
|
Border |
The border surrounding this component. NOTE that the border is unaffected by rotation. |
Border |
.border |
Common |
|
Cursor |
The mouse cursor to use when hovering over this component. |
int |
.cursorCode |
Common |
|
Data Quality |
The data quality code for any tag bindings on this component. |
int |
.dataQuality |
Data |
|
Focusable |
If the component is focusable, it will receive keyboard input and can detect if it is the focus owner. |
boolean |
.focusable |
Behavior |
|
Font |
Font of text of this component |
Font |
.font |
Appearance |
|
Foreground Color |
The foreground color of the component. |
Color |
.foreground |
Appearance |
|
Mouseover Text |
The text that is displayed in the tooltip which pops up on mouseover of this component. |
String |
.toolTipText |
Common |
|
Name |
The name of this component. |
String |
.name |
Common |
|
Styles |
Contains the component's styles |
Dataset |
.styles |
Appearance |
|
Visible |
If disabled, the component will be hidden. |
boolean |
.visible |
Common |
This component does not have scripting functions associated with it.
This component does not have extension functions associated with it.
focus
focusGained
This event occurs when a component that can receive input, such as a text box, receives the input focus. This usually occurs when a user clicks on the component or tabs over to it.
|
.source |
The component that fired this event |
|
.oppositeComponent |
The other component involved in thie focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
focusLost
This event occurs when a component that had the input focus lost it to another component.
|
.source |
The component that fired this event |
|
.oppositeComponent |
The other component involved in thie focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
key
keyPressed
An integer that indicates whether the state was changed to "Selected" (on) or "Deselected" (off). Compare this to the event object's constants to determine what the new state is.
|
.source |
The component that fired this event |
|
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. |
|
.keyChar |
The character that was typed. Used with the keyTyped event. |
|
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a key board, e.g. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyReleased
Fires when a key is released and the source component has the input focus. Works for all characters, including non-printable ones, such as SHIFT and F3.
|
.source |
The component that fired this event |
|
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. |
|
.keyChar |
The character that was typed. Used with the keyTyped event. |
|
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a key board, e.g. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyTyped
Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.
|
.source |
The component that fired this event |
|
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. |
|
.keyChar |
The character that was typed. Used with the keyTyped event. |
|
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a key board, e.g. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouse
mouseClicked
This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseEntered
This event fires when the mouse enters the space over the source component.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseExited
This event fires when the mouse leaves the space over the source component.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mousePressed
This event fires when a mouse button is pressed down on the source component.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseReleased
This event fires when a mouse button is released, if that mouse button's press happened over this component.
|
.source |
The component that fired this event |
|
.button |
The code for the button that caused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMotion
mouseDragged
Fires when the mouse moves over a component after a button has been pushed.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMoved
Fires when the mouse moves over a component, but no buttons are pushed.
|
.source |
The component that fired this event |
|
.button |
The code for the button that coused this event to fire. |
|
.clickCount |
The number of mouse clicks associated with this event. |
|
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
|
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
|
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
|
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
|
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
|
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
paint
repaint
Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.
|
.source |
The component that fired this event |
|
.graphics |
An instance of java.awt.Graphics2D that can be used to paint this component. The point (0,0) is located at the upper left of the component. |
|
.width |
The width of the paintable area of the component. This takes into account the component's border. |
|
.height |
The height of the paintable area of the component. This takes into account the component's border. |
There are no examples associated with this component. However examples are available in the component itself.
The component comes prescripted to render the following pump:
