VDJPedia



 Skin Group

Back to Skin SDK

Skin SDK: The <group> element


Availability: v8.0 onwards

The group elements allows you to group elements together. What is great about this is you can add position properties to everything in the whole group easily. This is great for defining the left and right decks for example.

Parameters:

  • name : the name of the group
  • x : the x offset of the group
  • name : the y offset of the group

Children: Other elements can be contained within a group

Example:
<group name="leftdeck">
<deck deck="left">
<button action....>
<pos x="100" y="100"/>
....
</button>
<slider action....>
<pos x="200" y="200"/>
....
</slider>
</deck>
</group>


Example 2:
<group name="leftdeck" x="+0" y="+0">
<deck deck="left">
<button action....>
<pos x="+100" y="+100"/>
....
</button>
<slider action....>
<pos x="+200" y="+200"/>
....
</slider>
</deck>
</group>


In this second example the group is for the left deck. Notice the "+" before the <pos> values. This makes them dynamic values and they will add the values specified in the <group> header. So in this case the group will be placed in exactly the same place as above.

Example 3:
<group name="rightdeck" x="+500" y="+0">
<deck deck="right">
<button action....>
<pos x="+100" y="+100"/>
....
</button>
<slider action....>
<pos x="+200" y="+200"/>
....
</slider>
</deck>
</group>


But notice in this third example for the right deck, the <group> is applying an additional 500 pixels on the X axis meaning the whole group will shift right on the screen. The only other part of the code inside the group that has been changed is the <deck> element. everything else is exactly the same. This makes writing the deck elements very quick, especially when you include the <define> elements also.

Note: There is no limit to the number of groups you can have. You can also put <group> inside of another <group>.




Back to Skin SDK