Manipulation in App Builder

Q:
So there is no way to use the GUI to “copy and paste” forms from one app to another?
A:
This functionality is what the MetaType Editor will provide


it was quite annoying to have to close an App to be able to quickly deploy small changes for testing as it causes you to lose focus and concentration on what you were doing before the “Deploy”. So, in 2.1, you can now deploy Apps in the “Deploy” workspace while an App is open.

new “Quick Deploy” dialog which lets you deploy from the workspace you are working in without interrupting your workflow. Look for the cloud icon in the HeaderBar.


In v2.1, when you run the App Builder it will now restore the previous development session.
It will open the previously opened App and all of the editor files are re-opened then positioned on the last line that was selected.

This can be disabled in the App “Settings”. If you have any problems opening an App just start the App Builder with –reset on the command line.


added a context sensitive help panel at the bottom of the attributes panel too in both the slide-in and the app inspector attributes panel.
There is a hook to let you provide help rather than take the defaults.

If you place a file in the library directory like this, then it will be used as a helper to provide help text.

Code:
// uihook_lookuphelptext.prg
parameter helptype    // Always passed as value "attribute"
parameter type        // "page", "section" or "formitem"
parameter category    // Caption of the panel category in the attributes e.g. "footer", "header" etc
parameter name        // The attribute name
//...
return helptext

added an action bar beneath the “live attributes” in the app inspector. This has three buttons. “Refresh”, “Undo” and “Redo”. So now you can play around with changing attributes and “undo” the changes.


Lianja 3.0 is all about productivity and performance.
It now includes LiveCode editing in the editor and the debugger for Lianja/VFP.
Move the mouse cursor over a variable/field name to see its datatype and value. You can toggle this functionality on and off by pressing Ctrl+/.

Note that if the cursor is over an object.property the value of that property will be displayed.

As you move the mouse over a variable or an object.property in the script editor, the value/datatype/size of that variable will be displayed in a popup tooltip. If no variable exists nothing will be displayed.

Tip: Declaring your main application variables public and assigning an initial value to them will provide coding hints in the editor.


Tip: In Lianja v3.0 to edit files in a floating window use Ctrl+DblClick in the sidebar files menu for “Apps”, “Library” and “Data”.


Q:
I clicked on Page and tried to drag a table onto the form section – per the video; and that is when a big blue bar appears that tells me I have to close the app first to do this???
A:
It sounds like you are selecting the Data Files tab in the App Inspector. They belong to the Data workspace not the Pages workspace.

That would account for the message you see regarding “You must close the app before performing this operation.
There is no issue with dragging and dropping fields onto sections.


Q:
I want to show a web page in the same way its done in the lianjaCustomCanvas demo.
It seems to be a canvas section with a set of different field types on it; one of them being the field named “SupWebview”.
Trying to implement this, I get the message “You cannot perform this operation on a ‘canvas’ section” when I click on the Field icon (or any other icon).
A:
For a canvas section, you would used the Advanced menu controls.


Monaco as the code editor. VSCode, which uses Monaco, has been getting rave reviews. JSDoc integration with Monaco (if it is used) will give us the ability to have our .prg (and other language) files represented in Intellisense, etc., with a first-rate editing experience.


Q:
All I want is a blank page, 4 entry fields, a button for ‘loging in’, and a lable, of which I can programatically change the caption with either a successful, or unsuccessful login message. In VFP it is the simplest thing to do, but here it goes completely against what the development team states above. Can we actually program in Lianja, or is it just a drag and drop tool for desktop users wanting to visually see what data they have?
A:
In Lianja that are many ways to skin the cat, from Drag and Drop to doing almost everything via code.
It’s so flexible, that it can sometimes be daunting or confusing.

For what you are trying to accomplish, try the following.

Add a page and call it page1
Add a canvas section to the page and call it section1.
Note* – To add items to a canvas, you use the advanced menu on the bottom of the app builder.
Add a label to the page. Make sure it is highlighted, then double click it to get the field attributes and name it label1. Change it’s caption to “test”. Move it to where you like.
Add a textbox the same way. Change its name to textbox1. You can keep or hide the caption.
Add a commandbutton the same way. Make sure you click the edge of the commandbutton until it is highlighted, then double click it to see the field attributes.

scroll down the custom delegates until you see the click event. Click on the two dots on the right. An editor will open for you to add your code

.

It will look like this.

Code:
// Event delegate for 'click' event
proc page1_section1_field3_click()
// insert your code here
endproc

change it to look like this

Code:
// Event delegate for 'click' event
proc page1_section1_field3_click()
//get references to your object
myTextbox = Lianja.get("page1.section1.textbox1")
myLabel = Lianja.get("page1.section1.label1")

//Assign the value from the textbox to the label
myLabel.caption = myTextbox.text
endproc

Then when you save and run the application, it will replace the label with the value from the textbox.




This was a cool surprise in v2.1RC17

I have the app inspector docked (which I love, BTW).
I needed to select “Stretch last section” for the page.
So I just selected the app inspector and typed “S” until I got to “Stretch last section”



Q:
How can I list the fields in a table in the console
A:
available as a headerbar toolbutton in the Console workspace.
The three outlined buttons are:

Code:
list status
list memory
list structure

 



 

Advertisements

Manipulation in App Builder

Lianja also saves changes you make to your App, so if you find that you’ve broken something you can use the Versions Workspace to restore an earlier version of the App.


Q:
LPK, how can I unpack it? were put it?
A:
Unpack your .lpk file from the Apps Workspace. Just click the ‘Install package’ button and it will open a file dialog to allow you to select your package.


