Scroll Bar Control and Group List Control: Difference between pages

From Official Kodi Wiki
(Difference between pages)
Jump to navigation Jump to search
>NedBot
m (Robot: Cosmetic changes)
 
>Jezz X
 
Line 1: Line 1:
The scroll bar control is used as a page control for lists, panels, wraplists, fixedlists, textboxes, and grouplists. You can choose the position, size, and look of the scroll bar.
The group list control is a special case of the group control.  It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).
=== Example ===
===Example===
<source lang="xml">
<xml>
<control type="scrollbar" id="17">
<control type="grouplist" id="17">
       <description>My first scroll bar control</description>
       <description>My first group list control</description>
       <posx>80</posx>
       <posx>80</posx>
       <posy>60</posy>
       <posy>60</posy>
       <width>250</width>
       <width>250</width>
       <height>30</height>
       <height>300</height>
      <itemgap>10</itemgap>
      <pagecontrol>25</pagecontrol>
      <scrolltime>200</scrolltime>
      <orientation>vertical</orientation>
      <usecontrolcoords>false</usecontrolcoords>
       <visible>true</visible>
       <visible>true</visible>
      <texturesliderbackground>scroll-background.png</texturesliderbackground>
      <texturesliderbar>bar.png</texturesliderbar>
      <texturesliderbarfocus>bar-focus.png</texturesliderbarfocus>
      <textureslidernib>nib.png</textureslidernib>
      <textureslidernibfocus>nib-focus.png</textureslidernibfocus>
      <pulseonselect></pulseonselect>
      <orientation>vertical</orientation>
      <showonepage>false</showonepage>
       <onup>2</onup>
       <onup>2</onup>
       <ondown>3</ondown>
       <ondown>3</ondown>
       <onleft>1</onleft>
       <onleft>1</onleft>
       <onright>1</onright>
       <onright>1</onright>
      ... more controls go here ...
</control>
</control>
</source>
</xml>
=== Available Tags ===
 
In addition to the [[Default Control Tags]] the following tags are available. Note that each tag is '''lower case''' only. This is important, as xml tags are case-sensitive.
===Available Tags===
{| class="wikitable"
In addition to the [[Default Control Tags]] the following tags are available. Note that each tag is '''lower case''' only. This is important, as xml tags are case-sensitive.
|-  
{| class="dtable"
| '''texturesliderbackground'''
|- class="userrow"
|  
| class="usercell" | '''itemgap'''
Specifies the image file which should be displayed in the background of the scroll bar control. [[Texture Attributes|See here for additional information about textures.]]
| class="usercell" | Specifies the gap (in pixels) between controls in the list.
|-  
|- class="userrow"
| '''texturesliderbar'''
| class="usercell" | '''orientation'''
| Specifies the image file which should be displayed for the scroll barAs the size of the scroll bar is dynamic, it is often useful to [[Texture Attributes|use the border attribute of this texture.]]
| class="usercell" | Specifies whether the list is horizontal or verticalDefaults to vertical.
|-  
|- class="userrow"
| '''texturesliderbarfocus'''
| class="usercell" | '''pagecontrol'''
| Specifies the image file which should be displayed for the scroll bar when it has focus.
| class="usercell" | Specifies the page control used to scroll up and down the listSet the page control's id here.
|-
|- class="userrow"
|  '''textureslidernib'''
| class="usercell" | '''scrolltime'''
|  Specifies the image file which should be displayed for the scroll bar nibThe nib is always centered within the scroll bar.
| class="usercell" | The time (in ms) to scroll from one item to anotherBy default, this is 200msThe list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling.
|-  
|- class="userrow"
| '''textureslidernibfocus'''
| class="usercell" | '''usecontrolcoords'''
| Specifies the image file which should be displayed for the scroll bar nib when it has focus.  The nib is always centered within the scroll bar.
| class="usercell" | Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control.  Defaults to false.  Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.
|-
| '''orientation'''
|  Specifies whether this scrollbar is horizontal or verticalDefaults to vertical.
|-  
| '''showonepage'''
| Specifies whether the scrollbar will show if the container it's controlling has just one page.  Defaults to true.
|}
|}
=== Adding Up and Down buttons above and below a scrollbar ===
[[category:Skin Development]]
To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <onclick> tag to
<source lang="xml">
<onclick>pageup(id)</onclick>
</source>
or
<source lang="xml">
<onclick>pagedown(id)</onclick>
</source>
where id is the id of this scroll bar.
 
== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]
 
[[Category:Skin Development]]

Revision as of 00:32, 9 November 2009

The group list control is a special case of the group control. It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).

Example

<xml> <control type="grouplist" id="17">

     <description>My first group list control</description>
     <posx>80</posx>
     <posy>60</posy>
     <width>250</width>
     <height>300</height>
     <itemgap>10</itemgap>
     <pagecontrol>25</pagecontrol>
     <scrolltime>200</scrolltime>
     <orientation>vertical</orientation>
     <usecontrolcoords>false</usecontrolcoords>
     <visible>true</visible>
     <onup>2</onup>
     <ondown>3</ondown>
     <onleft>1</onleft>
     <onright>1</onright>
     ... more controls go here ...

</control> </xml>

Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

itemgap Specifies the gap (in pixels) between controls in the list.
orientation Specifies whether the list is horizontal or vertical. Defaults to vertical.
pagecontrol Specifies the page control used to scroll up and down the list. Set the page control's id here.
scrolltime The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling.
usecontrolcoords Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control. Defaults to false. Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.