thyPanel

Base class for all other ThyAPI GUI Components

This class is the parent of all other ThyAPI GUI components.  It performs some internal initializations.  It garantees, for example, that all elements have 2 CSS classes.  One with the name of the class, for commom object definitions and other for the specific object name, that is passed as first argument of all classes constructor.

CSS Behavior

thyPanel has 3 internal variables that controls which CSS classes a widget will receive.

cssBaseClassesA thyCollection of strings that are the base name of widget CSS classes.  This is used to allow an hierarchy of CSS classes.  When a widget B is defined as a derivative of A, and it calls addCSSClass(‘B’) method, this method inserts the ‘B’ string into the collection and guarantees that all CSS change operations includes CSS classes with base names ‘A’ and ‘B’, so all common CSS properties of ‘A’ are inheritted by ‘B’ automagically!
cssClassesA simple JS object that holds the specific types of classes the widget can have.  This is used to change visual states on widgets.  For instance, let’s imagine the previous situation of ‘B’ derivate from ‘A’.  Let’s suppose ‘B’ has a ‘selected’ state.  In this case, one could define an entry in cssClasses like cssClasses[selected] = [‘default’, ‘selected’].  In this case, one could change the visual appearance of ‘B’ calling setCSSClass(‘selected’).  In this case, this would set widget CSS classes to ‘A B A_selected B_selected’.  That means that it takes all cssBaseClasses and append them with each one of the strings in the cssClasses[‘selected’] array, with exception to ‘default’, which is reserved and means ‘just the base class’.
cssExtraClassesAnother simple JS object that is meant for temporary CSS classes. cssClasses is meant to be used as a fixed place for types of classes that corresponds to visual state changes. cssExtraClasses allows one to define extra strings that will be appended to cssBaseClasses, but that are not fixed to a state.  This is used mainly by onmouseover, onmouseout events, but can be used elsewhere and independently of cssClasses.  To use it, define a holder and in that holder define an object with types index and array of strings as contents.

Example

cssExtraClasses[‘egHolder’][‘selected’] = [‘selected_diferent’];

When ‘egHolder’ extra classes are not needed anymore, just remove it from cssExtraClasses and calls setCSSClass(‘selected’);

Author

Raphael Derosso Pereira raphael.nosp@m.pereira@users.sour.nosp@m.ceforge.net

Events

onparentchangeInvoked when any other thyPanel or derivate class is inserted as a child.
onbeforeparentchangeInvoked before changing the parent of a child widget
Summary
Base class for all other ThyAPI GUI Components
Method that will be called by DataSource when data comes from server
Method that will be called by DataSource before sending data to server
Removes all data from panel and from its children
Removes all transient data from panel
Changes the name of the widget and refreshes the CSS Classes
Overwritten invokeEvent method to detect disabled state
Attach this widget to a DOM element.
Add another object inside this one.
Removes a child from Panel
Sets this element’s read-only attribute
Sets this element’s disabled attribute
Sets this element’s display property
Returns this element’s display property
Sets this element internal ralative box creation
If set to true, a <nobr> tag will be inserted around contents
Sets the CSS Float property
Overwritten DynLayer Methods that garantees CSS priority when creating elements
Returns the actual X position of this element, relative to the whole page
Returns the actual Y position of this element, relative to the whole page
Returns the actual X position of this element, relative to its parent
Sets X position and calls locationchange event
Returns the actual Y position of this element, relative to its parent
Sets Y position and calls locationchange event
Returns the actual height of the panel
Returns the actual width of the panel
Sets element height.
Sets element width.
Sets element min-width CSS property.
Sets element min-height CSS property.
Returns the CSS Classes based on cssBaseClasses and append aditional parameters, if available
Append a base class to the base classes list and refresh
Removes the CSS Class from the list of Classes
Sets the CSS Class property of this widget based on its base classes, cssClasses attributes and extra classes
Returns the DOM object that holds children DOM objects
Removes all data from panel
Removes all transient data from panel
Specific thyPanel function to set Panel to read-only state.
Invokes ondisplay event handler on myself and all my children
Adds the specified CSS Class to the list of classes
Removes the CSS Class from the list of Classes
This garantees that all panels and derivate classes have the class set to <className>_onmouseover and <name>_onmouseover
This garantees that all panels and derivate classes have the class set to <className> and <name>
This garantees that all panels and derivate classes have the class set to <className>_onmousedown and <name>_onmousedown
This garantees that all panels and derivate classes have the class set to <className> and <name>

Data Methods

populate

p.populate = function(data)

Method that will be called by DataSource when data comes from server

This method MUST be overwritten by derivate classes to achieve its proper populate status.  The method implemented here, checks if the data is a string or an object.  If it is string, inserts it as inner HTML.  If it is an object, it checks if it has children with the name of each components

Parameter

dataThe data to be populated

sweepOut

p.sweepOut = function()

Method that will be called by DataSource before sending data to server

Returns

