Janne Mattila's blog : Silverlight

Creating Localization Tool with Silverlight

jannemattila — Sun, 08 Jun 2008 15:11:00 GMT

Since Silverlight 2 is in Beta 2 phase it’s definately time to create small application with it. Together with my friend we’e created small example application called Localization Tool. Idea in our example application is pretty simple... allow end users to modify texts used in application. And for the end user it should be easy, intuitive and of course fast. We used a lot of information available from internet in order to help us in the implementation (see links at the end of this post).

Before going into implementation details you can check out the final solution in action (click the image to open video in new window):

In our solution we took WCF + LINQ + SQL approach and created following simple datatable:

That table is then used to store data like this:

After that we’ve created LINQ to SQL data class for our table:

Then we created service that provides data access to our localization table. All code behind that service is here:

using System;
using System.Collections.Generic;
using System.Linq;

namespace LocalizationTool_Web
{
  public class LocalizationService : ILocalizationService
  {
    public List<Localization> GetLocalizationByLanguage(string language)
    {
      LocalizationDataClassesDataContext dataContext = 
        new LocalizationDataClassesDataContext();
      var query = from localization in dataContext.Localizations
            where localization.Language.Equals(language)
            select localization;
      return query.ToList();
    }

    public void UpdateLocalization(Localization localization)
    {
      LocalizationDataClassesDataContext dataContext = 
        new LocalizationDataClassesDataContext();
      var updateRow = dataContext.Localizations.First(
        loc => 
          loc.LanguageKey.Equals(localization.LanguageKey) && 
          loc.Language.Equals(localization.Language));
      updateRow.Text = localization.Text;
      updateRow.Comment = localization.Comment;
      dataContext.SubmitChanges();
    }

    public String [] GetLocales()
    {
      LocalizationDataClassesDataContext dataContext = 
        new LocalizationDataClassesDataContext();
      var query = (from localization in dataContext.Localizations
             select localization.Language).Distinct();

      return query.ToArray();
    }
  }
}

Now we’re ready to create UI for our application! We’ve used stackpanels for the layout management and then we used few Style elements to make things look little bit better.
Here is small example about the styles in our App.xaml:

<Application xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       x:Class="LocalizationTool.App">
  <Application.Resources>
    
    <Style x:Key="Border" TargetType="Border">
      <Setter Property="CornerRadius" Value="10"/>
      <Setter Property="Background" Value="#FFdedede"/>
      <Setter Property="VerticalAlignment" Value="Top"/>
      <Setter Property="Margin" Value="8,8,8,8"/>
    </Style>
<!-- ... and few more styles ... –>

At the UserControl_Loaded we query for all the possible locales so that we can list them add the ListBox. Here is the code for that (unfortunately the code looks terrible since it’s splitted into several rows only for display reasons):

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  LocalizationClientService.LocalizationServiceClient client = 
    new LocalizationTool.LocalizationClientService.LocalizationServiceClient();
  client.GetLocalesCompleted += 
    new EventHandler<LocalizationClientService.GetLocalesCompletedEventArgs>
      (client_GetLocalesCompleted);
  client.GetLocalesAsync();
}

void client_GetLocalesCompleted(object sender, 
  LocalizationClientService.GetLocalesCompletedEventArgs e)
{
  languages.ItemsSource = e.Result;
}

Using that same method we query all the localizations specific for that selected locale. There’s nothing fancy about that.. but let’s look at the search functionality little bit closer.
Our search button was defined like this in our Page.xaml:

1
2
3

<TextBox Style="{StaticResource TextBox}" 
     TextChanged="searchCriteria_TextChanged" 
     x:Name="searchCriteria" />

And in our code behind we had following code to execute the query:

String search = searchCriteria.Text.ToLower();
var query = from row in rows
      where
        row.LanguageKey.ToLower().Contains(search) ||
        row.Text.ToLower().Contains(search) ||
        row.Comment.ToLower().Contains(search)
      select row;
SetDatagridItemSource(query.ToArray());

And you can probably pretty easily see that actually that search box functionality doesn’t retrieve data from server at all. It uses the previously retrieved data (variable rows) and filters out it by using linq. Therefore the performance is really good.

