Xoetrope

 Wiki : SwtWidgets

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

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 :

Pages


XSwtPage


Welcome.xml
<XPage class="net.xoetrope.swt.demo.Welcome" style="data">
  ...
</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 );
  }   
}



splashwindow


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;
  }

  ...
}


XMessageBox


The XMessageBox class is used like this :

Welcome.java
public void showMessage() {
  ...
  showMessage( "Bad password", "Your password is not correct !" );
}



messagebox


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();
  ...
}


XDialogTableAddColumn

The XDialogTableAddColumn class is used to add a column to a table. To show the dialog, you have to do this :

Welcome.java
public void showAddColumn() {
  String attribute = table.showDialogAddColumn();
  ...
}


XDialogTableSetValueColumnItem

The XDialogTableSetValueColumnItem class is used to set a value in a table. To show the dialog, you have to do this :

Welcome.java
public void showSetValue() {
  String value = table.showDialogSetValueColumnItem();
  ...
}


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>



menu


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>


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>


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>


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>


5. The separator toolitem which adds a bar between the toolitems :

Welcome.xml
<ToolItem/>



toolbarcoolbar


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>


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



panel


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>


Notice :
You can have only two components inside a split pane.


splitpane


XTabPanel


Welcome.xml
<TabPanel name="componentsTabPanel" style="SmallHeading" tooltip="tabpanel">
  ...
</TabPanel>


Notice :
You can have only XPanel components inside a tab panel.


tabpanel


Containers


XTable


Welcome.xml
<Panel name="componentsPanel">
  <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>


2. Database file made in JDBC.


table


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>



list


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.


combobox


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.


tree


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>


Notice :
As for the layout attribute, it's the same construction than in a XPanel panel.


expandbar


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"/>



button


XRadioButton


Welcome.xml
<RadioButton name="view" style="SmallHeading" content="View" selected="true" alignment="Right" image="xui_icon.png" value="val" tooltip="radio button"/>



radiobutton


XCheckbox


Welcome.xml
<Checkbox name="check" style="SmallHeading" content="check box" selected="true" alignment="Left" image="xui_icon.png" tooltip="check box"/>



checkbox


Text


XLabel


Welcome.xml
<Label name="borderTop" style="Massilia" content="Football" alignment="Center" tooltip="label" image="football.gif"/>



label


XLink


%%(xml;;Welcome.xml)
<Link name="link" style="data" content="Welcome

There are no comments on this page. [Add comment]

Page was generated in 2.5574 seconds