|
||||||||||
Wiki : 
| HomePage :: Categories :: PageIndex :: RecentChanges :: RecentlyCommented :: Login/Register |
SWT Widget Support
Introduction
About the author...
XUI's SWT support has been implemented by Romain LOUIS, a student at EPU, SI Dept∞ (Sophia-Antipolis, France), during a 3 month internship at Xoetrope. Romain's excellent contribution also includes the creation of the International Football Manager sample application that showcases the use of SWT and XUI.
For 2007, Romain is seeking a 6 months internship in Australia from March to August. If you are interested, please contact Romain at: rlouis@polytech.unice.fr∞
XUI's SWT support has been implemented by Romain LOUIS, a student at EPU, SI Dept∞ (Sophia-Antipolis, France), during a 3 month internship at Xoetrope. Romain's excellent contribution also includes the creation of the International Football Manager sample application that showcases the use of SWT and XUI.
For 2007, Romain is seeking a 6 months internship in Australia from March to August. If you are interested, please contact Romain at: rlouis@polytech.unice.fr∞
For the XUI 3, the SWT ( Standard Widget Toolkit ) graphic library has been added.
The most important widgets are now wrapped and usable in XUI. The applet/application has also been updated to share the very latest XUI infrastructure.
A number of helpers, utilities and layout components have also been included.
Along with the core SWT development a sample SWT application manager has been included, the XUI International Soccer Manager, demonstrates how to build a complete application using XUI and SWT.
XUI 3 adds support for most of the common SWT Widgets which are :
| PAGES | MENUS | TOOLBARS | PANELS | CONTAINERS | BUTTONS | TEXT | IMAGE | OTHERS |
| XSwtPage | XMenuBar | XCoolBar | XPanel | XTable | XButton | XLabel | XImage | XProgressBar |
| XSplashWindow | XMenu | XToolBar | XScrollPane | XList | XRadioButton | XLink | XHotspotImage | XSlider |
| XDialog | XMenuItem | XToolItem | XSplitPane | XComboBox | XCheckbox | XTextArea | XImageMap | XScale |
| XMessageBox | XTabPanel | XTree | XEdit | XSpinner | ||||
| XExpandBar | XPassword | |||||||
| XDialogTable | XExpandItem | |||||||
| XEditTable |
Below you will see how to use each of this widget with a :
- XML file named Welcome.xml
- Java file named Welcome.java
Pages
XSwtPage
Welcome.xml
<XPage class="net.xoetrope.swt.demo.Welcome" style="data">
...
</XPage>
...
</XPage>
Welcome.java
public class Welcome extends XSwtPage {
...
}
...
}
XSplashWindow
The XSplashWindow class is used in a Java file named XSplasher.java :
XSplasher.java
public class XSplasher {
public static void main( String[] args ) {
XSplashWindow.splash( XSplasher.class.getResource( "soccermanager.gif" ) );
String[] appArgs = new String[ args.length -1 ];
for( int i = 1; i < args.length; i )
appArgs[ i - 1 ] = args[ i ];
XSplashWindow.disposeSplash( 8000 );
XSplashWindow.invokeMain( args[ 0 ], appArgs );
}
}
public static void main( String[] args ) {
XSplashWindow.splash( XSplasher.class.getResource( "soccermanager.gif" ) );
String[] appArgs = new String[ args.length -1 ];
for( int i = 1; i < args.length; i )
appArgs[ i - 1 ] = args[ i ];
XSplashWindow.disposeSplash( 8000 );
XSplashWindow.invokeMain( args[ 0 ], appArgs );
}
}
XDialog
The XDialog class is used to create Dialog class with the SWT library :
XDialodTable.java
public abstract class XDialogTable extends XDialog {
...
public void init() {
super.init();
closeButtonID = -1;
if( saveOnClose ) {
XSwtPage currentPage = ( XSwtPage ) XProjectManager.getPageManager().getCurrentPage( null );
currentPage.saveBoundComponentValues();
}
updateBindings();
updateBoundComponentValues();
pageActivated();
}
public String show()
{
...
showModalWindow();
return value;
}
...
}
...
public void init() {
super.init();
closeButtonID = -1;
if( saveOnClose ) {
XSwtPage currentPage = ( XSwtPage ) XProjectManager.getPageManager().getCurrentPage( null );
currentPage.saveBoundComponentValues();
}
updateBindings();
updateBoundComponentValues();
pageActivated();
}
public String show()
{
...
showModalWindow();
return value;
}
...
}
XMessageBox
The XMessageBox class is used like this :
Welcome.java
public void showMessage() {
...
showMessage( "Bad password", "Your password is not correct !" );
}
...
showMessage( "Bad password", "Your password is not correct !" );
}
XDialogTable
The XDialogTable abstract class is used to create three dialog class which are used to edit a XEditTable table.
XDialogTableAddItem
The XDialogTableAddItem class is used to add a line to a table. To show the dialog, you have to do this :
Welcome.java
private XEditTable table;
...
public void showAddItem() {
String club = table.showDialogAddItem();
...
}
...
public void showAddItem() {
String club = table.showDialogAddItem();
...
}
XDialogTableAddColumn
The XDialogTableAddColumn class is used to add a column to a table. To show the dialog, you have to do this :
Welcome.java
XDialogTableSetValueColumnItem
The XDialogTableSetValueColumnItem class is used to set a value in a table. To show the dialog, you have to do this :
Welcome.java
Menus
The menu bar (XMenuBar class) contains menus (XMenu class) which contain menu items (XMenuItem class).
It's created like this :
Welcome.xml
<XPage class="net.xoetrope.swt.demo.Welcome">
<MenuBar>
<Menu content="File">
<MenuItem name="newMenu" content="New..." image="img.png"/>
<MenuItem/>
<MenuItem name="saveMenu" content="Save"/>
</Menu>
<Menu content="Edit">
<MenuItem name="copyMenu" content="Copy"/>
<MenuItem name="cutMenu" content="Cut"/>
<MenuItem name="pasteMenu" content="Paste"/>
<MenuItem/>
<MenuItem name="findMenu" content="Find"/>
</Menu>
</MenuBar>
...
</XPage>
<MenuBar>
<Menu content="File">
<MenuItem name="newMenu" content="New..." image="img.png"/>
<MenuItem/>
<MenuItem name="saveMenu" content="Save"/>
</Menu>
<Menu content="Edit">
<MenuItem name="copyMenu" content="Copy"/>
<MenuItem name="cutMenu" content="Cut"/>
<MenuItem name="pasteMenu" content="Paste"/>
<MenuItem/>
<MenuItem name="findMenu" content="Find"/>
</Menu>
</MenuBar>
...
</XPage>
Toolbars
XToolBar and XCoolBar
There are two different kinds of tool bars :
1. The toolbar of the shell which will appear just under the menus :
Welcome.xml
<XPage class="net.xoetrope.swt.demo.Welcome">
...
<Components>
<ToolBar name="shellToolBar" bg="ffffff" tooltip="toolbar">
...
</ToolBar>
...
</Components>
...
</XPage>
...
<Components>
<ToolBar name="shellToolBar" bg="ffffff" tooltip="toolbar">
...
</ToolBar>
...
</Components>
...
</XPage>
Notice :
You can have only one toolbar in this case.
2. The toolbar of a coolbar which position is determined by the user :
Welcome.xml
<Components>
<Coolbar name="coolbar" tooltip="coolbar">
<ToolBar name="toolbar" tooltip="toolbar">
...
</ToolBar>
...
</Coolbar>
...
</Components>
<Coolbar name="coolbar" tooltip="coolbar">
<ToolBar name="toolbar" tooltip="toolbar">
...
</ToolBar>
...
</Coolbar>
...
</Components>
Notice :
You can have several toolbars in sevaral coolbars.
XToolItem
There are five different kinds of tool items :
1. The button toolitem which works like a XButton button :
Welcome.xml
<ToolBar name="toolbar" tooltip="toolbar">
<ToolItemPush content="Button 1" image="xui_icon.png" tooltip="push toolitem"/>
...
</ToolBar>
<ToolItemPush content="Button 1" image="xui_icon.png" tooltip="push toolitem"/>
...
</ToolBar>
2. The check toolitem which works like a XCheckbox button :
Welcome.xml
<ToolItemCheck content="Button 2" image="xui_icon.png" tooltip="check toolitem"/>
3. The radio toolitem which works like a XRadioButton button :
Welcome.xml
<ToolItemRadio content="Button 3" image="xui_icon.png" tooltip="radio toolitem"/>
4. The drop down toolitem which works like a XMenu menu :
Welcome.xml
<ToolItemDropDown name="dropdown" content="Button 4" image="xui_icon.png" tooltip="drop down toolitem"/>
Notice :
To drop down the menu, you have to use a data binding :
Welcome.xml
<XPage class="net.xoetrope.swt.demo.Welcome">
...
<Data>
<Bind target="dropdown" source="all/world/europe" output="tables/Voltages/mt"/>
...
</Data>
</XPage>
...
<Data>
<Bind target="dropdown" source="all/world/europe" output="tables/Voltages/mt"/>
...
</Data>
</XPage>
5. The separator toolitem which adds a bar between the toolitems :
Welcome.xml
<ToolItem/>
Panels
The panels are used to store some components.
XPanel
Welcome.xml
<Components>
...
<Panel name="componentsPanel" style="SmallHeading" border="5" tooltip="panel" layout="flow" ...>
...
</Panel>
...
</Components>
...
<Panel name="componentsPanel" style="SmallHeading" border="5" tooltip="panel" layout="flow" ...>
...
</Panel>
...
</Components>
Notice :
You can use three differents values for the layout attribute. Moreover, you can add their attributes which are :
| LAYOUT | ATTRIBUTES | ATTRIBUTE LOCATION |
| Border | constraint | Children |
| Flow | type, fill, wrap, justify, pack, spacing, hgap, vgap, mtop, mbottom, mleft, mright | Parent |
| Grid | cols, stdWidth, hspacing, vspacing, hgap, vgap, mtop, mbottom, mleft, mright | Parent |
XScrollPane
Welcome.xml
<ScrollPane name="componentsScrollPane" style="SmallHeading" tooltip="scrollpane">
...
</ScrollPane>
...
</ScrollPane>
XSplitPane
Welcome.xml
<SplitPane name="componentsSplitPane" style="SmallHeading" tooltip="splitpane" orientation="hori" location="20" size="10">
...
</SplitPane>
...
</SplitPane>
Notice :
You can have only two components inside a split pane.
XTabPanel
Welcome.xml
<TabPanel name="componentsTabPanel" style="SmallHeading" tooltip="tabpanel">
...
</TabPanel>
...
</TabPanel>
Notice :
You can have only XPanel components inside a tab panel.
Containers
XTable
Welcome.xml
<Panel name="componentsPanel">
<Table name="championship" selectionstyle="data" borderstyle="SmallHeading" interactive="true" headervisible="true" linesvisible="true" tooltip="table"/>
...
</Panel>
<Table name="championship" selectionstyle="data" borderstyle="SmallHeading" interactive="true" headervisible="true" linesvisible="true" tooltip="table"/>
...
</Panel>
Notice :
To fill the table, you have to use a data binding. There are two different kinds of sources :
1. XML file :
statics.xml
<Datasets>
<datasets id="Scotland">
<table id="honoursTable">
<th>
<td value="Club Name"/>
<td value="Scotland Champion Years"/>
<td value="Scotland Cup Winner Years"/>
</th>
<tr>
<td value="Celtic Glasgow"/>
<td value="1893, ..."/>
<td value="1892, ..."/>
</tr>
<tr>
<td value="Glasgow Rangers"/>
<td value="1891, ..."/>
</tr>
...
</table>
...
</datasets>
...
</Datasets>
<datasets id="Scotland">
<table id="honoursTable">
<th>
<td value="Club Name"/>
<td value="Scotland Champion Years"/>
<td value="Scotland Cup Winner Years"/>
</th>
<tr>
<td value="Celtic Glasgow"/>
<td value="1893, ..."/>
<td value="1892, ..."/>
</tr>
<tr>
<td value="Glasgow Rangers"/>
<td value="1891, ..."/>
</tr>
...
</table>
...
</datasets>
...
</Datasets>
2. Database file made in JDBC.
XList
Welcome.xml
<List name="clubList" tooltip="list"/>
Notice :
To fill the list, you have to use a data binding :
statics.xml
<Datasets>
<dataset id="all">
<list id="championships">
<item value="Ireland" id="ir"/>
<item value="Scotland" id="sc"/>
...
</list>
...
</dataset>
...
</Datasets>
<dataset id="all">
<list id="championships">
<item value="Ireland" id="ir"/>
<item value="Scotland" id="sc"/>
...
</list>
...
</dataset>
...
</Datasets>
XComboBox
Welcome.xml
<ComboBox name="combobox" orientation="LeftToRight" tooltip="combo box"/>
Notice :
To fill the combo box, you have to use the same data binding construction than a XList list.
XTree
Welcome.xml
<Tree name="tree" showAttrib="true" tooltip="tree"/>
Notice :
To fill the tree, you have to use the same data binding construction than a XList list, but here you are allowed to put list inside list.
Moreover, you can use a database file, and in this case, the first node of the tree will be the first attribute value of each line, and the leaves the others attributes.
XExpandBar and XExpandItem
Welcome.xml
<ExpandBar name="expandbar" tooltip="expand bar">
<ExpandItem content="Title one" image="xui_icon.png" tooltip="expand item" layout="flow" ...>
<RadioButton content="Test 1"/>
<RadioButton content="Test 2"/>
...
</ExpandItem>
...
</ExpandBar>
<ExpandItem content="Title one" image="xui_icon.png" tooltip="expand item" layout="flow" ...>
<RadioButton content="Test 1"/>
<RadioButton content="Test 2"/>
...
</ExpandItem>
...
</ExpandBar>
Notice :
As for the layout attribute, it's the same construction than in a XPanel panel.
XEditTable
The XEditTable class adds the three XDialogTable dialogs to update a table.
Buttons
XButton
Welcome.xml
<Button name="searchButton" style="SmallHeading" content="Search" selected="true" alignment="Center" image="xui_icon.png" tooltip="button"/>
XRadioButton
Welcome.xml
<RadioButton name="view" style="SmallHeading" content="View" selected="true" alignment="Right" image="xui_icon.png" value="val" tooltip="radio button"/>
XCheckbox
Welcome.xml
<Checkbox name="check" style="SmallHeading" content="check box" selected="true" alignment="Left" image="xui_icon.png" tooltip="check box"/>
Text
XLabel
Welcome.xml
<Label name="borderTop" style="Massilia" content="Football" alignment="Center" tooltip="label" image="football.gif"/>
XLink
%%(xml;;Welcome.xml)
<Link name="link" style="data" content="Welcome
Page was generated in 2.5574 seconds
There are no comments on this page. [Add comment]