Page tree

Search

  Wiki Navigation

    Loading...


 Recently Updated


 Latest Releases

 MediaPortal 1.23 
            Releasenews | Download
 MediaPortal 2.2.2
            Releasenews | Download

Overview

Skin logic using skin defines, skin expressions, skin functions, and skin settings can be quite powerful for controlling the look and feel as well as the fucntionality of a skin.  This topic offers practical examples of how these capabilities may be used in your skin.  Refer to each of the individual topics for details.

Examples:

  • Radio button group - value selection required
  • Radio button group - value selection optional

Radio button group - value selection required

This example demonstrates how you can setup a group of checkbutton controls to work together as a radio button group where one checkbutton MUST be selected at all times after one of the checkbuttons is selected for the first time.  The initial value of the radio group may be set so that no checkbutton is enabled after the controls are rendered for the first time (during window load).

Declare variables

Add the following to your SkinSettings.xml file to declare and initialize a default value to be one of the available options.  This example sets one of the valid values per the skin controls example below.

<section name="stringsettings">
    <entry name="#skin.mymusic.info">Option 1</entry>
</section>

Optionally, if you want none of the checkbuttons initially selected then add the following to your SkinSettings.xml file to declare and initialize a default value to be none of the available options (per the skin controls example below).

<section name="stringsettings">
    <entry name="#skin.mymusic.info">None</entry>
</section>

Define skin controls

The <selected> attribute reflects the state of the checkbutton so when the skin setting #skin.mymusic.info equals "Option 1" then the checkbutton will be "selected" (checked).  When the checkbutton is clicked the attribute <onclick> defines what will happen.  In the case of checkbutton option 1 the skin setting #skin.mymusic.info will be set to "Option 1".  All three checkbuttons share the same skin setting, #skin.mymusic.info.

<control>
    <description>Radio checkbutton 1</description>
    <type>checkbutton</type>
    <id>622</id>
    <label>Option 1</label>
    <font>font12</font>
    <width>250</width>
    <height>52</height>
    <posX>136</posX>
    <posY>428</posY>
    <textXOff>28</textXOff>
    <textYOff>8</textYOff>
    <markalign>right</markalign>
    <markvalign>top</markvalign>
    <markWidth>33</markWidth>
    <markHeight>21</markHeight>
    <markXOff>30</markXOff>
    <markYOff>10</markYOff>
    <textureFocus>settings_button_focus.png</textureFocus>
    <textureNoFocus>settings_button_nofocus.png</textureNoFocus>
    <textureCheckmark>settings_checkmark_checked.png</textureCheckmark>
    <textureCheckmarkNoFocus>settings_checkmark_unchecked.png</textureCheckmarkNoFocus>
    <textcolor>ffffffff</textcolor>
    <textcolorNoFocus>ffffffff</textcolorNoFocus>
    <selected>#(eq(#skin.mymusic.info,'Option 1'))</selected>
    <onclick>#(skin.setstring('#skin.mymusic.info','Option 1'))</onclick>
    <onleft>10011</onleft>
    <onright>2</onright>
    <onup>3</onup>
    <ondown>7</ondown>
</control>
<control>
    <description>Radio checkbutton 2</description>
    <type>checkbutton</type>
    <id>722</id>
    <label>Option 2</label>
    <font>font12</font>
    <width>250</width>
    <height>52</height>
    <posX>136</posX>
    <posY>480</posY>
    <textXOff>28</textXOff>
    <textYOff>8</textYOff>
    <markalign>right</markalign>
    <markvalign>top</markvalign>
    <markWidth>33</markWidth>
    <markHeight>21</markHeight>
    <markXOff>30</markXOff>
    <markYOff>10</markYOff>
    <textureFocus>settings_button_focus.png</textureFocus>
    <textureNoFocus>settings_button_nofocus.png</textureNoFocus>
    <textureCheckmark>settings_checkmark_checked.png</textureCheckmark>
    <textureCheckmarkNoFocus>settings_checkmark_unchecked.png</textureCheckmarkNoFocus>
    <textcolor>ffffffff</textcolor>
    <textcolorNoFocus>ffffffff</textcolorNoFocus>
    <selected>#(eq(#skin.mymusic.info,'Option 2'))</selected>
    <onclick>#(skin.setstring('#skin.mymusic.info','Option 2'))</onclick>
    <onleft>10011</onleft>
    <onright>2</onright>
    <onup>6</onup>
    <ondown>8</ondown>
</control>
<control>
    <description>Radio checkbutton 3</description>
    <type>checkbutton</type>
    <id>822</id>
    <label>Option 3</label>
    <font>font12</font>
    <width>250</width>
    <height>52</height>
    <posX>136</posX>
    <posY>532</posY>
    <textXOff>28</textXOff>
    <textYOff>8</textYOff>
    <markalign>right</markalign>
    <markvalign>top</markvalign>
    <markWidth>33</markWidth>
    <markHeight>21</markHeight>
    <markXOff>30</markXOff>
    <markYOff>10</markYOff>
    <textureFocus>settings_button_focus.png</textureFocus>
    <textureNoFocus>settings_button_nofocus.png</textureNoFocus>
    <textureCheckmark>settings_checkmark_checked.png</textureCheckmark>
    <textureCheckmarkNoFocus>settings_checkmark_unchecked.png</textureCheckmarkNoFocus>
    <textcolor>ffffffff</textcolor>
    <textcolorNoFocus>ffffffff</textcolorNoFocus>
    <selected>#(eq(#skin.mymusic.info,'Option 3'))</selected>
    <onclick>#(skin.setstring('#skin.mymusic.info','Option 3'))</onclick>
    <onleft>10011</onleft>
    <onright>2</onright>
    <onup>7</onup>
    <ondown>9</ondown>
</control>

Radio button group - value selection optional

This example demonstrates how you can setup a group of checkbutton controls to work together as a radio button group where there is NO requirement to have a checkbutton selected.  This implementation is nearly identical to "Radio buton group - value selection required" except the <onclick> attribute expression is different.  The logic for the <onclick> attribute expression for the 'Option 1' checkbutton is as follows:

if (value equals 'Option 1') then

  set value to 'None'

else

  set value to 'Option 1'

Read as a statement: "if the current value is my value then turn off the radio group (set value to 'None'), otherwise set the value to my value".  This is implemented using the following skin expression logic.  Substitute these <onclick> attribute expressions for the <onclick> expressions in the "Radio buton group - value selection required" example.

For "Radio checkbutton 1" use:

<onclick>#(skin.setstring('#skin.mymusic.info',iif(eq(#skin.mymusic.info,'Option 1'),'None','Option 1')))</onclick>

For "Radio checkbutton 2" use:

<onclick>#(skin.setstring('#skin.mymusic.info',iif(eq(#skin.mymusic.info,'Option 2'),'None','Option 2')))</onclick>

For "Radio checkbutton 3" use:

<onclick>#(skin.setstring('#skin.mymusic.info',iif(eq(#skin.mymusic.info,'Option 3'),'None','Option 3')))</onclick>

   

 

This page has no comments.