CEGUI Wiki - Crazy Eddie's GUI System (Open Source) - User contributions [en]

CELayoutEditor Manual

2011-12-16T23:43:15Z

Pebblesrox: /* Adding windows */

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Image of Mac Version: [https://picasaweb.google.com/lh/photo/zLHy_P9Us5lFxiehidN2BtMTjNZETYmyPJy0liipFm0?feat=directlink]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:42:35Z

Pebblesrox: /* Adding windows */ Added a link to an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version: [https://picasaweb.google.com/lh/photo/zLHy_P9Us5lFxiehidN2BtMTjNZETYmyPJy0liipFm0?feat=directlink]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:41:47Z

Pebblesrox: /* Adding windows */ Added an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version: <table style="width:auto;"><tr><td><a href="https://picasaweb.google.com/lh/photo/zLHy_P9Us5lFxiehidN2BtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://lh6.googleusercontent.com/-mrRbD2zhyKo/TuvXFDZCWVI/AAAAAAAAAEg/6aO7644qgsY/s144/Picture%2525208.png" height="144" width="75" /></a></td></tr><tr><td style="font-family:arial,sans-serif; font-size:11px; text-align:right">From <a href="https://picasaweb.google.com/116924977997803951259/CELayoutEditor?authuser=0&feat=embedwebsite">CELayoutEditor</a></td></tr></table>

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:38:07Z

Pebblesrox: /* Adding windows */ Added a link to an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version:[https://picasaweb.google.com/lh/photo/4-0qZrWUKymq5Ue7aqMtRtMTjNZETYmyPJy0liipFm0?feat=directlink]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:37:07Z

Pebblesrox: /* Adding windows */Added an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version:
[[File:https://picasaweb.google.com/lh/photo/4-0qZrWUKymq5Ue7aqMtRtMTjNZETYmyPJy0liipFm0?feat=directlink]]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:36:43Z

Pebblesrox: /* Adding windows */ Added an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version:
[[Media:https://picasaweb.google.com/lh/photo/4-0qZrWUKymq5Ue7aqMtRtMTjNZETYmyPJy0liipFm0?feat=directlink]]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:35:55Z

Pebblesrox: /* Adding windows */ Added an image

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

Mac Version:
[https://picasaweb.google.com/lh/photo/4-0qZrWUKymq5Ue7aqMtRtMTjNZETYmyPJy0liipFm0?feat=directlink]

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CELayoutEditor Manual

2011-12-16T23:11:01Z

Pebblesrox: /* Launched */ typo correction

== 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 [[CELayout Editor - Getting Started / Building]].

== The INI file ==
An important (and sometimes confusing) part of the layout editor is its use of an INI file. This file tells the editor where it can find CEGUI's resource files, such as Imagery and Fonts. These paths are 'forwarded' to CEGUI's internal Resource provider. For example 'CEGUI::DefaultResourceProvider::setResourceGroupDirectory("schemes", <ini_schemes_path>);'.

The paths in this file are the 'base' directory when the editor loads something. It will only append the filename of the loaded Layout or such. So when the user opens the file 'MessageBox.layout', the editor (well, CEGUI actually) will complete this to '<ini_layout_path/MessageBox.layout' internally.

The INI file gets created on launch when the editor cannot find it, in which case it will prompt you with this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=29&fullsize=1 Select Resources Dialog]

From there, you should browse to the root CEGUI datafiles folder. The name 'datafiles' is not required, so you may use 'mygame/media/gui' or something. However the subfolders are defaulted to "fonts", "schemes" and such, just like CEGUI's default 'datafiles'. When pressing 'ok', the values will be stored to the INI file. If you are using a different naming convention, or even a different hierarchy, browse and 'ok' on your root directory at least, and close the editor when it has launched completely. Then it has at least created a file for you to edit more easily.

'''Vista note:''' Since applications are not allowed to write files in the application directory itself, it uses a 'Virtual Store' for backwards compatibility. [http://www.cegui.org.uk/phpBB2/viewtopic.php?f=7&t=3439 This thread] explains the details. It also contains a post of myself saying that i should update the editor to use the application directory, which is nicer anyway.

'''0.6.x Note:''' unlike the 0.5 versions, it was decided to ship th 0.6.x installers with default files (the ones used in the CEGUI samples) again, to have at least something to start playing with.

== Launched ==

When the editor has completely launched, meaning that it has found or created the necessary INI file, you will see either a blank sceen or the last saved layout. This shows the empty version:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=28&fullsize=1 Empty Main Frame]

=== Starting a new Layout ===

Before dryly explaining all options, let's actually do something first. You can start a new layout by pressing the New button from the toolbar or File->New from the menu. Either way, the editor will ask you whether or not you would like a 'root' window. If you choose to do so, your layout will start with a full-sized 'DefaultGUISheet' window type. This option is good for a desktop-like setup on which you are going to put your widgets. If you choose 'no', then the editor will not add any window until you explicitely do so. In that case, this first window will become the root. This option is advised if you are splitting your GUI into multiple files. So, it pretty much depends on how you choose to setup your GUI: 'composed' or 'split up'.

As soon as you have started a layout, the '''Main Dialog image''' awakes...

=== The main dialog ===

This dialog provides a hierachical overview of the currently open layout (the browse tree), allowing for modifying properties of the current selection and adding new windows. It looks as follows:
'''TODO: insert new image'''

Although the dialog is a "top-most" window, it can be minimized & restored. Also, its visibility can be toggled through 'View->Toggle dialog'.

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 comumn shows the property's name, and the right one its current value.

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

'''TODO: insert new image'''

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". "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!

=== Renaming a window ===
You can change a window name by modifying the first property ('name') in the grid. Although this property does not actually exist in the cegui system, editing this way helps consistency with changing others property. Name changes will immediately reflect in the tree.

== The edit area ==

=== Selecting and Moving ===

Now that you know how to add windows to your layout and fine-tune its properties, let's discuss the edit area. This is the place where you can select, resize, move, copy|cut & paste parts of your layout. Of course, moving or resizing a window is the same as adjusting those position properties in the main dialog. To select more then one window at a time, hold CTRL while clicking.

If a window is selected, it will be wrapped with a resize box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=34&fullsize=1 Widget Resize Box]

When copying, cutting or pasting parts of a layout, the editor will implicitely use the entire branch (children). To clarify this implication, the 'View->Select All' option will only show a resize box around the top-most windows, and leave the children with a non-resizable box:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=33&fullsize=1 Selected All Widgets]

Two operations (who have no menu item) 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 Menu ===

When a layout is being edited, these menu contains the following sub-menus and items:

* Edit: This menuitem contains all subitems which are relevant to a Selection of windows. Their behavior should be implied by the item's names and the detailed explaination in the status bar.

* View: This menuitem contains some convenient commands to grow or shrink the client to commonly-used resolutions such as 1024x768 or even widescreen(!), to help the WYSIWYG behavior. Besides, it allows for aligning and grid setup.

=== The status bar ===

While working in the edit area, the status bar is used to show the following information:
* Absolute and relative coordinates of the currently hovered window (includes the root GUISheet);
* The name of the currently hovered window (includes the root GUISheet);

== Saving and Loading layouts ==
As mentioned in the 'Setup' chapter, the editor uses CEGUI's internal resource loading behaviour. This is also the case for layouts itself. Therefore, when you open a Layout, you are limited to the files which reside in the layoutpath vale of the INI file. So instead of an open-file dialog, the editor will prompt you with a list of all layouts (.xml or .layout) in that directory:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=32&fullsize=1 Select Layout dialog]

Even though a saved layout can only be opened when saved to the layoutpath directory of your INI file, for convenience reasons you may save it to any location.

== More ==

=== 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.cegui.org.uk/gallery/displayimage.php?pid=31&fullsize=1 Default Font Dialog]

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

=== Working on a background ===
In order to extend the "wysiwyg" effect, you can set a background behind your layout. This can help alot in deciding how large your widgets can be, or even their ideal location. Note that the background does ''not'' get saved with your layout; the editor maintains is seperately. To create a background in your layout itself, you should just use a StaticImage widget.

Setting a background, and toggling its visibility state happens via the "View->Set background" and "View->Show background" menu items respectivily.

=== Snap to grid ===
It's possible to show a grid during editing. When selection "View->Setup grid...", you'll see this dialog:
[http://www.cegui.org.uk/gallery/displayimage.php?pid=30&fullsize=1 Snap to grid 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).

=== Absolute metrics mode ===
Although CEGUI does not distinguish between "relative" and "absolute" anymore, you can still simutate this with help of the editor. If you want a window of a fixed size at any resolution (absolute), you can set all the 'scales' to 0.0, and the 'offsets' to an absolute position. For example to create a window from 50,50 to 250,250 at any resolution, the property grid of that window should look like this:

* Left Scale: 0
* Left Offset: 50
* Top Scale: 0
* Top Offset: 50
* Right Scale: 0
* Right Offset: 250
* Bottom Scale: 0
* Bottom Offset: 250

Note that the resizing and dragging of windows only affects the relative part. The absolute part (offsets) must always be setup from the grid.

=== INI Settings ===
Besides the CEGUI resource paths, the editor loads & writes several additional settings from and to an INI file:
* The location of your datafiles
* Last opened layout
* Client size
* Grid setup
* Default font setup
* Current background 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 pkooman@gmail.com.

--Last updated by Scriptkid, August 22, 2009.

[[Category:CELayoutEditor]]

CEGUI In Practice - Using .layout files

2011-12-16T22:25:55Z

Pebblesrox: /* Conclusion */ typo fix (added a space)

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|5}}

== CEGUI InPractice 5 ==

In this tutorial we will introduce how to use the .layout file. This is likely what will be used for larger scale projects, where the art team isn't going to want to wait for you to recompile the source for every change they make.

==== Meet the Layout ====

The Layout file (.layout) is an xml file. There exists at least two editors for layouts. The first one is the [[Downloads|CEGUI LayoutEditor]] This is a fairly mature editor. Unfortunately it is deprecated and has not received any updates in sometime. There is a new Editor (CEGUI Layout Editor 2) which is available from the SVN. For the usage of this tutorial tho, we will not be using an editor and will be manipulating the .layout file with a plain old text editor.

First thing to note, is its an XML file. So proper XML formatting is required. Second, is that it is hierarchical just like CEGUI. We will work towards writing a Simple Console here. I have created a console layout, and that will be the goal of this tutorial, to make a console editor like you would find in the various MMORPG's. This is what we'll make today:

[[File:TutorialInPractice-Console.jpg]]<br />
Attached is the layout:
<source lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
<Window Type="TaharezLook/Button" Name="ConsoleRoot/SendButton" >
<Property Name="Text" Value="Send" />
<Property Name="UnifiedAreaRect" Value="{{0.732211,0},{0.812349,0},{0.928283,0},{0.946832,0}}" />
</Window>
<Window Type="TaharezLook/Listbox" Name="ConsoleRoot/ChatBox" >
<Property Name="UnifiedAreaRect" Value="{{0.00534809,0},{0.0131038,0},{0.949636,0},{0.762443,0}}" />
</Window>
</Window>
</GUILayout>
</source>

Okay, i'll admit. I cheated and used a LayoutEditor for this. But i'm allowed to, I know what I'm doing otherwise, so do don't back talk me and do your homework.

Erm. Anyway, lets look at the setup of the .layout file.

the first line <xml..> Is just the XML Declaration, and is not important for us.

the next line <GUILayout > begins the .layout file as far as CEGUI is concerned.

Next up is: <source lang="xml"><Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" ></source>
This is where the meat begins. As you can see we're creating a window of type "TaharezLook/FrameWindow" with the name "ConsoleRoot."

The next lines:
<source lang="xml"> <Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
</source>
change various PropertySets on that new framewindow. It sets the font, Titlebar and the area. These could also be done in code by calling:
<tabs>
<tab title="C++">
<source lang="cpp">CEGUI::Window::setProperty("TitlebarFont","DejaVuSans-10");</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.Window.setProperty("TitlebarFont","DejaVuSans-10")</source>
</tab>
</tabs>
So as you can see, the scripts can be very useful allowing us to change properties outside of the code, giving the artists a great deal of usability!

Anyway, the next line is <source lang="xml"> <Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window></source>

You'll notice this is before the </Window> of the ConsoleRoot, so it will be created as a child in of ConsoleRoot when the script is loaded in CEGUI. Can you tell what kind of window this will be? It will be an edit box. Thats the portion of the Console Window where the user will be able to type in what they want to say. I'm not going to go into detail about the rest of the windows, as they are pretty similar to the above examples. But "ConsoleRoot/SendButton" will be the send button, and "ConsoleRoot/ChatBox" will be where the chat messages will display to.

[Note: As you can see I adopted the Naming scheme of Parent/Child window names. This is NOT required, but I think it helps make things easier to read on code side while debugging. You wouldn't want to just name it EditBox as that would be a pretty Common name, and may conflict with other windows you create later on in the application.]

==== Applying our knowledge ====

Now that we have gotten an introduction to the .layout file, we should learn how to implement this knowledge. How to get the layout file to show up in CEGUI.

This code will load the layout into a new window:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout")
</source>
</tab>
</tabs>

Pretty self explanatory. There is something to note tho, you can add a prefix to the names in this .layout file. This would be useful if you're going to add the same .layout multiple times, because after the first load you'd get name conflicts. It would find a previous "ConsoleRoot" for example. So by calling this

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout","second_");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout","second_")
</source>
</tab>
</tabs>
It would append "second_" to the window names (ie. "second_ConsoleRoot"); This will prevent naming errors.

Now if we ran this right now would we be able to see the window?

Nope. We haven't attached it to the window hierarchy have we?

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getSingleton().getGUISheet()->addChildWindow(newWindow);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.System.getSingleton().getGuiSheet().addChildWindow(newWindow)
</source>
</tab>
</tabs>
Note: This assumes that you have a GUISheet already set, otherwise this will result in a segfault!

==== Conclusion ====

Well we showed how to load a .layout file. So far now we know how to Start the system with Ogre, create a window and understand properties, add input, process events, and load layouts. In the next tutorial we will apply this knowledge to create a console which actually does something! Till next time.

This list of the Window properties may be helpful in creating your .layout files: [http://www.cegui.org.uk/docs/current/namespaceCEGUI_1_1WindowProperties.html Properties]

[[Category:Tutorials]]

CEGUI In Practice - Using .layout files

2011-12-16T22:24:24Z

Pebblesrox: /* Meet the Layout */ Attached sentence fragment to preceding sentence

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|5}}

== CEGUI InPractice 5 ==

In this tutorial we will introduce how to use the .layout file. This is likely what will be used for larger scale projects, where the art team isn't going to want to wait for you to recompile the source for every change they make.

==== Meet the Layout ====

The Layout file (.layout) is an xml file. There exists at least two editors for layouts. The first one is the [[Downloads|CEGUI LayoutEditor]] This is a fairly mature editor. Unfortunately it is deprecated and has not received any updates in sometime. There is a new Editor (CEGUI Layout Editor 2) which is available from the SVN. For the usage of this tutorial tho, we will not be using an editor and will be manipulating the .layout file with a plain old text editor.

First thing to note, is its an XML file. So proper XML formatting is required. Second, is that it is hierarchical just like CEGUI. We will work towards writing a Simple Console here. I have created a console layout, and that will be the goal of this tutorial, to make a console editor like you would find in the various MMORPG's. This is what we'll make today:

[[File:TutorialInPractice-Console.jpg]]<br />
Attached is the layout:
<source lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
<Window Type="TaharezLook/Button" Name="ConsoleRoot/SendButton" >
<Property Name="Text" Value="Send" />
<Property Name="UnifiedAreaRect" Value="{{0.732211,0},{0.812349,0},{0.928283,0},{0.946832,0}}" />
</Window>
<Window Type="TaharezLook/Listbox" Name="ConsoleRoot/ChatBox" >
<Property Name="UnifiedAreaRect" Value="{{0.00534809,0},{0.0131038,0},{0.949636,0},{0.762443,0}}" />
</Window>
</Window>
</GUILayout>
</source>

Okay, i'll admit. I cheated and used a LayoutEditor for this. But i'm allowed to, I know what I'm doing otherwise, so do don't back talk me and do your homework.

Erm. Anyway, lets look at the setup of the .layout file.

the first line <xml..> Is just the XML Declaration, and is not important for us.

the next line <GUILayout > begins the .layout file as far as CEGUI is concerned.

Next up is: <source lang="xml"><Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" ></source>
This is where the meat begins. As you can see we're creating a window of type "TaharezLook/FrameWindow" with the name "ConsoleRoot."

The next lines:
<source lang="xml"> <Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
</source>
change various PropertySets on that new framewindow. It sets the font, Titlebar and the area. These could also be done in code by calling:
<tabs>
<tab title="C++">
<source lang="cpp">CEGUI::Window::setProperty("TitlebarFont","DejaVuSans-10");</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.Window.setProperty("TitlebarFont","DejaVuSans-10")</source>
</tab>
</tabs>
So as you can see, the scripts can be very useful allowing us to change properties outside of the code, giving the artists a great deal of usability!

Anyway, the next line is <source lang="xml"> <Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window></source>

You'll notice this is before the </Window> of the ConsoleRoot, so it will be created as a child in of ConsoleRoot when the script is loaded in CEGUI. Can you tell what kind of window this will be? It will be an edit box. Thats the portion of the Console Window where the user will be able to type in what they want to say. I'm not going to go into detail about the rest of the windows, as they are pretty similar to the above examples. But "ConsoleRoot/SendButton" will be the send button, and "ConsoleRoot/ChatBox" will be where the chat messages will display to.

[Note: As you can see I adopted the Naming scheme of Parent/Child window names. This is NOT required, but I think it helps make things easier to read on code side while debugging. You wouldn't want to just name it EditBox as that would be a pretty Common name, and may conflict with other windows you create later on in the application.]

==== Applying our knowledge ====

Now that we have gotten an introduction to the .layout file, we should learn how to implement this knowledge. How to get the layout file to show up in CEGUI.

This code will load the layout into a new window:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout")
</source>
</tab>
</tabs>

Pretty self explanatory. There is something to note tho, you can add a prefix to the names in this .layout file. This would be useful if you're going to add the same .layout multiple times, because after the first load you'd get name conflicts. It would find a previous "ConsoleRoot" for example. So by calling this

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout","second_");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout","second_")
</source>
</tab>
</tabs>
It would append "second_" to the window names (ie. "second_ConsoleRoot"); This will prevent naming errors.

Now if we ran this right now would we be able to see the window?

Nope. We haven't attached it to the window hierarchy have we?

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getSingleton().getGUISheet()->addChildWindow(newWindow);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.System.getSingleton().getGuiSheet().addChildWindow(newWindow)
</source>
</tab>
</tabs>
Note: This assumes that you have a GUISheet already set, otherwise this will result in a segfault!

==== Conclusion ====

Well we showed how to load a .layout file. Sofar now we know how to Start the system with Ogre, create a window and understand properties, add input, process events, and load layouts. In the next tutorial we will apply this knowledge to create a console which actually does something! Till next time.

This list of the Window properties may be helpful in creating your .layout files: [http://www.cegui.org.uk/docs/current/namespaceCEGUI_1_1WindowProperties.html Properties]

[[Category:Tutorials]]

CEGUI In Practice - Using .layout files

2011-12-16T22:22:52Z

Pebblesrox: Corrected confusing words that were part of the wrong sentence

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|5}}

== CEGUI InPractice 5 ==

In this tutorial we will introduce how to use the .layout file. This is likely what will be used for larger scale projects, where the art team isn't going to want to wait for you to recompile the source for every change they make.

==== Meet the Layout ====

The Layout file (.layout) is an xml file. There exists at least two editors for layouts. The first one is the [[Downloads|CEGUI LayoutEditor]] This is a fairly mature editor. Unfortunately it is deprecated and has not received any updates in sometime. There is a new Editor (CEGUI Layout Editor 2) which is available from the SVN. For the usage of this tutorial tho, we will not be using an editor and will be manipulating the .layout file with a plain old text editor.

First thing to note, is its an XML file. So proper XML formatting is required. Second, is that it is hierarchical just like CEGUI. We will work towards writing a Simple Console here. I have created a console layout, and that will be the goal of this tutorial, to make a console editor like you would find in the various MMORPG's. This is what we'll make today:

[[File:TutorialInPractice-Console.jpg]]<br />
Attached is the layout:
<source lang="xml">
<?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
<Window Type="TaharezLook/Button" Name="ConsoleRoot/SendButton" >
<Property Name="Text" Value="Send" />
<Property Name="UnifiedAreaRect" Value="{{0.732211,0},{0.812349,0},{0.928283,0},{0.946832,0}}" />
</Window>
<Window Type="TaharezLook/Listbox" Name="ConsoleRoot/ChatBox" >
<Property Name="UnifiedAreaRect" Value="{{0.00534809,0},{0.0131038,0},{0.949636,0},{0.762443,0}}" />
</Window>
</Window>
</GUILayout>
</source>

Okay, i'll admit. I cheated and used a LayoutEditor for this. But i'm allowed to, I know what I'm doing otherwise, so do don't back talk me and do your homework.

Erm. Anyway, lets look at the setup of the .layout file.

the first line <xml..> Is just the XML Declaration, and is not important for us.

the next line <GUILayout > begins the .layout file as far as CEGUI is concerned.

Next up is: <source lang="xml"><Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" ></source>
This is where the meat begins. As you can see we're creating a window of type "TaharezLook/FrameWindow" with the name "ConsoleRoot."

The next lines:
<source lang="xml"> <Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
</source>
change various PropertySets on that new framewindow. It sets the font, Titlebar and the area. These could also be done in code by calling:
<tabs>
<tab title="C++">
<source lang="cpp">CEGUI::Window::setProperty("TitlebarFont","DejaVuSans-10");</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.Window.setProperty("TitlebarFont","DejaVuSans-10")</source>
</tab>
</tabs>
So as you can see, the scripts can be very useful allowing us to change properties outside of the code. Giving the artists a great deal of usability!

Anyway, the next line is <source lang="xml"> <Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window></source>

You'll notice this is before the </Window> of the ConsoleRoot, so it will be created as a child in of ConsoleRoot when the script is loaded in CEGUI. Can you tell what kind of window this will be? It will be an edit box. Thats the portion of the Console Window where the user will be able to type in what they want to say. I'm not going to go into detail about the rest of the windows, as they are pretty similar to the above examples. But "ConsoleRoot/SendButton" will be the send button, and "ConsoleRoot/ChatBox" will be where the chat messages will display to.

[Note: As you can see I adopted the Naming scheme of Parent/Child window names. This is NOT required, but I think it helps make things easier to read on code side while debugging. You wouldn't want to just name it EditBox as that would be a pretty Common name, and may conflict with other windows you create later on in the application.]

==== Applying our knowledge ====

Now that we have gotten an introduction to the .layout file, we should learn how to implement this knowledge. How to get the layout file to show up in CEGUI.

This code will load the layout into a new window:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout")
</source>
</tab>
</tabs>

Pretty self explanatory. There is something to note tho, you can add a prefix to the names in this .layout file. This would be useful if you're going to add the same .layout multiple times, because after the first load you'd get name conflicts. It would find a previous "ConsoleRoot" for example. So by calling this

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *newWindow = CEGUI::WindowManager::getSingleton().loadWindowLayout("MyConsole.layout","second_");
</source>
</tab>
<tab title="Python">
<source lang="python">
newWindow = PyCEGUI.WindowManager.getSingleton().loadWindowLayout("MyConsole.layout","second_")
</source>
</tab>
</tabs>
It would append "second_" to the window names (ie. "second_ConsoleRoot"); This will prevent naming errors.

Now if we ran this right now would we be able to see the window?

Nope. We haven't attached it to the window hierarchy have we?

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getSingleton().getGUISheet()->addChildWindow(newWindow);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.System.getSingleton().getGuiSheet().addChildWindow(newWindow)
</source>
</tab>
</tabs>
Note: This assumes that you have a GUISheet already set, otherwise this will result in a segfault!

==== Conclusion ====

Well we showed how to load a .layout file. Sofar now we know how to Start the system with Ogre, create a window and understand properties, add input, process events, and load layouts. In the next tutorial we will apply this knowledge to create a console which actually does something! Till next time.

This list of the Window properties may be helpful in creating your .layout files: [http://www.cegui.org.uk/docs/current/namespaceCEGUI_1_1WindowProperties.html Properties]

[[Category:Tutorials]]