Difference between revisions of "MythUI XML Examples"

From MythTV Official Wiki
Jump to: navigation, search
(MythUIButtonList - <buttonlist2>)
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.]]
  
 +
<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 ===
 
<pre>
 
<pre>
 
<buttonlist2 name="column_example" from="basebuttonlist2">
 
<buttonlist2 name="column_example" from="basebuttonlist2">
Line 34: Line 51:
  
 
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.
 
<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.
 

Revision as of 13:12, 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.