Changes between Version 1 and Version 2 of GUI_-_XML_Files


Ignore:
Timestamp:
Dec 17, 2021, 9:49:43 PM (2 years ago)
Author:
s0600204
Comment:

Update formatting of XML examples, and improve formatting and syntax of accompanying text. (Note: I haven't checked if the property names are still valid.)

Legend:

Unmodified
Added
Removed
Modified

  • GUI_-_XML_Files

    v1 v2  
    1 There are several types of GUI XML files, their main difference is the ''root element''.
     1There are several types of files used to build the GUI, their main difference is the element used as their ''root''.
    22
    3 Here's an example of an XML file with the root element '''<objects>'''.
     3Here's an example of an XML file with a root element of `<objects>`.
    44
    55{{{
    6   <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
     6#!xml
     7<?xml version="1.0" encoding="utf-8"?>
    78 
    8   <!DOCTYPE <font color="green">objects</font> SYSTEM "../gui.dtd">
    9  
    10   <<font color="green">objects</font>>
    11  
    12   <<font color="green">/objects</font>>
     9<objects>
     10        <!-- Child elements go here. -->
     11</objects>
    1312}}}
    1413
    15 The root element's name is highlighted in green, if you're creating a file with another root element, the text should be changed in all those three places.
     14Naturally, if you're creating a file that uses a different root element, `<objects> (and `</objects>` should be amended as appropriate.
    1615
    1716== Style Files ==
    18 Root element: ''<styles>''
     17Root element: `<styles>`
    1918
    20 Styles XML files are explained in the [wiki:GUI_-_Styles Styles Documentation]. Here's an example file nonetheless.
     19Styles XML files are explained in the [wiki:GUI_-_Styles Styles Documentation]. Here's an example:
    2120
    2221{{{
    23   <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
    24  
    25   <!DOCTYPE styles SYSTEM "../gui.dtd">
    26  
    27   <styles>
    28     <!-- Style that will hide the object as new default -->
    29     <style name="style_name1"
    30            hidden="true"
    31     />
    32    
    33     <!-- Style that helps us create a nice edit box -->
    34     <style name="editbox_nice"
    35            sprite="sprite1"
    36            font="font1"
    37     />
    38   </styles>
     22#!xml
     23<?xml version="1.0" encoding="utf-8"?>
     24
     25<styles>
     26        <!-- This style will hide the object it's used by -->
     27        <style name="style_name1"
     28                hidden="true"
     29        />
     30
     31        <!-- This style provides styling to create a nice-looking edit box. -->
     32        <style name="editbox_nice"
     33                sprite="sprite1"
     34                font="font1"
     35        />
     36</styles>
    3937}}}
    4038
    4139== Sprite Files ==
    42 Root element: ''<sprites>''
     40Root element: `<sprites>`
    4341
    44 Sprite files are explained in the [wiki:GUI_-_Sprites Sprites Documentation]. Again, still here's an example.
     42Sprite files are explained in the [wiki:GUI_-_Sprites Sprites Documentation]. Here's an example:
    4543
    4644{{{
    47   <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
    48  
    49   <!DOCTYPE sprites SYSTEM "../gui.dtd">
    50  
    51   <sprites>
    52       <!-- Here's a sprite with two images next to each other -->
    53       <sprite  name="sprite1">
    54                <image texture="texture1.jpg"
    55                      size="0 0 50% 100%"
    56                      texture_size="0 0 20 20"
    57                />
    58                <image texture="texture2.jpg"
    59                      size="50% 0 100% 100%"
    60                      texture_size="0 0 20 20"
    61                />
    62       </sprite>
    63      
    64       <!-- Here's a simple sprite that is just one image stretched to fit the whole area -->
    65       <sprite  name="sprite2">
    66                <image texture="texture1.jpg"
    67                      size="0 0 100% 100%"
    68                      texture_size="0 0 100% 100%"
    69                />
    70       </sprite>
    71   </sprites>
     45#!xml
     46<?xml version="1.0" encoding="utf-8"?>
     47
     48<sprites>
     49        <!-- Here's a sprite with two images next to each other -->
     50        <sprite name="sprite1">
     51                <image texture="texture1.jpg"
     52                        size="0 0 50% 100%"
     53                        texture_size="0 0 20 20"
     54                />
     55                <image texture="texture2.jpg"
     56                        size="50% 0 100% 100%"
     57                        texture_size="0 0 20 20"
     58                />
     59        </sprite>
     60
     61        <!-- Here's a simple sprite that is just one image stretched to fit the whole area -->
     62        <sprite name="sprite2">
     63                <image texture="texture1.jpg"
     64                        size="0 0 100% 100%"
     65                        texture_size="0 0 100% 100%"
     66                />
     67        </sprite>
     68</sprites>
    7269}}}
    7370
    7471== Setup Files ==
    75 Root element: ''<setup>''
     72Root element: `<setup>`
    7673
    77 Within the <setup> tag a number of templates can be defined on a stack, in no specific order.
     74Within the `<setup>` tag a number of templates can be defined on a stack, in no specific order.
    7875
    7976{{{
    80  <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
    81  
    82  <!DOCTYPE setup SYSTEM "../gui.dtd">
    83  
    84  <setup> 
    85     <scrollbar name="sb"
    86                width="18"
    87                minimum_bar_size="5"
    88                sprite_button_top="sprite2"
    89                sprite_button_top_over="null"
    90                sprite_button_bottom="sprite2"
    91                sprite_button_bottom_over="null"
    92                sprite_back_vertical="grey"
    93                sprite_bar_vertical="sprite2"
    94                sprite_bar_vertical_over="null"
    95                sprite_bar_vertical_pressed="null"
    96                sprite_button_bottom_pressed="sprite2_pressed"
    97                sprite_button_top_pressed="sprite2_pressed"
    98     />
    99  
    100     <icon      name="0ad_icon"
    101                texture="0ad_icon"
    102                size="16 16"
    103     />
    104  
    105     <tooltip   name="pregame_mainmenu_tooltip"
    106                use_object="pregame_mainmenu_tooltip"
    107                delay="0"
    108                hide_object="true"
    109     />
    110  </setup>
     77#!xml
     78<?xml version="1.0" encoding="utf-8"?>
     79
     80<setup> 
     81        <scrollbar name="sb"
     82                width="18"
     83                minimum_bar_size="5"
     84                sprite_button_top="sprite2"
     85                sprite_button_top_over="null"
     86                sprite_button_bottom="sprite2"
     87                sprite_button_bottom_over="null"
     88                sprite_back_vertical="grey"
     89                sprite_bar_vertical="sprite2"
     90                sprite_bar_vertical_over="null"
     91                sprite_bar_vertical_pressed="null"
     92                sprite_button_bottom_pressed="sprite2_pressed"
     93                sprite_button_top_pressed="sprite2_pressed"
     94        />
     95
     96        <icon name="0ad_icon"
     97                texture="0ad_icon"
     98                size="16 16"
     99        />
     100
     101        <tooltip name="pregame_mainmenu_tooltip"
     102                use_object="pregame_mainmenu_tooltip"
     103                delay="0"
     104                hide_object="true"
     105        />
     106</setup>
    111107}}}
    112108
    … …  
    114110
    115111== Object Files ==
    116 Root element: ''<objects>''
     112Root element: `<objects>`
    117113
    118114How to build the GUI is easiest explained with an example XML file:
    119115
    120116{{{
    121   <?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
    122  
    123   <!DOCTYPE objects SYSTEM "../gui.dtd">
    124  
    125   <objects>
    126       <object name="object_name"
    127               type="button"
    128               size="50%+2 50%+5 50%+10 50%+10"
    129               hotkey="example_button.toggle"
    130               sprite="example_button"
    131               sprite_pressed="example_button_pressed"
    132       >This is the button's caption.
    133               <action on="Press"><![CDATA[
    134                     DoSomething();
    135               ]]></action>
    136  
    137               <!-- Example child objects -->
    138               <object name="child1"
    139                       type="text"
    140               />
    141               <object name="child2"
    142                       type="image"
    143               />
    144       </object>
    145   </objects>
     117#!xml
     118<?xml version="1.0" encoding="utf-8"?>
     119
     120<objects>
     121        <object name="object_name"
     122                type="button"
     123                size="50%+2 50%+5 50%+10 50%+10"
     124                hotkey="example_button.toggle"
     125                sprite="example_button"
     126                sprite_pressed="example_button_pressed"
     127        >
     128                This is the button's caption.
     129
     130                <!-- Example child objects -->
     131                <object name="child1"
     132                        type="text"
     133                />
     134                <object name="child2"
     135                        type="image"
     136                />
     137        </object>
     138</objects>
    146139}}}
    147140
    148 The GUI defined above has got one uppermost object, or '''root object''' (i.e. it is parentless as it is placed within the <objects> tag, and not another object), and it has got two children objects and one [wiki:GUI_-_Actions action] assigned to it. Objects can have any number of children, and they are placed anywhere within the parent. You can have as many root objects in one file as you like, just place them next to each other. Within the object tag you define its [wiki:GUI_-_Properties properties] as shown above. If an object has got a caption, it should be placed just after the opening tag, and
    149 before any other sub-elements. Read more about actions [wiki:GUI_-_Actions here].
     141The GUI defined above has got one uppermost object, or ''root object'' (i.e. it is parentless as it is bounded by the `<objects>` start and end tags, and not another `<object>`), and it has two child objects.
     142
     143An object may have any number of children, placed anywhere within the parent. You may have  more than one ''root object'' in a single file: just place them next to each other within the bounds of the `<objects>` tag.
     144
     145Within the `<object>` tag you define its [wiki:GUI_-_Properties properties] as shown above. If an object has a caption, it should be placed just after the opening tag, and
     146before any other sub-elements.