Group Control

From DevWiki

Jump to: navigation, search

Applications,Boxee GUI API,Controls

Contents


Overview

Group controls are a very important control which helps organize the application window and make navigation easier. It allows to group controls together and apply position and visibility properties to all of them at once. It helps control navigation inside the window as it remembers the last navigated control in the group allowing to always return to the last focused control in the group.


Example

  1. <control type="group" id="9000">
  2.  <posx>80</posx>
  3.  <posy>60</posy>
  4.  <width>250</width>
  5.  <height>30</height>
  6.  <defaultcontrol>9002</defaultcontrol>
  7.  <onup>8000</onup>
  8.  <ondown>7000</ondown>
  9.  <onleft>-</onleft>
  10.  <onright>-</onright>
  11.  <control type="image">
  12.    ...
  13.  </control>
  14.  <control type="button" id="9001">
  15.    ...
  16.  </control>
  17.  <control type="button" id="9002">
  18.    ...
  19.  </control>
  20.  <control type="list" id="9003">
  21.    ...
  22.  </control>
  23. </control>


Available Tags

In addition to the Default Control Properties the following tags are available. Note that all XML tags are in lower case.

Element Description Required
defaultcontrol Sets the default control that will be focused within the group when the group receives focus. The group remembers it's previously focused item and will return to it. No


Positioning

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).

By way of example, consider the first group within a 720p full screen window (1280x720), and suppose we have

  1. <control type="group" id="15">
  2.   <posx>30</posx>
  3.   <posy>70</posy>
  4.   <width>400</width>
  5.   ... more controls go here ...
  6. </control>

So that the <height> hasn't been defined. Then Boxee will automatically set the <height> equal to 650 by inheriting this from the window's height of 720, 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

  1. <control type="group" id="20">
  2.   <control type="button" id=2>
  3.     <posx>180r</posx>
  4.     <width>180</width>
  5.   </control>
  6.   <control type="button" id=3>
  7.     <posx>180r</posx>
  8.     <width>180</width>
  9.   </control>
  10.   <control type="button" id=4>
  11.     <posx>180r</posx>
  12.     <width>180</width>
  13.   </control>
  14. </control>

All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox