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.
cssBaseClasses | A 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! |
cssClasses | A 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’. |
cssExtraClasses | Another 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
onparentchange | Invoked when any other thyPanel or derivate class is inserted as a child. |
onbeforeparentchange | Invoked 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 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> |