Working with UI Page Libraries
Under Construction
See article here
Contents
Overview
In Lianja App Builder, Pages can be saved in a Visual Page Library as reusable UI Page components.
This provides developers with the ability to lay out pages in the Pages Workspace (with all of the power and functionality of related sections) and reuse these pages in dialogs and desktop navigation Panels and component gadgets .
- Create a Page
- Save it to the Pages Library
- Reference the Page from another App
Note: for Web/Mobile Apps, the Page should be save to the App UILib as detailed below.
Saving to the UI Page Library
Headerbar Toolbutton: Save in the Page Library
| Attribute | Description | Name | Type |
|---|---|---|---|
| Autosave in Page Library | Always save this page to the UI Page Library when an App is saved. | alwaysSaveInPageLibrary | Boolean |
Custom Event Delegates
For UI Pages with Custom Event Delegates, see forum post here
Using UI Page Library Files
showdialog
On the desktop client, the showdialog action or the Lianja.showDialog() method can be used to pop up a dialog with an embedded Page from the UI Page Library.
Lianja.showDocument("showdialog:page?title=cTitle
&width=nWidth
&height=nHeight
&buttons=lButtons
&ontop=lOntop
&modal=lModal
&action=cAction
&text=cText
&resizable=lResizable")
The Lianja.showDialog() method pops up a standard dialog and embeds the specified page from the page library into it.
Lianja.showDialog(title as Character,
page as Character
[, width as Numeric
[, height as Numeric
[, buttons as Logical
[, ontop as Logical
[, modal as Logical
[, action as Character
[, text as Character
[, resizable as Logical]]]]]]]]
Note: Prior to v5.6, when using Lianja.showDialog() on the web/mobile client, the page must be a .rsp or .jssp script. From v5.6, App UILibs are supported and allow embedded pages to be displayed.
showdialogpanel
On the desktop client, the showdialogpanel action or the Lianja.showDialogPanel() method can be used to slide in a dialogPanel with an embedded Page from the UI Page Library.
The Lianja.showDialogPanel() method slides a dialogPanel in from the right of the main window and embeds the specified page from the page library into it. If width is a negative number, the dialogPanel will slide from the left.
Lianja.showDialogPanel(title as Character,
page as Character
[, width as Numeric
[, action as Character
[, text as Character]]]
Note: Prior to v5.6, when using Lianja.showDialogPanel() on the web/mobile client, the page must be a .rsp or .jssp script. Specifying a width of "100%" will animate the dialogPanel in place and it will occupy the whole page viewport on the web/mobile client. From v5.6, App UILibs are supported and allow embedded pages to be displayed.
Component Gadgets
| Attribute | Description | Name | Type |
|---|---|---|---|
| Custom UI component | Specify a custom UI component from the UI Page Library to embed into this gadget | customComponent | Character |
App UILibs
App UILibs are available from v5.6 and are supported in desktop, web and mobile Apps.
Pages are designed visually as normal then the page attribute "Register in UiLib" is checked.
This automatically adds the page to the App UiLib enabling it to be used with the Lianja.showDialog() and Lianja.showDialogPanel() methods.
The page is not included in the Pages Menu but can be used with dialogs by specifying "page:pagename" as the file name.
The 'Lianja Tablet Web UI Demo' App (example_webapp1) included in the distribution demonstrates this behavior.
A new page, 'page5', with a grid section has been added and its Register in UILib attribute checked.
The Customers section menu has been modified to display the page in a dialog panel using the Lianja.showDialogPanel() method.
Lianja.showDialogPanel("Edit Example", "page:page5", 700);
Preview live in browser and click the menu item.
This opens the dialog panel and displays the embedded page5.
Clicking the grid 'Edit' or 'Add' icons, overlays the edit mode dialog.
And closing the editing dialog, returns to the page5 grid.