We also added functionality to view two different languages at the same time. This helps to make the translations since the user can directly see what’s the equivalent row in another language. This was implemented withthe concept base language. User can select what language he/she wants to use at the compare. Here’s example of that:

This was implemented by using the RowDetails of datagrid. Here is the xaml of our datagrid:

<System_Windows_Controls:DataGrid 
   AutoGenerateColumns="True" x:Name="resultsDatagrid"
   Width="770" Height="290" Margin="10,10,10,10"
   CommittingEdit="resultsDatagrid_CommittingEdit"
   SelectionChanged="resultsDatagrid_SelectionChanged"
   LoadingRowDetails="resultsDatagrid_LoadingRowDetails">
  <System_Windows_Controls:DataGrid.RowDetailsTemplate>
    <DataTemplate>
      <StackPanel x:Name="tooltipPanel" 
             Orientation="Horizontal" Background="LightYellow" />
    </DataTemplate>
  </System_Windows_Controls:DataGrid.RowDetailsTemplate>
</System_Windows_Controls:DataGrid>

And in resultsDatagrid_LoadingRowDetails we just searched for the corresponding data row from our local base language array. If row was found then we dynamically created TextBoxes to display the values of base language.

This was just small example application that demonstrates the possibilities of Silverlight. Hopefully you got the idea that you can do pretty cool business applications with it.

Anyways... Happy hacking!

J

Links:

Silverlight.Net - Getting started
Silverlight 2 Beta1 + WCF + LINQ to SQL = a powerfull combination
Displaying SQL Database Data in a DataGrid using LINQ and WCF
Scott Guthrie: Silverlight Tutorial Part 3: Using Networking to Retrieve Data and Populate a DataGrid

Create Silverlight 1.1 applications for SharePoint with VS2008

jannemattila — Thu, 20 Dec 2007 00:26:56 GMT

Title says it all :-) My plan is to create small walkthrough how you can create your own Silverlight 1.1 application with Visual Studio 2008 and then run it in SharePoint. And I don't want to install a lot of stuff to my SharePoint environment so I'll just create simple web part to host the Silverlight application. All development work will be done outside SharePoint environment.

If you're new to Silverlight then I suggest you start by looking at least silverlight.net and cool Coding4Fun Silverlight 8-Ball example. The first link is starting point for Silverlight development and the second one is really cool sample that shows how can you create 8-Ball game with Silverlight.

Now you know something about Silverlight :-) So we can get started with my example.

I have VS2008 running on my Vista and I have downloaded and installed Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 to help me developing Silverlight applications. It has new project template that has all the necessary stuff already set up to build Silverlight 1.1 application. I also have SharePoint running in my Virtual PC and it's configured so that I can connect to it directly from my host machine (i.e. http://demo1:1000 in my host IE connects to the virtualized SharePoint).

At first I'll modify SharePoint so that I can host my new applications in there. Let's add few folders under _LAYOUTS:

ClientBin is folder that will contain all Silverlight client .dll files (=if you build your Silverlight project you automatically get ClientBin under your project folder which contains your projects client assemblies).

Silverlight folder is used to store .xaml files (=Silverlight pages). I also need to change settings for both of them in order make things work. First I'll change ClientBin settings:

Set only Read access and also set Execute permissions to None:

Then I'll add .dll to allowed mime types (and .pdb for future debugging purposes :-):

Then I'll change the Silverlight folders settings to support .xaml extension:

Now SharePoint is set up... but let's create web part that will actually host the Silverlight application in our page. Here's the code for that:

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;

namespace Silverlight_Web_Part
{
  [Guid("fc852641-9955-433c-945e-d773f46351eb")]
  public class Silverlight_Web_Part : WebPart
  {
    string xamlFile;
    [WebBrowsable(true), Personalizable(true)]
    public string XamlFile
    {
      get { return xamlFile; }
      set { xamlFile = value; }
    }

    public Silverlight_Web_Part()
    {
      this.ExportMode = WebPartExportMode.All;
    }

