Request for Input - GUI XML engine.

[saigumi]

While playing around heavilly with how the GUI works and working on a tutorial to make personal GUI Elements(and making my own game), I thought of something that may make like very convient for GUI creation: an engine.

This would be similiar to how Decal (http://decaldev.sourceforge.net) reads an XML file to create GUI's for plugins. http://www.zyrca.org/vbdecaldocs/controls/controls.htm)

This way, it would be more like scripting your GUI and easier to load up multiple menus and such by pointing it to a layout. The one thing it lacks is that you still have to code in the event reciever for each element.

The downside is that reading the XML would require a dependency on an XML reader/parser, so it wouldn't be good to become an integrated part of Irrlicht in the state I have planned. For my basic design, I figured that libXML (http://www.xmlsoft.org/) is the best way to go.

As for format, how does this look?

Code: Select all

<gui>
 <skins>
  <skin id="" name="">
   <color object="" value="" alpha="" />
   <size object="" value="" />
   <text object="" value="" />
   <font object=""/>
  </skin>
 </skins>
 <layouts>
  <layout id="" name="" skin="">
   <element type="IGUIButton" id="" top="" left="" height="" width="">text</element>
   <element type="IGUIWindow" id="" top="" left="" height="" width="" modal="">text</element>
   <element type="IGUIMsgBox" id="" caption="" text="" modal="" ok="" cancel="" yes="" no="" />
   <element type="IGUIScrollBar" id="" direction="" top="" left="" height="" width="" />
   <element type="IGUIImage" id="" top="" left="" height="" width="">text</element>
   <element type="IGUICheckBox" id="" top="" left="" height="" width="" checked="">text</element>
   <element type="IGUIListBox" id="" top="" left="" height="" width="" />
   <element type="IGUIMeshViewer" id="" top="" left="" height="" width="">text</element>
   <element type="IGUIFileOpenDialog" id="" caption="" modal="" />
   <element type="IGUIStaticText" id="" top="" left="" height="" width="" border="">text</element>
  </layout>
 </layouts>
</gui>

<!--
default skins:
WINDOWS_STANDARD   
BLACK_WINDOWS   

color objects:
3D_DARK_SHADOW  Dark shadow for three-dimensional display elements. 
3D_SHADOW  Shadow color for three-dimensional display elements (for edges facing away from the light source). 
3D_FACE   Face color for three-dimensional display elements and for dialog box backgrounds. 
3D_HIGH_LIGHT  Highlight color for three-dimensional display elements (for edges facing the light source.). 
3D_LIGHT  Light color for three-dimensional display elements (for edges facing the light source.). 
ACTIVE_BORDER  Active window border. 
ACTIVE_CAPTION  Active window title bar text. 
APP_WORKSPACE  Background color of multiple document interface (MDI) applications. 
BUTTON_TEXT  Text on a button. 
GRAY_TEXT  Grayed (disabled) text. 
HIGH_LIGHT  Item(s) selected in a control. 
HIGH_LIGHT_TEXT  Text of item(s) selected in a control. 
INACTIVE_BORDER  Inactive window border. 
INACTIVE_CAPTION Inactive window caption. 
TOOLTIP   Tool tip color. 
SCROLLBAR  Scrollbar gray area. 
WINDOW   Window background. 

size objects:
SCROLLBAR_SIZE  default with / height of scrollbar 
MENU_HEIGHT  height of menu 
WINDOW_BUTTON_WIDTH width of a window button 
CHECK_BOX_WIDTH  width of a checkbox check 
MESSAGE_BOX_WIDTH width of a messagebox 
MESSAGE_BOX_HEIGHT height of a messagebox 
BUTTON_WIDTH  width of a default button 
BUTTON_HEIGHT  height of a default button 

text objects:
MSG_BOX_OK  Text for the OK button on a message box. 
MSG_BOX_CANCEL  Text for the Cancel button on a message box. 
MSG_BOX_YES  Text for the Yes button on a message box. 
MSG_BOX_NO  Text for the No button on a message box. 

-->

A sample of what your document would look like would be:

Code: Select all

<gui>
 <skins>
  <skin id="1" name="Demo">
   <color object="ACTIVE_CAPTION" value="FF0000" alpha="0" />
   <color object="WINDOW" value="0032FF" alpha="50" />
   <size object="CHECK_BOX_WIDTH" value="12" />
   <text object="EGDT_MSG_BOX_YES " value="Do It!" />
   <font object="fonthaettenschweiler" />
  </skin>
 </skins>
 <layouts>
  <layout id="1" name="Main" skin="Demo">
   <element type="IGUIWindow" id="1" top="10" left="30" height="100" width="100" modal="false">
    <element type="IGUIButton" id="101" top="5" left="5" height="30" width="30">Click Me</element>
    <element type="IGUIStaticText" id="102" top="55" left="5" height="30" width="30" border="false">I'm a child of the Box</element>
   </element>
   <element type="IGUIImage" id="103" top="300" left="300" height="64" width="64">I'm on my own!</element>
  </layout>
 </layouts>
</gui>

Any additional suggestions?

[niko]

Very good idea. Your fomat looks good, the only thing missing is an attribute "parent" in element, I think.
I also have thought about this. And I've already written my own XML-Parser for this. [you know, I've got a problem with external libs ] But I've not implemented the loader yet, because I've lots of other things to do

[saigumi]

Actually, parentage is in there, it's just transparent and hard to see from the formatting.

Code: Select all

//Parent
<element type="IGUIWindow" id="1" top="10" left="30" height="100" width="100" modal="false">

         //Children
         <element type="IGUIButton" id="101" top="5" left="5" height="30" width="30">Click Me</element> 
         <element type="IGUIStaticText" id="102" top="55" left="5" height="30" width="30" border="false">I'm a child of the Box</element> 

//End Parent
</element>

If your putting an XML loader in later, then the GUI XML builder may be mature enough by then and reasonably simple to replace the external XML library calls with the internal ones.

[Tope]

saigumi, the idea of a scripted GUI sounds nice. This would also make it easier to create a separate GUI editor for Irr.

niko, I'm looking forward to the release your XML-parser as it could also be used for config-files and all sorts of useful things.