MSDN Utopia : Silverlight

Build: Sharing types and instances between Silverlight and JavaScript

Salva Patuel — Sun, 26 Oct 2008 14:24:00 GMT

The first thing that ASP.NET developers ask themselves is how to reuse the current existing JavaScript functionality with Silverlight applications. The good news is that the Silverlight team has delivered what they have promised regarding the interaction between these two worlds. This quick post will show you how to expose types and managed instances to be used with your scripted code.

Let’s start with types, the first thing that we need to do is register the type using the System.Windows.Browser.HtmlPage object, this exposes an interesting method called RegisterCreateableType(string scriptAlias, Type type). This method publishes a managed type into the JavaScript scope. In order to allow this operation you need to decorate the type with the attribute [ScriptableTypeAttribute]. Let’s see how this is done:

[ScriptableTypeAttribute]

public class HtmlObject

{

public string Text {get;set;}

}

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

HtmlPage.RegisterCreateableType("HtmlObject", typeof(HtmlObject));

}

It is important to understand that this model has some limitations, the most important one is that the constructor has to be public and it has to be parameter less. Now, we can change the script in our HTML page as follows:

function OnClick()

{

var SLCtrl = document.getElementById('SilverlightControl');

var ManagedType = SLCtrl.Content.services.createObject("HtmlObject");

ManagedType.Text = "Hello from Javascript";

alert(ManagedType.Text);

}

</script>

Now, what if you want to share an existence instance so you can interact with both worlds in real time? Well, there is another very helpful method on the same namespace, it is called HtmlPage.RegisterScriptableObject(string scriptKey, object instance). This type needs to have the attribute [ScriptableMember()] on the methods and properties that we want to expose. Let’s see how we can do this:

public class SharedObject

{

private Button source;

public SharedObject(Button source)

{

this.source = source;

}

[ScriptableMember()]

public bool IsEnabled

{

set { this.source.IsEnabled = value; }

}

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("SharedObject", new SharedObject(cmdButton));

}

This instance is now available to the Silverlight content object and can be accessed in a very easy manner. When the following method is executed it will change the “IsEnabled” property of our Silverlight button.

function OnClick()

{
SLCtrl.Content.SharedObject.IsEnabled = false;

}

We can also put everything together and have these shared objects passed back and forward from one context to the other, if we expand our SharedObject class with a new method that process the first object that we have created we will be able to properly cast it.

[ScriptableMember()]

public HtmlObject Process(HtmlObject info)

{

info.Text += " (this has been processed)";

return info;

}

function OnClick()

{

var SLCtrl = document.getElementById('SilverlightControl');

var ManagedType = SLCtrl.Content.services.createObject("HtmlObject");

    ManagedType.Text = "Hello from Javascript";

      ManagedType = SLCtrl.Content.SharedObject.Process(ManagedType);

alert(ManagedType.Text);

}

</script>

As you can see “Process” is receiving a casted managed type. But what if you want to receive a non managed type? Well, there is another way of writing that method in a more generic way:

[ScriptableMember()]

public ScriptObject Process(ScriptObject info)

{

string Text = info.GetProperty("Text").ToString();

Text += " (this has been processed)";

info.SetProperty("Text", Text);

return info;

}

Think about the potential, not only sharing types and instances between your script and Silverlight but also when you need to share objects between different Silverlight applications

News: My Silverlight 2 book is nearly ready!

Salva Patuel — Wed, 27 Aug 2008 14:41:00 GMT

After months of writting, testing and understanding the inners of the hidden bugs, myself and my colleagues Jonathan Swift, Dan Wahlin and Chris Barker are finishing the last bits of the next book about Silverlight 2. The title will be "Silverlight 2 for ASP.NET developers" and will be published by Wrox.

The experience has been amazing, you will not imagine how hard is to properly structure the technical message in a book and then playing with Beta technology! But there is something that I gained for sure and is the deep understanding of how Silverlight 2 works. Once the book is out, I will publish some of the tips that we found that will really help you developing outstanding RIA!

I will publish in this space when the book is out and the link to the description.

Envision: Silverlight 2 Beta 2 and the competition

Salva Patuel — Wed, 04 Jun 2008 10:22:00 GMT

Silverlight 2 Beta 2 is nearly here (out at the end of this week), I want to highlight key announcements in TechEd and give you an overview on the competitiveness area.

User Interface Changes: Beta 2 includes improvements in animation support, error handling and reporting, automation and accessibility support, keyboard input support, and general performance. This release also provides more compatibility between Silverlight and WPF.

Silverlight 2 Controls: Beta 2 includes a new templating model called Visual State Manager that allows for easier templating for controls. Other features include the introduction of TabControl, text wrapping and scrollbars for TextBox, and for DataGrid additions include Autosize, Reorder, Sort, performance increases and more. Most controls are now in the runtime instead of packaged with the application.

Networking: Beta 2 includes improved Cross Domain support and security enhancements upload support for WebClient, and duplex communications (“push” from server to Silverlight client).

