About the book

This is a sample chapter of the book IronRuby in Action. It has been published with the exclusive permission of Manning.

Written by: Ivan Porto Carrero and Adam Burmister
Pages: 350
Publisher: Manning
ISBN: 1933988614

Introduction

Gestalt is a cross-browser, cross-platform project that allows you to embed Ruby and Python within your (X)HTML pages. The great thing is your existing workflow doesn't have to change; you can continue working with your favorite tools. You have the same simple development model you had with JavaScript-enhanced pages: edit the script, refresh the browser. Gestalt means you no longer have to worry about the XAP building phase for testing and deploying a Silverlight application (admittedly, Chiron previously handled it transparently for us).

In this article, we'll take a quick look at all that Gestalt offers; then we'll explore how to use Gestalt to embed IronRuby and XAML within HTML.

Getting to know Gestalt

Built on the DLR and running on Silverlight, Gestalt allows embedded Ruby script to control an HTML page in much the same way you would have done it previously using JavaScript.

As with JavaScript, you can manipulate the DOM, listen for events, and so on, but now you can do it with the expressiveness of your favorite new language (IronRuby!) and with the added benefits of the Silverlight framework.

The benefit of using Gestalt is that you gain the execution speed and abilities of the Silverlight platform. Table 1 breaks it down.

Table 1: Benefits and features of Gestalt

You can download the Gestalt library, documentation, and sample code from the MIX website at http://visitmix.com/labs/gestalt/.

The first step in using Gestalt is to include its codebase within your HTML pages. This initializes the required Silverlight class that'll be doing the processing behind the scenes. You'll also see in the following section how to write IronRuby code within HTML script tags, how to reference external files, as well as how to manipulate the DOM and XAML elements.

Using IronRuby in HTML

To enable the Gestalt library on any HTML page, the first thing that's required is a JavaScript script reference for the dlr.js file:

The dlr.js JavaScript does the heavy work for hosting a single hidden Silverlight instance on your page. This Silverlight instance will evaluate any embedded IronRuby (or IronPython) scripts found in the page using the DLR. In addition, a Silverlight instance will be created to host any XAML found on the page, because it needs an area to render to. Figure 1 shows the Gestalt architecture.

Figure 1: The Gestalt architecture

When a <script> tag is found that has a type attribute specifying the script mime type as text/ruby (or text/python in the case of IronPython), two things happen:

• Silverlight downloads a corresponding Silverlight file that knows how to evaluate the language.
• Silverlight executes the script (DLR language scripts and XAML are executed as they're encountered).

I say Silverlight file because there's only one XAP file, dlr.xap, a small 4KB file containing the base Gestalt library. The language functionality is extended transparently on top of this XAP using one or more of the following SLVX files:

• IronRuby.slvx
• IronPython.slvx
• Microsoft.Scripting.slvx

For instance, if there are no IronPython script blocks on the page, the IronPython.slvx extensions won't be downloaded, reducing the page load time.

Once the HTML document has been scanned for all script tags and the required SLVX files loaded, it will create one scripting engine per language. Each scripting engine exposes some global variables: document (HtmlPage.Document), window (HtmlPage.Window), and me (the associated XAML element).

Listing 1 provides a simple example of an IronRuby Gestalt script block. It shows a number of possible ways for attaching a click event to the "gidday" button and illustrates how we can access the DOM.

Listing 1: Embedding IronRuby in HTML

You can see how familiar this looks, with the IronRuby script tag looking nearly identical to a JavaScript script tag, with only the type attribute differing (text/ruby instead of text/javascript). Accessing page elements is also similar to JavaScript. Using the document keyword to get the DOM document, we can reference HTML elements by specifying their path within the DOM structure, such as document.message. In reality, this is calling the document.getElementById method to find the HTML element.

Attaching events to HTML elements, however, may not ring many bells for the veteran JavaScript ninja. The Gestalt documentation shows three ways of implementing event handlers.

• You can use the attach_event method on an HTML element (although the resulting Ruby looks a bit messy).
• You can add a method to the onclick event handlers #4 (which allows you to separate out the handler into another method).
• You can add a do...end block to handle the event.

Using external files

As you may expect, the script tag can also accept external source files, not just inline scripts. You still have to specify the type attribute mime type, but you now use the src attribute to specify the path to the external source file - this path is relative to the HTML page.

You can also make use of the defer attribute. When defer="true" is set on the script tag, it will download and cache the script file but not run it. This makes the downloaded file available to other scripts in the page.

Not only can external files be single Ruby scripts or XAML files, they can also be *.zip files!

Using zip files as packages

The external files referenced by script tags need not only be single files; they can also reference zip files. This provides developers with an easy way of distributing and referencing large code bases, such as supporting libraries. The referenced zip file is added to the language's path, making it accessible from an IronRuby script. Notice the mime type used to specify the file as a zip in the following example: application/x-zip-compressed.

You can include any file type within a zip: Ruby scripts, XAML, DLLs, images, sounds, and so on. You access a file contained within the zip file as you would a file within a folder:

You now have a good understanding of how to script IronRuby using Gestalt and include files. Let's look more at embedding XAML within an HTML document.

Embedding XAML in HTML

Developers can use XAML graphics and content within their pages. XAML content is wrapped within a <script> tag, contained either inline or through the src attribute pointing to an external XAML file - again, this path is relative to the HTML page. An XAML script tag should have its type attribute set to application/xml+xaml to mark it as XAML, as shown in listing 2.

Listing 2: Using XAML within HTML

By default, all inline code on the page is executed using the same scope. This means a script has access to methods defined elsewhere on the page. There's one exception: If a script block has defer="true" set, it won't be run, in which case you'll instead have to access its content and evaluate it manually to make it available, for example, eval(document.deferred_script.innerHTML)).

If you use multiple XAML scripts on the page, then you can provide your own scopes. To link the scope of a script to a XAML block, give the XAML script tag an id, and assign that same value to a class attribute on the IronRuby script. These matching id and class attribute values will be used by Gestalt to set the scope.

About Manning Publications

Manning Publication publishes computer books for professionals--programmers, system administrators, designers, architects, managers and others. Our focus is on computing titles at professional levels. We care about the quality of our books. We work with our authors to coax out of them the best writi... This author has published 33 articles on DotNetSlackers. View other articles or the complete profile here.