Difference between revisions of "UI States"
Yvonne.milne (Talk | contribs) (Created page with "''Under Construction'' ==See Also== UI Presentation Rules ==Overview== ==UI States App== {{ns:file}}:uistates1.png|450px|thumb|left|link={{filepath:uistates1.png}}|e...") |
Yvonne.milne (Talk | contribs) |
||
| Line 2: | Line 2: | ||
==See Also== | ==See Also== | ||
| − | [[UI Presentation Rules]] | + | [[Lianja|Lianja system object]], [[SHOWDOCUMENT()]], [[UI Presentation Rules]] |
==Overview== | ==Overview== | ||
| Line 14: | Line 14: | ||
[[{{ns:file}}:uistates2.png|450px|thumb|left|link={{filepath:uistates2.png}}|example_uistates App]] | [[{{ns:file}}:uistates2.png|450px|thumb|left|link={{filepath:uistates2.png}}|example_uistates App]] | ||
| + | <br clear=all> | ||
| + | |||
| + | [[{{ns:file}}:uistates3.png|450px|thumb|left|link={{filepath:uistates3.png}}|example_uistates App]] | ||
| + | |||
| + | |||
| + | |||
| + | To see the effect of UI states, switch to the '''Desktop App View'''. | ||
| + | |||
| + | |||
| + | Clicking the '''Show Orders''' and '''Hide Orders''' buttons shows and hides the Orders grid section. | ||
| + | |||
| + | |||
| + | As we will see, the 'visible' property of the 'Orders' grid section is being set based on a change of UI State. The UI State is being set in the click event of the buttons. | ||
| + | |||
| + | <br clear=all> | ||
| + | |||
| + | ==Setting a UI State== | ||
| + | |||
| + | UI States can be changed using the [[SHOWDOCUMENT()|showdocument()]] function or the [[Lianja|Lianja system object]] showDocument() method. | ||
| + | |||
| + | <pre>showdocument(changestate:<state>)</pre> | ||
| + | |||
| + | To cause all UI components to revert back to their default attributes (no UI State set), use: | ||
| + | |||
| + | <pre>showdocument(resetstate)</pre> | ||
| + | |||
| + | [[{{ns:file}}:uistates4.png|450px|thumb|left|link={{filepath:uistates4.png}}|example_uistates App]] | ||
| + | |||
| + | |||
| + | |||
| + | Back in the UI States App (in '''Development View'''), open up the Field Attributes for the buttons. | ||
| + | |||
| + | |||
| + | These use the [[Custom Delegates#Inline Delegates|Inline Delegate]] version of the [[SHOWDOCUMENT()|showdocument()]] function. | ||
| + | |||
| + | |||
| + | The 'Show Orders' button changes the UI State to 'state1'. | ||
| + | |||
| + | <br clear=all> | ||
| + | |||
| + | [[{{ns:file}}:uistates5.png|450px|thumb|left|link={{filepath:uistates5.png}}|example_uistates App]] | ||
| + | |||
| + | |||
| + | |||
| + | and the 'Hide Orders' button changes the UI State to 'state2'. | ||
| + | |||
<br clear=all> | <br clear=all> | ||
Revision as of 10:40, 14 April 2016
Under Construction
Contents
See Also
Lianja system object, SHOWDOCUMENT(), UI Presentation Rules
Overview
UI States App
The 'UI States App' (example_uistates) example App is included in the Lianja App Builder distribution to demonstrate the use of UI States.
To see the effect of UI states, switch to the Desktop App View.
Clicking the Show Orders and Hide Orders buttons shows and hides the Orders grid section.
As we will see, the 'visible' property of the 'Orders' grid section is being set based on a change of UI State. The UI State is being set in the click event of the buttons.
Setting a UI State
UI States can be changed using the showdocument() function or the Lianja system object showDocument() method.
showdocument(changestate:<state>)
To cause all UI components to revert back to their default attributes (no UI State set), use:
showdocument(resetstate)
Back in the UI States App (in Development View), open up the Field Attributes for the buttons.
These use the Inline Delegate version of the showdocument() function.
The 'Show Orders' button changes the UI State to 'state1'.
and the 'Hide Orders' button changes the UI State to 'state2'.
Attributes
UI States
The UI States attribute specifies the UI states that affect the container/control.
- Multiple states should be specified as a comma separated list.
Initial UI State
The Initial UI state attribute specifies the starting UI state for the container/control.
Notes on Client Support
| Attribute | Notes |
|---|---|
| UI States | |
| Initial UI State |
