CELayoutEditor Manual
Contents
Introduction
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 behaviour which might be confusing at first sight.
Before going any further, make sure you have read Getting Started.
Overview
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.
The image shows the following items:
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 completely quitting 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.
- View: This menuitem contains some convenience commands to grow or shrink the client to commonly-used resolutions such as 1024x768, to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.
- Help: This menuitem contains an about box and a reference to the page you are now reading :-)
The 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 (see below) updates.
The 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);
The 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.
Except for the "Text" property, which is shown as an edit field, each (supported) property is editable through a grid, where the left comlumn shows the properties' name, and the right one it's current value.
Common Usage
Adding windows
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.
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.
Editing properties
When you have more then one window selected, the grid will show the union of available properties. Imagine that two windows are selected ( by pressing SHIFT while selecting), and the first one has "visible" and "topMost" as its properties, and the second one has "visible", "clickable" and "colour" as its properties, then the grid will contain "visible", "topmost", clickable" and "colour". Note that "visible" will only be added once.
Note that the positions and size cannot be changed when you have selected more then one window, otherwise each window in your selection would get the same position and size!
Setting a default font
You can specify a default font for your layout(s). This font will be used for each added window from that moment. When selection "View->Set default font...", you'll see this dialog:
On "ok", this font will apply, even after closing the editor because it's an INI setting.
Setting up the grid (Note: CVS only yet!)
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
On "ok", all settings will apply, even after closing the editor because it's INI settings.
When editing, you can snap to the grid by selecting one or more windows, and press "g" (for "grid", because "s" is already used for moving).
INI Settings
The editor loads & writes several settings from and to an INI file:
- Last opened layout
- Client size
- Grid setup
- Default font setup
Conclusion
I think i have mentioned the most important functionality. 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.
--Last updated by Scriptkid, January 3.
