Ruby & Python with Silverlight O RLY? YA RLY!

Ruby and Python with Silverlight: Martha Rotter Microsoft Ireland Developer and Platform Group [email_address] O RLY? YA RLY!

For Today:

What is Silverlight?

What does Silverlight look like?

Ruby + Python + ??? on Silverlight

But first … D00d what iz silverlight?!?!?!1

e X stensible A pplication M arkup L anguage

Declarative Language – Just XML

Describes the look and feel

Generated by Microsoft Expression tools

Designer / Developer Workflow

No More Mockups or Wireframes

Runtime Format

“ Skinable” UI

XAML Basics

You can create drawings directly with XAML

XAML is made up of Tags

Represent a single item or container of the design

E.g. Rectangle, Ellipse, Canvas, Storyboard, etc.

Not all Tags are design elements (e.g. animations)

Example XAML

For example:

Common XAML Elements

Basic Vocabulary of Tags

Canvas

Brushes

Basic shapes

Rectange, Ellipse, Line, Polygon, etc.

TextBlock

Image

No Controls in Silverlight 1.0

DEMOS

Silverlight Developer’s Toolkit

Silverlight Architecture XAML Browser Host Integrated Networking Stack DOM Integration Installer JavaScript Engine Presentation Core .NET for Silverlight Inputs Keyboard Mouse Ink Media WMV / VC1 WMA MP3 Controls Layout Editing UI Core 2D Vectors Animation Text Images Transforms DRM Media Dynamic Languages Ruby Python BCL Generics Collections Web Services REST RSS SOAP POX JSON Data LINQ LINQ-to-XML WPF for Silverlight Extensible Controls Common Language Runtime ASP.NET AJAX Libs <asp:xaml> <asp:media> Server Silverlight 1.0 Silverlight 1.1 Legend

<Script src=“Silverlight.js”/> <Script src=“Default.html.js”/> <Script src=“Scene.xaml.js”/> Web Browser Web Page Silverlight Host UI Logic <div id="SilverlightPlugInHost"> <script type="text/javascript"> createSilverlight(); HTML

Helper JavaScript in SDK

Web Page

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>My Silverlight Application</title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="Default.html.js"></script>

<script type="text/javascript" src="Scene.xaml.js"></script>

</head>

<body>

<div id="SilverlightPlugInHost">

<script type="text/javascript">

createSilverlight();

</script>

</div>

</body>

</html>

createSilverlight()

function createSilverlight()

{

Silverlight.createObject(

"plugin.xaml", // Source property value.

parentElement, // DOM reference to hosting DIV tag.

"myPlugin", // Unique plug-in ID value.

{ // Plug-in properties.

width:'1024', // Width of rectangular region of plug-in in pixels.

height:'530', // Height of rectangular region of plug-in in pixels.

inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected.

background:'white', // Background color of plug-in.

isWindowless:'false', // Determines whether to display plug-in in windowless mode.

framerate:'24', // MaxFrameRate property value.

version:'1.0' // Silverlight version.

},

{

onError:null, // OnError property value -- event-handler function name.

onLoad:null // OnLoad property value -- event-handler function name.

},

null, // initParams -- user-settable string for information passing.

null); // Context value -- passed to Silverlight.js onLoad event handlers.

}

createSilverlightEx

function createSilverlightEx()

{

Silverlight.createObjectEx({

source: 'plugin.xaml', // Source property value.

parentElement:parentElement, // DOM reference to hosting DIV tag.

id:'myPlugin', // Unique plug-in ID value.

properties:{ // Plug-in properties.

width:'1024', // Width of rectangular region of plug-in in pixels.

height:'530', // Height of rectangular region of plug-in in pixels.

inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected.

background:'white', // Background color of plug-in.

isWindowless:'false', // Determines whether to display plug-in in windowless mode.

framerate:'24', // MaxFrameRate property value.

version:'1.0'}, // Silverlight version.

events:{

onError:null, // OnError property value -- event-handler function name.

onLoad:null}, // OnLoad property value -- event-handler function name.

initParams:null, // initParams property value -- user-settable string for information passing.

context:null}); // Context value -- passed to Silverlight.js onLoad event handlers.

}

Programming a Silverlight-Based Application with a Dynamic Language

Root html page which calls your createSilverlight method

CreateSilverlight.js (implementation of parameterless createSilverlight method to start your application)

Silverlight.js (defines createObject & createObjectEx methods)

pageName.xaml (UI of your application)

pageName.xaml.py (code behind the UI)

 Compiled & executed at runtime

DEMOS

The Future… Examples COUNT!!1 HAI CAN HAS STDIO? I HAS A VAR IM IN YR LOOP UP VAR!!1 VISIBLE VAR IZ VAR BIGGER THAN 10? KTHXBYE IM OUTTA YR LOOP KTHXBYE FILEZORZ: HAI CAN HAS STDIO? PLZ OPEN FILE "LOLCATS.TXT"? AWSUM THX VISIBLE FILE O NOES INVISIBLE "ERROR!" KTHXBYE