Panel Container - Revision history

RogueScholar: Update wikilink targets broken during archiving and refresh page style

2022-09-11T01:57:34Z

Update wikilink targets broken during archiving and refresh page style

← Older revision		Revision as of 01:57, 11 September 2022
Line 1:		Line 1:
			:{{See also\|Add-on development\|Skinning}}
	<section begin="main content" />		<section begin="main content" />
	The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.		The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.
	=== Example ===
	<~~syntaxhighlight lang~~="~~XML~~" ~~enclose~~="~~div~~">		== Example ==
			<div style="font-size: 1.06em; margin-left: 2.5em; max-width: 60vmax;"><syntaxhighlight lang="xml">
	<control type="panel" id="52">		<control type="panel" id="52">
	<left>190</left>		<left>190</left>
Line 80:		Line 82:
	</focusedlayout>		</focusedlayout>
	</control>		</control>
	</syntaxhighlight>		</syntaxhighlight></div>

	=== 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 also available. Note that each tag is <span style="font-weight: bold; text-decoration: underline;">lower case</span> only. This is important, as XML tags are case-sensitive.

	{\| class="prettytable"		{\| class="prettytable"
	! Tag !! Description		\|+ Available tags
	\|-		! scope="col" \| Tag
	\| ~~'''~~viewtype~~'''~~		! scope="col" \| Description
	\| The type of view~~. Choices~~ are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. ~~''viewtype''~~ has no effect on the view itself~~. It~~ is used by ~~kodi~~ when switching ~~skin~~ to automatically select a view with a similar layout~~. Skinners~~ should try to set ~~''viewtype''~~ to describe the layout ~~as best as possible~~.		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><viewtype label="">…</viewtype></syntaxhighlight>
	\| ~~'''~~orientation~~'''~~		\| style="padding: 0.4em 1em;" \| The type of view, valid values are: <code>list</code>, <code>icon</code>, <code>wide</code>, <code>wrap</code>, <code>biglist</code>, <code>bigicon</code>, <code>bigwide</code>, <code>bigwrap</code>, <code>info</code> and <code>biginfo</code>. The <code>label</code> attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. This tag has no effect on the view itself, it is simply used by {{Kodi}} when switching skins to automatically select a view with a similar layout; skinners should try to set it to best describe the layout provided.
	\| The orientation of the panel~~. Defaults~~ to vertical.		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><orientation>…</orientation></syntaxhighlight>
	\| ~~'''~~pagecontrol~~'''~~		\| style="padding: 0.4em 1em;" \| The orientation of the panel, defaults to <code>vertical</code>.
	\| Used to set the <id> of the page control used to control ~~this~~ panel.		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><pagecontrol>…</pagecontrol></syntaxhighlight>
	\| ~~'''~~scrolltime~~'''~~		\| style="padding: 0.4em 1em;" \| Used to set the <code>id</code> of the page control used to control that panel.
	\| The time (in ms) to scroll from one item to another~~. By~~ default, this is 200ms. The panel will scroll smoothly from one item to another as needed~~. Set~~ it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available [[Tweeners\|tween]] ~~methods~~.		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><scrolltime tween="" easing="">…</scrolltime></syntaxhighlight>
	\| '''~~itemlayout~~'''		\| style="padding: 0.4em 1em;" \| The time (in ms) to scroll from one item to another, by default this is 200ms. The panel will scroll smoothly from one item to another as needed; set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available '''[[Tweeners\|tween methods]]'''.
	~~\| Specifies the layout of items in~~ the list~~. Requires~~ both width and height attributes set. ~~The <itemlayout> then contains~~ as many label and image controls as ~~required. [[Container Item Layout\|See here for more information~~.]]		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><itemlayout height="" width="">…</itemlayout></syntaxhighlight>
	\| '''~~focusedlayout~~'''		\| style="padding: 0.4em 1em;" \| Specifies the '''[[Container Item Layout\|container item layout]]''' for the list, and requires both the <code>width</code> and <code>height</code> attributes to be set. It will contain as many label and image controls as needed.
	~~\| Specifies the layout of~~ items in the list ~~that have focus. Requires~~ both width and height attributes set. ~~The <focusedlayout> then contains~~ as many label and image controls as ~~required. [[Container Item Layout\|See here for more information~~.]]		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><focusedlayout height="" width="">…</focusedlayout></syntaxhighlight>
	\| '''content'''		\| style="padding: 0.4em 1em;" \| Specifies the '''[[Container Item Layout\|container item layout]]''' for items that have focus in the list, and requires both the <code>width</code> and <code>height</code> attributes to be set. It will contain as many label and image controls as needed.
	~~\| Used to set~~ the ~~item content that this~~ panel will contain~~. Allows~~ the skinner to ~~setup~~ a panel anywhere they want with a static set of content, as a useful ~~alternative~~ to the grouplist control. ~~[[Static List Content\|See here for more information]]~~		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><content>…</content></syntaxhighlight>
	\| ~~'''~~preloaditems~~'''~~		\| style="padding: 0.4em 1em;" \| Used to set the '''[[Static List Content\|static list content]]''' that the panel will contain, allowing the skinner to create a panel anywhere they want with a static set of content, as a useful counterpart to the <code>grouplist</code> control.
	\| Used in association with the ~~background image loader.~~ [[Background Image Loader\|~~See here for more information~~]]		\|-
	\|-		! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><preloaditems>…</preloaditems></syntaxhighlight>
	\| ~~'''~~autoscroll~~'''~~		\| style="padding: 0.4em 1em;" \| Used in association with the '''[[Archive:Background Image Loader\|background image loader]]'''.
	\| Used to make the container scroll automatically		\|-
			! scope="row" style="padding: 0.4em 1em; white-space: nowrap;" \| <syntaxhighlight lang="xml" inline><autoscroll>…</autoscroll></syntaxhighlight>
			\| style="padding: 0.4em 1em;" \| Used to make the container scroll automatically, accepts the boolean values of either <code>true</code> or <code>false</code>.
	\|}		\|}

	<section end="main content" />		<section end="main content" />

	~~== See also ==~~
	~~'''Development:'''~~
	* [[Add-on development]]
	* [[Skinning]]

	[[Category:Skin development]]		[[Category:Skin development]]