    protected override void Render(HtmlTextWriter writer)
    {
      if (string.IsNullOrEmpty(this.XamlFile) == false)
      {
        writer.Write("<div id='SilverlightControlHost' " + 
          "style='width: 640px; height: 480px;'></div>");
        writer.Write("<script type='text/javascript' " +
            "language='JavaScript' src='/_layouts/Silverlight.js'></script>");
        writer.Write("<script type='text/javascript' " +
          "language='JavaScript' src='/_layouts/SilverlightStarter.js'></script>");
        writer.Write("<script type='text/javascript' " +
          "language='JavaScript'>createSilverlight('" + xamlFile + "');</script>");
      }
      else
      {
        writer.Write("Xaml file is not selected.");
      }
    }
  }
}

My web part uses Silverlight.js and SilverlightStarter.js files. SilverLight.js is the same file that is included at the project when you create Silverlight 1.1 project in VS. SilverlightStarter.js is almost copy paste from that project template too but I have just modified it a little bit to support sending XAML file as parameter:

function createSilverlight(filename)
{
  Silverlight.createObjectEx({
    source: filename,
    parentElement: document.getElementById("SilverlightControlHost"),
    id: "SilverlightControl",
    properties: {
      width: "100%",
      height: "100%",
      version: "1.1",
      enableHtmlAccess: "true"
    },
    events: {}
  });
   
  document.body.onload = function() {
   var silverlightControl = document.getElementById('SilverlightControl');
   if (silverlightControl)
   silverlightControl.focus();
  }
}

And if you checkout my web part code on line 35 you actually notice that I'll just pass on the XAML file that has been set in web part properties:

Now we just need to add some Silverlight stuff and we're done. So here is the content of the Page.xaml (=THE application :-):

<Canvas x:Name="parentCanvas"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Loaded="Page_Loaded" 
    x:Class="MySilverLight.Page;assembly=/_LAYOUTS/ClientBin/MySilverLight.dll"
    Width="640"
    Height="480"
    Background="White"    
    >

 <Rectangle x:Name="MyRectangle" 
       Canvas.Top="25" Canvas.Left="25" 
       Width="50" Height="50" 
       Fill="Gray" MouseLeftButtonDown="MyMouseLeftButtonDown" />
 <TextBlock x:Name="MyText" 
       Text="Click either rectangle or me" 
       MouseLeftButtonDown="MyMouseLeftButtonDown" />
</Canvas>

And my code behind Page.xaml.cs contains following code:

using System;
using System.Windows.Controls;

namespace MySilverLight
{
  public partial class Page : Canvas
  {
    DateTime started = DateTime.Now;

    public void Page_Loaded(object o, EventArgs e)
    {
      // Required to initialize variables
      InitializeComponent();
    }

    public void MyMouseLeftButtonDown(object o, EventArgs e)
    {
      string runningTime = (DateTime.Now - started).TotalSeconds.ToString("F2");
      System.Windows.Shapes.Rectangle rectangle = o as System.Windows.Shapes.Rectangle;
      if (rectangle != null)
      {
        MyRectangle.Opacity = 1;
        MyText.Text = "You clicked rectangle! Application has been running for " + 
          runningTime + " seconds.";
      }

      System.Windows.Controls.TextBlock textBlock = o as System.Windows.Controls.TextBlock;
      if (textBlock != null)
      {
        MyRectangle.Opacity = MyRectangle.Opacity * 0.8;
        MyText.Text = "You clicked text block! Rectangle is fading away...";
      }
    }
  }
}

Now you're probably eager to know what our application actually does :-) Here is our application just after request:

And if user clicks the rectangle...

If user clicks the text...

Now we have working development environment so that we could build ant test Silverlight 1.1 applications and host them in SharePoint. Here are the steps so that you can (try :-) to do it yourself.

1) Create new Silverlight project in VS2008
2) Code :-)
3) Build your solution
4) Copy contents of ClientBin\*.* to the SharePoint _LAYOUTS\ClientBin folder
5) Copy *.xaml files from your project to the SharePoint Silverlight folder (Note: you need to verify correct path in x:Class! See my Page.xaml and line 5 in source)
6) Create page that uses Silverlight web part and select your newly created XAML file

Here was my small intro to Silverlight 1.1 with SharePoint. In this example I just used static .xaml files sitting in file system in order to make everything as simple as possible... I just wanted to demo how you can start experimenting with this combination. This can be extended and improved in many different ways and I'll probably come back to those in my future posts.

Anyways... Happy hacking!

J