Array with the data of the field

cleanUp

p.cleanUp = function ()

Removes all data from panel and from its children

reset

p.reset = function ()

Removes all transient data from panel

Misc Methods

setName

p.setName = function (name)

Changes the name of the widget and refreshes the CSS Classes

Parameter

nameThe new widget name

invokeEvent

p.invokeEvent = function(type,
e,
args)

Overwritten invokeEvent method to detect disabled state

Visual Methods

setDOMParent

p.setDOMParent = function (inlineID)

Attach this widget to a DOM element.  This means that this panel will be inserted in the DOM structure below the specified DOM element

Parameters

elementThe DOM element to be attached

Prerequisites

dynapi.api.ext.DynLayerInline

addChild

p.addChild = function (child,
position)

Add another object inside this one.

This method is overwritten here so it permits the insertion of a element in a specified position

Parameters

childThe element itself
positionThe position in which this element should be inserted

Invokes

  • onbeforeparentchange
  • onparentchange

removeChild

p.removeChild = function (child)

Removes a child from Panel

Parameter

childThe child widget that will be removed or its index

setReadOnly

p.setReadOnly = function(bool)

Sets this element’s read-only attribute

Derivate classes should implement _setReadOnly specific method

Parameter

boolTrue -> read-only, false -> read/write

setDisabled

p.setDisabled = function(bool)

Sets this element’s disabled attribute

Derivate classes should implement _setDisabled specific method

Parameter

booltrue -> disabled, false -> enabled

setDisplay

p.setDisplay = function (display)

Sets this element’s display property

Parameters

display(string) The display property value

getDisplay

p.getDisplay = function ()

Returns this element’s display property

FIXME: Verify if parent is set to display none!

setRelativeness

p.setRelativeness = function (b)

Sets this element internal ralative box creation

Parameter

boolTrue -> no internal relative box, False -> internal relative box

setNoBreak

p.setNoBreak = function(bool)

If set to true, a <nobr> tag will be inserted around contents

Parameter

boolTrue / false

setFloat

p.setFloat = function (f)

Sets the CSS Float property

Parameter

f(string) The float property

getOuterHTML

p.getOuterHTML = function ()

Overwritten DynLayer Methods that garantees CSS priority when creating elements

getAbsoluteX

p.getAbsoluteX = function ()

Returns the actual X position of this element, relative to the whole page

getAbsoluteY

p.getAbsoluteY = function ()

Returns the actual Y position of this element, relative to the whole page

getX

p.getX = function ()

Returns the actual X position of this element, relative to its parent

setX

p.setX = function (x)

Sets X position and calls locationchange event

Parameter

xThe X position.  That can be an integer (number of pixels) or a string that can be used to set %

getY

p.getY = function ()

Returns the actual Y position of this element, relative to its parent

setY

p.setY = function (y)

Sets Y position and calls locationchange event

Parameter

yThe Y position.  That can be an integer (number of pixels) or a string that can be used to set %

getHeight

p.getHeight = function ()

Returns the actual height of the panel

getWidth

p.getWidth = function ()

Returns the actual width of the panel

setHeight

p.setHeight = function (h)

Sets element height.

DO NOT USE THIS METHOD UNLESS YOU KNOW WHAT YOU ARE DOING!  It will overwrite CSS properties, which is not preferred in thyAPI

setWidth

p.setWidth = function (w)

Sets element width.

DO NOT USE THIS METHOD UNLESS YOU KNOW WHAT YOU ARE DOING!  It will overwrite CSS properties, which is not preferred in thyAPI

setMinWidth

p.setMinWidth = function (w)

Sets element min-width CSS property.

DO NOT USE THIS METHOD UNLESS YOU KNOW WHAT YOU ARE DOING!  It will overwrite CSS properties, which is not preferred in thyAPI

setMinHeight

p.setMinHeight = function (h)

Sets element min-height CSS property.

DO NOT USE THIS METHOD UNLESS YOU KNOW WHAT YOU ARE DOING!  It will overwrite CSS properties, which is not preferred in thyAPI

CSS Methods

getCSSClasses

p.getCSSClasses = function (type)

Returns the CSS Classes based on cssBaseClasses and append aditional parameters, if available

Parameter

typeThe index of cssClasses which hold the classes types to be returnes

addCSSClass

p.addCSSClass = function (cssClass)

Append a base class to the base classes list and refresh

Parameter

cssClassThe name of the class that will be appended

removeCSSClass

p.removeCSSClass = function (cssClass)

Removes the CSS Class from the list of Classes

Parameter

cssClassThe CSS Class to be removed

setCSSClass

p.setCSSClass = function(type)

Sets the CSS Class property of this widget based on its base classes, cssClasses attributes and extra classes

Parameter

typesetCSSClass

Private Methods

_getDOMChildrenHolder

p._getDOMChildrenHolder = function ()

Returns the DOM object that holds children DOM objects

_cleanUp