Gade: /* Available tags */

2022-04-14T00:51:11Z

Available tags

← Older revision		Revision as of 00:51, 14 April 2022
Line 89:		Line 89:
	\|-		\|-
	\| '''viewtype'''		\| '''viewtype'''
	\| The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.~~xml~~. ''viewtype'' has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set ''viewtype'' to describe the layout as best as possible.		\| The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. ''viewtype'' has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set ''viewtype'' to describe the layout as best as possible.
	\|-		\|-
	\| '''orientation'''		\| '''orientation'''

Ronie: /* Example */

2019-03-05T18:21:46Z

Example

← Older revision		Revision as of 18:21, 5 March 2019
Line 17:		Line 17:
	<pagecontrol>60</pagecontrol>		<pagecontrol>60</pagecontrol>
	<include>contentpanelslide</include>		<include>contentpanelslide</include>
	<itemlayout height="~~141~~" width="120">		<itemlayout height="150" width="120">
	<control type="image">		<control type="image">
	<left>10</left>		<left>10</left>
Line 33:		Line 33:
	</control>		</control>
	<control type="label">		<control type="label">
	<left>60</left>		<left>0</left>
	<top>115</top>		<top>115</top>
	<width>110</width>		<width>110</width>
Line 43:		Line 43:
	</control>		</control>
	</itemlayout>		</itemlayout>
	<focusedlayout height="~~141~~" width="120">		<focusedlayout height="150" width="120">
	<control type="image">		<control type="image">
	<width>110</width>		<width>110</width>
Line 69:		Line 69:
	</control>		</control>
	<control type="label">		<control type="label">
	<left>60</left>		<left>0</left>
	<top>120</top>		<top>120</top>
	<width>110</width>		<width>110</width>

Ronie at 20:55, 22 February 2019

2019-02-22T20:55:44Z

← Older revision		Revision as of 20:55, 22 February 2019
Line 23:		Line 23:
	<width>100</width>		<width>100</width>
	<height>100</height>		<height>100</height>
	<~~info~~>ListItem.Icon</~~info~~>		<texture>$INFO[ListItem.Icon]</texture>
	</control>		</control>
	<control type="image">		<control type="image">
Line 30:		Line 30:
	<width>32</width>		<width>32</width>
	<height>32</height>		<height>32</height>
	<~~info~~>ListItem.Overlay</~~info~~>		<texture>$INFO[ListItem.Overlay]</texture>
	</control>		</control>
	<control type="label">		<control type="label">
Line 40:		Line 40:
	<selectedcolor>green</selectedcolor>		<selectedcolor>green</selectedcolor>
	<align>center</align>		<align>center</align>
	<~~info~~>ListItem.Label</~~info~~>		<label>$INFO[ListItem.Label]</label>
	</control>		</control>
	</itemlayout>		</itemlayout>
Line 57:		Line 57:
	<width>100</width>		<width>100</width>
	<height>100</height>		<height>100</height>
	<~~info~~>ListItem.Icon</~~info~~>		<texture>$INFO[ListItem.Icon]</texture>
	<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>		<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
	</control>		</control>
Line 65:		Line 65:
	<width>32</width>		<width>32</width>
	<height>32</height>		<height>32</height>
	<~~info~~>ListItem.Overlay</~~info~~>		<texture>$INFO[ListItem.Overlay]</texture>
	<animation effect="slide" end="5,5" time="100">focus</animation>		<animation effect="slide" end="5,5" time="100">focus</animation>
	</control>		</control>
Line 76:		Line 76:
	<selectedcolor>green</selectedcolor>		<selectedcolor>green</selectedcolor>
	<align>center</align>		<align>center</align>
	<~~info~~>ListItem.Label</~~info~~>		<label>$INFO[ListItem.Label]</label>
	</control>		</control>
	</focusedlayout>		</focusedlayout>

Ronie: /* Example */

2016-04-09T12:10:10Z

Example

← Older revision		Revision as of 12:10, 9 April 2016
Line 4:		Line 4:
	<syntaxhighlight lang="XML" enclose="div">		<syntaxhighlight lang="XML" enclose="div">
	<control type="panel" id="52">		<control type="panel" id="52">
	<~~posx~~>190</~~posx~~>		<left>190</left>
	<~~posy~~>100</~~posy~~>		<top>100</top>
	<width>485</width>		<width>485</width>
	<height>425</height>		<height>425</height>
Line 19:		Line 19:
	<itemlayout height="141" width="120">		<itemlayout height="141" width="120">
	<control type="image">		<control type="image">
	<~~posx~~>10</~~posx~~>		<left>10</left>
	<~~posy~~>10</~~posy~~>		<top>10</top>
	<width>100</width>		<width>100</width>
	<height>100</height>		<height>100</height>
Line 26:		Line 26:
	</control>		</control>
	<control type="image">		<control type="image">
	<~~posx~~>80</~~posx~~>		<left>80</left>
	<~~posy~~>75</~~posy~~>		<top>75</top>
	<width>32</width>		<width>32</width>
	<height>32</height>		<height>32</height>
Line 33:		Line 33:
	</control>		</control>
	<control type="label">		<control type="label">
	<~~posx~~>60</~~posx~~>		<left>60</left>
	<~~posy~~>115</~~posy~~>		<top>115</top>
	<width>110</width>		<width>110</width>
	<height>22</height>		<height>22</height>
Line 47:		Line 47:
	<width>110</width>		<width>110</width>
	<height>110</height>		<height>110</height>
	<~~posx~~>5</~~posx~~>		<left>5</left>
	<~~posy~~>5</~~posy~~>		<top>5</top>
	<texture>folder-focus.png</texture>		<texture>folder-focus.png</texture>
	<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>		<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
	</control>		</control>
	<control type="image">		<control type="image">
	<~~posx~~>10</~~posx~~>		<left>10</left>
	<~~posy~~>10</~~posy~~>		<top>10</top>
	<width>100</width>		<width>100</width>
	<height>100</height>		<height>100</height>
Line 61:		Line 61:
	</control>		</control>
	<control type="image">		<control type="image">
	<~~posx~~>80</~~posx~~>		<left>80</left>
	<~~posy~~>75</~~posy~~>		<top>75</top>
	<width>32</width>		<width>32</width>
	<height>32</height>		<height>32</height>
Line 69:		Line 69:
	</control>		</control>
	<control type="label">		<control type="label">
	<~~posx~~>60</~~posx~~>		<left>60</left>
	<~~posy~~>120</~~posy~~>		<top>120</top>
	<width>110</width>		<width>110</width>
	<height>22</height>		<height>22</height>

Pbureau: /* Available tags */

2015-04-06T07:26:47Z

Available tags

← Older revision		Revision as of 07:26, 6 April 2015
Line 89:		Line 89:
	\|-		\|-
	\| '''viewtype'''		\| '''viewtype'''
	\| The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml.		\| The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.xml. ''viewtype'' has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set ''viewtype'' to describe the layout as best as possible.
	\|-		\|-
	\| '''orientation'''		\| '''orientation'''
Line 117:		Line 117:

	<section end="main content" />		<section end="main content" />

	== See also ==		== See also ==
	'''Development:'''		'''Development:'''

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

2014-04-23T19:02:22Z

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

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

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

NedBot: Bot: Automated text replacement (-enclose="DIV" +enclose="div")

2014-04-23T18:45:26Z

Bot: Automated text replacement (-enclose="DIV" +enclose="div")

← Older revision		Revision as of 18:45, 23 April 2014
Line 2:		Line 2:
	The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.		The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.
	=== Example ===		=== Example ===
	<syntaxhighlight lang="XML" enclose="~~DIV~~">		<syntaxhighlight lang="XML" enclose="div">
	<control type="panel" id="52">		<control type="panel" id="52">
	<posx>190</posx>		<posx>190</posx>

NedBot: prettytable

2014-03-14T05:39:46Z

prettytable

← Older revision		Revision as of 05:39, 14 March 2014
Line 85:		Line 85:
	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"
	! Tag !! Description		! Tag !! Description
	\|-		\|-

Ned Scott: formatting

2014-03-12T09:36:47Z

formatting

← Older revision		Revision as of 09:36, 12 March 2014
Line 2:		Line 2:
	The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.		The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.
	=== Example ===		=== Example ===
	<~~source~~ lang="~~xml~~">		<syntaxhighlight lang="XML" enclose="DIV">
	<control type="panel" id="52">		<control type="panel" id="52">
	<posx>190</posx>		<posx>190</posx>
Line 80:		Line 80:
	</focusedlayout>		</focusedlayout>
	</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="wikitable"		{\| class="wikitable"
			! Tag !! Description
	\|-		\|-
	\| '''viewtype'''		\| '''viewtype'''