Gaurav » xaml

Using Flex with Ruby on Rails

Gaurav — Wed, 26 Mar 2008 19:08:39 +0000

This is the second blog post in a series of three posts comparing Flex with Silverlight. In my previous post I demonstrated how to integrate a scaffolded Rails application with Silverlight. Here I will be showing the same with Flex. The steps needed to create the Rails application are also mentioned here.

Creating a new Flex project:

Open Flex builder and create a new Flex project.

Leave all the options to default and click Finish. A blank project is now created for you.

Add a List control to the default mxml file. It should look like:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:List id="userList" width="200" height="200"/>
mx:Application>

Now create a script tag inside the source and add a Bindable element to it:

[Bindable]
private var users:XMLListCollection = new XMLListCollection();

I am using an XMLListCollection because I can easily add/remove elements from it.

Now send request to the server and bind the result to the list box:

First create a new HTTPService element:

"userIndexService" resultFormat="e4x" result="userIndexServiceResult(event)" url="http://localhost:3000/users.xml"/>

and handle its result:

private function userIndexServiceResult(event:ResultEvent):void{
    for each(var xml:XML in event.result.user as XMLList){
        users.addItem(xml);
    }
}

To invoke this service we need to call its “send()” method with appropriate paramater, which in this case are none.

So the code now looks like:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="sendServiceRequest(event)">
    <mx:Script>
        [CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.collections.XMLListCollection;
            [Bindable]
            private var users:XMLListCollection = new XMLListCollection();

            private function sendServiceRequest(event:Event):void{
                userIndexService.send();
            }
            private function userIndexServiceResult(event:ResultEvent):void{
                for each(var xml:XML in event.result.user as XMLList){
                    users.addItem(xml);
                }
            }
        ]]>
    mx:Script>
    <mx:HTTPService id="userIndexService" resultFormat="e4x" result="userIndexServiceResult(event)" url="http://localhost:3000/users.xml"/>
    <mx:List dataProvider="{users}" id="userList" width="200" height="200" labelField="name"/>
mx:Application>

And the output looks like:

Notice that we are sending the index request in the initialize method of the application.

Now to add controls which show the currently selected element. Its really easy. Just add the folowwing to the code and DataBinding will do the rest:

<mx:HBox>
    <mx:Label text="Name" width="50"/>
    <mx:TextInput text="{userList.selectedItem.name}" width="150" id="userName"/>
mx:HBox>
<mx:HBox>
    <mx:Label text="Address" width="50"/>
    <mx:TextInput text="{userList.selectedItem.address}" width="150" id="userAddress"/>
mx:HBox>

Now it loooks like:

Implementing the full CRUD:

Now we need to add the other three HTTPServices.

<mx:HTTPService id="userIndexService" resultFormat="e4x" result="userIndexServiceResult(event)" url="http://localhost:3000/users.xml"/>
<mx:HTTPService id="userCreateService" resultFormat="e4x" result="userCreateServiceResult(event)" method="POST" url="http://localhost:3000/users.xml"/>
<mx:HTTPService id="userUpdateService" resultFormat="e4x" method="POST"/>
<mx:HTTPService id="userDeleteService" resultFormat="e4x" method="POST"/>

And their corresponding callbacks.

private function userCreateServiceResult(event:ResultEvent):void{
    users.addItem(event.result as XML);
}

Some controls to invoke these services:

<mx:HBox>
    <mx:Button label="Create" id="createUser" click="sendServiceRequest(event)"/>
    <mx:Button label="Update" id="updateUser" click="sendServiceRequest(event)"/>
    <mx:Button label="Delete" id="deleteUser" click="sendServiceRequest(event)"/>
mx:HBox>

And their event handlers (just one in this case):

private function sendServiceRequest(event:Event):void{
    if(event.target.id == 'createUser'){
        userCreateService.send({'user[name]': userName.text, 'user[address]': userAddress.text});
    }else if(event.target.id == 'updateUser'){
        userUpdateService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
        userUpdateService.send({'user[name]': userName.text, 'user[address]': userAddress.text, _method: 'put'});
        users[userList.selectedIndex].name = userName.text;
        users[userList.selectedIndex].address = userAddress.text;
    }else if(event.target.id == 'deleteUser'){
        userDeleteService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
        userDeleteService.send({_method: 'delete'});
        users.removeItemAt(userList.selectedIndex);
    }else{
        userIndexService.send();
    }
}

Little bit of knowledge of how REST is implemented in Rails is required to understand the parameters to the “send()” method of HTTPService class is required, which is out of scope of this blog post.

The TestFrontEnd.mxml should now have the folowwing code:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="sendServiceRequest(event)">
    <mx:Script>
        [CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var users:XMLListCollection = new XMLListCollection();

            private function sendServiceRequest(event:Event):void{
                if(event.target.id == 'createUser'){
                    userCreateService.send({'user[name]': userName.text, 'user[address]': userAddress.text});
                }else if(event.target.id == 'updateUser'){
                    userUpdateService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
                    userUpdateService.send({'user[name]': userName.text, 'user[address]': userAddress.text, _method: 'put'});
                    users[userList.selectedIndex].name = userName.text;
                    users[userList.selectedIndex].address = userAddress.text;
                }else if(event.target.id == 'deleteUser'){
                    userDeleteService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
                    userDeleteService.send({_method: 'delete'});
                    users.removeItemAt(userList.selectedIndex);
                }else{
                    userIndexService.send();
                }
            }

            private function userIndexServiceResult(event:ResultEvent):void{
                for each(var xml:XML in event.result.user as XMLList){
                    users.addItem(xml);
                }
            }
            private function userCreateServiceResult(event:ResultEvent):void{
                users.addItem(event.result as XML);
            }
        ]]>
    mx:Script>

    <mx:HTTPService id="userIndexService" resultFormat="e4x" result="userIndexServiceResult(event)" url="http://localhost:3000/users.xml"/>
    <mx:HTTPService id="userCreateService" resultFormat="e4x" result="userCreateServiceResult(event)" method="POST" url="http://localhost:3000/users.xml"/>
    <mx:HTTPService id="userUpdateService" resultFormat="e4x" method="POST"/>
    <mx:HTTPService id="userDeleteService" resultFormat="e4x" method="POST"/>

    <mx:List dataProvider="{users}" id="userList" width="200" height="200" labelField="name"/>

    <mx:HBox>
        <mx:Label text="Name" width="50"/>
        <mx:TextInput text="{userList.selectedItem.name}" width="150" id="userName"/>
    mx:HBox>
    <mx:HBox>
        <mx:Label text="Address" width="50"/>
        <mx:TextInput text="{userList.selectedItem.address}" width="150" id="userAddress"/>
    mx:HBox>
    <mx:HBox>
        <mx:Button label="Create" id="createUser" click="sendServiceRequest(event)"/>
        <mx:Button label="Update" id="updateUser" click="sendServiceRequest(event)"/>
        <mx:Button label="Delete" id="deleteUser" click="sendServiceRequest(event)"/>
    mx:HBox>

mx:Application>

This is the end result:

As I mentioned in my last blog post it is not the best way to make this application as there is no error handling. But I think this is the simplest way to make this application.

You also might have noticed Flex requires a lot less lines of code as compared to Silverlight. But that is also dependent on my coding approach.

Full code for this application can be downloaded from:

del.icio.us Tags: adobe,flex,mxmx,rails,ruby,ruby on rails,silverlight,xaml

Using Silverlight with Ruby on Rails

Gaurav — Wed, 26 Mar 2008 12:55:12 +0000

In this post I will be showing a really simple example of creating a Silverlight frontend for a Rails backend. This is what I think will be a three part series comparing Silverlight with Flex.

The steps will be:

Creating a Rails application.
Creating a frontend for it in silverlight.
Creating a frontend for it in Flex.
Comparing the approaches taken in both the frontends.

I will try to keep changes in the backend Rails application to a minimum.

Creating a Rails Application

F:\>rails test
F:\>cd test
F:\test>ruby script\generate scaffold user name:string address:text
F:\test>rake db:create
F:\test>rake db:migrate
F:\test>ruby script\server

Before running the migrations add the following code in the first migration file (./db/migrate/001_create_users.rb) to create some initial data. So it should look like:

