Group Control - Revision history

Ronie at 12:33, 9 April 2016

2016-04-09T12:33:28Z

← Older revision		Revision as of 12:33, 9 April 2016
Line 1:		Line 1:
			<section begin="main content" />
	The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.		The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.
	=== Example ===		=== Example ===
Line 58:		Line 59:
	</syntaxhighlight>		</syntaxhighlight>
	All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.		All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.
			<section end="main content" />

	== See also ==		== See also ==

Ronie at 12:16, 9 April 2016

2016-04-09T12:16:50Z

← Older revision		Revision as of 12:16, 9 April 2016
Line 4:		Line 4:
	<control type="group" id="17">		<control type="group" id="17">
	<description>My first group control</description>		<description>My first group control</description>
	<~~posx~~>80</~~posx~~>		<left>80</left>
	<~~posy~~>60</~~posy~~>		<top>60</top>
	<width>250</width>		<width>250</width>
	<height>30</height>		<height>30</height>
Line 27:		Line 27:

	=== Notes on positioning of controls within groups ===		=== Notes on positioning of controls within groups ===
	All controls within a group take their positions relative to the group's placement. Thus, the group always requires its <~~posx~~>, <~~posy~~>, <width>, and <height> attributes to be defined. As this can be a pain to remember, anything that you don't specify will be inherited from it's parent group (or the main window).		All controls within a group take their positions relative to the group's placement. Thus, the group always requires its <left>, <top>, <width>, and <height> attributes to be defined. As this can be a pain to remember, anything that you don't specify will be inherited from it's parent group (or the main window).

	By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have		By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have
	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
	<control type="group" id="15">		<control type="group" id="15">
	<~~posx~~>30</~~posx~~>		<left>30</left>
	<~~posy~~>70</~~posy~~>		<top>70</top>
	<width>400</width>		<width>400</width>
	... more controls go here ...		... more controls go here ...
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight>
	so that the <height> hasn't been defined. Then Kodi will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <~~posy~~> amount.		so that the <height> hasn't been defined. Then Kodi will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <top> amount.

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <~~posx~~> and <~~posy~~> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <left> and <top> fields
	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
	<control type="group" id="20">		<control type="group" id="20">
	<control type="button" id=2>		<control type="button" id=2>
	<~~posx~~>180r</~~posx~~>		<left>180r</left>
	<width>180</width>		<width>180</width>
	</control>		</control>
	<control type="button" id=3>		<control type="button" id=3>
	<~~posx~~>180r</~~posx~~>		<left>180r</left>
	<width>180</width>		<width>180</width>
	</control>		</control>
	<control type="button" id=4>		<control type="button" id=4>
	<~~posx~~>180r</~~posx~~>		<left>180r</left>
	<width>180</width>		<width>180</width>
	</control>		</control>

NedBot: Bot: Automated text replacement (- XBMC + Kodi )

2015-05-04T08:37:05Z

Bot: Automated text replacement (- XBMC + Kodi )

← Older revision		Revision as of 08:37, 4 May 2015
Line 38:		Line 38:
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight>
	so that the <height> hasn't been defined. Then ~~XBMC~~ will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.		so that the <height> hasn't been defined. Then Kodi will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields

NedBot: Robot: Substituting template: Name

2014-06-05T20:14:02Z

Robot: Substituting template: Name

← Older revision		Revision as of 20:14, 5 June 2014
Line 38:		Line 38:
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight>
	so that the <height> hasn't been defined. Then ~~{{name}}~~ will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.		so that the <height> hasn't been defined. Then XBMC will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields

NedBot: Bot: Automated text replacement (- XBMC + {{name}} )

2014-06-05T01:05:21Z

Bot: Automated text replacement (- XBMC + {{name}} )

← Older revision		Revision as of 01:05, 5 June 2014
Line 38:		Line 38:
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight>
	so that the <height> hasn't been defined. Then ~~XBMC~~ will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.		so that the <height> hasn't been defined. Then {{name}} will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields

NedBot: Robot: Changing Category:Skin Development to Category:Skin development

2014-04-23T19:01:31Z

Robot: Changing Category:Skin Development to Category:Skin development

← Older revision		Revision as of 19:01, 23 April 2014
Line 64:		Line 64:
	* [[Skinning]]		* [[Skinning]]

	[[Category:Skin ~~Development~~]]		[[Category:Skin development]]

