Working with UI classes in LianjaScript

Most Lianja Apps can be built with very little coding required. There are occasions however where you may need to build a custom form or dialog and this article will show you how to do this using the Lianja UI classes.

Lianja has a feature complete implementation of the Visual FoxPro UI classes but also includes many extensions to these in order to make you more productive and provide you with cross-platform capabilities for your Apps.

Let's say for example we want to popup a custom query builder for a form section.

To create desktop UI classes in Lianja/VFP we use the CREATEOBJECT() function.

myform = createObject("Form")
myform.caption = "This is a demo form"
myform.resize(600, 400)
myform.autocenter = .t.

The Form class in Lianja has some interesting properties and methods which will allow us to build data-centric forms quickly that have a common UI.

To add controls to a form (or other containers) we use the addObject() method of the Form class.

Now add a MenuBar, Toolbar and Actionbar.

myform.addObject("mymenubar", "MenuBar")
myform.addObject("mytoolbar", "ToolBar")
myform.addObject("myactionbar", "ActionBar")

Now add a Form statusbar and specify a message to be displayed in it.

myform.statusbar = .t.
myform.message = "Double click on a row in the grid to select a customer"

Now that we have a basic form, we will add a container to it which will be used to add controls and possibly other containers to display our form.

myform.addObject("mycontainer", "Container")
mycontainer.anchor = 15

Unlike VFP, the Lianja Container class can handle layout management for us. There are four types of layouts that we can set on a container.

• Horizontal
• Vertical
• Form
• Grid

Let's set the layout of our container to be "Vertical". This will cause all controls that are added to it to be automatically adjusted to the width of the container. We use the fixedheight property to establish a fixed height for the controls that we add to the container.

mycontainer.layout = "vertical"
mycontainer.addObject("myheader", "label")
myheader.fixedheight = 40
myheader.caption = "Select a Customer"
myheader.gradient = 1
myheader.forecolor = "gray"
myheader.fontbold = .t.
myheader.fontsize = 18
myheader.alignment = "center"

Now let's add a Grid to the container but not set any fixedheight property so that that it uses up all remaining vertical space in the container.

mycontainer.addObject("mygrid", "grid")
mygrid.readonly = .t.
mygrid.caption = "Customers"
mygrid.additems("select * from southwind!customers")

We make the form visible (and modal) like this:

myform.show(1)

Now our form looks like this:

Demo Form

If we resize the form all of the controls will automatically be resized as we have specified a layout for the container. You do not need to program this functionality as it is all done for you.