View Full Version : Working with UI page libraries in RC4
barrymavin
2013-02-22, 21:15
Due to popular demand in Lianja App Builder RC4 we have added the ability to save pages in a "Visual Page Library" as re-usable UI page components.
This provides developers with the ability to visually lay out pages in the page builder (with all of the power and functionality of related sections) and re-use these pages in dialogs that can be popped-up in any delegate e.g. chick on a dialog button, select a menuitem from the custom section menubar etc.
In keeping with the methodology for building Apps visually in Lianja (Apps are made up out of pages, pages are made up out of sections and UI transitions are handled by the Lianja ART engine) the ability to show a dialog that floats on top of the main App window is simple and consise. Take a look below at what you can achieve without any coding being required.
See this blog article (http://www.lianja.com/resources/blog/39-coding-tips/347-working-with-ui-page-libraries) for examples.
"Page Library" -- beautiful.
David thinks this feature should have an acronym of MUM, for which I suggest the name "Multiple UI Magic."
Due to popular demand in Lianja App Builder RC4 we have added the ability to save pages in a "Visual Page Library" as re-usable UI page components.
This provides developers with the ability to visually lay out pages in the page builder (with all of the power and functionality of related sections) and re-use these pages in dialogs that can be popped-up in any delegate e.g. chick on a dialog button, select a menuitem from the custom section menubar etc.
In keeping with the methodology for building Apps visually in Lianja (Apps are made up out of pages, pages are made up out of sections and UI transitions are handled by the Lianja ART engine) the ability to show a dialog that floats on top of the main App window is simple and consise. Take a look below at what you can achieve without any coding being required.
See this blog article (http://www.lianja.com/resources/blog/39-coding-tips/347-working-with-ui-page-libraries) for examples.
avianmanagement
2013-02-22, 22:42
Brilliant, that is just what we need.
This gives us the ability to allow users to add data on the fly to lookup tables which is very productive when the user is filling in data and does not want to go off and fill in some missing lookup date.
UI Magic indeed .
cyrilbaskir
2013-02-22, 23:53
Brilliant, that is just what we need.
This gives us the ability to allow users to add data on the fly to lookup tables which is very productive when the user is filling in data and does not want to go off and fill in some missing lookup date.
UI Magic indeed .
I wonder how you will able to tell the calling form about the lookup record added (if added), so you can update the calling form.
barrymavin
2013-02-23, 00:17
The dialog runs in the same instance (process) as your app so you have all the delegates available. Its all part of your running app.
When you show the dialog modal then execution halts until you exit clicking the "Cancel" or "Done" buttons. So when it completes your code runs and you can manipulate the LOM (Lianja Object Model) and do whatever is appropriate for your App.
avianmanagement
2013-02-23, 02:53
So could we for example get the dialogue 'form' to add a property to the LOM and set it to our PK in the dialogue form and then have the original calling for get this and the set it to ''
The way I, and others, would use this would be in the senario below:
User is entering data in a form on a page. One of the fields in Gender and this holds an FK to our Gender table and displays the name of the Gender.
We have values in the Gender table of Male and Female. The user needs to enter Unknown as a gender entry. They click on teh Dialogue button and a menu comes up with an entry for Add. The select this and bring up teh dialogue form, which is a date entry form for Gender. The add the new record for Unknow and save it. When they clsoe it we need the system to pickup the new PK for the Unknown entry we have just added and use that for the value in the Gender text box on or main form.
What would be the best Lianja way to do this ?
barrymavin
2013-02-23, 03:04
David, go read the blog article again as i've just added additional functionality so that a UI page you design can be embedded is a dialog panel (same as attributes dialogs in the page builder). I also give an example of usage.
I would recommend dialog panels rather than popup dialogs as they are more in line with "tablet-oriented" nature of Lianja.
barrymavin
2013-02-23, 03:07
So could we for example get the dialogue 'form' to add a property to the LOM and set it to our PK in the dialogue form and then have the original calling for get this and the set it to ''
The way I, and others, would use this would be in the senario below:
User is entering data in a form on a page. One of the fields in Gender and this holds an FK to our Gender table and displays the name of the Gender.
We have values in the Gender table of Male and Female. The user needs to enter Unknown as a gender entry. They click on teh Dialogue button and a menu comes up with an entry for Add. The select this and bring up teh dialogue form, which is a date entry form for Gender. The add the new record for Unknow and save it. When they clsoe it we need the system to pickup the new PK for the Unknown entry we have just added and use that for the value in the Gender text box on or main form.
What would be the best Lianja way to do this ?
Both Lianja.showDialog() (optionally modal) and Lianja.showDialogPanel() (always modal) are "modal" and block execution until you click "Cancel" or "Done". You can design a page using memory variables rather than fields from tables. Just set the data source to "m.varname" and set the "default" to any expression.
When the user exits the dialog you can inspect the variables and do what you want with their contents in your app.
avianmanagement
2013-02-23, 03:39
That is really Neat Barry, just what we wanted, implemented in a better way than we wanted it too, as always with you guys :)
2 Lasagna for you!
wonderful
Barry: just as I predicted. :)
2 Lasagna for you!
wonderful
What would be the best Lianja way to do this ?
If it's modal, I would add an "oAddedRecord" attribute to Lianja (to be reused during running), and when a modal form creates a new record, pop the record object on that attribute. You can set the attribute to Null beforehand, so the presence of the object lets you know a record was added.
Hank
barrymavin
2013-02-23, 17:58
You can have multiple floating dialogs on top of the main window.
Also note that "Save in the page library" (in the page headerbar) adds the page into the "Library" workspace in a branch called "Page library files". These files have a ".vpx" extension. If you double click on a ".vpx" file in the library workspace it displays the UI Page component live in a dialog.
barrymavin
2013-02-23, 18:05
You can have multiple floating dialogs on top of the main window.
Also note that "Save in the page library" (in the page headerbar) adds the page into the "Library" workspace in a branch called "Page library files". These files have a ".vpx" extension. If you double click on a ".vpx" file in the library workspace it displays the UI Page component live in a dialog.
.vpx file contents are XAML.
cyrilbaskir
2013-02-23, 18:14
Can you edit a Page library file?
barrymavin
2013-02-23, 18:28
Yes of course, it's a normal UI page in an App.
So best way to use these is.
1. Create an App called mypagelibrary
2. Create and edit pages in it giving them a meaningful ID e.g. customerpanel
3. "Save in page library" from the page headerbar. This would save customerpanel.vpx in the library under the "Page library files" branch of the files tree.
You can then use it with showdialog and showdialogpanel.
So best practice is to build a UI library of components and use them in your apps. Keeps everything organized and is less confusing as you know where to go to edit the page.
barrymavin
2013-02-23, 18:30
Yes of course, it's a normal UI page in an App.
So best way to use these is.
1. Create an App called mypagelibrary
2. Create and edit pages in it giving them a meaningful ID e.g. customerpanel
3. "Save in page library" from the page headerbar. This would save customerpanel.vpx in the library under the "Page library files" branch of the files tree.
You can then use it with showdialog and showdialogpanel.
So best practice is to build a UI library of components and use them in your apps. Keeps everything organized and is less confusing as you know where to go to edit the page.
And of course uncheck the "published" attribute in the app settings so it does not appear in the app center.
avianmanagement
2013-02-23, 21:10
Can we open the library file as a normal page.
Lets say we have a panel to add / edit Gender. If the user wanted to just open a form to add genders could they open the panel. That way we only need one form for adding / editing gender rathe tehn having a panel as a popout and another page to do adding / editing to be called as a normal page.
barrymavin
2013-02-23, 21:24
Can we open the library file as a normal page
Open where? Pages in the page library can be loaded into either a popup dialog or as a dialogpanel that slides in from the right (same as attributes dialog in dev mode)
I don't quite understand what you are asking.
barrymavin
2013-02-23, 21:26
Can we open the library file as a normal page.
Lets say we have a panel to add / edit Gender. If the user wanted to just open a form to add genders could they open the panel. That way we only need one form for adding / editing gender rathe tehn having a panel as a popout and another page to do adding / editing to be called as a normal page.
You can (optionally) specify the "action" that you want to perform e.g. action=add, action=edit etc. So yes same UI page component can be used for various purposes.
avianmanagement
2013-02-23, 23:09
Lets say we have a normal page for customers. This I can bring up by itself from the app centre to add customers, edit them etc
I have another page that I use to Invoices. In this page I have an FK for customers.
The user is adding details for an invoice and as it is for a new customer they click on the dialogue button and select the add button. This brings up a dialogue form for customers so they can add the new one in.
Now in the above scenarios I need to have two customer pages, one the normal one that is opened from an app in the app center and one saved as a library file. If I add a new field for my customers form I now need to do it in two forms.
If I can open the library page as a normal page from the app center then I need only have one to maintain.
barrymavin
2013-02-23, 23:13
Anytime you design a page just click "save in page library". It's an exact copy of your page but is accessible in a dialog or dialogpanel. No need to maintain two separate pages.
avianmanagement
2013-02-23, 23:34
Ok so when I add a new fields I just use the main page and save it as normal and save it as library page as well and that will overwrite the old library page.
That keep life nice and simple. Nice and easy to do, as is just about everything with Lianja once you know how.
Barry: just as I predicted. :)
With this enhancement...
... there is something for you too! ;)
Several of us had noted the need. The solution was all Barry's: really brilliant, and entirely consistent with Lianja ART. Of course. <s>
That said, I would be happy to sit down with you and enjoy a good lasagna any time. I'll have to come up with a good reason to cross the pond.
Hank
So could we for example get the dialogue 'form' to add a property to the LOM and set it to our PK in the dialogue form and then have the original calling for get this and the set it to ''
The way I, and others, would use this would be in the senario below:
User is entering data in a form on a page. One of the fields in Gender and this holds an FK to our Gender table and displays the name of the Gender.
We have values in the Gender table of Male and Female. The user needs to enter Unknown as a gender entry. They click on teh Dialogue button and a menu comes up with an entry for Add. The select this and bring up teh dialogue form, which is a date entry form for Gender. The add the new record for Unknow and save it. When they clsoe it we need the system to pickup the new PK for the Unknown entry we have just added and use that for the value in the Gender text box on or main form.
What would be the best Lianja way to do this ?
With this enhancement...
... there is something for you too! ;)
here, you are welcome!
Lasagna and lambrusco san giovese or barbera... ;)
cyrilbaskir
2013-02-24, 16:10
In VFP I use a "map" for my application. It has a number of buttons showing the program flow. It has lines and arrows showing the suggested route thru the app.
The user clicks on a button (eg Accounts) to work on accounts. When done, he is returned to the map and can choose another button (eg Analysis).
Quickbooks has a similar "map".
I was wondering if I could implement this in Lianja.
Perhaps with the page library facility, the main page could be a canvas with buttons - these each call a page from the library.
Would that work? Is running a page from the library going to behave the same as running the page directly?
Is this a good idea?
I assume that library pages can call other library pages?
barrymavin
2013-02-24, 23:41
In VFP I use a "map" for my application. It has a number of buttons showing the program flow. It has lines and arrows showing the suggested route thru the app.
The user clicks on a button (eg Accounts) to work on accounts. When done, he is returned to the map and can choose another button (eg Analysis).
Quickbooks has a similar "map".
I was wondering if I could implement this in Lianja.
Perhaps with the page library facility, the main page could be a canvas with buttons - these each call a page from the library.
Would that work? Is running a page from the library going to behave the same as running the page directly?
Is this a good idea?
I assume that library pages can call other library pages?
Yes I see no reason why this should not work.
In fact I have extended delegates quite extensively in RC4 so that they can be "chained" together using || to separate the different actions that you want to perform in them.
In this example below, I have specified a "Custom menu delegate" that performs the action:
Lianja.showDocument("showdialogpanel:customerlist")
The "customerlist" page is embedded in the dialog panel that slides out from the right hand side of the main window.
When the user double-clicks on a customer row in the grid, the double click delegate for the grid causes the customer to be looked up in the Customers page and the dialogpanel is closed.
The "double click" delegate specified is simply this:
$("page:customers?action=search&text={customers.companyname}||hidedialogpanel")
Here is an example of the "customerlist" page which is coming from the page library:
201
cyrilbaskir
2013-02-25, 01:34
Thanks.
This is looking very good.
barrymavin
2013-02-25, 01:39
Thanks.
This is looking very good.
Yes lots of great uses for this. Pick lists, "Quick Add", "View twitter feeds for customer" etc. Lots of uses indeed.
Better examples can be found at http://www.lianja.com/resources/blog/39-coding-tips/347-working-with-ui-page-libraries
barrymavin
2013-02-25, 01:51
Cyril, As you are becoming more acquainted with Lianja as you think about the design of your App also think about how you could use the "App Center" tiles and also the "Dynamic tiles" to provide a quick "Overview" of business in your App. Take a look at how we did it in the demos.
When used properly these can provide a nice "Dashboard" for your Apps without the end-user having to actually load the app and query information.
Hint: All App Center tiles can be grouped into categories and ordered.
cyrilbaskir
2013-02-26, 00:10
Cyril, As you are becoming more acquainted with Lianja as you think about the design of your App also think about how you could use the "App Center" tiles and also the "Dynamic tiles" to provide a quick "Overview" of business in your App. Take a look at how we did it in the demos.
When used properly these can provide a nice "Dashboard" for your Apps without the end-user having to actually load the app and query information.
Hint: All App Center tiles can be grouped into categories and ordered.
OK thanks. I did take a look and will be implementing in due course.
barrymavin
2013-02-26, 00:23
OK thanks. I did take a look and will be implementing in due course.
An don't overlook the charts as these are all HTML5 and browser/mobile ready.