LiveCode LessonsHow to - LiveCode Marketplace Products Data Grid HelperWorking With Widgets In The DGH’s Template Area

Working With Widgets In The DGH’s Template Area

Widgets are amazing additions to LiveCode and we are happy to welcome them inside DGH. However because the widget author has to define all events a widget responds to they behave quite differently to the classical controls of the IDE while inside the DGH Template Area.

Some widgets will respond to mouse clicks but most of them will not and cannot be resized using the mouse inside our special template area.

DGH does however have some tricks and shortcuts available!

Creating A Datagrid Table With Some Columns

First, create a new datagrid, then open the column builder and add a couple of columns.

Opening The Widgets Objects Group

When you open the Widget Objects topic all the widgets installed in the IDE will be displayed. This display refreshes each time the topic is expanded.

Adding A New Widget Inside the Template Area

Widgets are added to the Template Area in the same way as Classic Objects, simply select the column you wish to customise and drag & drop a widget from the Widget Objects topic onto the Template Area.

In the figure below we have:

1) Selected "Col3" to work on and opened the Template Area by double-clicking in the header in the preview.

2) Dragged an Android Native Button into the Template Area.

3) Selected the widget (see the selection handles) using the controls popup list (4) above the template area.

Once the widget selected, open the widget's Property Inspector by hitting the <return> key on the keyboard.

With the inspector open you can change the widget's properties such as renaming the widget, changing its dimensions, etc.

The above figure shows the widgets Property Inspector opened to its Home tab.

We could also have opened its Position tab as one way to move or change the widgets dimensions.

When any object is selected in the Template Area you can also move and resize using the keyboard.

Press the arrow keys to move the widget within the Template Area.

Holding the option or alt key while pressing one of the arrow keys to resize the widget.

Update The Template Area

Just as with any other edit to the template area, click the Update button to display your changes inside the Preview Area.

As same than for other controls, click onto the "Update" button to display it inside the Preview.

0 Comments

Add your comment

E-Mail me when someone replies to this comment