A Cup of Silverlight, RIA & Interoperability : eclipse4SL

Eclipse4SL : M2 released + REST and SOAP Guidance

Steve SFARTZ — Mon, 12 Jan 2009 00:24:00 GMT

The Eclipse Tools for Silverlight enter year 2009 after achieving its 2008 commitments !

First of all, SOYATEC did a great job at correcting more than 30 bugs (and 200 unit tests to ensure first quality) but also at enhancing the plug-in to provide a better support for Silverlight (improvement of the XAML editor, support for Styles and Embedded Custom Components in XAML preview…).

To get the full list of features, see this detailed blog entry: Release 1.0.0 M2 is ready. Moreover, when you install the plug-in, you are now given the options to also install the source code and/or documentation.

Second, guidance is now provided to connect Silverlight applications to Java business logic. Because REST and SOAP make sense, we chose to provide guidance for both. We also chose to use opensource frameworks and tools, such as the Tomcat server runtime :

REST guidance : the Restlet framework from Noelios Technologies was chosen to illustrate the Silverlight to Java calls in REST style,
SOAP guidance : JAX-WS implementation from Apache (CXF) was chosen to illustrate the Silverlight to Java calls in SOAP style.

Start building Silverlight RIA in eclipse today !

With Eclipse4SL M2 plus the guidance to connect Java business logic, you can now build Silverlight applications in what we call the Pure Eclipse configuration or you may complement your design by using Expression Blend, and collaborate with .Net teams using Visual Studio.

If the XAML experience is now completed, it is fair to say that the C# development experience is still rudimentary (no code assist and no debug). Therefore, in real world, you’ll still need Visual Studio for the Silverlight C# code development and debug tasks (Hopefully, Visual Studio Web Express is free).

Improving the C# experience as well as supporting other dev platforms is still on the Eclipse4SL roadmap… stay tuned…

If you want to support this project, feel free to vote on EPIC, but also contact the Eclipse4Sl Team if you want to appear among the SLDT proposal interested parties.

Architecture Series – Pure and Mixed configurations

Steve SFARTZ — Thu, 16 Oct 2008 01:23:57 GMT

This is the first article in an Architecture Series dealing with technical options taken for the Eclipse Tools for Silverlight. Future articles will focus on the XAML rendering architecture, the Eclipse extension points as well as the “MSBuild” project structure preservation option that was taken to allow the back and forth loop.

In the very first words of the eclipse4SL installation, you are told to choose between two configurations : Pure or Mixed Eclipse. Why that ? To minimize the size of the bits to download but also to adapt to your interoperability scenario (any co-workers using Microsoft Tools ?). So what ? That’s enough information to you. Fine, have fun with the Tutorials and please give your feedback. Now let’s talk about the Silverlight 2 runtimes, SDK and Tools for Visual Studio, and how they fit one with another.

If you’re new to Silverlight, you’ll want to begin with the Get Started section of the Silverlight site. After that take an hour or two to go through Scott Guthrie’s tutorials. Finally give a try to Tim Heuer’s technically amazing posts. BTW, have you read the Silverlight 2 announcements from Scott and Tim.

OK let’s start. From the Silverlight Tools page, you’ll notice that Silverlight 2 is composed of a runtime but also a set of development tools (developer runtime, SDK and Visual Studio Tools). Note that eclipse4SL has been added to the list of tools :-).

eclipse4SL uses several pieces of the Silverlight Tools to perform the compilation of your XAML code (you don’t know about XAML, experience it from the HelloWorld tutorial) : MSBuild version 3.5, complementary compilation tasks which come with the SDK and the Silverlight runtime to actually render the bits on the surface as well as run your application.

In a pure Microsoft environment, you would get the following configuration :

If you chose to install a Pure Eclipse configuration, the Silverlight runtime plus the Silverlight SDK are sufficient (the latter has a dependency on MSBuild 3.5 which comes with .Net 3.5). Note that .Net 3.5 SP1 is optional here. Bonus : as eclipse4SL M1 does not support debugging, you may use a standard Silverlight runtime instead of the developer runtime.

