UI States - the example_uistates sample App

[yvonne.milne]

The example_uistates sample App included in the Lianja App Builder distribution demonstrates the use of UI States. Not sure how it's put together? Then read on...

To see what the App does, switch into Runtime View and click the 'Hide Orders' button:

589

You should see the 'Orders' grid disappear:

590

Click the 'Show Orders' button and the grid will reappear.

The 'visible' property of the 'Orders' grid is being set based on a change of UI State. The UI State is being set in the Click event of the buttons. Switch back to the Development View and open up the Field Attributes for the 'Show Orders' button (double click on the border of the button). Here you will see the inline delegate to change the state to 'state1'.

591

If you do the same for the 'Hide Orders' button, you will see that clicking the button changes the state to 'state2'.

592

The UI States are defined in the UI States Editor and written to a table called <app-name>_uistates - here example_uistates_uistates. When you first open the UI States Editor, you will be prompted to allow the table to be created if it does not already exist.

593

contd.

[yvonne.milne]

continuation.

Here's the UI States Editor with the states 'state1' and 'state2'. The 'state2' UI State is selected here and has one row of 'property-name=value' entries (in the bottom section) for when the UI State is active (true) and not active (false). A UI State can have multiple rows or entries. So, when 'state2' is active, affected UI components will have their 'visible' property set to 0 (false) and when 'state2' is not active (i.e. the default state), affected UI components will have their 'visible' property set to 1 (true). Make sure you set the default state in this way so that when you are in Development View, which uses the default state, you can see and manipulate all your UI components.

595

Here's 'state1' - remember this is the UI state activated when the 'Show Orders' button is clicked, so it makes affected UI components visible when it is active, and also when the default state is active.

594

Finally, how does the 'Orders' grid become an 'affected UI component'? Double-click on the 'Orders' grid section header (or click the cog) and scroll down to the 'UI Presentation Rules'. The 'UI States' attribute has a comma-separated list of UI States that affect this section. In this case both 'state1' and 'state2' are listed, so the visible property of the section is set by the changes of state.

596

For more detailed information on the changestate syntax, please see here (http://www.lianja.com/community/showthread.php?1015-New-UI-States-manager-in-RC4) and here (http://www.lianja.com/doc/index.php/SHOWDOCUMENT()).

Yvonne.

[yvonne.milne]

Since my original post, the Initial UI state attribute has been added (v1.1.3 roadmap (http://www.lianja.com/resources/roadmap)).

Now, when you switch to 'Desktop App View' (no longer 'Runtime View' as we now also have Views for Web, Tablet and Phone Apps) in the example_uistates App, the Orders Grid Section will be hidden.

784

This is because the 'Initial UI state' for the App (also available at Page, Section and Field/Gadget level) is set to 'state2'.

785