| Constants |
|
STATE_LINK
STATE_HOVER
STATE_ACTIVE
STATE_FOCUS
STATE_VISITED
STATE_CURRENT
STATE_CHECKED
STATE_DISABLED
STATE_READONLY
STATE_EXPANDED
STATE_COLLAPSED
STATE_INCOMPLETE
STATE_ANIMATING
STATE_FOCUSABLE
STATE_ANCHOR
STATE_POPUP
STATE_OWNS_POPUP
STATE_EMPTY
STATE_BUSY |
State flags (bits) of the element, used by get/setState functions. TBD. |
| Properties |
| length |
r - integer, number of child elements in this element. Read-only property. |
| [index] |
rw - Element, child element of the element at the index position, Read-write index accessor. Zero-based index. |
| root |
r - Element, root element of the DOM this element belongs to. Read-only. |
| parent |
r - Element, parent element of given element or null if this element is a root element. Read-only. |
| index |
r - Integer, index of the element in parent collection. Undefined if this element is not connected to any parent. |
| tag |
r - String, tag name of the element. Read-only. |
| next |
r - Element, next sibling element of the element or null if this is last element in the parent collection. |
| prior |
r - Element, previous sibling element of the element or null if this is first element in the parent collection. |
| attributes |
c - Attributes, collection of html attributes of the element. |
| style |
c - Style, style attributes of the DOM element. |
| text |
rw - String, text of the element. For compound elements this property returns plain-text version of the content |
| html |
rw - String, (inner HTML) html source of the content of the element. Text returned (String) will not include head and tail tags of the element. Value to set can be either String or Stream object. |
| outerHtml |
rw - String, (outer HTML) html source of the element. Text returned (String) will include head and tail tags of the element.
Value to set can be either String or Stream object. |
| value |
rw - String by default and if input behavior is set to the element it is also: integer, boolean, array, etc. For example <input type="radio"> will return true if this radio button has "on" state. |
| prototype |
rw - Either Instance of Behavior or Element class object. Prototype can be set to the element through CSS (prototype:name_of_global_behavior_variable) or using this property. |
| isVisible |
r - true if element and all its containers are in visible state - no visibility:hidden or display:none defined for them. false - other |
| isEnabled |
r - true if element and all its containers are not in :disabled state ( setState(Element.STATE_DISABLED)). |
| Enumeration |
| for ... in |
for(var node in element) { /* loop body */ }
Executes body of the loop for all child nodes of the element. Value of node variable is either text or element object.
Example, for p element in html: <p>Hello <em>wonderfull</em> world</p> loop will be executed three times and node variable will be equal to: "Hello ", Element("em") and " world" on correspondent iteration. |
| Methods |
| this |
(tagname[, text])
Constructs new Element object with tag equal to tagname (string). Use it as
var el = new Element("option");
Element will be created in disconnected state. To connect it to the DOM use insert method of the parent element. |
| toString |
() returns: string
Returns string - html representation of the element. Text returned is outer html - includes head and tail tags and content s equal to text returned by html attribute. |
| clone |
() :Element
Returns new copy of the element. Method performs a deep copy of the element. New element is disconnected from the DOM state. Use insert() method to include it in the DOM. |
| select |
(CSSselector [, argument1 [, argument2, ... ]]) returns: Element
Returns first element satisfying CSS selector (CSSselector, string). CSSSelector may contain format specifiers like %d, %s which will be substituted by values of argument1 ... argumentN in final CSS selector string. Function uses the same rules as does Stream.printf function.
Example, if document contains <input type="text"/> element then following statement var inp = document.select("input[type='text']"); will set inp by reference to such element. |
| select |
(func , CSSselector [, argument1 [, argument2, ... ]]) returns: integer
Calls func (function reference) for each element satisfying (matching) CSSselector. Function func shall accept one parameter where select will provide reference to matched element. Function may return true to stop enumeration.
Example, following fragment will print out names of all input elements in the document: function printel(el) { stdout.println( el.attributes["name"] ); } document.select(printel, "input"); |
| selectParent |
(CSSselector [, argument1 [, argument2, ... ]]) returns: Element
Returns first element in child/parent chain satisfying CSS selector (CSSselector, string). CSSSelector may contain format specifiers like %d, %s which will be substituted by values of argument1 ... argumentN in final CSS selector string. Function uses the same rules as does Stream.printf function.
ATTN: Function also inspects this element. |
| selectParent |
(func , CSSselector [, argument1 [, argument2, ... ]]) returns: integer
Calls func (function reference) for each element satisfying (matching) CSSselector. Function func shall accept one parameter where select will provide reference to matched element. Function may return true to stop enumeration.
Example, following fragment will print out ids of all parent divs of some element: function printel(el) { stdout.println( el.attributes["id"] ); } some.selectParent(printel, "div");
ATTN: Function also inspects this element. |
| match |
(CSSselector [, argument1 [, argument2, ... ]]) returns: true | false
Checks if this DOM element satisfies given CSSselector. |
| find |
(x, y) returns: Element.
Returns reference to child element of the given element at x,y coordinates relative to the origin of the element. If there is no such element method returns element itself. |
| update |
([deep]) returns: undefined
Remeasures given element (if deep == true) and invalidates its visual area after modifications. Use deep=true value if element will get new dimensions due to some operations on it. Omit deep parameter (or set it to false) if only decoration attributes (not changing dimensions, like color) were changed. |
| refresh |
( [x, y, width, height] ) returns: true|false
Invalidates area of occupied by the element on the screen. If x , y, width, height (coordinates of area inside element) are provided then it invalidates only that portion. This method is useful if you are using Graphics for rendering on element surface area. |
| box |
( part [, edge [, relativeTo ]] ) returns: integer, device pixels
Returns coordinates of the edges of the element. Parameters:
- part - one of symbolic constants #left, #top, #right, #bottom, #width or #height. Defines part of box (rectangle) to return.
- edge, one of edges of element:
- #margin - margin box edge,
- #border - border box edge,
- #padding - padding box edge,
- #inner, default value - inner box edge,
- #content - content box edge. Content box here is outline of the content of the element and this is not an inner box of the element. E.g. content box can be bigger than inner box if the element has overflow attribute set.
- relativeTo, one of:
- #screen - returns coordinate relative to the origin of the screen,
- #root - returns coordinate relative to the origin of root element (view),
- #parent - returns coordinate of the element in its layout container.
- #self, default value - all coordinates are relative to the origin of inner box of the element.
|
| scroll |
(part) returns: integer, device pixels
Returns various scrolling related positions of the element. Parameters:
part - one of symbolic constants:
- #left - left position of the view relative to content origin,
- #top - top position,
- #right - offset of right edge of the view from right edge of the content box,
- #bottom - offset of bottom edge of the view from bottom edge of the content box,
- #width - width of scrollable area,
- #height - height of scrollable area.
|
| insert |
( element | html [,index = Integer.MAX]) returns: true | false.
element is a child DOM element (instance of this Element class) to be inserted at the index position. If index is greater than current number of children in this element then new element will be appended as a last element. Index is optional parameter, if ommited then element will be appended to collection. If element is already a child of some other parent then it will be disconnected from it automaticly.
If first parameter is string (html text) then attempt will be made to insert it at given position. |
| remove |
( ) returns: undefined
Removes this element from its parent's children collection so after call of this method this.parent become null. |
| load |
( url: string [, now: bool ) returns: true/false
Loads content of the document referred by url as a content of this element. For elements having behavior:frame assigned it loads html, styles and executes scripts refered by the url or contained in the stream. For any other elements it loads only content of body portion of the document, no style loading or script execution happens in this case. |
| load |
( stream: Stream ) returns: true/false
Loads content of the document from in-memory stream as a content of this element. For elements having behavior:frame assigned it loads html, styles and executes scripts refered by the url or contained in the stream. For any other elements it loads only content of body portion of the document, no style loading or script execution happens in this case. |
| loadImage |
( url: string [, callback: function ) returns: Image | null
Loads image from the url. If callback is ommited then the engine will try to load image sycnhronously otherwise (if callback is a function) engine will issue asynchronous request and will call this function upon arrival.
Signature of the callback function is function callback(image) where image is an object of class Image or null in case of error. |
| request |
( callback: function | integer, #get | #post | #json, url: string [, params: object] ) : Object | Stream | Bytes | Error
Sends synchronous and asynchronous http data GET/POST request to the server/page (url), a.k.a. JSON-RPC calls.
- #get, #post, #json are literal symbols - type of http request to be sent. In case of #json engine will send JSON-RPC request. See JSON-RPC Specification.
- url is a string - url of the page (location) on the server handling HTTP requests.
- params is an object, its properties are serving role of parameters of HTTP request.
- request returns: 0 if request was handled inside the call (e.g. url is a local file or resource) or some other value if request was placed into execution queue and its result will be delivered later.
If parameter callback is integer than it is treated as a timeout value and the function executes synchronous request. If the callback is a function then response from the server will be delivered by calling callback function having following signature:
function dataArrivedCallback( data: any );
where data is either one of:
- instanceof Error object, in case of data response parsing problems;
- stream, if data returned by the server is of textual type (text/plain, text/html, text/xml, etc.)
- instanceof Object, Array, etc. if response has content type text/javascript, text/ecmascript, text/tiscript or application/json and was successfully parsed into data object.
- Bytes, if data returned by the server is of binary type (image/*, etc.). Bytes.type in this case will contain a string - mime-type of the data reported by the server.
Example of server data response (type: text/javascript) :
({ id : 1234, message : "Hello from XYS server!" })
- in this case server returns object having two properties: id and message. Rationale behind of ({ and }) was explained here. |
| getState |
( [stateFlags:int] ) :int
Returns state of the element. stateFlags here is a set of bits - "ORed" constants STATE_***. stateFlags is provided then function returns int - flags of the element ANDed with the provided stateFlags variable. If no stateFlags is given then the function returns full set of flags element has at hte moment. |
| setState |
( stateFlags:int) :void
Function will set flags to the element update document on the screen accordingly (resolve styles and refresh). |
| clearState |
( stateFlags:int ) :void
Function will clear flags of the element and update document on the screen. |
| capture |
( onOff: true|false ) :void
element.capture(true) - sets the mouse capture to the element and element.capture(false) - removes the mouse capture from the element. |
| popup |
( el: Element, placement: int ) :void
Function will show element el as a popup window placed relatively to this element. Placement accepts following values:
2 - popup element below this element (anchor);
8 - popup element above this element;
4 - popup element on the left side of this element;
6 - popup element on right side of this element;
( see keyboard numpad to get an idea of numbering). |
| timer |
( [milliseconds: integer] )
Method will create timer for the DOM element with milliseconds delay. After milliseconds delay engine will call method onTimer() associated with this element. Return true from onTimer() if you need to continue timer ticks and false otherwise. Call of timer() without parameters will stop element's timer (if any). |
| graphics |
( [ color: integer | #destroy ] ) : Graphics | null
Returns Graphics object of the element. Graphics is a bitmap that has dimensions of the element therefore, once drawn, image will stay on the screen. Each invocation of the graphics method will re-initialize (clear) that bitmap with the color.
To remove graphics from the element use el.graphics(#destroy) call. |
| sendEvent |
( eventCode:int [, reason: int [, owner: Element ]] ) : true | false
traverse (send) bubbling event to the parent/child chain of this element. Events generated by this method can be handled by onControlEvent() methods of elements in the chain.
- eventCode is either one of constants from Logical event codes from builtin behaviors ( see: Event ) or any integer value above 0x1000 (custom control events range).
- reason here is an arbitrary integer value that sender and receiver knows about.
- owner is an optional reference to some DOM element. E.g. in MENU_ITEM_CLICK this is a reference to element - owner of popup menu.
The sendEvent does traversal so it returns true if the event was consumed - one of onControlEvent() handlers in parent/child chain returned true while handling this event. |
| postEvent |
( eventCode:int [, reason: int [, owner: Element ]] ) : undefined
The postEvent places event into the internal queue of posted events for future traversal by sendEvent. |
| post |
( callback: function ) : undefined
This method allows to delay execution of callback function. While calling the callback function engine will set this environment variable to the element this post call was invoked with. |
| url |
( [ relativeUrl: string ] ) : string
Method builds absolute url from the relativeUrl by using document url as a base. If there is no relativeUrl then the method just returns url of the document this DOM element belongs to. |
| sort |
( comparator: function ) : void
Sorts children of the element by using comparator function. comparator function has to have following signature:
function cmp(el1: Element, el2: Element) : int
that returns negative int value if el1 is less than el2, 0 if they are equal and positive value if el1 is greater than el2. |