GraffitiSuite - UI Shouldn't Be Hard

Table of Contents

Enumerations
Constants
Events
Methods
Properties
Examples
- Sample Custom JavaScript Function
- Bindings
Notes
- Binding Limitations

Enumerations #

Values	Values
EventTypes	MouseDown MouseUp MouseMove MouseEnter MouseExit KeyDown KeyUp KeyPress TouchStart TouchEnd TouchMove FocusIn FocusOut Copy Paste ContextMenu DoubleClick Scroll ScrollEnd Wheel
MouseButtons	None LeftButton MiddleButton RightButton

Constants #

This class exposes no constants.

Events #

Definition	Parameters	Return Type	Description
CustomEvent	name as String	None	Raised when a custom JavaScript event has been received.
CustomEvent	parameters as JSONItem	None	Raised when a custom JavaScript event has been received.
FocusEvent	name as String	None	Raised when a FocusIn or FocusOut event has been received.
FocusEvent	type as GraffitiEventManager.EventTypes	None	Raised when a FocusIn or FocusOut event has been received.
KeyboardEvent	name as String	None	Raised when a KeyDown, KeyUp, or KeyPress event has been received.
	type as GraffitiEventManager.EventTypes
	keyCode as Integer
	metaKey as Boolean
	shiftKey as Boolean
	controlKey as Boolean
	altKey as Boolean
MouseButtonEvent	name as String	None	Raised when a MouseDown or MouseUp event has been received.
	type as GraffitiEventManager.EventTypes
	button as GraffitiEventManager.MouseButtons
	relativePosition as Xojo.Point
	metaKey as Boolean
	shiftKey as Boolean
	controlKey as Boolean
	altKey as Boolean
MouseMoveEvent	name as String	None	Raised when the user has moved the mouse. `relativePosition` is relative to the (0,0) of the control. This event will only be raised when the mouse has been stationary for 500ms.
	type as GraffitiEventManager.EventTypes
	relativePosition as Xojo.Point
MousePresenceEvent	name as String	None	Raised when a MouseEnter or MouseExit event has been received.
MousePresenceEvent	type as GraffitiEventManager.EventTypes	None

Methods #

Definition	Parameters	Return Type	Description
Bind	name as String	None	Binds the defined event to the provided element.
	element as Object
	type as EventTypes
Bind	name as String	None	Binds the defined event to the provided element and uses a custom JavaScript function rather than the built-in responder.
	element as Object
	type as EventTypes
	customFunction as String
Bind	name as String	None	Binds to a CSS selector.
	selector as String
	type as EventTypes
Bind	name as String	None	Binds a custom JavaScript function to the CSS selector.
	selector as String
	type as EventTypes
	customFunction as String
BindWithFilter	name as String	None	Used for filtering KeyCodes in the JavaScript responder for Keyboard events.
	element as Object
	type as EventTypes
	filterValues() as Integer
BindWithFilter	name as String	None	Used for filtering KeyCodes in the JavaScript responder for Keyboard events.
	selector as String
	type as EventTypes
	filterValues() as Integer
Unbind	element as Object	None	Unbinds the defined event from the provided element.
Unbind	type as EventTypes	None	Unbinds the defined event from the provided element.
Unbind	selector as String	None	Unbinds the defined event from the provided CSS selector.
Unbind	type as EventTypes	None	Unbinds the defined event from the provided CSS selector.

Properties #

Name	Type	Default Value	Description
This class exposes no properties.

Examples #

Sample Custom JavaScript Function #

function (e) {
    // sendToXojo function supports arrays or JavaScript objects.
    $(e.target).html('Custom JS Event');
    // sendToXojo([0, '1', false]); // Array
    sendToXojo({'name' : 'value'}); // Object
}

Bindings #

'// Bind mouse presence events to WebButton
gemDemo.Bind( "button1_mousepresence", Button1, GraffitiEventManager.EventTypes.MouseEnter )
gemDemo.Bind( "button1_mousepresence", Button1, GraffitiEventManager.EventTypes.MouseExit )
 
'// Bind mouse interaction events to WebButton
gemDemo.Bind( "button_mouseevent", Button1, GraffitiEventManager.EventTypes.MouseDown )
gemDemo.Bind( "button_mouseevent", Button1, GraffitiEventManager.EventTypes.MouseUp )
gemDemo.Bind( "button_mouseevent", Button1, GraffitiEventManager.EventTypes.MouseMove )
 
'// Bind keyboard events to WebButton
gemDemo.Bind( "button1_keyboard", Button1, GraffitiEventManager.EventTypes.KeyDown )
gemDemo.Bind( "button1_keyboard", Button1, GraffitiEventManager.EventTypes.KeyUp )
 
'// Bind touch events to WebButton
gemDemo.Bind( "button1_touchevent", Button1, GraffitiEventManager.EventTypes.TouchStart )
gemDemo.Bind( "button1_touchevent", Button1, GraffitiEventManager.EventTypes.TouchEnd )
gemDemo.Bind( "button1_touchevent", Button1, GraffitiEventManager.EventTypes.TouchMove )
 
'// Bind custom JavaScript function to WebButton's MouseEnter event
gemDemo.Bind( "button1_customfunction", Button1, GraffitiEventManager.EventTypes.MouseEnter, jsCustomFunction )
 
'// Bind keyboard event to WebTextField
gemDemo.BindWithFilter( "textfield1_enterKey", TextField1, GraffitiEventManager.EventTypes.KeyDown, Array( 13 ) )
 
'// Bind focus events to WebTextField
gemDemo.Bind( "textfield1_focusIn", TextField1, GraffitiEventManager.EventTypes.FocusIn )
gemDemo.Bind( "textfield1_focusOut", TextField1, GraffitiEventManager.EventTypes.FocusOut )

Notes #

Binding Limitations #

Each object and event type combination can only be bound once to help ensure that traffic is not overloaded with superfluous events. Developer should combine their event handlers as much as possible to reduce network traffic.