Finally, in a Mixed Eclipse configuration, you’ll go back and forth between Eclipse, Visual Studio and Expression Blend but this comes with a maximum of products to install.

Any comments, please use the forums.

Eclipse Tools for Microsoft Silverlight

Steve SFARTZ — Mon, 13 Oct 2008 15:12:00 GMT

Silverlight 2 is Released to Web (RTW). This is great news for our RIA scenarios. But wait, there’s more.

Microsoft announced the launch of the Eclipse Tools for Microsoft Silverlight (eclipse4SL.org): an opensource project lead by Soyatec and funded by Microsoft. Here is what the eclipse4SL Team Blog states :

The purpose of this project is the creation of open source tools integrated with the Eclipse development platform that enable Java developers to use the Eclipse platform to create applications that run on the Microsoft Silverlight runtime platform. Specifically, the project will be an Eclipse plug-in that works with the Eclipse Integrated Development Environment (IDE) and Eclipse Rich Client Platform (RCP) to provide both a Silverlight development environment and greater interoperability between Silverlight and Java, to facilitate the integration of Silverlight-based applications into Java-based web sites and services.

I am thrilled to be part of this initiative we incubated at Microsoft France, working in collaboration with Vijay Rajagopalan (Microsoft Corp Interop Teams) and Yves Yang (Soyatec CEO). We brought interoperability to the next level here : France, United States, India and China :-).

One important point I want to highlight : eclipse4SL provides a full Silverlight experience for Eclipse developpers, but it can also be a great tool if you plan to work in an heterogeneous Java and .Net environment. From the beginning, we worked on an Architecture which preserves the MSBUILD .Net format, so that you can go back and forth from Visual Studio to Eclipse and Eclipse to Visual Studio, but also from Expression Blend to Eclipse and Eclipse to Expression Blend. This approach is referenced as Mixed configuration in the installation guide.

This preview release (named M1) will be out on Tuesday the 14th. It is the opportunity for the community to give its feedback so that we can adapt the project long term plans.

To ensure the best experience in your evaluation, eclipse4SL comes with 20 minutes Tutorials. Moreover, we selected a limited group of alpha testers including the French Java & opensource community from Application-Servers.com. Feedbacks are great.

"I think this is a great job. I look forward to experiment with advanced Silverlight Controls as well as its Web Services communication capabilities." Bruno Paul, Architect at ATOS Origin.

UPDATE : The eclipse Foundation has published the SLDT Project Proposal to turn eclipse4SL into an open source project under the Eclipse Development Process, on the 13th of october which they consider as Interesting Times Indeed…

“… this project proposes to extend the Silverlight Development Experience to all Web Application Developers should they be running Windows, Linux or Mac OS. The Silverlight Development Toolkit (SLDT) is a proposed open-source project under the Eclipse Development Process, and will incubate under the top-level Technology project.

Finally, I’d like to point out the determination of Microsoft’s top management and sponsors about the project (Sam Ramji, Jean Paoli, Scott Guthrie and S. Somasegar) who share a strong commitment towards interoperability.

eclipse4SL : “DataGrid” Tutorial

Steve SFARTZ — Mon, 13 Oct 2008 15:11:00 GMT

Duration

20 minutes

Description

This tutorial demonstrates how to populate a DataGrid with dynamic data. When you press the Load Button, the DataGrid will be filled in, and eventually filtered if a filter has been specified. A pdf version of this tutorial is attached at the end of this post and accessible here.

Prerequisites

After installing eclipse4SL, you should have activated the Silverlight perspective by selecting one of them from the menu Window > Open Perspective > Other…. (for a detailed procedure, read the Hello World Tutorial).

Creating the Silverlight User Interface

We'll start by selecting the File->New menu item within Eclipse and use the eclipse4SL Silverlight Project menu to create a "Silverlight Web Project" , named DataGridTutorial.

Open the Page.xaml control, remove the Grid component.

Drag and drop the StackPanel container from the Palette, and add 4 components inside by drag and drop too :