class CreateUsers < ActiveRecord::Migration
  def self.up
    create_table :users do |t|
      t.string :name
      t.text :address
      t.timestamps
    end

    User.create(:name=> "Gaurav", :address=> "Gaurav's address")
    User.create(:name=> "Rishav", :address=> "Rishav's address")
    User.create(:name=> "Bhavesh", :address=> "Bhavesh's address")
  end

  def self.down
    drop_table :users
  end
end

Creating a new C# based Silverlight project

Open up Visual Studio 2008 (with Silverlight tools installed. You can also download a trial version of Visual Studio 2008 from here). And create a new project:

Open the page.xaml file and add a ListBox to it. It should look like:

<UserControl x:Class="TestFrontEnd.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox x:Name="userList" Height="200"/>
    Grid>
UserControl>

Now when the server responds with xml, we will parse that using Linq. For that we need a User class that is like the user model on the Rails side. So it should have 3 fields:

id
name
address

It should look like:

namespace TestFrontEnd {
    public class User {
        public int id { get; set; }
        public string name { get; set; }
        public string address { get; set; }
    }
}

To make things simpler I have created a HTTPService class that behaves something like the Flex based HTTPService class. Here is the source (too big to paste inline). Add it to your project. You will need to include System.Net assembly your project to to make it work. Its usage is quite simple.

HTTPService userIndexService = new HTTPService();
userIndexService.Url = "http://localhost:3000/users.xml";
userIndexService.ServiceComplete += new HttpServiceCompleteEventHandler(userIndexService_ServiceComplete);
userIndexService.send();

You can also give the request method like:

userIndexService.Method = "POST";

Now add an ObservableCollection to the Page class:

private ObservableCollection userListItems = new ObservableCollection();

We will be using this for databinding with the ListBox to display all the users.

Add the System.Xml.Linq to your project. In the userIndexService_ServiceComplete event handler write:

void userIndexService_ServiceComplete(HttpServiceCompleteEventArgs e) {
    XDocument users = XDocument.Parse(e.Response);
    User[] usersList = (from x in users.Descendants("user")
            select new User
            {
                id = int.Parse(x.Descendants("id").First().Value),
                name = x.Descendants("name").First().Value,
                address = x.Descendants("address").First().Value,
            }).ToArray();
    foreach (User user in usersList)
        userListItems.Add(user);
}

So when the service completes all the users will be filled in the ObserveableCollection. Now to bind it to the userList ListBox. In the constructor of the Page class write:

userList.DataContext = userListItems;

And modify the code for the userList ListBox to look like:

<ListBox x:Name="userList" Height="200" ItemsSource="{Binding}" DisplayMemberPath="name" />

Add a crossdomain.xml file to the rails project’s public folder:

xml version="1.0"?>
DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
cross-domain-policy>

We are basically allowing our Silverlight app to access the rails server. You won’t be requiring this file if the Rails server is serving the Silverlight application, but currently it is not the case.

Now when you run the code you should see:

Now I will add a few more lines of code to show the selected item in TextBox. Add/Update the following to page.xaml:

<ListBox x:Name="userList" Height="200" ItemsSource="{Binding}" DisplayMemberPath="name" SelectionChanged="userList_SelectionChanged"/>
<StackPanel x:Name="controls">
    <TextBox Text="{Binding name, Mode=Twoway}" x:Name="userName"/>
    <TextBox Text="{Binding address, Mode=Twoway}" x:Name="userAddress"/>
StackPanel>

The first TextBox is showing name and second is showing the password. The binding mode is set to TwoWay so that the changes in TextBox are automatically to the userListItems.

Add the corresponding event handler to Page class:

private void userList_SelectionChanged(object sender, SelectionChangedEventArgs e) {
    controls.DataContext = userList.SelectedItem as User;
}

Now when you run the code you should see:

Download the code upto this point:

Implementing the full CRUD :

Firstly I willl be doing a bit of refactoring. Move the xml parsing code using Linq to the User class. So it should now look like:

public class User {
    public int id { get; set; }
    public string name { get; set; }
    public string address { get; set; }

    public static User[] users_from_xml(String xml_string){
        XDocument users = XDocument.Parse(xml_string);
        return (from x in users.Descendants("user")
            select new User
            {
                id = int.Parse(x.Descendants("id").First().Value),
                name = x.Descendants("name").First().Value,
                address = x.Descendants("address").First().Value,
            }).ToArray();
    }

