Difference between revisions of "MythUI XML Examples"

From MythTV Official Wiki
Jump to: navigation, search
(→‎MythUIButtonList - <buttonlist2>)
 
(18 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
For documentation of the mythui theme format, see:
+
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===
  
 +
[[Image:mythui_buttonlist2.png|thumb|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 ===
 +
 +
[[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
 +
by name in SetText() e.g.
 +
 +
<pre>
 +
m_buttonList->SetText("This is the default textarea");
 +
m_buttonList->SetText("This is column one", "column1");
 +
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.
 +
 +
=== Examples ===
 +
==== 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 18: 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.
  
−
<area> - Total widget area, includes arrows which should always displayed for touchscreens
+
==== Image Grid ====
−
<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 ===
+
<pre>
−
Every button has a default textarea, buttontext but in addition you can define an infinite number of textareas which can be referred to
+
<buttonlist name="iamgegrid_example" from="basebuttonlist">
−
by name in SetText() e.g.
+
  <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>
  
−
m_buttonList->SetText("This is the default textarea");
+
[[Category:Themes]]
−
m_buttonList->SetText("This is column one", "column1");
+
[[Category:Developer Documentation]]
−
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.
 

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>
Retrieved from "http://www.mythtv.org/wiki?title=MythUI_XML_Examples&oldid=38164"