WPF development using Java and Eclipse Europa (SWT)

One of the much hyped features of .NET 3 is Windows Presentation Foundation (WPF), a graphical subsystem framework, which includes (amongst other things) a markup language binding called XAML (which is really a rip off of XUL which has been the core of Mozilla/Firefox for years, but that's another story :)).

A couple of days ago the Eclipse foundation released a new version of Eclipse called Europa. It has some cool new features, one of which that caught my eye is a port of the Eclipse native widget set SWT to WPF.

For fun I thought it would be interesting to see how hard it would be to "port" a WPF example to SWT/WPF.

The Application Resources Sample is a really simple "pure" XAML application (i.e. does not mix code with presentation markup) that consists of two XML files:

page1.xaml

<!--<SnippetConsumingPage>-->
<StackPanel
Name="root"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 1" />
<Button Height="50" Width="250" Style="{StaticResource GelButton}" Content="Button 2" />
</StackPanel>

and

app.xml

<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="page1.xaml"
>
<Application.Resources>
<Style TargetType="Button" x:Key="GelButton" >
<Setter Property="Margin" Value="1,2,1,2"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
 <Setter.Value>
   <ControlTemplate TargetType="Button">
     <Canvas>
       <Rectangle
         Width="{TemplateBinding Width}"
         Height="{TemplateBinding Height}"
         x:Name="mainRect"
         RadiusX="10" RadiusY="10">
         <Rectangle.Fill>
           <RadialGradientBrush GradientOrigin="0.5,0.5">
             <GradientStop Color="LimeGreen" Offset="0.0" />
             <GradientStop Color="Green" Offset="1.0" />
           </RadialGradientBrush>
         </Rectangle.Fill>
       </Rectangle>
       <Rectangle
         Margin="1,1,2,2"
         RadiusX="10" RadiusY="10"
         Width="{TemplateBinding Width}"
         Height="{TemplateBinding Height}"
         Opacity="0.6">
         <Rectangle.Fill>
           <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
             <GradientStop Color="White" Offset="0.0" />
             <GradientStop Color="Transparent" Offset="0.5" />
           </LinearGradientBrush>
         </Rectangle.Fill>
       </Rectangle>
       <StackPanel HorizontalAlignment="Center" >
         <ContentPresenter  Content="{TemplateBinding Content}" Margin="15,10,15,5"/>
       </StackPanel>
     </Canvas>
     <ControlTemplate.Triggers >
       <Trigger Property="Button.IsFocused" Value="True" >
         <Setter TargetName="mainRect" Property="Fill">
           <Setter.Value>
             <RadialGradientBrush GradientOrigin="0.5,0.5">
               <GradientStop Color="LightSkyBlue" Offset="0.0" />
               <GradientStop Color="RoyalBlue" Offset="1.0" />
             </RadialGradientBrush>                
           </Setter.Value>
         </Setter>
       </Trigger>
     </ControlTemplate.Triggers>
   </ControlTemplate>
 </Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>

which displays two buttons that change color when focus changes.

So, what does the equivalent SWT/WPF look like?

SWT/WPF currently has support for configuring Resources via XAML, but top level Controls like Button, Label, etc must be defined using the equivalent SWT widgets.

Prerequisties

• Install the .NET 3.0 runtime
• Download swt-3.3-wpf-win32-x86.zip or newer
  

Refactor app.xaml slightly so that the style markup is wrapped by a ResourceDictionary instead of Application.Resources

ButtonStyle.xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button">
 <Setter Property="Margin" Value="1,2,1,2"/>
 <Setter Property="HorizontalAlignment" Value="Left"/>
 <Setter Property="Template">
   <Setter.Value>
     <ControlTemplate TargetType="Button">
       <Canvas>
         <Rectangle
           Width="{TemplateBinding Width}"
           Height="{TemplateBinding Height}"
           x:Name="mainRect"
           RadiusX="10" RadiusY="10">
           <Rectangle.Fill>
             <RadialGradientBrush GradientOrigin="0.5,0.5">
               <GradientStop Color="LimeGreen" Offset="0.0" />
               <GradientStop Color="Green" Offset="1.0" />
             </RadialGradientBrush>
           </Rectangle.Fill>
         </Rectangle>
         <Rectangle
           Margin="1,1,2,2"
           RadiusX="10" RadiusY="10"
           Width="{TemplateBinding Width}"
           Height="{TemplateBinding Height}"
           Opacity="0.6">
           <Rectangle.Fill>
             <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
               <GradientStop Color="White" Offset="0.0" />
               <GradientStop Color="Transparent" Offset="0.5" />
             </LinearGradientBrush>
           </Rectangle.Fill>
         </Rectangle>
         <StackPanel HorizontalAlignment="Center" >
           <ContentPresenter  Content="{TemplateBinding Content}" Margin="15,10,15,5"/>
         </StackPanel>
       </Canvas>
       <ControlTemplate.Triggers >
         <Trigger Property="Button.IsFocused" Value="True" >
           <Setter TargetName="mainRect" Property="Fill">
             <Setter.Value>
               <RadialGradientBrush GradientOrigin="0.5,0.5">
                 <GradientStop Color="LightSkyBlue" Offset="0.0" />
                 <GradientStop Color="RoyalBlue" Offset="1.0" />
               </RadialGradientBrush>                  
             </Setter.Value>
           </Setter>
         </Trigger>
       </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
 </Setter>
</Style>
</ResourceDictionary>

and the Java code to create and layout the buttons would look something like:

package robertmaldon;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class SwtWpfExampleMain {

public static void main(String[] args) {
   Display display = new Display();
   Shell shell = new Shell(display);
   shell.setSize(300, 150);
   shell.setLayout(new RowLayout());

   final Button button1 = new Button(shell, SWT.FLAT);
   button1.setData("ResourceDictionary", "C:\\workspace\\swt-wpf-example\\config\\ButtonStyle.xaml");
   button1.setText("Button 1");
   button1.setSize(250, 50);
   button1.setBounds(0, 0, 250, 50);

   final Button button2 = new Button(shell, SWT.FLAT);
   button2.setText("Button 2");
   button2.setSize(250, 50);
   button2.setBounds(0, 50, 250, 50);

   shell.open();

   // Set up the event loop.
   while (!shell.isDisposed()) {
     if (!display.readAndDispatch()) {
       // If no more entries in event queue
       display.sleep();
     }
   }

   display.dispose();
}
}

In the example above I XAMLize the style of the first button and leave the second button with the default style.

The trick here is that Button eventually extends org.eclipse.swt.widgets.Widget that supports XAML loading via the setData(key, value) method. The key can be one of two strings:

• "XAML" - the value must be a String containing XAML markup
• "ResourceDictionary" - the value is a URI to a XAML file
  

SWT/WPF support is a bit raw right now but shows a lot of promise.