Xoetrope

 Wiki : SwtWidgets

HomePage :: Categories :: PageIndex :: RecentChanges :: RecentlyCommented :: Login/Register
Most recent edit on 2007-04-19 11:20:37 by Nv2P6u

Additions:
for( int i = 1; i < args.length; i )
<Link name="link" style="data" content="Welcome


Deletions:
for( int i = 1; i < args.length; i )
<Link name="link" style="data" content="Welcome <A>in</A> the <A href="http://www.google.ie">Google website</A>" tooltip="link"/>
The content attribute has the link parts between the node <A> and </A>. Furtheremore, you can add a website link in it with the href attribute and using the values <, > and ".
link

XTextArea

<TextArea name="welcomeTextArea" style="SmallHeading" content="That's a text area" orientation="RightToLeft" tooltip="text area"/>
textarea

XEdit

<Edit name="clubSearchEdit" content="Write here" orientation="RightToLeft" tooltip="edit"/>
edit

XPassword

<Password name="password" content="Write here" orientation="RightToLeft" tooltip="password"/>
password

Image

XImage

<Image name="image" content="image.gif" scale="1" alignement="Center" bg="000000" tooltip="image"/>
The XImage class has specials attributes :
ATTRIBUTE VALUES COMMENTS
scale true(1) or false(0) The image is resized to the ''XImage'' component dimensions
full true(1) or false(0) The ''XImage'' component is resized to the image dimensions

image

XHotspotImage

