...
| 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> Add this property to your widget:
secondToolbarButtonVisible="true"
Then add this array of your components
<widgetComponents:secondHeaderContent>
<widgetComponents:WidgetToggleButton id="centerButton"
<s:HGroup height="100%" paddingBottom="2" paddingLeftlabel="5Center"
paddingRight="7" paddingTop="2" verticalAlign="middle"> <widgetComponents:WidgetToggleButton idtoolTip="centerButton"Center selected nodes, or entire graph"
label="Center" click="centerButton_clickHandler(event)" />
</widgetComponents:secondHeaderContent> |
Widget Help
If you want to add a custom help message to your widget that will display when a user clicks the '?' button on the right side of your widget you just need to put whatever uicomponent you desire inside a helpContent tag as shown below
| Code Block |
|---|
<components:helpContent> <s:VGroup width="100%" height="100%" horizontalAlign="center" gap="5" paddingTop="5" paddingBottom="5" paddingLeft="10" paddingRight="10" > <s:RichEditableText editable="false" multiline="true" maxWidth="300" > <s:textFlow> <s:TextFlow> <s:p> This widget does xyz. More details on using this widget can be found <s:a href="http://mywebsite.com/help">here</s:a> </s:p> toolTip="Center selected nodes, or entire graph" </s:TextFlow> </s:textFlow> </s:RichEditableText> click="centerButton_clickHandler(event)" /></s:VGroup> </widgetComponentscomponents:secondHeaderContent>helpContent> |
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.
...