p._cleanUp = function ()

Removes all data from panel

_reset

p._reset = function ()

Removes all transient data from panel

_setReadOnly

p._setReadOnly = function()

Specific thyPanel function to set Panel to read-only state.

This should be reimplemented in derivate classes.

_invokeOnDisplay

p._invokeOnDisplay = function ()

Invokes ondisplay event handler on myself and all my children

_addCSSClass

p._addCSSClass = function (cssClass)

Adds the specified CSS Class to the list of classes

Parameters

cssClassThe class to be added

_removeCSSClass

p._removeCSSClass = function (cssClass)

Removes the CSS Class from the list of Classes

Parameter

cssClassThe CSS Class to be removed

_appendCSSClasses

p._appendCSSClasses = function (classes,
types,
base)

_concatCSSClasses

p._concatCSSClasses = function (classes,
concat)

onmouseover

p.onmouseover = function (e)

This garantees that all panels and derivate classes have the class set to <className>_onmouseover and <name>_onmouseover

onmouseout

p.onmouseout = function (e)

This garantees that all panels and derivate classes have the class set to <className> and <name>

onmousedown

p.onmousedown = function (e)

This garantees that all panels and derivate classes have the class set to <className>_onmousedown and <name>_onmousedown

onmouseup

p.onmouseup = function (e)

This garantees that all panels and derivate classes have the class set to <className> and <name>

p.populate = function(data)
Method that will be called by DataSource when data comes from server
p.sweepOut = function()
Method that will be called by DataSource before sending data to server
p.cleanUp = function ()
Removes all data from panel and from its children
p.reset = function ()
Removes all transient data from panel
p.setName = function (name)
Changes the name of the widget and refreshes the CSS Classes
p.invokeEvent = function(type,
e,
args)
Overwritten invokeEvent method to detect disabled state
p.setDOMParent = function (inlineID)
Attach this widget to a DOM element.
p.addChild = function (child,
position)
Add another object inside this one.
p.removeChild = function (child)
Removes a child from Panel
p.setReadOnly = function(bool)
Sets this element’s read-only attribute
p.setDisabled = function(bool)
Sets this element’s disabled attribute
p.setDisplay = function (display)
Sets this element’s display property
p.getDisplay = function ()
Returns this element’s display property
p.setRelativeness = function (b)
Sets this element internal ralative box creation
p.setNoBreak = function(bool)
If set to true, a nobr tag will be inserted around contents
p.setFloat = function (f)
Sets the CSS Float property
p.getOuterHTML = function ()
Overwritten DynLayer Methods that garantees CSS priority when creating elements
p.getAbsoluteX = function ()
Returns the actual X position of this element, relative to the whole page
p.getAbsoluteY = function ()
Returns the actual Y position of this element, relative to the whole page
p.getX = function ()
Returns the actual X position of this element, relative to its parent
p.setX = function (x)
Sets X position and calls locationchange event
p.getY = function ()
Returns the actual Y position of this element, relative to its parent
p.setY = function (y)
Sets Y position and calls locationchange event
p.getHeight = function ()
Returns the actual height of the panel
p.getWidth = function ()
Returns the actual width of the panel
p.setHeight = function (h)
Sets element height.
p.setWidth = function (w)
Sets element width.
p.setMinWidth = function (w)
Sets element min-width CSS property.
p.setMinHeight = function (h)
Sets element min-height CSS property.
p.getCSSClasses = function (type)
Returns the CSS Classes based on cssBaseClasses and append aditional parameters, if available
p.addCSSClass = function (cssClass)
Append a base class to the base classes list and refresh
p.removeCSSClass = function (cssClass)
Removes the CSS Class from the list of Classes
p.setCSSClass = function(type)
Sets the CSS Class property of this widget based on its base classes, cssClasses attributes and extra classes
p._getDOMChildrenHolder = function ()
Returns the DOM object that holds children DOM objects
p._cleanUp = function ()
Removes all data from panel
p._reset = function ()
Removes all transient data from panel
p._setReadOnly = function()
Specific thyPanel function to set Panel to read-only state.
Base class for all other ThyAPI GUI Components
p._invokeOnDisplay = function ()
Invokes ondisplay event handler on myself and all my children
p._addCSSClass = function (cssClass)
Adds the specified CSS Class to the list of classes
p._removeCSSClass = function (cssClass)
Removes the CSS Class from the list of Classes
p._appendCSSClasses = function (classes,
types,
base)
p._concatCSSClasses = function (classes,
concat)
p.onmouseover = function (e)
This garantees that all panels and derivate classes have the class set to <className>_onmouseover and <name>_onmouseover
p.onmouseout = function (e)
This garantees that all panels and derivate classes have the class set to className and name
p.onmousedown = function (e)
This garantees that all panels and derivate classes have the class set to <className>_onmousedown and <name>_onmousedown
p.onmouseup = function (e)
This garantees that all panels and derivate classes have the class set to className and name