XML Interface Examples

From HEWIKI
Jump to: navigation, search

Contents

Interface Examples

Overview

This page has examples of creating specific GUI Controls, and initializing their values and flags. For documentation of the specific fields and classes, as well as an overview of the GUIXML part of Hero's Journey, please see the appropriate section on the GUIControls page.


When creating an interface, first the individual controls are created and defined, and then they are assembled into a larger interface.

Creating the Pieces

GUI Label Control

This creates a GUILabel control that has the text "Label" on it. This control allows you display text.


<createControlType class='GUILabel' type='label' description='Label' ignoreMouseEvents='true'>
  <textFormat left='true' top='true' singleLine='false' />
</createControlType>

GUI Chat Window

This creates a chat window with a texture, color, and transparency.

<set name='chatWindow.clientarea'>
 <tiling vertical='false' horizontal='false'/>
 <defaultStatePresentation>
   <position x='391' y='1'/>
   <size x='85' y='85'/>
   <color r='1' g='1' b='1' a='.5'/>
  </defaultStatePresentation>
</set>

GUI Title Bar Spacer

<createControlType class='GUIPanel' type='titlebarspacer' dockMode='left' ignoreMouseEvents='true'>
  <size x='60' y='0'/>
  <defaultStatePresentation><color a='0'/></defaultStatePresentation>
</createControlType>

GUI Window Title

<createControlType class='GUILabel' type='titlebar_text' description='Window Title' dockMode='fill' 
  text='Window Title' ignoreMouseEvents='true'>
  <textFormat left='true' top='true' />
</createControlType>

GUI Title Bar

 
<createControlType class='GUIMovePanel' type='base_titlebar' description='Title Bar'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='top'>
  <tiling horizontal='true' vertical='false' />
  <defaultStatePresentation>
    <color r='1' g='1' b='1' a='1'/>
    <position x='0' y='336'/>
    <size x='238' y='18'/>
  </defaultStatePresentation>
  <anchor top='true' left='true' bottom='false' right='true'/>
 
  <titlebarspacer/>
  <titlebar_text name='text'/> 
</createControlType>

GUI Client Area

This creates a window panel on the screen, that has a texture drawn from a Buttons Texture file.

<createControlType class='GUIPanel' type='base_clientarea' description='Client Area'
  ignoreMouseEvents='true'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='fill'>
  <tiling horizontal='true' vertical='true' />
  <anchor top='true' left='true' bottom='true' right='true' />
  <defaultStatePresentation>
    <color r='1' g='1' b='1' a='.5'/>
    <position x='177' y='1'/>
    <size x='190' y='190'/>
  </defaultStatePresentation>
</createControlType>

GUI Corner Widget

<createControlType class='GUIPanel' type='base_cornerWidget_1' description='Base Corner Widget 1'
  ignoreMouseEvents='true'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' opacityWeight='.5'>
 
  <position x='4' y='4' />
  <size x='50' y='88' />
  <defaultStatePresentation>
    <position x='100' y='1' />
    <size x='50' y='88' />
  </defaultStatePresentation>
</createControlType>

Gems

<createControlType class='GUIScaleAndAlphaPanel' type='base_gem_yellow' description='Base Gem Yellow'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI'>
  <size x='20' y='19' />
  <defaultStatePresentation>
    <position x='92' y='219' />
    <size x='20' y='19' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIScaleAndAlphaPanel' type='base_gem_red' description='Base Gem Red'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI'>
  <size x='20' y='19' />
  <defaultStatePresentation>
    <position x='345' y='195' />
    <size x='20' y='19' />
  </defaultStatePresentation>
</createControlType>

GUI Resize Controls

<createControlType class='GUIResizePanel' type='base_resize_NW' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='top'>
  <size x='6' y='6' />
  <minimumSize x='4' y='4' />
  <anchor left='true' top='true' right='false' bottom='false' />
  <resize left='true' top='true' right='false' bottom='false' />
  <defaultStatePresentation>
    <position x='1' y='1' />
    <size x='6' y='6' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_N' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='top'>
  <tiling horizontal='true' />
  <size x='288' y='4' />
  <minimumSize x='0' y='4' />
  <anchor left='true' top='true' right='true' bottom='false' />
  <resize left='false' top='true' right='false' bottom='false' />
  <defaultStatePresentation>
    <position x='7' y='1' />
    <size x='85' y='4' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_NE' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='top'>
  <size x='6' y='6' />
  <minimumSize x='4' y='4' />
  <anchor left='false' top='true' right='true' bottom='false' />
  <resize left='false' top='true' right='true' bottom='false' />
  <defaultStatePresentation>
    <position x='93' y='1' />
    <size x='6' y='6' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_E' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='right'>
  <tiling vertical='true' />
  <size x='4' y='288' />
  <minimumSize x='4' y='0' />
  <anchor left='false' right='true' top='true'  bottom='true' />
  <resize left='false' right='true' top='false' bottom='false' />
  <defaultStatePresentation>
    <position x='95' y='7' />
    <size x='4' y='55' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_SE' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='bottom'>
  <size x='6' y='6' />
  <minimumSize x='4' y='4' />
  <anchor left='false' right='true' top='false'  bottom='true' />
  <resize left='false' right='true' top='false' bottom='true' />
  <defaultStatePresentation>
    <position x='93' y='60' />
    <size x='6' y='6' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_S' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='bottom'>
  <tiling horizontal='true' />
  <size x='288' y='4' />
  <minimumSize x='0' y='4' />
  <anchor left='true' right='true' top='false'  bottom='true' />
  <resize left='false' right='false' top='false' bottom='true' />
  <defaultStatePresentation>
    <position x='7' y='62' />
    <size x='89' y='4' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_SW' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='bottom'>
  <size x='6' y='6' />
  <minimumSize x='4' y='4' />
  <anchor left='true' right='false' top='false'  bottom='true' />
  <resize left='true' right='false' top='false'  bottom='true' />
  <defaultStatePresentation>
    <position x='1' y='60' />
    <size x='6' y='6' />
  </defaultStatePresentation>
