|
|
| (14 intermediate revisions by 7 users not shown) |
| Line 1: |
Line 1: |
| − | State: draft
| + | The Official layout editor for CEGUI is CELayoutEditor. |
| | | | |
| − | 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.
| + | == Documentation == |
| | + | * [[CELayout Editor - Getting Started / Building]] |
| | + | * [[CELayoutEditor Manual]] |
| | | | |
| − | 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.
| + | == Design == |
| | + | * [[User Interface]] |
| | | | |
| − | 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
| + | [[Category:CELayoutEditor]] |
| − | 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]].
| + | |
| − | | + | |
| − | ===Launching the editor===
| + | |
| − | | + | |
| − | When you start the editor for the first time, you will obviously see the following screen. Below the screen i will explain the marked spots.
| + | |
| − | | + | |
| − | [[Image:Example.jpg]]
| + | |
| − | | + | |
| − | '''''#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);
| + | |
| − | | + | |
| − | #'''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.
| + | |
| − | | + | |
| − | That´s it+ you should know all the ins and outs now and create the coolest layouts!
| + | |
