Difference between revisions of "Working with UI Page Libraries"
Yvonne.milne (Talk | contribs) (→Saving to the UI Page Library) |
Yvonne.milne (Talk | contribs) |
||
Line 22: | Line 22: | ||
<code lang="recital">Lianja.showDialogPanel("Customer List", "customerlist")</code> | <code lang="recital">Lianja.showDialogPanel("Customer List", "customerlist")</code> | ||
− | The 'customerlist' Page was created in the ui_mypagelibrary App, then saved to the Pages Library. | + | The '''customerlist''' Page was created in the '''ui_mypagelibrary''' App, then saved to the Pages Library. |
=Saving to the UI Page Library= | =Saving to the UI Page Library= | ||
Line 29: | Line 29: | ||
Pages are saved as '.vpx' files in the pages sub-directory of the library. They can be viewed in the Library workspace, where they are listed in the 'Page Library Files' category in the [[Library_Files#The_Library_Files_Tab|Library Files]] tab in the [[App Inspector]]. Double-click a '.vpx' file to view the Page. | Pages are saved as '.vpx' files in the pages sub-directory of the library. They can be viewed in the Library workspace, where they are listed in the 'Page Library Files' category in the [[Library_Files#The_Library_Files_Tab|Library Files]] tab in the [[App Inspector]]. Double-click a '.vpx' file to view the Page. | ||
− | Click the Headerbar toolbutton 'Save in the Page Library' to save the Page. | + | Click the Headerbar toolbutton '''Save in the Page Library''' to save the Page. |
[[{{ns:file}}:uipagelib1.png|800px|left|border|link={{filepath:uipagelib1.png}}|Save in the Page Library]] | [[{{ns:file}}:uipagelib1.png|800px|left|border|link={{filepath:uipagelib1.png}}|Save in the Page Library]] | ||
Line 37: | Line 37: | ||
==Custom Event Delegates== | ==Custom Event Delegates== | ||
− | The ''customerlist'' Page from the ui_mypagelibrary | + | The '''customerlist''' Page from the '''ui_mypagelibrary''' has a Double Click delegate, defined as an [[Custom_Delegates#Inline_Delegates|Inline Delegate]] calling a [[Using_the_showdocument()_function_and_Lianja.showDocument()_method|showdocument()]] action: |
− | <code>$("page:customers?action=search&text={customers.companyname}||hidedialogpanel")</code> | + | <code lang="recital">$("page:customers?action=search&text={customers.companyname}||hidedialogpanel")</code> |
− | + | Where delegates are defined as procedures or functions in a [[Custom_Delegates#Custom_Library|Custom library]], the Custom library should be called from a shared location, i.e. the Library, or the Pages Library. | |
+ | |||
+ | To specify this, add the appropriate [[Special Filename Prefixes|prefix]] to your Custom library name: | ||
+ | |||
+ | '''Library:''' | ||
+ | |||
+ | {| class="wikitable" width="100%" | ||
+ | |- | ||
+ | |width="20%"|Custom library||width="80%"|lib:/lib_customerlist_section.prg | ||
+ | |- | ||
+ | |} | ||
+ | |||
+ | '''Pages Library:''' | ||
+ | |||
+ | {| class="wikitable" width="100%" | ||
+ | |- | ||
+ | |width="20%"|Custom library||width="80%"|pagelib:/lib_customerlist_section.prg | ||
+ | |- | ||
+ | |} | ||
+ | |||
+ | The Custom library then needs to be added to the specified location. This can be done in the [[File_System#Files|Files tab]] in the [[File_System|Apps Workspace]] from the Additional Commands: | ||
+ | |||
+ | [[{{ns:file}}:l5_filesystem6.png|left|link={{filepath:l5_filesystem6.png}}|Additional Commands]] | ||
+ | <br clear=all> | ||
+ | |||
+ | or from the Context Menu (right-clicking in the '''App Files''' panel displays the files context menu): | ||
+ | |||
+ | [[{{ns:file}}:l5_filesystem7.png|left|link={{filepath:l5_filesystem7.png}}|Context Menu]] | ||
+ | <br clear=all> | ||
=Using UI Page Library Files= | =Using UI Page Library Files= |
Revision as of 13:42, 26 November 2020
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.
The screenshot above shows an example of a UI Page in the 'Lianja Demo' App (lianjademo) called with the following code in the Customer section Custom section menu delegate.
Lianja.showDialogPanel("Customer List", "customerlist")
The customerlist Page was created in the ui_mypagelibrary App, then saved to the Pages Library.
Saving to the UI Page Library
When creating a Page to be saved to the Pages Library, it must be given a unique name, i.e. one not shared by another Pages Library Page.
Pages are saved as '.vpx' files in the pages sub-directory of the library. They can be viewed in the Library workspace, where they are listed in the 'Page Library Files' category in the Library Files tab in the App Inspector. Double-click a '.vpx' file to view the Page.
Click the Headerbar toolbutton Save in the Page Library to save the Page.
As shown above, you can also check the 'Autosave in Page Library' Page Attribute to automatically save that page to the UI Page Library when an App is saved.
Custom Event Delegates
The customerlist Page from the ui_mypagelibrary has a Double Click delegate, defined as an Inline Delegate calling a showdocument() action:
$("page:customers?action=search&text={customers.companyname}||hidedialogpanel")
Where delegates are defined as procedures or functions in a Custom library, the Custom library should be called from a shared location, i.e. the Library, or the Pages Library.
To specify this, add the appropriate prefix to your Custom library name:
Library:
Custom library | lib:/lib_customerlist_section.prg |
Pages Library:
Custom library | pagelib:/lib_customerlist_section.prg |
The Custom library then needs to be added to the specified location. This can be done in the Files tab in the Apps Workspace from the Additional Commands:
or from the Context Menu (right-clicking in the App Files panel displays the files context menu):
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.