Class: cuiPage

cuiPage

Pages are the top-level structure of a cui2d user interface. There is always exactly one (proper) page visible but the cuiPage.process function of that page might include multiple overlay pages with cuiPage#processOverlay. cuiPage.process usually calls other process functions (e.g. cuiButton#process, cuiDraggable#process, cuiTransformable#process) to include GUI elements in the layout of a page. Each page has a coordinate system with the origin in the top, left corner and x coordinates between 0 and width, and y coordinates between 0 and height.

new cuiPage(width, height, process)

Create a new cuiPage of specified width and height with the specified process function.
Parameters:
Name Type Description
width number The width of the page.
height number The height of the page.
process function The page's process function to process an event (with process(event) which should return true to indicate that the event has been processed and therefore to prevent the default gestures for manipulating pages) and to repaint the page (with process(null) which should always return false).
Source:

Members

<static> height :number

The height of the page.
Type:
  • number
Source:

<static> horizontalAlignment :number

Number to specify the horizontal alignment: -1 for left, 0 for center, +1 for right. (By default set to 0.)
Type:
  • number
Source:

<static> interactionBits :number

Bits to specify the available forms of default interaction with a page. Either cuiConstants.none or a bitwise-or of other constants in cuiConstants, e.g. cuiConstants.isDraggableWithOneFinger | cuiConstants.isTransformableWithTwoFingers.
Type:
  • number
Source:

<static> isAdjustingHeight :boolean

Flag to specify whether to adjust the height of the page by scaling. (By default set to true.)
Type:
  • boolean
Source:

<static> isAdjustingWidth :boolean

Flag to specify whether to adjust the width of the page by scaling. (By default set to true.)
Type:
  • boolean
Source:

<static> process :function

The page's process function to process an event (with process(event) which should return true to indicate that the event has been processed and therefore to prevent the default gestures for manipulating pages) and to repaint the page (with process(null) which should always return false).
Type:
  • function
Source:

<static> verticalAlignment :number

Number to specify the vertical alignment: -1 for top, 0 for center, +1 for bottom. (By default set to 0.)
Type:
  • number
Source:

<static> view :cuiTransformable

The transformable object representing the page's transformation relative to the initial transformation. This transformable object usually has its cuiTransformable.isProcessingOuterEvents property set to true.
Type:
Source:

<static> width :number

The width of the page.
Type:
  • number
Source:

Methods

computeTranslationToCenterPoint(point)

Compute the values for cuiTransformable.translationX and cuiTransformable.translationY of cuiPage.view to center the point (point.x, point.y) on the screen and write these values to point.x and point.y.
Parameters:
Name Type Description
point Object An object with an x and y property representing a 2D point.
Source:

processOverlay(event) → {boolean}

Either process the event (if event != null) and return true if the event has been processed, or draw the page as an overlay (to another page) in the rectangle, which is specified in window coordinates (if event == null) and return false. This function is usually called by cuiPage.process of another page.
Parameters:
Name Type Description
event Object An object describing a user event by its "type", coordinates in window coordinates ("clientX" and "clientY"), an "identifier" for touch events, and optionally "buttons" to specify which mouse buttons are depressed. If null, the function should redraw the overlay page.
Source:
Returns:
True if event != null and the event has been processed (implying that no other GUI elements should process it). False otherwise.
Type
boolean

transformPageToTransitionCoordinates(point)

Transforms the coordinates point.x and point.y from page coordinates to the transition coordinate system (with coordinates between -1 and +1).
Parameters:
Name Type Description
point Object An object with an x and y property representing a 2D point.
Source:
See: