The "official" layout editor

State: draft

Welcome to the entry page with information on the "official" layout editor. This editor is supported by the team (scriptkid mainly) in a way that we will try to keep it in sync with the CEGUI library itself, and to add much-requested features if within our powers.

I'm currently working on the manual which will be completed this week. After that, "getting started" and information about the development roadmap will be added as well.

Welcome to the manual page for the layout editor! Because the application is not the biggest in the world, this manual is actually pretty brief. However it will explain everything it can do, and will give some notes on certain behavior which might be confusing at firs sight.

Before going any further, make sure you have read Getting Started.

Using the editor

When you start the editor for the first time, you will obviously see the following screen. The first time it will startup with the sample layout. After that it will start with the most recently opened layout. Below the screen i will explain the marked spots.

1. The menu

The menu contains the following sub-menus and items:

File - This common menuitem contains all document related options, like "new", "open", "save(as)", "close" and complete quiting the application. Each of these commands will result in the application prompting you to save any modifications first.

Edit - This menuitem contains all items which are relevant to a <link!>selection of windows</link>. Their behavior should be implied by the item's names and the detailed explaination in the <>status bar</>

Help - This menuitem contains an about box and a reference to the page you are now reading :-)

2. Edit area

This pane allows you to select one or more windows and perform all kinds of operations on them. These include, moving, resizing and all operations in the "edit" menu. To select a window, just left-click it. To select more then one window at a time, hold SHIFT while clicking.

Two operations which are not menuitems have to do with moving windows by hand in stead of by mouse. When you have a selection of windows, you can use 'w', 's', 'a', 'd' and the cursor keys to move the selection. To make smaller steps (1 pixel instead of 10 pixels) keep CTRL pressed.

Note that if you select a first window of a selection, the <main dialog> updates.

3. Status bar

The status bar is used to show the following information:

• Details about the behavior of a highlighted menu item (when you browse the menu);
• Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
• The name of the currently hovered window (includes the root GUISheet);

4. Main dialog

This dialog is always open and cannot be closed ;-)

Its tasks include providing a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows.

By clicking an item (window name) in the browse tree, that window gets automatically selected, and the dialog updates itself according to the selected window.

Some very commonly used properties have a quick-access input component. Those properties are "Left", "Top", "Width", "Height" and "Text". The latter refers to all kinds of text, such as frame-titles, button-captions and such.

Editing properties

Besides the already mentioned quickly accessible properties, there are more properties which can be modified with the editor. For a completely list, look here. The top-most combo box will show all properties which are available for the current selection. If you selected a window via the browse tree, this list will contain the exact (supported) property list of that window.

As you will notice soon, the list is seperated into "string"- "boolean"- and "textual" properties. When selecting a property, the application will only enable the corresponding edit field. For a "string" property, it will enable the "anumerical" input field. For a boolean property it will enable the combobox which has a "true" and "false" option.

Adding a window

You can add windows by clicking the "add window" button, which will open the following dialog:

The top of the dialog shows you to which window (the parent) you will be adding the new window. Below that information is an input field for the new window's name.

Next you can choose the so called-metrics mode, which should be obvious from the screenshot.

Since the editor support multiple "look & feels" you can select one of the loaded ones here. As you can see, you can default the one you use most often. Finally, select the window type you'd like to add. This list is relative to the selected look & feel, so it might differ per selection.

When you´re happy with your new window, press `ok` to create with the given settings. Note that the application will fail to add the window if you choose an already existing name.

Conclusion

That's all i have to say about the editor at this moment. You should now be able to create the coolest layouts! If you think i left something important out, just add it or send me an email at scriptkid@2dgame-tutorial.com.