a TextBock which Text value is “Filter :”
a TextBox which Text value is empty
a Button which Content value is “Load”
and our DataGrid which Width and Height are 380 and 230 respectively

<UserControl x:Class="DataGridTutorial.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300"

xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">

<Controls:DataGrid Width="380" Height="230"></Controls:DataGrid>

</StackPanel>

</UserControl>

Notice that as you have dropped a DataGrid on to the XAML code, a reference to the assembly containing the component is automatically added to the Silverlight project (System.Windows.Controls.Data). The following XAML rendering is displayed :

To obtain the arrangement and look & feel proposed at the beginning of the document, use a Canvas, and specific positions for the different components. Replace the StackPanel and its contents by the following XAML :

<UserControl x:Class="DataGridTutorial.Page"

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"

Height="300">

<TextBlock Text="Filter :"

Canvas.Left="10" Canvas.Top="15" Width="100"></TextBlock>

<TextBox Text=""

Canvas.Left="60" Canvas.Top="10" Width="100"></TextBox>

<Button Content="Load"

Canvas.Left="180" Canvas.Top="11" Width="50"></Button>

<my:DataGrid

Canvas.Left="10" Canvas.Top="50" Width="380" Height="230"

RowBackground="Aquamarine"

AlternatingRowBackground="White"></my:DataGrid>

</Canvas>

</UserControl>

Let’s run the project, by creating a Run Configuration for our project as described in the HelloWorld Tutorial.

Adding behavior to the User Interface

Now, let’s assign names to the Filter and our DataGrid so that we can access them from our C# code behind. Add the property x:Name=”country” to the TextBox and x:Name=“grid” to our DataGrid. Moreover, we’ll add the AutoGenerateColumns property to the DataGrid so that it automatically adapts to the data source it is connected to.

<UserControl x:Class="DataGridTutorial.Page"

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"

Height="300">

<TextBlock Text="Filter :"

Canvas.Left="10" Canvas.Top="15" Width="100"></TextBlock>

<TextBox Text="" x:Name="country"

Canvas.Left="60" Canvas.Top="10" Width="100"></TextBox>

<Button Content="Load"

Canvas.Left="180" Canvas.Top="11" Width="50"></Button>

<my:DataGrid x:Name="grid" AutoGenerateColumns="True"

Canvas.Left="10" Canvas.Top="50" Width="380" Height="230"

RowBackground="Aquamarine"

AlternatingRowBackground="White"></my:DataGrid>

</Canvas>

</UserControl>

Finally, we’ll add an event handler to the Click event on the button. Position your cursor right after the Content of the Button, and press CTRL – SpaceBar for Code Content Assist.

Select the Click event. After a second, a wizard is displayed that let you specify the name of the C# code behind associated with the button Click action.

Name it Button_Click and confirm. You are automatically directed to the code behind file Page.xaml.cs.

Let’s affect a static list to our DataGrid by setting its ItemsSource.

Copy and paste the following code :

using ...;

namespace DataGridTutorial

