Widget Header
All Infinit.e widgets have a header that developers have direct access to add content to. There are currently 2 version of the header which work as follows bellow. To use them just include the extra mxml tags shown in your widgets main mxml page.
Traditional Way (not recommended): This is the way all legacy widgets have used, it gives developers access to a single header bar to put anything they want, and will continue expanding until the widget width is met, at which point they will cut off all additional content.
| Code Block |
|---|
Header bar:
<components:headerContent>
<components:WidgetIgnoreFilterToggleButton id="localFilterSettings"
toolTip="Ignore Workspace Filtering - Show All Results"
click="setTimeout( onClickIgnoreLocalFilter, 100 )" />
</components:headerContent> |
New/Better Way (recommended): This is the way all future widgets will be developed. It gives developers access to 3 header bars to put anything they want. The first bar is a Left Aligned section that always will show up next to the title of the widget. The next is the same header bar as the traditional that will continue to fill the area remaining in the top header bar, but will still cut off if the widget width is too small. The final bar is a second level dropdown that if included will add a button to the top level header bar, and give developers a second bar that has scrolling capabilities to fit as many header elements as necessary.
| Code Block |
|---|
Left aligned header bar:
<widgetComponents:leftHeaderContent>
<widgetComponents:WidgetDropDownList id="caseList"
includeInLayout="false"
width="150"
change="caseList_changeHandler(event)"
prompt="Case"
visible="false" />
</widgetComponents:leftHeaderContent>
Second header bar:
<widgetComponents:secondHeaderContent>
<s:HGroup
height="100%"
paddingBottom="2"
paddingLeft="5"
paddingRight="7"
paddingTop="2"
verticalAlign="middle">
<widgetComponents:WidgetToggleButton id="centerButton"
label="Center"
toolTip="Center selected nodes, or entire graph"
click="centerButton_clickHandler(event)" />
</widgetComponents:secondHeaderContent> |
Styling
To ensure a similar experience between browsers, operating systems, and other environment factors we have included a default font into Infinit.e. Because of the way widgets are dynamically loaded modules, if you want to take advantage of the global font widgets must include the css stylesheet we use to style all font. If you use the eclipse plugin or predefined project in the getting started section, these are created for you and included in your widget automatically. If you choose not to use the Infinit.e font you are more than welcome to unreference the stylesheet and go with your own approach. The stylesheet included with your project is just an example and is not uploaded with your project when it is being submitted, so do not make changes to that stylesheet as they will not be reflected when uploaded your widget to the main Infinit.e application.
...