Zebra API Doc

zebra.ui.Panel Class

This the core UI component class. All other UI components has to be successor of panel class.

// instantiate panel with no arguments
var p = new zebra.ui.Panel();

// instantiate panel with border layout set as its layout manager
var p = new zebra.ui.Panel(new zebra.layout.BorderLayout());

// instantiate panel with the given properties (border
// layout manager, blue background and plain border)
var p = new zebra.ui.Panel({
   layout: new zebra.ui.BorderLayout(),
   background : "blue",
   border     : "plain"
});

Container. Panel can contains number of other UI components as its children where the children components are placed with a defined by the panel layout manager:

// add few children component to panel top, center and bottom parts
// with help of border layout manager
var p = new zebra.ui.Panel();
p.setLayout(new zebra.layout.BorderLayout(4)); // set layout manager to
                                               // order children components

p.add(zebra.layout.TOP, new zebra.ui.Label("Top label"));
p.add(zebra.layout.CENTER, new zebra.ui.TextArea("Text area"));
p.add(zebra.layout.BOTTOM, new zebra.ui.Button("Button"));

Events. The class provides possibility to catch various component and input events by declaring an appropriate event method handler. The most simple case you just define a method:

var p = new zebra.ui.Panel();
p.mousePressed = function(e) {
    // handle event here
};

If you prefer to create an anonymous class instance you can do it as follow:

var p = new zebra.ui.Panel([
    function mousePressed(e) {
        // handle event here
    }
]);

One more way to add the event handler is dynamic extending of an instance class demonstrated below:

var p = new zebra.ui.Panel("Test");
p.extend([
    function mousePressed(e) {
        // handle event here
    }
]);

Pay attention Zebra UI components often declare own event handlers and in this case you can overwrite the default event handler with a new one. Preventing the basic event handler execution can cause the component will work improperly. You should care about the base event handler execution as follow:

// button component declares own mouse pressed event handler
// we have to call the original handler to keep the button component
// properly working
var p = new zebra.ui.Button("Test");
p.extend([
    function mousePressed(e) {
        this.$super(e); // call parent class event handler implementation
        // handle event here
    }
]);

Constructor

zebra.ui.Panel

(
  • [l]
)

Parameters:

  • [l] Object | zebra.layout.Layout optional

    pass a layout manager or number of properties that have to be applied to the instance of the panel class.

Methods

add

