| | 1 | [wiki:Documentation] | [wiki:ApplicationDefinition] | [wiki:ApplicationDefinition/WidgetSet WidgetSet] |
| | 2 | |
| | 3 | = Container = |
| | 4 | |
| | 5 | A Container in a [wiki:ApplicationDefinition/WidgetSet WidgetSet] defines a container for [wiki:ApplicationDefinition/WidgetSet/Widget Widgets]. There are currently three different types of containers, Toolbar, ContextMenu and Splitterbar. |
| | 6 | |
| | 7 | A [wiki:ApplicationDefinition/WidgetSet WidgetSet] may specify zero or more Containers. |
| | 8 | |
| | 9 | Containers are provided as a convenience for creating user interface elements that are displayed as a toolbar of buttons, menus and split containers. |
| | 10 | A Container contains the following sub-tags: |
| | 11 | |
| | 12 | * Name. '''Required'''. This is the HTML id of an element (typically a DIV) that the Toolbar is to be created within. More than one Toolbar can be assigned to the same container. |
| | 13 | * Type. '''Required'''. This is the type of the Container and must be one of: |
| | 14 | * '''Toolbar'''. A horizontally or vertically oriented toolbar intended to contain buttons that activate widgets. |
| | 15 | * '''ContextMenu'''. A menu that can be associated with widgets that have menus. Currently this is the [wiki:ApplicationDefinition/WidgetSet/MapWidget MapWidget] and the !TaskPane widget. |
| | 16 | * '''Splitterbar'''. A horizontally oriented container that is split into sub containers to hold each of the Items in the container. The sub containers are initially spaced equally in the available space, and the size of the containers can be changed by the user by dragging a small vertical bar between each of the containers. |
| | 17 | * Position. '''Optional'''. For Toolbar containers, this specifies the orientation of the toolbar. It can be one of the following: |
| | 18 | * '''top'''. The toolbar is oriented horizontally and menu items open down. |
| | 19 | * '''bottom'''. The toolbar is oriented horizontally and menu items open up. |
| | 20 | * '''left'''. The toolbar is oriented vertically and menu items open to the right. |
| | 21 | * '''right'''. The toolbar is oriented vertically and menu items open to the left. |
| | 22 | * Item. '''Optional'''. The Item tags define what goes in the container. The Item tag is described in the next section. |
| | 23 | |
| | 24 | == Item === |
| | 25 | |
| | 26 | An Item tag contains at least one sub tag, Function, which defines what the item is. The valid values for Function are: |
| | 27 | |
| | 28 | * Separator |
| | 29 | * Widget |
| | 30 | * Flyout |
| | 31 | |
| | 32 | === Separator === |
| | 33 | |
| | 34 | A Separator Item has no other tags and defines a visual separator in a Toolbar or Menu. |
| | 35 | |
| | 36 | === Widget === |
| | 37 | |
| | 38 | A Widget Item has one other sub tag, Widget, which identifies a Widget to be placed in the Container. The value of the Widget tag is matched with the Widget's Name tag. |
| | 39 | |
| | 40 | === Flyout === |
| | 41 | |
| | 42 | A Flyout represents a menu or sub menu. A Flyout may contain another Flyout Item. A Flyout Item has several sub tags and contains any number of Item tags. : |
| | 43 | |
| | 44 | * Label. This is the label placed in the button that triggers the menu to open. |
| | 45 | * Tooltip. This is displayed as a tooltip when the user hovers the mouse over the menu button. |
| | 46 | * ImageUrl. This is a URL to an image to place in the button that opens the menu |
| | 47 | * ImageClass. This is a CSS class name to put on the Image. This is typically left blank as buttons can be styled in other ways. |
| | 48 | * Item. This can occur many times and contain any valid Item tag. |
| | 49 | |
| | 50 | == Toolbar Example == |
| | 51 | |
| | 52 | A toolbar with one widget and one flyout. |
| | 53 | |
| | 54 | {{{ |
| | 55 | <Container> |
| | 56 | <Name>MainToolbar</Name> |
| | 57 | <Type>Toolbar</Type> |
| | 58 | <Position>top</Position> |
| | 59 | <Item> |
| | 60 | <Function>Widget</Function> |
| | 61 | <Command>ZoomIn</Command> |
| | 62 | </Item> |
| | 63 | <Item> |
| | 64 | <Function>Flyout</Function> |
| | 65 | <Item> |
| | 66 | <Function>Flyout</Function> |
| | 67 | <Label>Menu</Label> |
| | 68 | <Tooltip/> |
| | 69 | <ImageUrl/> |
| | 70 | <ImageClass/> |
| | 71 | <Item> |
| | 72 | <Function>Widget</Function> |
| | 73 | <Widget>ZoomOut</Widget> |
| | 74 | </Item> |
| | 75 | </Item> |
| | 76 | </Container> |
| | 77 | }}} |