<HotspotImage name="hotspotimage" content="image.gif" full="true" alignement="Center" bg="222222" tooltip="hotspot image"/>
To add the hotspots, you have to do this :
private XHotspotImage hotspotimage;
public void setupHotspots() {
try {
hotspotimage.read( project.getBufferedReader( "europehotspots.xml", "UTF8" ) );
catch ( Exception ex ) {
ex.printStackTrace();
%%(xml;;europehotspots.xml)
<Hotspots>
<area name="Ireand" tooltip="Baile Atha Cliath" coords="123,66,110,71,101,69,99,75,96,83,88,91,93,98,114,100,120,77"/>
<area name="Scotland" tooltip="William Wallace" coords="142,82,151,71,154,53,154,41,141,47,131,65,141,68,138,82"/>
</Hotspots>

XImageMap

<ImageMap name="ImageMap" content="image.gif" alignement="Center" bg="999999" tooltip="image map"/>
To add the hotspots, you have to use the same construction than a XHotspotImage image.
imagemap

Others

XProgressBar

<ProgressBar name="bar" tooltip="progress bar" min="-25" max="150" selection="60"/>
progressbar

XSlider

There are two different kinds of sliders :
1. The horizontal slider :
<SliderHorizontal name="sliderh" tooltip="slider horizontal" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>
2. The vertical slider :
<SliderVertical name="sliderv" tooltip="slider vertical" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>
slider

XScale

There are two different kinds of scales :
1. The horizontal scale :
<ScaleHorizontal name="scaleh" tooltip="scale horizontal" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>
2. The vertical scale :
<ScaleVertical name="scalev" tooltip="scale vertical" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>
scale

XSpinner

<Spinner name="spinner" tooltip="spinner" digits="1" pageincrement="-3" increment="100" min="0" max="500" selection="70"/>
spinner

Links

SWT Eclipse Javadoc




Edited on 2006-08-31 08:09:50 by RomainLOUIS

Additions:
<ToolBar name="shellToolBar" bg="ffffff" tooltip="toolbar">
<Image name="image" content="image.gif" scale="1" alignement="Center" bg="000000" tooltip="image"/>
<HotspotImage name="hotspotimage" content="image.gif" full="true" alignement="Center" bg="222222" tooltip="hotspot image"/>
<ImageMap name="ImageMap" content="image.gif" alignement="Center" bg="999999" tooltip="image map"/>


Deletions:
<ToolBar name="shellToolBar" tooltip="toolbar">
<Image name="image" content="image.gif" scale="1" alignement="Center" tooltip="image"/>
<HotspotImage name="hotspotimage" content="image.gif" full="true" alignement="Center" tooltip="hotspot image"/>
<ImageMap name="ImageMap" content="image.gif" alignement="Center" tooltip="image map"/>




Edited on 2006-08-24 08:25:20 by RomainLOUIS

Additions:
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


Deletions:
LAYOUT ATTRIBUTES NODE PLACE
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




Edited on 2006-08-24 08:11:44 by RomainLOUIS

Additions:
scale



Edited on 2006-08-24 08:09:39 by RomainLOUIS

Additions:
slider



Edited on 2006-08-24 08:08:04 by RomainLOUIS

Additions:
progressbar



Edited on 2006-08-24 08:02:58 by RomainLOUIS

Additions:
imagemap



Edited on 2006-08-24 08:00:49 by RomainLOUIS

Additions:
image



Edited on 2006-08-24 07:50:47 by RomainLOUIS

Additions:
password



Edited on 2006-08-24 07:32:56 by RomainLOUIS

Additions:
edit



Edited on 2006-08-24 07:31:14 by RomainLOUIS

Additions:
textarea



Edited on 2006-08-24 07:29:12 by RomainLOUIS

Additions:
link



Edited on 2006-08-24 07:27:31 by RomainLOUIS

Additions:
label



Edited on 2006-08-24 07:24:43 by RomainLOUIS

Additions:
button
radiobutton
checkbox


Deletions:
button
radiobutton




Edited on 2006-08-24 07:22:24 by RomainLOUIS

Additions:
radiobutton



Edited on 2006-08-24 07:06:55 by RomainLOUIS

Additions:
button



Edited on 2006-08-24 07:01:52 by RomainLOUIS

Additions:
expandbar



Edited on 2006-08-24 06:58:34 by RomainLOUIS

Additions:
tree



Edited on 2006-08-24 06:55:33 by RomainLOUIS

Additions:
combobox



Oldest known version of this page was edited on 2006-08-24 06:52:37 by RomainLOUIS []
Page view:

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" 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 NODE PLACE
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.

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>


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


Welcome.xml
<Link name="link" style="data" content="Welcome &lt;A&gt;in&lt;/A&gt; the &lt;A href=&quot;http://www.google.ie&quot;&gt;Google website&lt;/A&gt;" tooltip="link"/>



Notice :
The content attribute has the link parts between the node <A> and </A>. Furtheremore, you can add a website link in it with the href attribute and using the values <, > and ".

XTextArea


Welcome.xml
<TextArea name="welcomeTextArea" style="SmallHeading" content="That's a text area" orientation="RightToLeft" tooltip="text area"/>


XEdit


Welcome.xml
<Edit name="clubSearchEdit" content="Write here" orientation="RightToLeft" tooltip="edit"/>


XPassword


Welcome.xml
<Password name="password" content="Write here" orientation="RightToLeft" tooltip="password"/>


Image


XImage


Welcome.xml
<Image name="image" content="image.gif" scale="1" alignement="Center" tooltip="image"/>


Notice :
The XImage class has specials attributes :

ATTRIBUTE VALUES COMMENTS
scale true(1) or false(0) The image is resized to the ''XImage'' component dimensions
full true(1) or false(0) The ''XImage'' component is resized to the image dimensions


XHotspotImage


Welcome.xml
<HotspotImage name="hotspotimage" content="image.gif" full="true" alignement="Center" tooltip="hotspot image"/>


Notice :
To add the hotspots, you have to do this :

Welcome.java
private XHotspotImage hotspotimage;

...

public void setupHotspots() {
  try {
    hotspotimage.read( project.getBufferedReader( "europehotspots.xml", "UTF8" ) );
  }
  catch ( Exception ex ) {
    ex.printStackTrace();
  }
}


europehotspots.xml
<Hotspots>
  <area name="Ireand" tooltip="Baile Atha Cliath" coords="123,66,110,71,101,69,99,75,96,83,88,91,93,98,114,100,120,77"/>
  <area name="Scotland" tooltip="William Wallace" coords="142,82,151,71,154,53,154,41,141,47,131,65,141,68,138,82"/>
  ...
</Hotspots>


XImageMap


Welcome.xml
<ImageMap name="ImageMap" content="image.gif" alignement="Center" tooltip="image map"/>


Notice :
To add the hotspots, you have to use the same construction than a XHotspotImage image.

Others


XProgressBar


Welcome.xml
<ProgressBar name="bar" tooltip="progress bar" min="-25" max="150" selection="60"/>


XSlider


There are two different kinds of sliders :

1. The horizontal slider :

Welcome.xml
<SliderHorizontal name="sliderh" tooltip="slider horizontal" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>


2. The vertical slider :

Welcome.xml
<SliderVertical name="sliderv" tooltip="slider vertical" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>


XScale


There are two different kinds of scales :

1. The horizontal scale :

Welcome.xml
<ScaleHorizontal name="scaleh" tooltip="scale horizontal" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>


2. The vertical scale :

Welcome.xml
<ScaleVertical name="scalev" tooltip="scale vertical" increment="2" pageincrement="-3" min="-26" max="157" selection="70"/>


XSpinner


Welcome.xml
<Spinner name="spinner" tooltip="spinner" digits="1" pageincrement="-3" increment="100" min="0" max="500" selection="70"/>



spinner


Links


SWT Eclipse Javadoc
Page was generated in 3.8590 seconds