Using Gambas containers

Most of my Gambas work involves front-ending mySQL and SQLite databases. My screens generally are tightly defined and are mostly designed not to use a mouse. I do accept that they generally do not behave as windows should in that the child objects do not expand and contract as they should when the window is dragged with the mouse. It’s just not a problem I have to deal with.

Gambas is actually very capable in this regard and this short tutorial gives my take on it all. As usual, my explanation is unlikely to be the absolute truth and almost certainly not the most efficient way of dealing with the problem. It should, however, give an introduction to the idea of expanding containers.

Start a new project giving it a name and title. Double click on FMain to show the window and change to text property on the right to ‘Container Tutorial’.

Click on the container tab in the toolbox (if you can’t see the toolbox in the bottom right of your screen then just click the toolbox button on the button bar). Click on panel and drag a panel on the form (e.g. from top left to bottom right). The size does not matter. By default it shows without borders so give the panel a border with the border property. Click on the window outside of the panel and you will see that the arrangement property of the FMain window is set to ‘none’. This means that when you run the program and drag the bottom right-hand corner of the window, the panel does not respond to the change in size.

In Gambas, click on the window outside the panel to show the forms properties. Highlight the ‘arrangement’ property and change this to ‘fill’ (you can either use the combo box control or just turn the mouse wheel). Now when you run the program the panel fills the window. It’s difficult to see that and you can only see the bottom line of the panel. Change the ‘padding’ property for the form to 5 (from 0) and run again. The panel boundary is now fully visible. More importantly, when you stretch or contract the window, the panel adjusts to maintain the same padding.

Now make the Panel1 a bit smaller and put a Panel2 next to it. Give it a border so that we can see it. The size and relative positions of the two panels is not critical.

Run the program and we only see one panel. But change the forms arrangement property from ‘full’ to ‘horizontal’ and you should get the following:

The width of the panels has been retained but the height has expanded to fill the frame. Change the arrangement property to each of ‘vertical’, ‘row’ and ‘column’ to see the difference.

Change the form arrangement back to horizontal. On one of the panels, change the ‘expand’ property to true. Run the program and you will now see that that panel has expanded to fill the empty space while the other panel retains its width. If both panels expand properties are set to true then each panel will occupy half the window, irrespective of their original relative size. Expanding or contracting the window maintains that relationship.

You will see that the two panels are hard up against each other. If you set the forms ‘spacing’ property to 5 instead of 0, they will now maintain a healthy distance.

Once we realise that these expanding objects can be nested, one within the other, then the power of the Gambas drag-and-drop layout becomes obvious. To show this lets delete all objects on our form so we can start again. The forms arrangement property should still be set to ‘vertical’. Drag an HSplit object from the container tab onto the form and size it so that it can contain two further objects. Change its expand property to ‘true’.Drag two panels onto the HSplit object (when the HSplit object has focus, its boundary turns heavy black). Change the borders of the two panels so we can see them and set their expand properties to true.

When you run the program you should get visually the same result. The difference is that you will now be able to put the mouse over the vertical centre bar and drag the relative sizes of the left and right panels (make sure hsplit1.enabled is set ‘true’ in the properties).

Finally create two VBox objects within one of the panel object and set their expand properties to true. Into the left hand VBox drag 4 labels. The red boundary of the VBox will change to black when it has focus. Don’t worry about positioning the labels or whether they are correctly sized for the VBox. Similarly drag 4 textboxes into the right hand VBox

When you run the program you will now get neatly aligned labels and textboxes within the two VBoxes. If you change both VBox spacing properties you can get a separation between the fields.

That should be enough to get you going. As with everything, I guess, practice will make perfect.

Advertisements

3 Responses to “Using Gambas containers”

  1. cogier Says:

    Thanks this has been a great help. The concepts take some time for me to get my head around.

  2. Fundi Says:

    Excellent I enjoyed this one. I am new to gambas and think tutorials like this help a lot.
    Is there anywhere a code snipped database or repository for procedures and functions that others have done. Simple things like, connect to database, synchronizing combo-boxes when moving from one record in a database to another one etc.

    Thanks for the tutorial

    • charlesg628 Says:

      There was a Gambas code repository called gambasforge. It fell into dis-use but is currently being re-developed. The samples supplied with Gambas are good but tend to over-complicate (imho). Just remember to save to your home directory first or they will be read only.

      There are other tutorials on this site with data connection.

      It is true though that documentation is weak on Gambas. This is not a criticism: this is an open source collaborative project and if I felt strongly enough I would write some documentation. More to the point, if I had the skills-set and time I would write some documentation!

      Dankie vir u ondersteuning 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: