Skinning engine improvements

[Smirnuff]

Hi Guys -

We've added the ability to import/include files into the skin markup files, the idea being to move all the common markup into smaller and easier to manage files in the hope that we can minimize the amount of work skinners are required to do to offer new skins and to make it easier for the maintainers to do their job.

The syntax is pretty straightforward, the following would be a typical example of how this new feature could be used:

<window>
	<id>6</id>
	<defaultcontrol>2</defaultcontrol>
	<allowoverlay>yes</allowoverlay>

	
	<define>#header.label:134</define>
	<define>#header.image:videos_logo.png</define>
	<define>#header.hover:hover_my videos.png</define>

	<controls>

		
		<import>common.window.xml</import>

		<control>
			<type>group</type>
			<description>group element</description>
			<animation>FlyInFromLeft</animation>
			<control>
				<description>View-As button</description>
				<type>button</type>
				<id>2</id>
				<posX>60</posX>
				<posY>97</posY>
				<label>100</label>
			</control>
	...
	...
	...
</window>

In order to realize the full benefits from import/include files we also had to add the <define> tag. The tag allows a basic form of parameter to be used so that the imported files can be as generic as possible. A define tag's value is a simple name - value pairing:

<define>name:value</define>

<define>#header.label:No name</define>
<define>#header.label:34</define>

Any occurance of the token represented by the define's name will be replaced with the appropriate value in any imported markup.

The following is an example of how an imported file could look:

<window>
	<controls>
		<control>
			<description>BG</description>
			<type>image</type>
			<id>1</id>
			<posX>0</posX>
			<posY>0</posY>
			<width>720</width>
			<height>576</height>
			<texture>background.png</texture>
		</control>
		<control>
			<type>image</type>
			<id>1</id>
			<posX>60</posX>
			<posY>20</posY>
			<texture>#header.image</texture>
		</control>
		<control>
			<type>label</type>
			<id>1</id>
			<posX>250</posX>
			<posY>70</posY>
			<label>#header.label</label>
			<font>font16</font>
			<align>right</align>
			<textcolor>ffffffff</textcolor>
		</control>
		<control>
			<description>Number of Files Label</description>
			<type>label</type>
			<id>1</id>
			<posX>260</posX>
			<posY>530</posY>
			<label>#itemcount</label>
			<align>left</align>
			<textcolor>ffffffff</textcolor>
		</control>
		<control>
			<description>Selected item Label</description>
			<type>fadelabel</type>
			<id>1</id>
			<posX>660</posX>
			<posY>70</posY>
			<width>400</width>
			<label>#selecteditem</label>
			<font>font14</font>
			<align>right</align>
			<textcolor>ffffffff</textcolor>
		</control>
		<control>
			<type>image</type>
			<id>1</id>
			<posX>75</posX>
			<posY>370</posY>
			<texture>#header.hover</texture>
		</control>		
	</controls>
</window>

These new features are not in the 0.1.3.0 release but will be available in the next CVS build or two.

Cheers,
Smirnoff.

[Smirnuff]

We have also updated the skinning engine to allow the use of named colours, the color names are based upon the standard HTML palette as specified by the W3C:

Click to see color names.

The skinning engine still accepts numeric values, particularly useful if you want to specify a non-default alpha value. Examples of how to use are as follows:

<textcolor>White</textcolor>

<textcolor>#20FFFFFF</textcolor>

<textcolor>#330099</textcolor>

<textcolor>Gainsboro</textcolor>


<textcolor>White:#60</textcolor>


<textcolor>White:96</textcolor>

So far this support covers the following markup tags:

<textcolor/>
<colorkey/>
<colordiffuse/>

We'd be greatful if you could start using # to signify that its a non-named color, there is currently code to handle this but it would be nice to remove this workaround.

[Smirnuff]

Layout managers are a really neat and simple way to create some really complex layouts that you would not normally be able to support without having to write line after line of code.

Those with a Java background will most likely be familiar with the most common ones, StackLayout, GridLayout and BorderLayout for instance.

Well the good news is that we are starting to implement layout managers in MP. A StackLayout and GridLayout have been added to CVS today and as time allows more will be added with the aim of reducing the complexity of the skin markup files, with the ultimate aim of having markup with next to no coordinate requirements and automagic scaling capabilities.

more info about the two supported layouts will when time permits but in the meantime feel free to search google for 'stacklayout' and 'gridlayout'.

For the time being only group controls will be able to utilize layout managers and to do so you must use the <layout> tag as follows:

	<control>
		<type>group</type>
		<layout>StackLayout(20)</layout>
		<posX>60</posX>
		<posY>97</posY>

		...
		...
		...
	</control>

A stack layout can be declared as follows:

	
	<layout>StackLayout</layout>

	
	<layout>StackLayout(10)</layout>

	
	<layout>StackLayout(2, Horizontal)</layout>

To use a grid layout you can declare the layout as:

	
	<layout>GridLayout</layout>

	
	<layout>GridLayout(4)</layout>

	
	<layout>GridLayout(0, 6)</layout>

	
	<layout>GridLayout(3, 0, 10, 15)</layout>

	
	<layout>GridLayout(3, 0, 10, 15, Vertical)</layout>

to be continued...

[mbuzina]

Originally Posted by Smirnuff

To use a grid layout you can declare the layout as:

Some ideas for additions to the grid layout (for me almost the "only" possible layout):

• Allow controls to span more than 1 row / column
  Allow controls to specify if they like to grow horizontally / vertical or if they want to stay their size
  Add an option to merge "grid in grid". E.g. your outer grid is 5/5 and in cell 2/2 you have a grid (2x2) and you select this to span 2 rows & 2 columns the result of the merge would be everything fitted to your original 5x5 grid.

Just my 2 cents worth of ideas (you told me so :wink: )

[tomtom21000]

Nice Animation of the MP-Logo in CVS from today (14:22); B2 skin.

Great. tomtom

[Smirnuff]

Hehe that is courtesy of Harley .

[Raven]

Is there a way to have each cell automatically size according to its content? The result I'm after is to have two labels directly after each other in a horizontal grid. I cannot specify the space between the columns since it will change according to the length of the label. Perhaps I have just missed the obvious but I can't get it to work the way I want.