BCL: Beta 2 includes improved threading abilities, LINQ-to-JSON, ADO.NET Data Services support, better support for SOAP, and various other improvements to make networking and data handling easier.

Deep Zoom: Beta 2 introduces a new XML-based file format for Deep Zoom image tiles, as well as a new MultiScaleTileSource that enables existing tile databases to utilize Deep Zoom. Better, event driven notification for zoom/pan state is another improvement in Silverlight 2 Beta 2.

Moonlight: Another interesting areas that I want to highlight is the imminent release of Moonlight for Linux support, check this blog: http://tirania.org/blog/archive/2008/May-13-1.html

Silverlight Mobile: This is quite hermetic but Windows Mobile and Nokia based (S60, S40, N8xx Internet Tablet) devices as a first priority, they will support in the a version of the Silverlight 2 plug-in.

How is Silverlight different than Flash? Flex? Adobe AIR?
Some of the scenarios for Flash and Silverlight usage are similar, such as rich media/video within websites, or interactive rich content for e-commerce, e-learning, or advertising. However, Silverlight uses a dramatically different approach for creating and delivering experiences in a way that aligns more with our customers’ development and deployment needs.

Microsoft’s client/web platform offerings span Windows to the Web, and include emerging surfaces such as the media/living room (Xbox360, Media Center PC), as well as mobile devices. Each of these platforms has shared capabilities and development tooling, but greatly different performance and integration characteristics. By comparison, Flash, Flex, and AIR are all variants of the Flash animation plug-in that Adobe acquired from Macromedia. They share a presentation and programming framework that was first developed for “skip-intro” and other pre-broadband experiences in the browser, and have incrementally evolved to add better programming, but lack the integration, performance, and tooling necessary to build many of the apps and content experiences that will be increasingly of interest to many businesses.

Silverlight, WPF, and ASP.NET AJAX share development and design tooling support with Microsoft Expression and Visual Studio product lines. With these tools, designers and developers can collaborate more effectively than ever before to design and implement superior UX. Adobe’s tooling and application frameworks are very focused on animation and cosmetic design, traditionally for the creative professional and not the application development audience.

Flex: For enterprise line of business (LOB) applications, Microsoft offers a breadth of solutions for building business applications that directly integrate with Microsoft Office, as integral parts of the Excel, Word, PowerPoint, and SharePoint Server experience. Flex is a new technology built on the Flash animation plug-in which allows developers to build richer Web-based UI and connections to server data. However, Flex lacks deeper integration into the environment where most of these LOB applications are used.

Adobe AIR: Web standards based development using AJAX is a proven technology for developing compelling and easy to deploy applications to the desktop with zero-touch requirements for additional client side infrastructure. Microsoft has shown continued innovation and commitment to this space with our Internet Explorer browser, our Live services, and our ASP.NET AJAX scripting capabilities for server code that delivers compliant Web standards to Mac and Windows clients.

Design: Classic stored procedures or Entities?

Salva Patuel — Fri, 16 May 2008 16:01:00 GMT

With the new entities framework to be released in the next service pack some of our customers and team members are starting to discuss what is the correct pattern. I wanted to extract my position around the choices.

I am big supporter of having options, in this case I don’t consider one better than the other one, the stored procedure option can be the best choice for one scenario and LINQ, with all the different flavours including Entities, for another one.

You can go all the way separating process layers using stored procedures that may sound perfect for your scenario. In this scenario the architects and developers must maintain the complexity inherit from this approach as the data is usually quite tight to the processes. This adds risk to the projects making them more complicated to maintain (you need to involve the DBA for schema changes!). Some people may argue that this is the most performance approach but I am a strong believer that usually performance is not well understood. What is fast enough for an application? Do you need to go to the extreme performance when it may not be needed, sacrifying functionality or simplicity? If that is the case SP approach can be the best for you.

Now on the other side, I love the idea of separating the physical model from the logical model (so I can get rid of the DBAs! J). Business entities are much better represented with the entity framework and gives developers another layer to abstract the schema complexity, using strongly type models that can help detecting errors at early stage. Yes, there is a performance penalty price to pay, but maybe the functional benefits really help the business to develop quality software reducing the project risk. Have you measure how slower is it? You will be surprise with the results if you correctly design the entities.

The LINQ story is quite powerful as well, it is true that you have to consider learning curve and the community is taking longer than expecting to digest it. But with LINQ to entities things are starting to get more sense and I can imagine more people jumping into it.

What I think is cool? ADO.NET Data services (do not confuse with SQL Server Data Services! ), as is a great story for another cool technology like Silverlight. In this model you have your physical database completely abstracted from the model as you use the entity framework, you can use LINQ to query it and then post it using REST. This will send the results using XML, transformed to a struct using Silverlight Data services directly binding the results to your grid! That’s what I call functional abstraction.

To conclude, I still believe that it depends on the scenario, the beauty of this is to have options.

Build: Interaction between JavaScript and Silverlight 2

Salva Patuel — Thu, 01 May 2008 13:30:00 GMT

As many questions are usually asked regarding how to interact between Silverlight and JavaScript I am going to spend some lines showing an example so you can keep it as a reference. The sample below works with Silverlight 2 and is based on the Beta 2 that we are dogfooding at Microsoft at the time of this post, I haven’t seen any change on this area on the breaking changes document therefore it seems that the syntax will remain the same.

One of the most interesting namespaces that we have in Silverlight 2 is the System.Windows.Browser, as it allows us to interact with the HTMLPage object that provides access to the current web page that is hosting our plug-in. This class allows us to interact directly with the page, for example we can force navigation:

// We format the destination using a querystring

string Destination = string.Format(@"SecondPage.aspx?MyVar={0}",txtMyContent.Text);

// Sets the new URI with a query string entry

Uri SourceUri = new Uri(HtmlPage.Document.DocumentUri, Destination);

// Navigates to the next page

HtmlPage.Window.Navigate(SourceUri);

As you can see we can interact with the query string as well, indeed, we can read the current one using the following command:

HtmlPage.Document.QueryString;

Not only the navigation is included, also we can post forms to the server using the same class. Beyond this, one of the features that I really like is the ability to call javaScript functions from my managed code; you can use the Invoke method for this:

HtmlPage.Window.Invoke("ExecuteAnimation", txtParams.Text);

To execute the following JavaScript method:

function ExecuteAnimation(params)

{
// Do something useful
}

Now, to go to the other direction, we can use get a reference of our XAML component using the name of it and then call a published method:

var ctrl = $get("Xaml1");

ctrl.Content.navObj.SendMessage(“Hello”);

We will need to decorate our method with the ScriptableMember attribute in order to be published to the JavaScript world as follows:

public Page()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("navObj", this);

}

[ScriptableMember()]

public void SendMessage(string state)

{

// Do something useful

}

In future entries we are going to dig deeper into how this interaction works and we will explore some best practices.

Build: Silverlight 2 technology wallpaper

Salva Patuel — Thu, 01 May 2008 13:02:00 GMT

For those that can't wait to print and stick a Silverlight 2 wallpaper to the wall here you can find a high resolution picture:

You can download the high resolution one here

Build: Accessing the DLR engine in Silverlight 2

Salva Patuel — Mon, 31 Mar 2008 13:22:00 GMT

Note: This code has been updated using Silverlight 2 RTM

With Silverlight 2 a new set of components have been introduced into the equation, the most important one is the CLR Execution engine, that support in this case the dynamic language runtime (DLR) that we are going to host in this post. The following chart shows the items that have been changed since version 1.0

The interesting area regarding the DLR is the interoperability options between the silverlight components and scripted languages. In the release 2.0 we are including support for Iron Python, Ruby and Managed JavaScript. These languages are currently offered through codeplex here. The support for VBScript has been replaced by the future version of Visual Basic, called VBX, but it won’t be supported until the language is released. This shows one of the other beauties of the DLR, the ability to add new languages on the fly. These languages can be used in two directions, script to silverlight and silverlight to script.

This post will focus on hosting the scripting engine in your Silverlight application adding dynamic code to the execution, allowing the inclusion of instances into the scripted code. The first thing that we need to do is including the namespaces:

using Microsoft.Scripting;

using Microsoft.Scripting.Hosting;
using Microsoft.JScript.Runtime;

With these namespaces we have access to the DLR different engines, in this scenario we are going to use the JavaScript engine.

ScriptRuntime MyRuntime = JScript.CreateRuntime();

With the instance in place now we can retrieve the script engine as follows:

ScriptEngine JSEngine = MyRuntime.GetEngine("js");

In this case, my option was managed JavaScript. This object now focuses on the language per se, exploring the class will fascinate you, as you have access to the core execution of a full program, being able to compile code, define scope and execute it. Now the internals of the execution needs to be explored, I have mentioned the scope; you create a new scope using the following command:

IScriptScope Scope = JSEngine.CreateScope();

Each execution scope represent the environment where your code will run, it allows you to set variables and their values. We can add an object instance that the scripted code will run (similar to executing COM components in the past but now linked to your silverlight object). Let’s suppose that I expose a method that calls a WCF method:

IRemoteInterface TransparentProxy = MyFactory.CreateChannel();
Scope.SetVariable("WCFProxy", TransparentProxy);

Now that we have the scope, we can start defining our code. In order to use the code we should use the ScriptSource object.

ScriptSource Code = JSEngine.CreateScriptSourceFromString(“WCFProxy.MyMethod();”);

The script engine allows you to load external files as well, just explore the options that it offers. The ScriptSource object allows you to play with the code, like getting individual lines. All this information can be dynamically changed, giving you the flexibility that you need. Now, the final step, we can compile the code to make sure that is correct and execute it (note that you can execute it directly and will be compiled on the fly).

source.Compile() ; // Optional
Code.Execute(Scope);

You can shutdown the engine when is not needed using the Shutdown() command. You can see the power of injecting code into your application on the fly and the simplicity of the model. Explore the DLR!