Difference between revisions of "MythUI XML Examples"
From MythTV Official Wiki
Iamlindoro (talk | contribs) |
|||
(17 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>== |
− | + | ===Tags=== | |
− | <area> | + | [[Image:mythui_buttonlist2.png|thumb|Grid layout.]] |
− | <spacing> | + | |
− | <layout> | + | '''<area>''' |
− | <buttonarea> | + | :Total widget area, includes arrows which should always displayed for touchscreens |
− | <statetype name="buttonitem"> | + | |
+ | '''<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 === | === 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. | ||
+ | <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. | ||
− | === Simple Multi-column list === | + | === Examples === |
+ | ==== Simple Multi-column list ==== | ||
<pre> | <pre> | ||
− | < | + | <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 35: | Line 55: | ||
<position>2,2</position> | <position>2,2</position> | ||
</statetype> | </statetype> | ||
− | <textarea name="column1 | + | <textarea name="column1"> |
<area>25,0,100,30</area> | <area>25,0,100,30</area> | ||
+ | <font>fonta</font> | ||
</textarea> | </textarea> | ||
− | <textarea name="column2" from=" | + | <textarea name="column2" from="column1"> |
− | < | + | <position>135,0</position> |
</textarea> | </textarea> | ||
</state> | </state> | ||
<state name="selected" from="active"> | <state name="selected" from="active"> | ||
− | <textarea name="column1" from=" | + | <textarea name="column1"> |
− | + | <font>fontb</font> | |
+ | </textarea> | ||
+ | <textarea name="column2" from="column1" /> <!-- Picks up font change in selected state --> | ||
</state> | </state> | ||
</statetype> | </statetype> | ||
− | </ | + | </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.
Contents
MythUIButtonList - <buttonlist>
Tags
<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
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>