Difference between revisions of "MythUI XML Examples"

From MythTV Official Wiki
Jump to: navigation, search
(MythUIButtonList)
Line 7: Line 7:
 
[[Image:mythui_buttonlist1.png|thumb|Example of how a mythui list can be styled. Not the following example.]]
 
[[Image:mythui_buttonlist1.png|thumb|Example of how a mythui list can be styled. Not the following example.]]
  
 +
<pre>
 
<area> - Total widget area, includes arrows which should always displayed for touchscreens
 
<area> - Total widget area, includes arrows which should always displayed for touchscreens
 
<spacing> - Spacing between entries. Zero is the default. (Optional)
 
<spacing> - Spacing between entries. Zero is the default. (Optional)
Line 12: Line 13:
 
<buttonarea> - Area relative to the total area that the buttons may use, the rest is free for arrows
 
<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
 
<statetype name="buttonitem"> -  Describes the layout, content of the buttons
 +
</pre>
  
 
=== Use of named textareas ===
 
=== Use of named textareas ===
Line 17: Line 19:
 
by name in SetText() e.g.
 
by name in SetText() e.g.
  
 +
<pre>
 
m_buttonList->SetText("This is the default textarea");
 
m_buttonList->SetText("This is the default textarea");
 
m_buttonList->SetText("This is column one", "column1");
 
m_buttonList->SetText("This is column one", "column1");
 
m_buttonList->SetText("This is column two", "column2");
 
m_buttonList->SetText("This is column two", "column2");
 +
</pre>
  
 
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.
 
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.

Revision as of 13:13, 26 August 2008

For documentation of the mythui theme format, see:

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

MythUIButtonList

Example of how a mythui list can be styled. Not the following example.
<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)
<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

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.

Simple Multi-column list

<buttonlist2 name="column_example" from="basebuttonlist2">
   <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" from="buttontext">
               <area>25,0,100,30</area>
           </textarea>
           <textarea name="column2" from="buttontext">
               <area>135,0,100,30</area>
           </textarea>
       </state>
       <state name="selected" from="active">
           <textarea name="column1" from="buttontext" /> <!-- Picks up font change in selected state -->
           <textarea name="column2" from="buttontext" />
       </state>
   </statetype>
</buttonlist2>

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