ALE (Auckland Layout Editor)

Blog post by czeidler on Mon, 2012-09-03 09:49

Recently I spend some time to develop ALE the Auckland Layout Editor and now it's getting time to release a first testing version! ALE is a tool for developers to create GUIs. These GUIs can then be loaded from an application. This first version is still very basic and I hope I can get some feedback what can be improved and which features are most needed. It mainly focus on layout creation and less on editing view properties.

While working on user interface customization it turned out that the step to creating a GUI builder is not that big. When changing a layout at runtime the user must be able to move existing views around, insert them between other views or swap the position of two views. Furthermore, it should be possible to temporary remove unused views from the layout and add them again at a later point. It is also important that the user can't create invalid layouts. For example, views should never overlap each other and the layout must stay solvable. What is missing for a GUI builder is that new views can be created and added to a layout. Furthermore, it must be possible to save and restore a layout and access the items from within an application, i.e. get a pointer to the c++ object.

ALE is a constraint based layout editor that based on the BALMLayout layout class. BALMLayout is a very powerful constraint based layout and can describe layouts that can't be described with other layout classes, like for example the grid-bag layout. Layouts created with ALE are automatically resizable and overlap-free. This means while editing a layout you can't create a layout that has two overlapping views.

ALE has a component factory that can be used to create GUI elements, e.g. buttons or text views. Each view in the layout gets a string id which can be changed in the editor. After the GUI developer designed a GUI the layout can be saved into a BMessage and be attached to a GUI specification file. From the c++ application this BMessage can be read and restored using a LayoutArchive class. This class also allows to map the string identifier of a view to an actual c++ object.

A test version of the editor can be downloaded from *) This is a debug version and relatively large. If you want to take a look at the source code, it is on github **). I you want to build it please come back to me and I will give you some more information about that.

There is also a very simple sample application in the Demo directory. This piece of code shows how to get a pointer to the objects in the layout. To build it just call make in the demo directory. It is using a GUI specification file called TestLayout which is also in the Demo directory. This file must be in the same folder as the app binary file is. Furthermore, it can be opened in the editor to change the layout or add new views.

Known bugs:
- some crashes
- explicit sizes are not stored at the moment
- the layout min size is not restored from the layout specification, this means overlap can occur in your app.

thanks for testing and feedback is welcome!


ALEScreenShot.png225.02 KB


Re: ALE (Auckland Layout Editor)

This is great news, I always wanted a proper layout manager to handle laying a work screen and using the layout library is the big plus to make me use this one.

It is such a pain doing it manually.

I have downloaded your program and the Alpha4-preview, hope to start testing this week. Thanks for all the work.

Re: ALE (Auckland Layout Editor)

Nice :)

Re: ALE (Auckland Layout Editor)

Which version (revision) of Haiku A4 does this work on? I'm currently on hrevr1alpha4-44577 (I plan to update soon) and it fails to launch calling out missing symbol: _ZNBALM10BALMEditorD1Ev

Would love to help test this though :-)

Re: ALE (Auckland Layout Editor)

There is a link "DropLibsHere", just drag the and there and it should hopefully works. Otherwise, I tested it with the gcc4 nightlies. (its gcc4 only)

Re: ALE (Auckland Layout Editor)

Hi czeidler,
I flicked though a couple of the papers on ALE/ALM, but am still a little unclear about exactly how it works. The best layout management system I've used so far has been the .Net WPF system, which (as you're no doubt aware) works by using containers that pose certain constraints on how the objects held in them relate positionally to one another. For example by making them stack on top or next to one another, or be arranged in tabs or tables/grids etc. These containers can then be placed inside one another to create complex layouts but still remain independent of window-size. If I understand it the ALE method allows this sort of behaviour but without needing to use the 'stack' type containers or place containers within containers and so on?

In the past I've found the WPF method quite a good way to build applications as, for example, you can have a bunch of custom objects and dynamically add a new one to the stack at run-time and the window will just extend/grow the stack downwards. Will this type of dynamic behaviour be possible with ALE?

Another thing that the WPF method has in its favour is that its very easy to lay out a window using XAML quite quickly without really needing to actually place the objects using the mouse, or really even needing to see a preview of them, while at the same time knowing what the final layout will look like. Would it be possible to add some kind of simple scripting/descriptor language for ALE?

Finally just to say this looks like a great piece of work, thanks for bringing it to Haiku! Maybe one day it could be integrated with Paladin and you can have a list of events for each object so that you can double click on one and it will auto-generate the event code and open it for you in Pe? This would seem to be the 'missing link' to a full GUI application IDE on haiku!

Re: ALE (Auckland Layout Editor)

The difference of the constraint-based layout used in ALE is that you have tabstops that you can use to specify the layout. Each layout item has four tapstops, left, right, top, bottom. For example, to keep one button on the right of another button you can say: button1.right == button2.left, this connects both button together. The advantage to a gridbag layout is that you don't have to know the complete grid beforehand but you can just start to setup relations between items. But you can do even more fancy stuff, for example set the length of one item to the length of another item. And if you really want to use the full power of ALM (the used constraint-based layout) you can specify arbitrary linear constraints to fine tune your layout.

You are right most layouts can be created using a gridbag layout or using nested gridbag layouts. However, there are some layouts that can't be created with gridbag layout but are possible with constraint-based layout. For example, a layout that has relations / alignment over multiple lines.

Once you loaded your layout created with ALE into your application you can edit it using the normal c++ methods. Is that what you wanted to do? I also thought about a dummy item that can be used in the editor and later be replaced by a custom object in the code.

There is nothing like XAML language for ALM but you can use the BALMLayoutBuilder class to setup layouts.

Re: ALE (Auckland Layout Editor)

I was searching your repository, but didn't the source code for the layout editor. Are you sure it's there?

Re: ALE (Auckland Layout Editor)

What happens?
There is new version?