Difference between revisions of "MythUI XML Examples"

From MythTV Official Wiki
Jump to: navigation, search
m
 
(12 intermediate revisions by 4 users not shown)
Line 1: Line 1:
For documentation of the mythui theme format, see: [http://svn.mythtv.org/trac/wiki/MythUIThemeFormat MythUIThemeFormat]
+
For documentation of the mythui theme format, see: [[MythUI_Theme_Development| MythUI Theme Development]]
  
 
This page will hold a few examples of different layouts possible.
 
This page will hold a few examples of different layouts possible.
  
==MythUIButtonList==
+
==MythUIButtonList - <buttonlist>==
  
[[Image:mythui_buttonlist1.png|thumb|Example of how a mythui list can be styled. Not the following example.]]
+
===Tags===
  
===Tags===
+
[[Image:mythui_buttonlist2.png|thumb|Grid layout.]]
  
 
'''<area>'''
 
'''<area>'''
Line 28: Line 28:
  
 
=== Use of named textareas ===
 
=== Use of named textareas ===
 +
 +
[[Image:mythui_buttonlist1.png|thumb|Example of named textareas in a list.]]
 +
 
Every button has a default textarea, buttontext but in addition you can define an infinite number of textareas which can be referred to
 
Every button has a default textarea, buttontext but in addition you can define an infinite number of textareas which can be referred to
 
by name in SetText() e.g.
 
by name in SetText() e.g.
Line 42: Line 45:
 
==== Simple Multi-column list ====
 
==== Simple Multi-column list ====
 
<pre>
 
<pre>
<buttonlist2 name="column_example" from="basebuttonlist2">
+
<buttonlist name="column_example" from="basebuttonlist">
 
   <area>x,y,w,h</area>
 
   <area>x,y,w,h</area>
 
   <spacing>2</spacing>
 
   <spacing>2</spacing>
Line 52: Line 55:
 
               <position>2,2</position>
 
               <position>2,2</position>
 
           </statetype>
 
           </statetype>
           <textarea name="column1" from="buttontext">
+
           <textarea name="column1">
 
               <area>25,0,100,30</area>
 
               <area>25,0,100,30</area>
 +
              <font>fonta</font>
 
           </textarea>
 
           </textarea>
           <textarea name="column2" from="buttontext">
+
           <textarea name="column2" from="column1">
               <area>135,0,100,30</area>
+
               <position>135,0</position>
 
           </textarea>
 
           </textarea>
 
       </state>
 
       </state>
 
       <state name="selected" from="active">
 
       <state name="selected" from="active">
           <textarea name="column1" from="buttontext" /> <!-- Picks up font change in selected state -->
+
           <textarea name="column1">
          <textarea name="column2" from="buttontext" />
+
              <font>fontb</font>
 +
          </textarea>
 +
          <textarea name="column2" from="column1" /> <!-- Picks up font change in selected state -->
 
       </state>
 
       </state>
 
   </statetype>
 
   </statetype>
</buttonlist2>
+
</buttonlist>
 
</pre>
 
</pre>
  
 
N.B. This example inherits from basebuttonlist which saves us defining the checkbox images, fonts, arrows etc. These can all be overridden.
 
N.B. This example inherits from basebuttonlist which saves us defining the checkbox images, fonts, arrows etc. These can all be overridden.
 +
 +
==== Image Grid ====
 +
 +
<pre>
 +
<buttonlist name="iamgegrid_example" from="basebuttonlist">
 +
  <area>x,y,w,h</area>
 +
  <spacing>5</spacing>
 +
  <layout>grid</layout>
 +
  <buttonarea>x2,y2,w2,h2</buttonarea>
 +
  <statetype name="buttonitem">
 +
      <state name="active">
 +
          <imagetype name="buttonimage">
 +
              <area>10,10,150,150</area>
 +
          </imagetype>
 +
      </state>
 +
      <state name="selected" from="active">
 +
          <imagetype name="buttonimage">
 +
              <area>-20,-20,220,220</area> <!-- Enlarged selected image, overlaps neighbouring images -->
 +
          </imagetype>
 +
      </state>
 +
  </statetype>
 +
</buttonlist>
 +
</pre>
 +
 +
[[Category:Themes]]
 +
[[Category:Developer Documentation]]

Latest revision as of 15:16, 17 April 2009

For documentation of the mythui theme format, see: MythUI Theme Development

This page will hold a few examples of different layouts possible.

MythUIButtonList - <buttonlist>

Tags

Grid layout.

<area>

Total widget area, includes arrows which should always displayed for touchscreens

<spacing>

Spacing between entries. Zero is the default. (Optional)

<layout>

Grid, Horizontal,Vertical. Vertical is the default (Optional)

<scrollstyle>

Free, Center. Free is the default (Optional)

<buttonarea>

Area relative to the total area that the buttons may use, the rest is free for arrows

<statetype name="buttonitem">

Describes the layout, content of the buttons

Use of named textareas

Example of named textareas in a list.

Every button has a default textarea, buttontext but in addition you can define an infinite number of textareas which can be referred to by name in SetText() e.g.

m_buttonList->SetText("This is the default textarea");
m_buttonList->SetText("This is column one", "column1");
m_buttonList->SetText("This is column two", "column2");

I suggest giving them more meaningful names, i.e. If they display name and description of a video then "title", "description" would be clearer to the themer.

Examples

Simple Multi-column list

<buttonlist name="column_example" from="basebuttonlist">
   <area>x,y,w,h</area>
   <spacing>2</spacing>
   <layout>vertical</layout>
   <buttonarea>x2,y2,w2,h2</buttonarea>
   <statetype name="buttonitem">
       <state name="active">
           <statetype name="buttoncheck">
               <position>2,2</position>
           </statetype>
           <textarea name="column1">
               <area>25,0,100,30</area>
               <font>fonta</font>
           </textarea>
           <textarea name="column2" from="column1">
               <position>135,0</position>
           </textarea>
       </state>
       <state name="selected" from="active">
           <textarea name="column1">
              <font>fontb</font>
           </textarea>
           <textarea name="column2" from="column1" /> <!-- Picks up font change in selected state -->
       </state>
   </statetype>
</buttonlist>

N.B. This example inherits from basebuttonlist which saves us defining the checkbox images, fonts, arrows etc. These can all be overridden.

Image Grid

<buttonlist name="iamgegrid_example" from="basebuttonlist">
   <area>x,y,w,h</area>
   <spacing>5</spacing>
   <layout>grid</layout>
   <buttonarea>x2,y2,w2,h2</buttonarea>
   <statetype name="buttonitem">
       <state name="active">
           <imagetype name="buttonimage">
               <area>10,10,150,150</area>
           </imagetype>
       </state>
       <state name="selected" from="active">
           <imagetype name="buttonimage">
               <area>-20,-20,220,220</area> <!-- Enlarged selected image, overlaps neighbouring images -->
           </imagetype>
       </state>
   </statetype>
</buttonlist>