{

public partial class Page : UserControl

{

/**

* Event handler of <code>Button.Click</code>.

private void Button_Click(object sender, RoutedEventArgs arg1) {

grid.ItemsSource = new string[] { "Eclipse Tools for Silverlight",

"is an open source project",

"delivered by SOYATEC",

"and funded by Microsoft" };

}

public Page()

{

InitializeComponent();

}

Run the application again, and press the Load Button.

Loading and filtering multi-dimensional data

The following code defines a Customer class composed of a Name, Company and a Country. After initializing an Array of Customers, we will filter it with the Filter if it has been specified.

Notice that we use the Linq technology to filter the contents (Silverlight 2 embeds the Linq to Object and Linq to XML frameworks). Replace the contents of Page.xaml.cs by the following code :

public partial class Page : UserControl

{

// Internal Class

public class Customer

{

public string ContactName { get; set; }

public string Company { get; set; }

public string Country { get; set; }

public Customer() { }

}

// Initialize list of customers to display in the Grid

Customer[] customers = new Customer[] {

new Customer { ContactName = "Stève Sfartz", Company = "Microsoft", Country = "France" },

new Customer { ContactName = "Vijay Rajagopalan", Company = "Microsoft", Country = "United States" },

new Customer { ContactName = "Yves Yang", Company = "Soyatec", Country = "France" }

};

public Page()

{

InitializeComponent();

}

private void Button_Click(object sender, RoutedEventArgs e)

{

// Retreive Filter set in the Silverlight UI

string filter = country.Text.Trim();

// Display filtered results in Grid if the filter is not empty

if (String.IsNullOrEmpty(filter)) {

grid.ItemsSource = customers;

}

else {

// Filter

var selection = from c in customers where c.Country == filter select c;

// Display in Grid

grid.ItemsSource = selection.ToArray<Customer>();

}

Run the project and click the Load Button.

Enter France as a Filter and Click on the Load Button again

Author

Steve SFARTZ works for Microsoft France as an Architect Evangelist, with expertise in Enterprise Architecture, Interoperability, SOA & Cloud Computing.

You’ll find further guidance about Silverlight & Java interoperability on A Cup of Silverlight.
If you can read french, you may check one of my other blogs : Think Big mais pas trop..., SOA & Interop @Microsoft France, Cloud Computing @ Microsoft France.

eclipse4SL : “Hello World” Tutorial

Steve SFARTZ — Mon, 13 Oct 2008 15:10:00 GMT

Duration

30 minutes

Description

This tutorial is inspired from Scott Guthrie Silverlight 2 Series, adapted from Visual Studio to the eclipse4SL environment. A pdf version of the tutorial is attached at the end of this post and accessible here.

Prerequisites

After installing eclipse4SL, activate the Silverlight perspective by selecting one of them from the menu Window > Open Perspective > Other….

Note : eclipse4SL proposes 2 perspectives :

· Eclipse style : the project explorer is docked on the left, the palette is docked on the right

· Visual Studio style : it is the opposite.

Creating a New Silverlight Application using eclipse4SL

We'll start by selecting the File->New menu item within Eclipse and use the New Silverlight Project menu to create a "Silverlight Web Project" :

First time through you need to click other and scroll down to the Silverlight folder.

Note : eclipse4SL proposes 2 types of Silverlight projects :

· the “Silverlight Project” should be used to create Silverlight Application (ie, it does not comprise a Web Site which hosts the Silverlight application),

· whereas the “Silverlight Web Project” option comprises 2 Eclipse projects : one which holds the Silverlight Application while the second one is the Web application which hosts the Silverlight code.

We'll name the project "Hello World Tutorial".

When we click the "Finish" button, eclipse4SL will create two related projects :

· a Silverlight client application (HelloWorldTutorial)

· and a Web application (HelloWorldTutorial.Web).

Note : Both projects conform to the standard Silverlight project hierarchy tied by the .NET Build command. This architecture allows us to switch back and forth between Eclipse, Visual Studio and Expression Blend. This is a important characteristic of eclipse4SL that make it easier to work in a Mixed environment.

Let’s run the application right away to get an instant Microsoft Silverlight touch J

From the Eclipse Run options, select “Run Configurations...”. In the Snapshot below, no configuration pre-exists (no launch history).

Select "Silverlight Web App" and create a new Launch Configuration by clicking the icon at the top left, name the configuration HelloWorldTutorial, and select the HelloWorldTutorialTestPage.html from the HelloWorldTutorial.Web project as the Start page.

Click Apply and Run…

A browser window opens and displays an empty screen. The snapshot shows Internet Explorer and FireFox since both are supported on Windows. In the next section, we’ll add components to the user interface, so far, it’s empty. Notice that if you right-click on the blank surface, the Silverlight runtime menu is displayed.

Note: Silverlight Applications can be used with any web-server (should it be IIS or Tomcat on Windows,or Tomcat on Mac or Linux) and hosted within static HTML files or any server-side generated page (including .Net, PHP, Java, Python, Ruby, etc). For this HelloWorld tutorial we won't be writing any server-side code.

Understanding What Is In a Silverlight Application

By default a newly created Silverlight application project contains a Page.xaml and App.xaml file, as well as code behind class files (which can be written in VB, C#, Ruby or Python) that are associated with them:

XAML files are XML text files that can be used to declaratively specify the UI of a Silverlight or WPF application (Windows Presentation Foundation that is the Rich Desktop technology corresponding to Silverlight in the Browser). XAML can also be used more broadly to declaratively represent .NET objects (Workflows..)

The App.xaml file is typically used to declare resources, such as brush and style objects that are shared across the application. The Application code-behind class for the App.xaml file can be used to handle application level events - like Application_Startup, Application_Exit and Application_UnhandledException.

The Page.xaml file is by default the initial UI control that is loaded when the application activates. Within it we can use UI controls to define our user interface, and then handle events off of them within the Page code-behind class.

When we build our HelloWorld project, Eclipse will by default compile the code and .XAML markup into a standard .NET assembly file, and then package it and any static resources (like images or static files we want to include in it) into a " HelloWorld.xap" file on disk :

".xap" files (pronounced "zap") use the standard .zip compression algorithm to minimize client download size. Our "Hello World" Silverlight application should be about 4KB in size (in fact it is 130 Ko in M1, see below).

Note : Some controls are implemented in assemblies that if used are redistributed in the application's .xap file (which will increase an application's size above the 4kb base size). All of the controls used in the HelloWorld application are in the core Silverlight 2 runtime - which means that the total download size of the finished application will probably only be in the 6-8kb range (so very small and fast).

The October 2008 community preview (M1) of eclipse4SL embeds a set of extended controls (contained in the System.Windows.Controls.Data.dll library). The eclipse4SL dev team had to take this extreme shortcut to deliver on time. This will be fixed for M2.

To host and run a Silverlight 2 application, you can add an <object> tag into any standard HTML page (no JavaScript required) that points to the .xap file. Silverlight will then automatically download the .xap file, instantiate it, and host it within that HTML page in the browser. This works cross browser (Safari, FireFox, IE, etc) and cross platform (Windows, Mac, and Linux).

Learning how to Add Controls and Handle Events

Right now our Hello World application doesn't do anything, and when it is run it brings up an empty page.

We can change this by opening up the Page.xaml file in the project and adding some content to it, by dragging the “Button” from the eclipse4SL Palette to the Page.xaml source XML code.

Note : Drag & Drop onto the rendering surface is not implemented. You should drag the UIElement to the XAML code area.

We'll begin by changing the background of the grid and by declaring a Button control within it. We'll give the button an "x:Name" attribute value of "MyButton" - which will allow us to programmatically reference it within our code-behind class. We'll also set its Content, Width and Height properties:

Note: Html tags Content, Width and Height are case sensitive. If you write height or width instead, you’ll get a 100% progress bar at run time and a blank screen but no further warning.

When we run the application our button will then show up in the middle of the page with "Push Me" content text like below:

To add behavior to our button we can add a "Click" event handler to it. We can do this in source view by typing the event name “Cl...” and using Code Completion (Ctrl + Space Bar).

Choose the Click event. Then a wizard is displayed to assist in the delegate method development.

We can then either type a new event handler method name to use, or optionally use the default naming convention :

eclipse4SL will then automatically create a stub event handler implementation in our code-behind class file.

We can use this event handler to update the Button's content with a new message when it is clicked:

/**

* Event handler of <code>ButtonClick</code>.

private void ButtonClick(object sender, RoutedEventArgs arg1) {

MyButton.Content = "Pushed";

}

After making the change above we can re-run the application and push the button again, and now its content is updated with a "Pushed!" message:

Next Steps

We still have a little more work left to-do before our application is done... :-)

Our next step will be to setup the overall UI layout structure of our application, and arrange more controls within it. Using layout management. This article from Scott Guthrie has not be ported yet to eclipse4SL. If you wish to contribute, this is your opportunity.

Author

Steve SFARTZ works for Microsoft France as an Architect Evangelist with expertise in Enterprise Architecture, Interoperability, SOA & Cloud Computing.