glitch128/silverlightjs

A JavaScript implementation of the Silverlight Framework.

SilverlightJS

goog.xaml = System.Windows

Need Help

Silverlight and C# Gurus, please read the Need Help section at the bottom. I really need some help with a tricky bit here to go on with the project.

What is it

SilverlightJS is a JavaScript implementation of the Silverlight Framework.

Why Silverlight

The Silverlight XAML UI description language is fantastic and proven to work in thousand of projects. It enables the description of complex interactive UIs, Data Binding and reusable Component Design.

The Expression Blend editor is one of the best Editors that gives Designers and Developers a great interface to work together.

Why JavaScript

The problem with Silverlight is, that it has to be installed on the Client and does only support a few platforms. But many people want their Websites to run everywhere on everything without any additional requirements.

JavaScript and HTML5 is compatible with almost every modern device and is a well established and widely supported development platform.

What are the goals

The major goal is to compile Silverlight Websites to JavaScript.

Designers and Developers should be able to use Expression Blend to create Websites and Webcomponents because it is an awesome tool and then compile it to JavaScript.

How will it work

• Developers and Designers use Expression Blend to create Webcomponents and Websites.

• Then they use the "XAML to JavaScript Compiler" to create/update the JavaScript representation of their XAML pages.

• The generated JavaScript files are similar to the partial implementation of C# designer files. They are based on the SilverlightJS library.

• The developer is free to build any kind of JavaScript application around the generated UI code and hook into the generated visual tree via DataContexts and EventHandlers.

What are the core technologies

• XAML files, handmade or generated by Expression Blend.

• A XAML to JavaScript Compiler written in C#.

• A JavaScript implementation of the Silverlight library.

• Every UI component is represented by a HTML5 Canvas. This makes the rendering engine extremely flexible and powerful and fits very well in the Visual Tree Structure.

• The Google Closure Library and Compiler gives us a very good foundation to build clean well structured code. Most importantly it gives us optimized and obfuscated "compiled" JavaScript to protect the clients code and design.

Need help

I just checked in this very first and very basic implementation of the very core of the Silverlight library. To decide whether it is worse to go on with this project I have to finish the "XAML to JavaScript Compiler" first. The output is already very promising but now I NEED HELP to finish it.

If you are a Silverlight C# Guru please check out the current version of the "XAMLCompiler" project and put a Breakpoint in "MainWindow.xaml.cs" at line 140.

I am kind of stuck here. I need to find a way to resolve the value to be able to assign it in the generated JavaScript.

Example:

The current implementation creates something like:

GradientStop9.SetValue(System.Windows.Media.GradientStop.Color, #FFA3AEB9);

But it should resolve the Value #FFA3AEB9 to be able to create:

var color8 = System.Windows.Media.Color.FromArgb(255, 163, 174, 185); GradientStop9.SetValue(System.Windows.Media.GradientStop.Color, color8);

Example:

The current implementation creates something like:

var Style2 = new System.Windows.Style(); Style2.SetValue(System.Windows.Style.TargetType, Button);

...

var Setter4 = new System.Windows.Setter(); Setter4.SetValue(System.Windows.Setter.Property, Foreground);

...

Style2.Setters.Add(Setter4);

But it should create this:

var Style2 = new System.Windows.Style(); Style2.SetValue(System.Windows.Style.TargetType, System.Windows.Controls.Button);

...

var Setter4 = new System.Windows.Setter(); Setter4.SetValue(System.Windows.Setter.Property, System.Windows.Controls.Control.Foreground);

...

Style2.Setters.Add(Setter4);

I hope you get the point - somehow the generated JavaScript needs to assign the correctly resolved values - OR assign the right TypeConverter.

See "xaml/.compile/Compile.js" for a manual test of the SilverlightJS library.