NedBot: Bot: automated adding of 'enclose="div"' to syntaxhighlight

2014-03-14T06:43:43Z

Bot: automated adding of 'enclose="div"' to syntaxhighlight

← Older revision		Revision as of 06:43, 14 March 2014
Line 1:		Line 1:
	The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.		The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.
	=== Example ===		=== Example ===
	<syntaxhighlight lang="xml">		<syntaxhighlight lang="xml" enclose="div">
	<control type="group" id="17">		<control type="group" id="17">
	<description>My first group control</description>		<description>My first group control</description>
Line 30:		Line 30:

	By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have		By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have
	<syntaxhighlight lang="xml">		<syntaxhighlight lang="xml" enclose="div">
	<control type="group" id="15">		<control type="group" id="15">
	<posx>30</posx>		<posx>30</posx>
Line 41:		Line 41:

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields
	<syntaxhighlight lang="xml">		<syntaxhighlight lang="xml" enclose="div">
	<control type="group" id="20">		<control type="group" id="20">
	<control type="button" id=2>		<control type="button" id=2>

Ned Scott: /* Available tags */

2014-03-14T06:30:25Z

Available tags

← Older revision		Revision as of 06:30, 14 March 2014
Line 20:		Line 20:
	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.		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="prettytable"		{\| class="prettytable"
			! Tag !! Description
	\|-		\|-
	\| '''defaultcontrol'''		\| '''defaultcontrol'''
	\| Specifies the default control that will be focused within the group when the group receives focus. Note that the group remembers it's previously focused item and will return to it.		\| Specifies the default control that will be focused within the group when the group receives focus. Note that the group remembers it's previously focused item and will return to it.
	\|}		\|}

	=== Notes on positioning of controls within groups ===		=== Notes on positioning of controls within groups ===
	All controls within a group take their positions relative to the group's placement. Thus, the group always requires its <posx>, <posy>, <width>, and <height> attributes to be defined. As this can be a pain to remember, anything that you don't specify will be inherited from it's parent group (or the main window).		All controls within a group take their positions relative to the group's placement. Thus, the group always requires its <posx>, <posy>, <width>, and <height> attributes to be defined. As this can be a pain to remember, anything that you don't specify will be inherited from it's parent group (or the main window).

NedBot: Bot: Automated text replacement (-class="wikitable" +class="prettytable" & -Available Tags +Available tags & - +)

2014-03-14T05:51:30Z

Bot: Automated text replacement (-class="wikitable" +class="prettytable" & -Available Tags +Available tags & -<source +<syntaxhighlight & -</source> +</syntaxhighlight>)

← Older revision		Revision as of 05:51, 14 March 2014
Line 1:		Line 1:
	The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.		The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.
	=== Example ===		=== Example ===
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<control type="group" id="17">		<control type="group" id="17">
	<description>My first group control</description>		<description>My first group control</description>
Line 16:		Line 16:
	... more controls go here ...		... more controls go here ...
	</control>		</control>
	</~~source~~>		</syntaxhighlight>
	=== Available ~~Tags~~ ===		=== 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.		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="prettytable"		{\| class="prettytable"
Line 28:		Line 28:

	By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have		By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<control type="group" id="15">		<control type="group" id="15">
	<posx>30</posx>		<posx>30</posx>
Line 35:		Line 35:
	... more controls go here ...		... more controls go here ...
	</control>		</control>
	</~~source~~>		</syntaxhighlight>
	so that the <height> hasn't been defined. Then XBMC will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.		so that the <height> hasn't been defined. Then XBMC will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <posy> amount.

	You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields		You can align controls within a group to the right edge of the group, by using the "r" modifier to the <posx> and <posy> fields
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<control type="group" id="20">		<control type="group" id="20">
	<control type="button" id=2>		<control type="button" id=2>
Line 54:		Line 54:
	</control>		</control>
	</control>		</control>
	</~~source~~>		</syntaxhighlight>
	All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.		All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.

NedBot: prettytable

2014-03-14T05:35:03Z

prettytable

← Older revision		Revision as of 05:35, 14 March 2014
Line 19:		Line 19:
	=== Available Tags ===		=== 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.		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="~~wikitable~~"		{\| class="prettytable"
	\|-		\|-
	\| '''defaultcontrol'''		\| '''defaultcontrol'''