ruby & python with silverlight o rly? ya rly!

Ruby and Python with Silverlight:

Martha RotterMicrosoft Ireland

Developer and Platform Group

[email protected]

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

eXstensible Application Markup Language• 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:

<Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /></Canvas>

<Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /></Canvas>

Common XAML Elements• Basic Vocabulary of Tags

• Canvas• Brushes• Basic shapes

• Rectange, Ellipse, Line, Polygon, etc.• TextBlock• Image

• No Controls in Silverlight 1.0

Silverlight Developer’s Toolkit

Silverlight Architecture

XAMLXAMLXAMLXAML

Browser Host

Integrated Networking

Stack

DOM Integration

InstallerJavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

KeyboardMouseInk

Media

WMV / VC1WMAMP3

ControlsLayout

Editing

UI Core

2D VectorsAnimatio

nText

ImagesTransfor

ms

DRM

Media

Dynamic LanguagesRuby Python

BCL

Generics

Collections

Web Services

RESTRSS

SOAP

POXJSON

Data

LINQ LINQ-to-XML

WPF for SilverlightExtensible

Controls

Common Language Runtime

ASP.NET AJAX Libs<asp:xaml><asp:media>

ServerSilverlight

1.0Silverlight

1.1

Legend

<Script <Script src=“Silverlight.js”/>src=“Silverlight.js”/><Script <Script src=“Default.html.js”/>src=“Default.html.js”/><Script <Script src=“Scene.xaml.js”/>src=“Scene.xaml.js”/>

Web BrowserWeb Browser

Web PageWeb Page

Silverlight HostSilverlight Host

UIUI LogicLogic

<div id="SilverlightPlugInHost"> <script type="text/javascript">

createSilverlight();

HTMLHTML

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.}

createSilverlightExfunction 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

The Future…

ExamplesCOUNT!!1HAI 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

ruby & python with silverlight o rly? ya rly!

Technology