As
some of you might know (although I guess most of you might not be
aware), Timotei and me participated in GSOC 2014 this year. My project
was to create a Look n' Feel editor to CEED for all 0.8.X version of
CEGUI (we also support higher versions of course). This is a feature
that has been missing in CEGUI until now. Before CEED, CEGUI has had
tools for layout and imageset creation and editing, such as the
CELayoutEditor. However, Look N' Feel (LNF) editing has never been
possible and as far as I know creating an editor hasn't even been
attempted. I thought this would be a pity, considering that the ability
to creating new widgets is crucial for GUI development in many cases.
Skinning of widgets is also easily possible with such an editor, working
purely in an XML editor to accomplish this, is otherwise very tideous:
there is no preview, no good overview of the possible attributes, no
helpful features such as Colour Picking/Image Selection/Font Selection
etc. and every change has to be tested by starting the application
running CEGUI - an inefficient process.
With a proper tool however, it becomes really easy. This is why I
decided this would make for a great addition to CEGUI. I was not
acquainted with CEED development and the Python language, but I
relatively quickly worked myself into the large CEED code base and
learnt to use Python, which was actually relatively smooth. PyCharms
were so nice to privde us with a free license for Open Source projects,
thanks to PyCharms at this point!
Unfortunately, when I started to get to the "real" development of the
editor, I encountered numerous issues in the CEGUI C++ code. Some of
the files were created around 10 years ago and they seem to have hardly
ever been updated. Also a newly added "inheritation" feature showed
numerous occasions of faulty behaviour that could have caused crashes,
if it had ever been used (it is badly documented so we doubt anyone used
it). Due to this, a lot of the Falagard code had to be reworked, which
took a good chunk of my time of the GSoC. At least one thing that is
positive about this is that I was able to fix a lot of issues and rework
a lot of functions which results in now cleaner code in this section of
CEGUI.
Now to the real deal: The editor. In the screenshot below, you see me
editing a Vanilla/Button look n' feel in CEED. Generally it would be
recommended to either inherit this button (not yet implemented) and work
on the inherited LNF, or to copy paste the definition into a new file
and work on that file (we will add a shortcut for this in the future).
But for the sake of a quick preview I m directly editing the original
file. On the top left you can see the WidgetLook (WL) selector (selects a
WidgetLook defined in the LNF file being edited), which consists of a
dropdown selection to choose from the available WidgetLooks and of an
Edit button. On clicking edit, the specific WL is opened. Below is the
hierarchy window. It contains the editable attributes from the XML in a
ordered and categorised tree. Selecting an attribute show a list of new
options in the Falagard Element editor on the right. These options can
be edited with a double-click on the value. Depending on the type of
attribute, the easiest and most intutitive way to change the value is
chosen (for example a ColourPicker for colours). Images (and Fonts) can
be selected from a dropdownlist containing all loaded Image (or Font)
definitions; bool is represented by a checkbox, etc etc. The changes are
directly applied and can be seen in the Preview instantenously. In the
shown case the "NormalImage" PropertyDefinition's initial value is
overwritten. This means that now there is an image set for the button by
default, as can be seen on the screenshot. We already support editing
of pretty much every type of attribute.
I also added alternating colours for the lists and trees, which I
also applied for the pre-existing layout-editor. This is based on the
look of QtDesigner. I hope users will enjoy this change, I personally
definitely prefer it over the alternating grey tones we had before (They
were too sad!). I also worked a bit on the Code editor of the LNF
Editor. By default the LNF code editor now highlights the part of the
code that is part of the currently edited WidgetLook. Additionally, it
jumps to the beginning of that code when changing to the editor. This
should make it much easier to edit code by hand because the user does
not need to scroll to the right widget every time and has an easier
overview of the code relevant to the widget thanks to the colour
highlighting.
The LNF editor is not complete yet, but definitely the main part of
the work is done, the overall setup is there and most of the LNF is
already displayed and editable, many features are tested and are
actually working very well. It can already used for simple skinning such
as mere replacement of images in a LNF file. In the future we will add
some features that allow way easier creation of new LNFs and new
Widgets, add inheritation and allow an even broader set of changes to
LNFs. If you consider already using the CEED changes, you have to be
aware that the LNF editor is currently unstable (make backups of your
CEGUI datafiles and save regularly while working on them!) and some
parts are not fully implemented yet, therefore it should be used with
great caution until we officially announce it is finished.