</createControlType>
 
<createControlType class='GUIResizePanel' type='base_resize_W' 
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI' dockMode='left'>
  <tiling vertical='true' />
  <size x='4' y='288' />
  <minimumSize x='4' y='0' />
  <anchor left='true' right='false' top='true'  bottom='true' />
  <resize left='true' right='false' top='false' bottom='false' />
  <defaultStatePresentation>
    <position x='1' y='7' />
    <size x='4' y='53' />
  </defaultStatePresentation>
</createControlType>

GUI Scroll Buttons

This sample creates three different Scroll buttons, though it doesn't specify exactly where they are going to be used. It does, however, define some of their properties, such as that they will appear to move a bit to the left whenever the mouse hovers over them. This is accomplished by modifying the "y" position value in the definition of the hoverStatePresentation.

<createControlType class='GUIScrollEndButton' type='base_scrollbar_up_btn' description='Base Scroll Up Button'
  dockMode='top' 
  scrollDirection='up'
  isHorizontal='false'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI'>
  <defaultStatePresentation>
    <position x='151' y='31' />
    <size x='19' y='14' />
  </defaultStatePresentation>
  <hoverStatePresentation>
    <position x='151' y='1' />
    <size x='19' y='14' />
  </hoverStatePresentation>  
</createControlType>
 
<createControlType class='GUIScrollEndButton' type='base_scrollbar_down_btn' description='Base Scroll Down Button'
  dockMode='bottom' 
  scrollDirection='down'
  isHorizontal='false'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI'>
  <defaultStatePresentation>
    <position x='151' y='46' />
    <size x='19' y='14' />
  </defaultStatePresentation>
  <hoverStatePresentation>
    <position x='151' y='16' />
    <size x='19' y='14' />
  </hoverStatePresentation>  
</createControlType>
 
<createControlType class='GUIPanel' type='base_scroll_thumb_top' description='Base Scrollbar Thumb Top'
  dockMode='top' 
  ignoreMouseEvents='true'
  texture='GUI\Buttons_DXT3_1024.dds' material='GUI'>
  <size x='12' y='14' />
  <defaultStatePresentation>
    <position x='123' y='139' />
    <size x='12' y='14' />
  </defaultStatePresentation>
  <hoverStatePresentation>
    <position x='158' y='162' />
    <size x='12' y='14' />
  </hoverStatePresentation>  
</createControlType>

Assembling the Pieces

Base Window

This panel has its own fields which need to be initialized, and then other Controls are added to it as children Controls. The child controls are listed by their type which was defined above.

Example

The following base_window panel has a child control base_resize_E which has two of its own child controls: base_resize_NE and base_resize_SE.

base_window also has a child base_titlebar which is positioned at (45,4). This means that the top left of the titlebar is at position (45,4), in relation to the top left corner of the base_window control. The titlebar's size is set as 251 pixels long, and 18 pixels high.

<createControlType class='GUIPanel' type='base_window' description='Base Window'
  bringtotop='true' name='base_window'>
 
  <size x='400' y='400'/>
  <minimumSize x='198' y='96'/>
  <maximumSize x='800' y='800'/>
 
  <defaultStatePresentation><color a='0'/></defaultStatePresentation>
 
  <base_resize_E>
    <base_resize_NE/>
    <base_resize_SE/>
  </base_resize_E>
 
  <base_resize_W>
    <base_resize_SW/>
    <base_resize_NW/>
  </base_resize_W>
 
  <base_resize_N/>
  <base_resize_S/>
 
  <base_titlebar name='titlebar'>
    <position x='45' y='4'/>
    <size x='251' y='18'/>
  </base_titlebar>
 
  <base_clientarea name='clientarea'>
    <position x='4' y='21'/>
    <size x='292' y='275'/>
  </base_clientarea>
 
  <base_cornerWidget_1/>
 
  <base_gem_yellow>
    <position x='14' y='14'/>
  </base_gem_yellow>
</createControlType>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox