Difference between revisions of "CELayoutEditor Manual"

From CEGUI Wiki - Crazy Eddie's GUI System (Open Source)
Jump to: navigation, search
Line 1: Line 1:
 
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
 
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.
 
will explain everything it can do, and will give some notes on certain behavior which might be confusing at firs sight.
−
 
−
'''Please note''' that the screenshots below are taken from the new (not yet released) wxWidgets version. However, it looks almost the same as the current MFC version. The same goes for its functionality.
 
  
 
Before going any further, make sure you have read [[Getting Started]].
 
Before going any further, make sure you have read [[Getting Started]].
Line 11: Line 9:
  
 
[http://www.2dgame-tutorial.com/downloads/StartupImage.png View application screenshot]
 
[http://www.2dgame-tutorial.com/downloads/StartupImage.png View application screenshot]
 +
  
 
'''1. The menu'''
 
'''1. The menu'''
Line 25: Line 24:
  
 
''Help'' - This menuitem contains an about box and a reference to the page you are now reading :-)
 
''Help'' - This menuitem contains an about box and a reference to the page you are now reading :-)
 +
  
 
'''2. Edit area'''
 
'''2. Edit area'''
Line 35: Line 35:
  
 
Note that if you select a first window of a selection, the main dialog (see below) updates.
 
Note that if you select a first window of a selection, the main dialog (see below) updates.
 +
  
 
'''3. Status bar'''
 
'''3. Status bar'''
Line 42: Line 43:
 
*Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
 
*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 name of the currently hovered window (includes the root GUISheet);
 +
  
 
'''4. Main dialog'''
 
'''4. Main dialog'''
Line 52: Line 54:
 
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.
 
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
+
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.
−
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.
+
'''Adding windows'''
−
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 "numerical"- "boolean"- and "font" properties. When selecting a property, the application will only enable
+
−
the corresponding edit field. For a numerical property, it will enable the "numerical" input field. For a boolean property it will enable the combobox
+
−
which has a "true" and "false" option. And for a font it will populate the (same) combo box with registered fonts.
+
−
 
+
−
'''Adding a window'''
+
  
 
You can add windows by clicking the "add window" button, which will open the following dialog:
 
You can add windows by clicking the "add window" button, which will open the following dialog:
Line 73: Line 65:
 
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
 
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.
 
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,
 
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,
Line 80: Line 70:
  
 
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.
 
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:
 +
 +
[http://www.2dgame-tutorial.com/downloads/DefaultFontDialog.png View dialog screenshot]
 +
 +
On "ok", this font will apply, even after closing the editor because it's an INI setting.
 +
  
 
===Conclusion===
 
===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.
+
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, August 23.
+
--Last updated by Scriptkid, November 18.

Revision as of 18:57, 18 November 2005

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.

View application screenshot


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.

View - This menuitem contains some convenience commands to grow or shrink the client to commonly-used resolutions such as 1024x786, to help the WYSIWYG behavior.

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 (see below) 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.

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.


Adding windows

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

View dialog screenshot

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:

View dialog screenshot

On "ok", this font will apply, even after closing the editor because it's an INI setting.


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, November 18.

Retrieved from "http://cegui.org/wiki/index.php?title=CELayoutEditor_Manual&oldid=318"