After selecting a UI control in a canvas section there are two shortcut keys available also.

F4 edits the “default” delegate for the UI control e.g. “click delegate” for a CommandButton or “Changed delegate” for a TextBox etc

F5 slides in the “Attributes” panel from the right for the selected control.


Q:
I can’t see how to change the font used by the script editor. Is this possible?
A:
unfortunately not.


Q:
how can I add a new page that another?
how can Iinclude a page from another application into a new application?
A:
If it is an App on your machine, you can use Templates.


Q:
Is it possible to copy or move fields (including delegate code of course) between sections?
A:
You can save a whole Section as a Template and load it from the Sections button in the Form Tools.

Also, you can use the Format and Align options to match the properties of grouped controls. This includes making them the CSS style, which could cover multiple presentation properties.

It won’t automatically handle delegate code, although it will save the attributes with defined delegate names, custom library etc. If your section has its own custom library, rather than a Page or App one, then you could copy that to the library and add it back into the new App or leave it in the library and access it with lib:/.

You cannot currently copy an individual field between sections.



Manipulation in App Builder

You just need to select the border of a CommandButton to move it. It works the same as the other controls, it’s just sometimes a bit trickier to select the border, rather than click the button.


Open the App first. In the Pages Workspace you can then choose your database and choose from its tables. You can do most operations on the tables from the Pages Workspace with the App open and your tables will be accessible from the Console Workspace and App Inspector command windows.
If you are just doing data management operations, then close the App and use the Data Workspace.


You can drag ‘n’ drop fields from a table in the Sidebar, just like you would into a Form Section. These fields are then automatically bound.
For Advanced Controls that you add from the Form Tools, you can set the ‘Data source‘ attribute.

If you set the ‘Choices’ attribute on a standard formitem, it will be displayed as a combobox.


The Lianja App Builder is the development environment; the Lianja App Center is the desktop client for deployed Apps. The Lianja App Builder will automatically log you in using your OS username, if you logout you can log in with the username/password admin/admin. The Lianja App Center also uses the username/password admin/admin. You can create and deploy new users for the Lianja App Center and assign roles from the Lianja App Builder


You also have a Section actionbar available, which has an Edit button.


Q:
Let’s say I have an App and I need to change all the existing data in a form section. It seems like I have to click on every field first to be able to modify the data or am I doing something wrong here ?
A:
In addition once in edit mode you can use the tab key to move through the fields.


Q:
I do not need the headerbar. And I do not need the actionbar. How to hide/disable those to bars?
A:
The Headerbar can be hidden using the App Settings (Hide Header Bar). Switch to Runtime View to see it hidden – it is still visible in Development View as it is used for Page management (Collections, Page order).
Hide actionbar‘ is a Page Attribute, so that you can choose to have the Actionbar shown/hidden in each individual Page.


Q:
I’ve been trying to remove a command button from a canvas section and just can’t figure out how to do it.
I’ve put other objects like checkboxes, edit boxes, etc in the same section and I can easily remove them. But not so for the command button. How can I get rid of the command button?
A:
You need to click just above it to select it. Once you see it selected press the “Delete” key.
Also note that when you have a control selected press F5 to slide in the “Attributes” dialog and “F4” to “Edit the default delegate” which for a CommandButton is the “Click” delegate.


Top panel is called the header bar,
Left panel containing “Home” etc is called the “ModeBar” which is used to switch between “WorkSpaces”; Apps, Pages etc.
In the pages workspace the panel at the bottom is called the “Form Tools Bar“.

I refer to all of these “Visual parts” as “UI Elements”.
Clearly there are many and in an App you can hide/show them by toggling their attributes in the attributes dialogs for page, section, field or gadget.

Additionally the visual appearance of an App that a particular user sees and can interact (at runtime) with is governed by the “Roles and Permissions” that are granted to a user. In v1.2.4 these roles and permissions can be dynamic and assigned when you add a new user to the system. These roles and permissions enable/disable what CRUD operations (Create, Read, Update, Delete) are in effect in a UI Element I.e. App, Page, Section, Formitem (Field or Gadget).

In the attributes dialogs you also have UI Presentation Rules which provide the ability to hide/show UI Elements depending on the current “Data View” that is being displayed. All of the UI e.g sections can be hidden or shown deoending on the data that is currently being viewed. For example, If a field in a form section has two choices “Single or Married” and “Single” is displayed then a section for “Spouse Information” can be hidden. This is the built-in dynamic nature of the Lianja UI which I refer to as ART (Actions, Rules and Transitions). This provides a very high level of abstraction for building Apps.

The UI States Editor is also instrumental in dynamically altering the UI. This is another place where “Inline Delegates” come into play when they can “changestate” to a known state when certain actions occur. This allows you to further separate what occurs when an “Action” occurs and what “Transition” will then result from this “Action”.

Getting to know the attributes for the UI Elements is very important as it will save a lot of development time and therefore a lot of ongoing maintenance time too.
As you pointed out in a previous forum post you can re-arrange Formitems in a Form section by dragging them around. This is also the case with sections. These too can be re-arranged in a page by dragging a section header onto another section header.
Similarly grid columns in Grid sections can be dragged around inside the grid to re-arrange them.
If you look at the system menu by clicking on the icon in the HeaderBar and select “View” you can hide/show various other UI Elements while developing an App.


code that was used to extend Lianja to add the Google data visualization tools into the Lianja “Tools” workspace.

myobj = createobject(“webview”)
myobj.url = “https://code.google.com/apis/ajax/playground/?type=visualization”
Lianja.addTool(myobj, “Google Charts”)