MIX Online's Gestalt: Write Ruby, Python and XAML in your HTML pages.

Getting started with Gestalt is as easy as pie.

Seriously. It's ridiculously easy. Go on. Click "Next". You know you want to.
If you're the type that likes to follow along with your own copy of the code, download gestalt.zip for the relevant files and unpack it somewhere safe. The samples/getting.started folder contains all the examples we're about to show you.
First, let's write some Ruby using Gestalt...

Here's some code that uses a Ruby script to trigger the browser alert window.

Try it yourself by double-clicking 01_ruby.html in your previously extracted folder.

<html>
<head>
  <script src="/dlr/dlr.js" type="text/javascript">
  </script>
</head>
<body>

<input id="say_hello" type="button" value="Say, Hello!" />

<script type="text/ruby">
  def onclick(s,e)
    window.alert "Hello, World!"
  end

  document.say_hello.attach_event('onclick', 
    System::EventHandler [
    System::Windows::Browser::HtmlEventArgs
    ].new(method(:onclick))
  )
</script>

</body>
</html>

Preview

Click the button:

That's it. That gives you Ruby scripting capabilities in your (X)HTML. Sorry to disappoint if you were expecting something trickier. ;-)

Oh, and you can do that in Python, too...

Here's a Python script that changes the text within a button.

Try it yourself by double-clicking 02_python.html in your previously extracted folder.

<html>
<head>
  <script src="/dlr/dlr.js" type="text/javascript">
  </script>
</head>
<body>

<input id="say_hello" type="button" value="Say, Hello!" />

<script type="text/python">
  import System
  def OnClick(s,e):
    window.Alert("Hello, World!")

  document.say_hello.AttachEvent('onclick', 
    System.EventHandler [
    System.Windows.Browser.HtmlEventArgs
    ](OnClick))
</script>

</body>
</html>

Preview

Click the button again:

And, there's XAML for graphics (what's XAML?) ...

Here's an example draws the MIX Online mushroom man. We used Expression Design's Illustrator import function to convert him from .ai to XAML.

Try it yourself by double-clicking 03_xaml.html in your previously extracted folder.

<html>
<head>
  <script src="/dlr/dlr.js" type="text/javascript">
  </script> 
</head>
<body>

<script id="mushroom" 
        type="application/xml+xaml" 
        width="200" height="230" 
        src="xaml/mushroom.xaml"></script>

</body>
</html>

Preview

And, XAML for animation...

Here's an external XAML file that draws the MIX Online mushroom man blinking. We added the blink using Storyboards in Expression Blend.

Try it yourself by double-clicking 04_animation.html in your previously extracted folder.

<html>
<head>
  <script src="/dlr/dlr.js" type="text/javascript">
  </script>
</head>
<body>

<script id="mushroom" 
        type="application/xml+xaml" 
        width="200" height="230" 
        src="xaml/blinking_mushroom.xaml"></script>

<script class="mushroom" type="text/python">
  bm = me.blinking_mushroom
  bm.left_eye_blink.Begin()
  bm.right_eye_blink.Begin()
</script>

</body>
</html>

Preview

And now, for the grand finale.

DOM, XAML & Ruby/Python, live together in perfect harmony...

In this example, the blinking mushroom man says hello to you once your tell him your name through the input field.

Try it yourself by double-clicking 05_final.html in your previously extracted folder.

<html>
<head>
  <script src="/dlr/dlr.js" type="text/javascript">
  </script>
</head>
<body>

<label>Say hello to: </label>
<input id="Text1" type="text" size="8" maxlength="10" />
<input id="Button1" type="button" value="Go" />
<br />

<script id="mushroom" 
        type="application/xml+xaml" 
        width="200" height="280" 
        src="xaml/blinking_mushroom.xaml"></script>

<script language="python">

<script type="text/python" class="mushroom">
  import System
  bm = me.blinking_mushroom
  bm.left_eye_blink.Begin()
  bm.right_eye_blink.Begin()

  def OnClick(s,e):
    me.bubble_text.Text = "Hello, " + 
    document.say_hello_txt.value + "!"
    bm.show_bubble.Begin()
        
  def Completed(s,e):
    bm.float_bubble.Begin()

  document.say_hello_btn.AttachEvent(
    "onclick", System.EventHandler
    [System.Windows.Browser.HtmlEventArgs](OnClick))
  bm.show_bubble.Completed += Completed
</script>

</script>
</body>
</html>

Preview

Say hello to:

The possibilities are endless.

We just gave you a preview that scratches the surface of what's possible with Gestalt. Download the Gestalt library, check out the samples, use the widgets and start partying!

Continue on to Downloads, Samples or Widgets »

Gestalt 1.0

Getting started with Gestalt is as easy as pie.

Seriously. It's ridiculously easy. Go on. Click "Next". You know you want to.

If you're the type that likes to follow along with your own copy of the code, download gestalt.zip for the relevant files and unpack it somewhere safe. The `samples/getting.started` folder contains all the examples we're about to show you.

First, let's write some Ruby using Gestalt...

Here's some code that uses a Ruby script to trigger the browser alert window.

Preview

That's it. That gives you Ruby scripting capabilities in your (X)HTML. Sorry to disappoint if you were expecting something trickier. ;-)

Oh, and you can do that in Python, too...

Here's a Python script that changes the text within a button.

Preview

And, there's XAML for graphics (what's XAML?) ...

Here's an example draws the MIX Online mushroom man. We used Expression Design's Illustrator import function to convert him from .ai to XAML.

Preview

And, XAML for animation...

Here's an external XAML file that draws the MIX Online mushroom man blinking. We added the blink using Storyboards in Expression Blend.

Preview

And now, for the grand finale.

DOM, XAML & Ruby/Python, live together in perfect harmony...

In this example, the blinking mushroom man says hello to you once your tell him your name through the input field.

Preview

The possibilities are endless.

We just gave you a preview that scratches the surface of what's possible with Gestalt. Download the Gestalt library, check out the samples, use the widgets and start partying!

Continue on to Downloads, Samples or Widgets »

Gestalt 1.0

Getting started with Gestalt is as easy as pie.

Seriously. It's ridiculously easy. Go on. Click "Next". You know you want to.

If you're the type that likes to follow along with your own copy of the code, download gestalt.zip for the relevant files and unpack it somewhere safe. The samples/getting.started folder contains all the examples we're about to show you.

First, let's write some Ruby using Gestalt...

Here's some code that uses a Ruby script to trigger the browser alert window.

Preview

That's it. That gives you Ruby scripting capabilities in your (X)HTML. Sorry to disappoint if you were expecting something trickier. ;-)

Oh, and you can do that in Python, too...

Here's a Python script that changes the text within a button.

Preview

And, there's XAML for graphics (what's XAML?) ...

Here's an example draws the MIX Online mushroom man. We used Expression Design's Illustrator import function to convert him from .ai to XAML.

Preview

And, XAML for animation...

Here's an external XAML file that draws the MIX Online mushroom man blinking. We added the blink using Storyboards in Expression Blend.

Preview

And now, for the grand finale.

DOM, XAML & Ruby/Python, live together in perfect harmony...

In this example, the blinking mushroom man says hello to you once your tell him your name through the input field.

Preview

The possibilities are endless.

We just gave you a preview that scratches the surface of what's possible with Gestalt. Download the Gestalt library, check out the samples, use the widgets and start partying!

Continue on to Downloads, Samples or Widgets »

If you're the type that likes to follow along with your own copy of the code, download gestalt.zip for the relevant files and unpack it somewhere safe. The `samples/getting.started` folder contains all the examples we're about to show you.