UI

Q:

in the example_webapp2 app…

…In the web client this appears to lock the company name field. The user is no longer able to edit the Company Name field on any record. You have to exit the app or edit the whole page and cancel in order for the field to become editable again.

Should the navigation buttons be disabled automatically when a field is in edit mode, as is the case when editing a full record?

A:

You can disable inline editing in the Web Client. There is an App Setting – the last setting under ‘General App Configuration’.


Q:

Is there a way to close a browse window using CTRL-W?

A:

No, the window corner x is currently the only way to close the window.


Q:

I am looking for a list of all available hot keys in Lianja.

A:

The Hotkey event delegate is triggered by the function keys, Ins, Backspace, Delete, PgUp, PgDn, Home, End and combinations of these with ctrl, alt and shift.

https://www.lianja.com/doc/index.php…legates#Hotkey

There wasn’t a definitive list, so I have added these to the Hotkey delegate link.

A2:

I am also using Left, Right, Up and down arrows (which are working), so I thought perhaps there were other keys.

Q3:

I had missed the hotkey functionality.

Does this functionality extend to mobile apps? The reason I ask is that “desktop” to us at this point means an Electron app.

A3:

Currently desktop (not Electron) only.


Q:

How does one set an individual ‘form’ to be a specific size rather than filling the whole screen

A:

custom forms have properties for that.

Pages themselves always adjust to the geometry of the app. Custom forms exist on their own, in effect outside the page object and the App. Custom sections conform to the page width.

Custom forms limit your deployment flexibility: ever see a free-floating form on a mobile app?

A2:

You just specify the size of the window using showdialog.Name:  floatingwindow.jpg Views: 28 Size:  67.7 KB

As you can see in the image, I have an app that has a floating window outside the main part of the app.

in a mobile app, you would have to show the dialog panel with the OnTop parameter set to .F.,


Q:

In a canvas section, when a TextBox or NumericTextBox field has Editable = False, the background is greyed.

1. Is there a reason why this shouldn’t be the case for DateTextBox and EditBox fields (or possibly others…haven’t tested them all) ?

2. Is there a VFP equivalent to the Enabled property or is Editable the only option?

3. Is there a way to control the Background/Foreground Colors for Non-editable Canvas fields?

A:

If you look in the App Settings there is an attribute which specifies the background color of non-editable/readonly fields.

The Qt UI framework which Lianja uses adapts the controls to the host operating system it is running on. This is so it renders native UI controls whenever available. Some composite UI controls do not have host operating system counterparts so these are custom controls.

The enabled property is not exposed for design reasons. You should use the editable attribute.

UI presentation rules can be used to adjust this dynamically depending on the logged in user.


In Lianja 4.1 I have enhanced the web/mobile framework so that you can embed grids, charts, webviews and pageframes (Tabbed UI) inside a grid cell or FormGrid cell.

I’ve also implemented the Lianja/VFP “form”, “webview” and “pageframe/page” classes in the web/mobile framework.

So now it is simple to show a popup window to edit a grid cell or drill down in a management dashboard.

Here’s some example JavaScript code:

Code:
f = createObject("form");
f.caption = "This is a popup form";
f.resize(1024, 600);
f.addObject("wv", "webview");
wv.url = "http://www.lianja.com";
f.show();

and the result.

Name:  Screen Shot 2017-10-28 at 3.08.39 PM.jpg Views: 45 Size:  71.3 KB

Clearly using the Lianja Web/Mobile framework is dramatically easier than messing about with HTML/CSS etc and if you have any VFP knowledge you will be right at home with the custom classes available to you.

Remember also that you can addObject() a “container” to the “form” and give that container a “layout” of “grid”, “form”, “vertical” or “horizontal”. These layouts will help you build responsive UI forms that adjust and lay out their “children” UI components automatically.

So you can build complex data entry forms and extract the data from the form in the “afterClose()” delegate to update remote data or update the UI and change its state by selecting other pages using Lianja.showDocument() etc.


Further refinements with custom classes.

Form
Grid
Pageframe/Page (tabs)
Webview

are now all available in the Web/Mobile client.

Pageframe handles the new “tabposition” property:

tabposition (can be “north”, “south”, “east” or “west” same as in desktop).

Name:  Screen Shot 2017-10-29 at 2.34.33 PM.jpg Views: 40 Size:  56.7 KB

Here is the JavaScript code for that dialog.

Code:
f = createObject("form");
f.addObject("pf", "pageframe");
pf.addObject("tab1", "page");
pf.addObject("tab2", "page");
pf.addObject("tab3", "page");
tab1.addObject("wv", "webview");
wv.url = "http://www.lianja.com";
pf.tabposition = "south";
f.show();

You can handle Tab navigation yourself to stack up a lot of panels in the UI and raise one into view:

Code:
pf.tabbarvisible = false;

// select tab1
pf.activatepage = 0;
// or
pf.select("tab1");

To provide a better mobile experience you can set the mobilefullscreen form property to true. This is ignored unless the App is running on a phone. On a phone this maximizes the form into the viewport of the phone and removes the border.

Note that you can show the form fullscreen on all devices by setting the “fullscreen” property to true.

Code:
f = createObject("form");
f.addObject("pf", "pageframe");
pf.addObject("tab1", "page");
tab1.addObject("wv", "webview");
wv.url = "http://www.lianja.com";
f.fullscreen = true;
f.show();

Q:

accepted (a property). You describe the events. I can guess what “accepted” means but thought I’d ask just to confirm.

A:

Its a property that is true by default.

You can set it to false in the beforeClose() event to stay in the form if validation fails.


Q:

can setAttribute() be used to change an app attribute?

A:

setAttribute() as documented is only relevant to UI page, section, formitem… not App.


 

Advertisements
Categories UI