    public static User user_from_xml(String xml_string) {
        return users_from_xml(xml_string).First();
    }
}

Change the Page class to:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Xml.Linq;

namespace TestFrontEnd {
    public partial class Page : UserControl {
        private ObservableCollection userListItems = new ObservableCollection();

        private HTTPService userIndexService;
        private HTTPService userCreateService;
        private HTTPService userUpdateService;
        private HTTPService userDeleteService;

        public Page() {
            InitializeComponent();
            // setting the databinding
            userList.DataContext = userListItems;
            controls.DataContext = new User();

            // service to get all te users form the server
            userIndexService = new HTTPService();
            userIndexService.Url = "http://localhost:3000/users.xml";
            userIndexService.ServiceComplete += new HttpServiceCompleteEventHandler(userIndexService_ServiceComplete);
            userIndexService.send();

            // create a new user
            userCreateService = new HTTPService();
            userCreateService.Url = "http://localhost:3000/users.xml";
            userCreateService.Method = "POST";
            userCreateService.ServiceComplete += new HttpServiceCompleteEventHandler(userCreateService_ServiceComplete);

            // update a user, we will not be trapping the results
            userUpdateService = new HTTPService();
            userUpdateService.Method = "POST";

            // delete a user
            userDeleteService = new HTTPService();
            userDeleteService.Method = "POST";
        }

        private void _userList_SelectionChanged(object sender, SelectionChangedEventArgs e) {
            controls.DataContext = userList.SelectedItem as User;
        }

        private void userIndexService_ServiceComplete(HttpServiceCompleteEventArgs e) {
            foreach (User user in User.users_from_xml(e.Response))
                userListItems.Add(user);
        }
        private void userCreateService_ServiceComplete(HttpServiceCompleteEventArgs e) {
            userListItems.Add(User.user_from_xml(e.Response));
        }

        private void createButton_Click(object sender, RoutedEventArgs e) {
            userCreateService.send(String.Format("{0}={1}&{2}={3}", "user[name]", userName.Text, "user[address]", userAddress.Text));
        }

        private void updateButton_Click(object sender, RoutedEventArgs e) {
            User _selectedUser = userList.SelectedItem as User;
            userUpdateService.Url = "http://localhost:3000/users/" + _selectedUser.id.ToString() + ".xml";
            userUpdateService.send(String.Format("{0}={1}&{2}={3}&{4}={5}", "user[name]", userName.Text, "user[address]", userAddress.Text, "_method", "PUT"));
            userListItems[userList.SelectedIndex] = _selectedUser;
        }

        private void deleteButton_Click(object sender, RoutedEventArgs e) {
            User _selectedUser = userList.SelectedItem as User;
            userDeleteService.Url = "http://localhost:3000/users/" + _selectedUser.id.ToString() + ".xml";
            userDeleteService.send(String.Format("{0}={1}", "_method", "DELETE"));
            userListItems.Remove(_selectedUser);
        }

    }
}

To understand the specific parameters to the “send()” method of the HTTPService class you will need a little bit of understanding of how REST is implemented in Rails and how parameters are passed to a url, which is out of scope of this blog post.

Change Page.xaml to:

<UserControl x:Class="TestFrontEnd.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <ListBox x:Name="userList" ItemsSource="{Binding}" DisplayMemberPath="name" SelectionChanged="_userList_SelectionChanged" Height="200"/>
            <StackPanel x:Name="controls">
                <TextBox Text="{Binding name, Mode=Twoway}" x:Name="userName"/>
                <TextBox Text="{Binding address, Mode=Twoway}" x:Name="userAddress"/>
            StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button Content="Create" x:Name="createButton" Click="createButton_Click"/>
                <Button Content="Update" x:Name="updateButton" Click="updateButton_Click"/>
                <Button Content="Delete" x:Name="deleteButton" Click="deleteButton_Click"/>
            StackPanel>
            <TextBlock x:Name="trace" />
        StackPanel>
    Grid>
UserControl>

This is how it looks like now:

So this is full CRUD implementation using Silverlight as frontend.

