5 Selector - Reference Documentation
Authors: groovyquan
Version: 0.5.1
Table of Contents
5 Selector
5.1 Selector overview
jQuery & CSS 3 style Server side selectors, that allows very powerful and robust queries.Theselect method is injected to Component,which returns a list of Component.View code
<z:window id="window" apply="MyComposer"> <z:textbox name="t1" value="value1"/> <z:textbox id="t2" value="value2"/> <z:textbox value="value3"/> </z:window>
class MyComposer{ def afterCompose = {Component window ->
assert 3 == window.select("textbox").size() // select method returns List<Component>
assert "value2" == window.select("#t2")[0].value
assert "value1" == window.select("textbox[name='t1']")[0].value
}}5.2 Base Selector
// Matches any Button component "button"// Matches any Component with ID "btn" "#btn"// Matches any Button with ID "btn" "button#btn"// Matches any Button whose label is "Submit" "button[label='Submit']"
5.3 Selector combinations
// Matches any Button who has a Window ancestor "window button"// Matches any Button whose parent is a Window "window > button"// Matches any Button whose previous sibling is a Window "window + button"// Matches any Button who has a Window as a senior sibling "window ~ button"// Matches any Button whose parent is a Div and grandparent is a Window "window > div > button"
5.4 Comparison with CSS3 Selector
| Syntax | In CSS 3 Selector | In Component Selector | Comment |
|---|---|---|---|
| tagname | DOM element type | Component type | |
| #id | DOM ID | Component ID | |
| .class | CSS class | SClass / ZClass | |
| attr='value' | DOM attribute | getAttr() or dynamic attribute | If getAttr() is not a method on such component, it is skipped |
| :pseudo-class | Pseudo class | Pseudo class | :root, :empty, :first-child, :last-child, :only-child, :nth-child(), :nth-last-child() |
| ::pseudo-element | Pseudo element | N/A | |
| > + ~ | Combinator | Combinator | Identical to CSS 3 combinators |
5.5 More about Selector
You can also use Selector independently. For example:Window win;// returns a list of components, containing all labels in the page Selectors.find(page, "label");// returns all components with id "myId" under the Window win. (including itself) Selectors.find(win, "#myId");// returns all components whose .getLabel() value is "zk" (if applicable) Selectors.find(page, "[label='zk']");// returns all captions whose parent is a window Selectors.find(win, "window > caption");// returns all buttons and toolbarbuttons Selectors.find(page, "button, toolbarbutton");// you can assemble the criteria: // returns all labels, whose parent is a window of id "win", and whose value is "zk" Selectors.find(page, "window#win > label[value='zk']");