Submitted by Lukas_M on
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.
