New UI state machine in RC4
As many of you know Lianja is heavily architected around the concept of ART (Actions, Rules and Transitions) and I have been exposing more and more of this functionality gradually during each beta release (browse through the roadmap and see).
In RC4 in response to a lot of developer requests I have now completely opened this up.
When building UIs you quite often want the UI to adjust itself to the data being presented or the data being input interactively by end users.
The whole of the UI in a Lianja App is now a "UI State Machine" controlled by Actions (The ART architecture).
Each page, section, fields within sections and columns within grids can have one or more UI states (the "UI States" attribute in the attributes dialog). These are simple comma separated lists. e.g. input_data,input_invoice,mandatory
You control the states using a simple but effective mechanism which can be triggered in any of the delegates or specified on hyperlinks in a section footer.
Lets take a look at way we change the state of the UI without having to jump through hoops.
Code:
Lianja.showDocument("changestate:not_invoice?visible=false")
This would cause the ART engine to traverse all pages, sections and fields in the whole App and hide all visual elements that have "not_invoice" specified in their state list.
Properties can be applied to specific pages and/or sections and grouped together like this:
Code:
Lianja.showDocument("page:page1.section1?action=changestate?state=mandatory&backcolor=beige&border=red")
When declaring delegates in your App you can prefix the delegate with a "!" to specify an "inline" command e.g.
Code:
!Lianja.showDocument("page:page1.section1?action=changestate?state=mandatory&backcolor=beige&border=red")
Note also that you can use a query-style syntax as your delegate:
Code:
$("page:page1.section1?action=changestate?state=mandatory&backcolor=beige&border=red")
You should also consider just using CSS styles that are applied to the UI controls on a state change.
Code:
!Lianja.showDocument("page:page1.section1?action=changestate?state=mandatory&stylesheet=app:/mandatory.css")
Hope you enjoy this new functionality which will work across all UIs; desktop, web and mobile and hopefully save you a lot of coding.
Quote:
Note that state changes and other UI presentation rules are only applied when the App is in runtime mode from the Lianja App Center so as not to affect the basic design of the App in development mode.
1 Attachment(s)
Programmatically toggle fullscreen
hi,
Can I use this UI State to automatically click the Fullscreen toggle button programmatically? Either by command or by using UI State?
Attachment 512
Thanks & Regards,
Murali