This is not the most optimal way to implement CRUD it is very easy to understand. It also should be noted that I haven’t added error checking of any type in the code and there is a lot of code repetition. But I guess that could be improved upon further once the most simple scenario is implemented. My style of coding is “First make it work and then optimize it”, and as I have mentioned it before it is certainly not the most optimized way to code but it sure works :)

One microsoft releases better databinding capabilities in controls and some simpler classes for HTTP based communication, this code would be much more simpler.

Full code for this aplication can be downloaded from:

Rails code

Silverlight code

del.icio.us Tags: adobe,C#,crud,flex,microsoft,rails,ruby on rails,silverlight,xaml

Silverlight 2.0 Beta-1 now available, version 1.0 ported to Nokia mobiles

Gaurav — Wed, 05 Mar 2008 19:23:54 +0000

Microsoft has just released highly anticipated first beta of Silverlight here. The development tools for visual studio 2008 can be downloaded from here. Tutorials are also available on the same site.

This link reports that Silverlight is now also available on the Nokia mobile devices (specifically S60 on Symbian OS, as well as for Series 40 devices and Nokia Internet tablets). ~~It seems really strange that silverlight wasn’t ported to window mobile devices first.~~ There is a version available for window mobiles as well. I hope it is better than flash lite which really sucks.

If the performance of Silverlight is anywhere near flash then it could be a huge success for Microsoft as .Net as a development platform is already very popular and developers can use their existing skills to create better web experiences. Also IronPython and IronRuby (two of the Silverlight programming languages) are much better (and faster?) languages than Actionscript and .Net provides a much bigger library set.

*Update- I just checked out the demo controls page here and its performance is just fine. I felt no lag while using the demo controls. ~~The mouse wheel still doesn’t work~~ (this site demonstrates how to use mouse wheel in silverlight. here is another example) and the controls look like they need a bit more polish.

Here is the list of controls available with Silverlight Beta-1

This screenshot was taken from Expression Blend 2.5 march preview which can be downloaded from here.

Creating a User Interface in Ruby using WPF

Gaurav — Tue, 09 Oct 2007 11:41:23 +0000

Let me first explain what is WPF?

WPF is the graphical subsystem if the .NET 3.0 framework and it is there to take the place of window forms which we used with earlier versions of .NET

So what’s so great about WPF?

Actually WPF is has its roots in DirectX API so you can easily create 2D and 3D interfaces in it without putting ant load on the processor. Also it is vector based and stores the information for the generating the UI in separate XAML files. So we have logical separation of a control from its appearance.

Further details: http://en.wikipedia.org/wiki/Windows_Presentation_Foundation

The following are the requirements for running this example:

rubyclr gem. Use gem install rubyclr -y
.NET framework 3.0

In this example I will creating a creating a textarea along with a button, trapping the events on the button and logging it inside the textarea .

Here is the code for the xaml file. Store this file with filename ui.xaml. This file contains the UI for the application.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot">
<Button Margin="8,0,8,5.723" VerticalAlignment="Bottom" Content="Button" Name="the_button"/>
<TextBox Margin="8,8,8,38" Name="the_text_box"/>
Grid>
Window>

Next I will be creating the codebehind file in ruby. Here in this file we have all the application logic. Save this file as logic.rb.

# load the libraries
require 'rubygems'
require 'wpf'
# load the xaml file
window = XamlReader.Load(System::IO::File.open_read('ui.xaml'))
  
# get the controls
button = window.find_name('the_button')
txt_box = window.find_name('the_text_box')
# trap the mouse enter event
button.mouse_enter do |sender, args|
txt_box.text += "MOUSE ENTERED\n"
end
# trap the mouse leave event
button.mouse_leave do |sender, args|
txt_box.text += "MOUSE LEFT\n"
end
# trap the mouse click event
button.click do |sender, args|
txt_box.text += "MOUSE CLICKED\n"
end
# run the application (most important)
Application.new.run(window)

The code given above explains itself.

We are first loading the ui.xaml file and then finding the two controls in the lines 8, 9.

Then the three event handlers are declared in lines 11, 14, 19. So whenever the mouse events are fired the corresponding event if traced into the textbox.

And here is the output.

del.icio.us Tags: ruby,user interface,windows,wpf,xaml