(
  • constr
  • d
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Add the new children component with the given constraints

Parameters:

  • constr Object

    a constraints of a new children component

  • d zebra.layout.Layoutable

    a new children component to be added


Return: zebra.layout.Layoutable

added layoutable component

bind

(
  • a
)
Function | Object

Shortcut method to register the specific to the concrete component events listener. For instance "zebra.ui.Button" component fires event when it is pressed:

   var b = new zebra.ui.Button("Test");
   b.bind(function() {
       // button has been pressed
   });

Parameters:

  • a Function | Object

    listener function or an object that declares events handler methods


Return: Function | Object

a registered listener

calcPreferredSize

(
  • target
)
Object private

Inherited from zebra.layout.Layoutable:

Internal implementation of the component preferred size calculation.

Parameters:


Return: Object

a preferred size. The method always returns { width:10, height:10 } as the component preferred size

doLayout

() private

Inherited from zebra.layout.Layoutable:

By default layoutbable component itself implements layout manager to order its children components. This method implementation does nothing, so children component will placed according locations and sizes they have set.

find

(
  • path
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Find a first children component that satisfies the passed path expression.

Parameters:

  • path String

    path expression. Path expression is simplified form of XPath-like expression:

       "/Panel"  - find first children that is an instance of zebra.ui.Panel
       "/Panel[@id='top']" - find first children that is an instance of zebra.ui.Panel with "id" property that equals "top"
       "//Panel"  - find first children that is an instance of zebra.ui.Panel recursively 

    Shortcuts:

           "#id" - find a component by its "id" attribute value. This is equivalent of "//*[@id='a component id property']" path
           "zebra.ui.Button" - find a component by its class.  This is equivalent of "//className" path

Return: zebra.layout.Layoutable

found children component or null if no children component can be found

findAll

(
  • path
  • [callback]
)
Array

Inherited from zebra.layout.Layoutable:

Find children components that satisfy the passed path expression.

Parameters:

  • path String

    path expression. Path expression is simplified form of XPath-like expression:

        "/Panel"  - find first children that is an instance of zebra.ui.Panel
        "/Panel[@id='top']" - find first children that is an instance of zebra.ui.Panel with "id" property that equals "top"
        "//Panel"  - find first children that is an instance of zebra.ui.Panel recursively 

    Shortcuts:

           "#id" - find a component by its "id" attribute value. This is equivalent of "//*[@id='a component id property']" path
           "zebra.ui.Button" - find a component by its class.  This is equivalent of "//className" path
  • [callback] Function optional

    function that is called every time a new children component has been found.


Return: Array

return array of found children components if passed function has not been passed

focused

()

Called whenever the UI component gets or looses focus

getBottom

() Integer

Inherited from zebra.layout.Layoutable:

Get bottom padding.


Return: Integer

bottom padding in pixel

getByConstraints

(
  • c
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Get a children layoutable component by the given constraints.

Parameters:


Return: zebra.layout.Layoutable

a children component

getCanvas

() zebra.ui.zCanvas

Find a zebra.ui.zCanvas where the given UI component is hosted


Return: zebra.ui.zCanvas

a zebra canvas

getComponentAt

(
  • x
  • y
)
zebra.ui.Panel

Get a children UI component that embeds the given point.

Parameters:

  • x Integer

    x coordinate

  • y Integer

    y coordinate


Return: zebra.ui.Panel

a children UI component

getLeft

() Integer

Inherited from zebra.layout.Layoutable:

Get left padding.


Return: Integer

left padding in pixel

getPreferredSize

() Object

Inherited from zebra.layout.Layoutable:

Get preferred size. The preferred size includes top, left, bottom and right paddings and the size the component wants to have


Return: Object

return size object the component wants to have as the following structure:

    {width:{Integer}, height:{Integer}} object

getRight

() Integer

Inherited from zebra.layout.Layoutable:

Get right padding.


Return: Integer

right padding in pixel

getTop

() Integer

Inherited from zebra.layout.Layoutable:

Get top padding.


Return: Integer

top padding in pixel

hasFocus

() Boolean

Checks if the component has a focus


Return: Boolean

true if the component has focus

indexOf

(
  • c
)
Integer

Inherited from zebra.layout.Layoutable:

Detect index of a children component.

Parameters:

  • c zebra.ui.Layoutbale

    a children component


Return: Integer

insert

(
  • i
  • constr
  • d
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Insert the new children component at the given index with the specified layout constraints. The passed constraints can be set via a layoutable component that is inserted. Just set "constraints" property of in inserted component.

Parameters:

  • i Integer

    an index at that the new children component has to be inserted

  • constr Object

    layout constraints of the new children component

  • d zebra.layout.Layoutbale

    a new children layoutable component to be added


Return: zebra.layout.Layoutable

an inserted children layoutable component

invalidate

()

Inherited from zebra.layout.Layoutable:

Invalidate component layout and metrics.

invalidateLayout

() protected

Inherited from zebra.layout.Layoutable:

Invalidate the component layout. Layout invalidation means the component children components have to be placed with the component layout manager. Layout invalidation causes a parent component layout is also invalidated.

kidAdded

(
  • index
  • constr
  • l
)

The method is implemented to be aware about a children component insertion.

Parameters:

  • index Integer

    an index at that a new children component has been added

  • constr Object

    a layout constraints of an inserted component

  • l zebra.ui.Panel

    a children component that has been inserted

kidRemoved

(
  • i
  • l
)

The method is implemented to be aware about a children component removal.

Parameters:

  • i Integer

    an index of a removed component

  • l zebra.ui.Panel

    a removed children component

laidout

()

Inherited from zebra.layout.Layoutable:

The method can be implemented to be informed every time the component has completed to layout its children components

load

(
  • jsonPath
)
chainable

Load content of the panel UI components from the specified JSON file.

Parameters:

  • jsonPath String

    an URL to a JSON file that describes UI to be loaded into the panel

properties

(
  • [path]
  • props
)
zebra.ui.Layoutable chainable

Inherited from zebra.layout.Layoutable:

Apply the given set of properties to the given component or a number of children components.

   var c = new zebra.layout.Layoutable();
   c.properties({
       width: [100, 100],
       location: [10,10],
       layout: new zebra.layout.BorderLayout()
   })

   c.add(new zebra.layout.Layoutable()).add(zebra.layout.Layoutable()).add(zebra.layout.Layoutable());
   c.properties("//*", {
       size: [100, 200]
   });

Parameters:

  • [path] String optional

    a path to find children components

  • props Object

    a dictionary of properties to be applied


Return: zebra.ui.Layoutable

a component itself

recalc

() protected

Inherited from zebra.layout.Layoutable:

By default there is no any implementation of "recalc" method in the layoutable component. In other words the method doesn't exist. Developer should implement the method if the need a proper and efficient place to calculate component properties that have influence to the component preferred size. The "recalc" method is called only when it is really necessary to compute the component metrics.

relocated

(
  • px
  • py
)

The method is implemented to be aware the component location updating

Parameters:

  • px Integer

    a previous x coordinate of the component

  • py Integer

    a previous y coordinate of the component

remove

(
  • c
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Remove the given children component.

Parameters:


Return: zebra.layout.Layoutable

a removed children component

removeAll

()

Remove all children UI components

removeAt

(
  • i
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Remove a children component at the specified position.

Parameters:

  • i Integer

    a children component index at which it has to be removed


Return: zebra.layout.Layoutable

a removed children component

removeMe

()

Inherited from zebra.layout.Layoutable:

Remove the component from its parent if it has a parent

repaint

(
  • [x]
  • [y]
  • [w]
  • [h]
)

Request the whole UI component or part of the UI component to be repainted

Parameters:

  • [x] Integer optional

    x coordinate of the component area to be repainted

  • [y] Integer optional

    y coordinate of the component area to be repainted

  • [w] Integer optional

    width of the component area to be repainted

  • [h] Integer optional

    height of the component area to be repainted

requestFocus

()

Force the given component to catch focus if the component is focusable.

requestFocusIn

(
  • [timeout]
)

Force the given component to catch focus in the given timeout.

Parameters:

  • [timeout] Integer optional

    a timeout in milliseconds. The default value is 50

resized

(
  • pw
  • ph
)

The method is implemented to be aware the component size updating

Parameters:

  • pw Integer

    a previous width of the component

  • ph Integer

    a previous height of the component

setAt

(
  • i
  • d
)
zebra.layout.Layoutable

Inherited from zebra.layout.Layoutable:

Replace a children component at the specified index with the given new children component

Parameters:


Return: zebra.layout.Layoutable

a previous component that has been re-set with the new one

setBackground

(
  • v
)
chainable

Set the background. Background can be a color string or a zebra.ui.View class instance, or a function(g,x,y,w,h,c) that paints the background:

       // set background color
       comp.setBackground("red");

       // set a picture as a component background
       comp.setBackground(new zebra.ui.Picture(...));

       // set a custom rendered background
       comp.setBackground(function (g,x,y,w,h,target) {
           // paint a component background here
           g.setColor("blue");
           g.fillRect(x,y,w,h);
           g.drawLine(...);
           ...
       });

Parameters:

  • v String | zebra.ui.View | Function

    a background view, color or background "paint(g,x,y,w,h,c)" rendering function.

setBorder

(
  • v
)
chainable

Set the border view

Parameters:

  • v zebra.ui.View | Function | String

    a border view or border "paint(g,x,y,w,h,c)" rendering function or border type: "plain", "sunken", "raised", "etched"

setBounds

(
  • x
  • y
  • w
  • h
)
chainable

Inherited from zebra.layout.Layoutable:

Set the layoutable component bounds. Bounds defines the component location and size.

Parameters:

  • x Integer

    x coordinate relatively to the layoutable component parent

  • y Integer

    y coordinate relatively to the layoutable component parent

  • w Integer

    a width of the component

  • h Integer

    a height of the component

setEnabled

(
  • b
)
chainable

Set the UI component enabled state. Using this property an UI component can be excluded from getting input events

Parameters:

  • b Boolean

    a enabled state

setId

(
  • id
)
chainable

Inherited from zebra.layout.Layoutable:

Set the given id for the component

Parameters:

  • id String

    an ID to be set

setKids

(
  • a
)
protected

Add the given children component or number of components to the given panel.

Parameters:

  • a zebra.ui.Panel | Array | Object

    children component of number of components to be added. The parameter can be:

    • Component
    • Array of components
    • Dictionary object where every element is a component to be added and the key of the component is stored in the dictionary is considered as the component constraints

setLayout

(
  • m
)
chainable

Inherited from zebra.layout.Layoutable:

Set the given layout manager that is used to place children component. Layout manager is simple class that defines number of rules concerning the way children components have to be ordered on its parent surface.

Parameters:

  • m zebra.ui.Layout

    a layout manager

setLocation

(
  • xx
  • yy
)

Inherited from zebra.layout.Layoutable:

Set the layoutable component location. Location is x, y coordinates relatively to a parent component

Parameters:

  • xx Integer

    x coordinate relatively to the layoutable component parent

  • yy Integer

    y coordinate relatively to the layoutable component parent

setPadding

(
  • v
)
chainable

Set the UI component top, right, left, bottom paddings to the same given value

Parameters:

  • v Integer

    the value that will be set as top, right, left, bottom UI component paddings

setPadding

(
  • top
  • left
  • bottom
  • right
)
chainable

Set UI component top, left, bottom, right paddings. The paddings are gaps between component border and painted area.

Parameters:

  • top Integer

    a top padding

  • left Integer

    a left padding

  • bottom Integer

    a bottom padding

  • right Integer

    a right padding

setParent

(
  • o
)
protected

Inherited from zebra.layout.Layoutable:

Set the parent component.

Parameters:

setPreferredSize

(
  • w
  • h
)

Inherited from zebra.layout.Layoutable:

Set the specified preferred size the component has to have. Component preferred size is important thing that is widely used to layout the component. Usually the preferred size is calculated by a concrete component basing on its metrics. For instance, label component calculates its preferred size basing on text size. But if it is required
the component preferred size can be fixed with the desired value.

Parameters:

  • w Integer

    a preferred width. Pass "-1" as the argument value to not set preferred width

  • h Integer

    a preferred height. Pass "-1" as the argument value to not set preferred height

setSize

(
  • w
  • h
)

Inherited from zebra.layout.Layoutable:

Set the layoutable component size.

Parameters:

  • w Integer

    a width of the component

  • h Integer

    a height of the component

setVisible

(
  • b
)
chainable

Set the UI component visibility

Parameters:

  • b Boolean

    a visibility state

toBack

()

Send the UI component to back

toFront

()

Bring the UI component to front

toPreferredSize

() Object

Set the UI component size to its preferred size


Return: Object

a preferred size applied to the component. The structure of the returned object is the following:

       { width:{Integer}, height:{Integer} }

unbind

(
  • a
)

Shortcut method to remove the register component specific events listener

Parameters:

  • a Function | Object

    listener function to be removed

validate

()

Inherited from zebra.layout.Layoutable:

Force validation of the component metrics and layout if it is not valid

validateMetric

() protected

Inherited from zebra.layout.Layoutable:

Validate the component metrics. The method is called as a one step of the component validation procedure. The method causes "recalc" method execution if the method has been implemented and the component is in invalid state. It is supposed the "recalc" method has to be implemented by a component as safe place where the component metrics can be calculated. Component metrics is individual for the given component properties that has influence to the component preferred size value. In many cases the properties calculation has to be minimized what can be done by moving the calculation in "recalc" method

vrp

()

Shortcut method to invalidating the component and initiating the component repainting

Attributes

bg

zebra.ui.View readonly

UI component background view

Default: null

border

zebra.ui.View readonly

UI component border view

Default: null

canHaveFocus

Boolean

Define and set the property to true if the component has to catch focus

Default: undefined

constraints

Object

Inherited from zebra.layout.Layoutable:

The component layout constraints. The constraints is specific to the parent component layout manager value that customizes the children component layouting on the parent component.

Default: null

height

Integer readonly

Inherited from zebra.layout.Layoutable:

Height of rectangular area

Default: 0

isEnabled

Boolean readonly

UI component enabled state

Default: true

isValid

Boolean readonly

Inherited from zebra.layout.Layoutable:

Indicate a layoutable component validity

Default: false

isVisible

Boolean readonly

Inherited from zebra.layout.Layoutable:

Indicate a layoutable component visibility

Default: true

kids

Array readonly

Inherited from zebra.layout.Layoutable:

Reference to children components

Default: empty array

layout

zebra.layout.Layout readonly

Inherited from zebra.layout.Layoutable:

Layout manager that is used to order children layoutable components

Default: itself

parent

zebra.layout.Layoutable readonly

Inherited from zebra.layout.Layoutable:

Reference to a parent layoutable component

Default: null

width

Integer readonly

Inherited from zebra.layout.Layoutable:

Width of rectangular area

Default: 0

x

Integer readonly

Inherited from zebra.layout.Layoutable:

x coordinate

Default: 0

y

Integer readonly

Inherited from zebra.layout.Layoutable:

y coordinate

Default: 0

Events

childCompEvent

Implement the event handler method to catch children components component events

var p = new zebra.ui.Panel();
p.childCompEvent = function(id, src, p1, p2) { ... }; // add event handler

Event Parameters:

  • id Integer

    a component event ID. The id can have one of the following value:

       zebra.ui.Panel.ENABLED
       zebra.ui.Panel.SHOWN
       zebra.ui.Panel.MOVED
       zebra.ui.Panel.SIZED
       zebra.ui.Panel.ADDED
       zebra.ui.Panel.REMOVED
  • src zebra.ui.Panel

    a component that triggers the event

  • p1 zebra.ui.Panel | Integer | Object

    an event first parameter that depends on an component event that has happened

       if id is zebra.ui.Panel.SIZED the parameter is previous component width
       if id is zebra.ui.Panel.MOVED the parameter is previous component x location
       if id is zebra.ui.Panel.ADDED the parameter is constraints a new component has been added
       if id is zebra.ui.Panel.REMOVED the parameter is null
  • p2 zebra.ui.Panel | Integer | Object

    an event second parameter depends on an component event that has happened

       if id is zebra.ui.Panel.SIZED the parameter is previous component height
       if id is zebra.ui.Panel.MOVED the parameter is previous component y location
       if id is zebra.ui.Panel.ADDED the parameter is reference to the added children component
       if id is zebra.ui.Panel.REMOVED the parameter is reference to the removed children component

childInputEvent

Implement the event handler method to catch children components input events

var p = new zebra.ui.Panel();
p.childInputEvent = function(e) { ... }; // add event handler

Event Parameters:

clipCopy

The method is called for focusable UI components (components that can hold input focus) to ask a string to be saved in native clipboard

clipPaste

The method is called to pass string from clipboard to a focusable (a component that can hold input focus) UI component

Event Parameters:

  • s String

    a string from native clipboard

compAdded

Implement the event handler method to catch component added event The event is triggered every time the component has been inserted into another one.

var p = new zebra.ui.Panel();
p.compAdded = function(p, constr, c) { ... }; // add event handler

Event Parameters:

  • p zebra.ui.Panel

    a parent component of the component has been added

  • constr Object

    a layout constraints

  • c zebra.ui.Panel

    a component that has been added

compEnabled

Implement the event handler method to catch component enabled event The event is triggered every time a component enabled state has been updated.

var p = new zebra.ui.Panel();
p.compEnabled = function(c) { ... }; // add event handler

Event Parameters:

compMoved

Implement the event handler method to catch component moved event The event is triggered every time the component location has been updated.

var p = new zebra.ui.Panel();
p.compMoved = function(c, px, py) { ... }; // add event handler

Event Parameters:

  • c zebra.ui.Panel

    a component that has been moved

  • px Integer

    a previous x coordinate the moved component had

  • py Integer

    a previous y coordinate the moved component had

compRemoved

Implement the event handler method to catch component removed event The event is triggered every time the component has been removed from its parent UI component.

var p = new zebra.ui.Panel();
p.compRemoved = function(p, i, c) { ... }; // add event handler

Event Parameters:

  • p zebra.ui.Panel

    a parent component of the component that has been removed

  • i Integer

    an index of removed component

  • c zebra.ui.Panel

    a component that has been removed

compShown

Implement the event handler method to catch component shown event The event is triggered every time a component visibility state has been updated.

var p = new zebra.ui.Panel();
p.compShown = function(c) { ... }; // add event handler

Event Parameters:

  • c zebra.ui.Panel

    a component whose visibility state has been updated

compSized

Implement the event handler method to catch the component sized event The event is triggered every time the component has been re-sized.

var p = new zebra.ui.Panel();
p.compSized = function(c, pw, ph) { ... }; // add event handler

Event Parameters:

  • c zebra.ui.Panel

    a component that has been sized

  • pw Integer

    a previous width the sized component had

  • ph Integer

    a previous height the sized component had

focusGained

Implement the event handler method to catch component focus gained event The event is triggered every time a component has gained focus.

var p = new zebra.ui.Panel();
p.focusGained = function(e) { ... }; // add event handler

Event Parameters:

focusLost

Implement the event handler method to catch component focus lost event The event is triggered every time a component has lost focus

var p = new zebra.ui.Panel();
p.focusLost = function(e) { ... }; // add event handler

Event Parameters:

keyPressed

Implement the event handler method to catch key pressed event The event is triggered every time a key has been pressed.

var p = new zebra.ui.Panel();
p.keyPressed = function(e) { ... }; // add event handler

Event Parameters:

keyReleased

Implement the event handler method to catch key released event The event is triggered every time a key has been released.

var p = new zebra.ui.Panel();
p.keyReleased = function(e) { ... }; // add event handler

Event Parameters:

keyTyped

Implement the event handler method to catch key types event The event is triggered every time a key has been typed.

var p = new zebra.ui.Panel();
p.keyTyped = function(e) { ... }; // add event handler

Event Parameters:

mouseClicked

Implement the event handler method to catch mouse clicked event. The event is triggered every time a mouse button has been clicked. Click events are generated only if no one mouse moved or drag events has been generated in between mouse pressed -> mouse released events sequence.

var p = new zebra.ui.Panel();
p.mouseClicked = function(e) { ... }; // add event handler

Event Parameters:

mouseDragEnded

Implement the event handler method to catch mouse drag ended event. The event is triggered every time a mouse cursor has been moved last time when a mouse button has been pressed. Or when a finger has been moved last time over a touch screen.

var p = new zebra.ui.Panel();
p.mouseDragEnded = function(e) { ... }; // add event handler

Event Parameters:

mouseDragged

Implement the event handler method to catch mouse dragged event. The event is triggered every time a mouse cursor has been moved when a mouse button has been pressed. Or when a finger has been moved over a touch screen.

var p = new zebra.ui.Panel();
p.mouseDragged = function(e) { ... }; // add event handler

Event Parameters:

mouseDragStarted

Implement the event handler method to catch mouse drag started event. The event is triggered every time a mouse cursor has been moved first time when a mouse button has been pressed. Or when a finger has been moved first time over a touch screen.

var p = new zebra.ui.Panel();
p.mouseDragStarted = function(e) { ... }; // add event handler

Event Parameters:

mouseEntered

Implement the event handler method to catch mouse entered event. The event is triggered every time a mouse cursor entered the given component.

var p = new zebra.ui.Panel();
p.mouseEntered = function(e) { ... }; // add event handler

Event Parameters:

mouseExited

Implement the event handler method to catch mouse exited event. The event is triggered every time a mouse cursor exited the given component.

var p = new zebra.ui.Panel();
p.mouseExited = function(e) { ... }; // add event handler

Event Parameters:

mouseMoved

Implement the event handler method to catch mouse moved event. The event is triggered every time a mouse cursor has been moved with no a mouse button pressed.

var p = new zebra.ui.Panel();
p.mouseMoved = function(e) { ... }; // add event handler

Event Parameters:

mousePressed

Implement the event handler method to catch mouse pressed event. The event is triggered every time a mouse button has been pressed or a finger has touched a touch screen.

var p = new zebra.ui.Panel();
p.mousePressed = function(e) { ... }; // add event handler

Event Parameters:

mouseReleased

Implement the event handler method to catch mouse released event. The event is triggered every time a mouse button has been released or a finger has untouched a touch screen.

var p = new zebra.ui.Panel();
p.mouseReleased = function(e) { ... }; // add event handler

Event Parameters: