Silverlight Development on Mac OSX: My First "App"

I'll be honest. I don't really want to learn Silverlight all that badly. I cannot get excited about technology that forces me to develop on a specific platform. So, I found it pretty exciting to hear recently that there's quite a modest effort being put forth to creating tools to facilitate cross-platform development.

Enter the Silverlight Dynamic Languages SDK. The SDL is a bridge between Silverlight and the Dynamic Language Runtime of .NET (which includes IronRuby, IronPython and others). What this means is you can develop Silverlight apps in Ruby or other languages without needing all that zany Visual Studio/C# stuff and Microsoft Technology.

What follows is my first foray into Silverlight development on a Mac - a quick sample that plays a video. To recap before I start...it kinda sucks :P There's no development tools - cool, I can use TextMate, but creating XAML by hand would definitely suck. Maybe this is where Expression Studio (seems to be available for Mac) is really going to be necessary.

The other huge detriment to developing with SDL/IronRuby is the fact that documentation is extremely limited (please let me know if you know where I can find the IronRuby/Python Silverlight documentation!). I managed to get by by looking at some samples and at the C# MSDN documentation for Silverlight. For example, it took me awhile (not being a Ruby master) to figure out how to change the source of my MediaElement:

XAML (easy):

<MediaElement source="test.wmv"/>

C# (doesn't seem too bad...from the MSDN)

mediaElement = new MediaElement();
mediaElement.Source = new Uri("test.wmv", UriKind.Relative);

IronRuby (looks a lot like the C#)

media = MediaElement.new
media.source = Uri.new "test.wmv", UriKind.Relative

I first tried setting source = "text.wmv" and it failed because it's expecting a Uri object. One thing that has been difficult is the difference between setting properties in XAML and in the code-behind. For example, the Margin parameter:

<MediaElement source="test.wmv" Margin="5"/>

Sweet, that's easy.

media.margin = Thickness.new 5

Hmm, not so easy. Objects are nice though ;) Guess I'm just used to the Flex style where the parameter names are the same (case-wise) and value wise in both MXML and Actionscript.

Silverlight on a Mac

Step 1: Install Silverlight
It's currently at release Silverlight 2 RTW (2.0.31005.0). Download that sucker and install it.

Step 2: Download SDL SDK
Next you need the dynamic language SDK. This allows you to write apps in IronRuby and IronPython. I downloaded sdlsdk-0.4.0 (Everything) and unpacked it in /Applications/Silverlight/sdl-sdk.

Step 3: Mono
Mono is an open-source version of .NET (sweeeet). You'll need it to use all those .dlls in the SDK. I installed the Mono.framework 2.0.1_1 package for Mac OS.

Step 4: Create the skeleton
The SDL SDK includes tools for creating applications. All you need to do open Terminal and:

# go to where you unpacked the sdl sdk
cd /Applications/Silverlight/sdl-sdk
# create a "rubylight" app called "SilverlightApp"
script/sl ruby SilverlightApp
# cd into the new dir
cd SilverlightApp

Now if you open that folder with your favorite Text Editor you should see this structure:

To start the development server, run the following when you're inside SilverlightApp. The /b option starts the server with the current directory as root and then opens it in the browser (http://localhost:2060)

# start the chiron server through mono
mono /Applications/Silverlight/sdl-sdk/bin/Chiron.exe /b

You might want to add aliases to your bash_profile so you can quickly type these paths in the future:

# ~/.bash_profile
# silverlight aliases

alias chiron='mono /Applications/Silverlight/sdl-sdk/bin/Chiron.exe'
alias sl='/Applications/Silverlight/sdl-sdk/script/sl'
alias slserver='/Applications/Silverlight/sdl-sdk/script/server'

Once mono is running Chiron, you can go to the development link and you should see:

Click on "index.html" to see the app (not sure how to add indexes to chiron yet :P)

Just to see how the app is made, open up SilverlightApp/ruby/app.rb and change the the string in the following line:

message.text = "Welcome to Ruby and Silverlight!"

Now, refresh the development server and you should see the different text string. All this is doing is initializing the TextBlock control in SilverlightApp/ruby/app.xaml with the x:Name of 'message' to a string.

That's about it. You're now developing Silverlight on a Mac with Ruby. Let me know if you kick ass with this and want to give me help ;) or if you find any good "RubyLight" docs.

To deploy the app to a server, you need to compile your "ruby" folder into a .xap (a fancy .zip) folder. You can use chiron again to do this:

# change to the ruby dir of SilverlightApp
cd ruby
# running with /z flag creates a XAP file
# with dynamic language dependancies
chiron /z:ruby.xap

Now when you FTP it your app, you move up ruby.xap instead of the ruby folder

Sample

Here's the silly thing I made while setting this up and playing with it. It's a button that loads a wmv into a MediaElement with a play/pause button.

/tests/silverlight/ruby

And here's the source:

/tests/silverlight/ruby/app.xap

You can check it out by renaming the .xap to .zip and unpacking it (xap is just a zip afterall).

Overall

I think what's lacking in Silverlight currently is high-end design. Sure .NET guys can jump right into it, but Microsoft will never get to the level of Flash without designers getting involved. Plus, I think that more "design-centric" developers use Mac and Linux these days. Sure, you can do much of what Flash does with this technology but it's moot if it looks like shit because some Microsoft Certified guy made it who can't design a button.

I'm excited to try Expression Studio. If it is as great for designing XAML as they purport, then ES combined with the Dynamic Language SDK could be the way to go for Mac. I just hope that Microsoft doesn't forget about the "non-proprietary" community on this.

Sources

November 9th, 2008 | Permalink