ふにゃるんv2

もとは、http://d.hatena.ne.jp/Wacky/

初めてのSilverlight 1.1α ＋ Expression Blend β2(取っ掛かり編？)

.NET python

という訳で、先日新たに発表された、Silverlight 1.1αを勉強する為の取っ掛かりを、自分なりに解釈してみます。

(最初に)御免なさい
今回は、自分でもよく判ってなくて、ここいら辺から入門すりゃOKなのかな？という状態です。
先達の方々は、遥か先を行ってらっしゃっていて、このネタも果たして正しい手順かどうか不明です。そこいら辺、ご承知ください。

Silverlightって何だ？

正しい情報は、各種有名所を参照して下さい。


自分的には、今の所、以下の解釈です。

  • 使い勝手的には、FlashのMicrosoft版みたいなもの
  • 技術的には、.NET 3.0のWPF技術を使っている
  • 1.1αからは、DLR(Dynamic Language Runtime)という新技術を導入しており、各種言語(C#, JavaScript, VB, IronPython, IronRuby)を制御言語に選べる
  • Webに転がっているSilverlightのコンテンツ(要するに、xxx.swfとかの事)を表示させたかったら、本家のGet Startedのページで、Runtimes(1.0βか1.1α)を一度だけダウンロード＆実行すれば、後は見放題

Silverlight 1.1αで、開発するには？

私は、おっパイ派なので、Silverlight 1.1αを使いたい訳です。
という訳で、Silverlight 1.1αを使って、開発する為に必要な条件を列挙してみます。


絶対要るよ：

開発に合った方がいいよ：


正直、テキストエディタを開いて、ぽちぽちエディット＆実行を繰り返す開発スタイルなら、Silverlightのランタイムだけインストールしておけば、開発できるんじゃないかな？という気がします。
デバッガやGUIデザイナが必要という方は、Visual Studio ＋ Expression Blendを導入して下さい。

注意：Expression Blendは、英語版のβ2を使いましょう

日本語版のExpression Blend β1では、SilverlightのGUIデザインは出来ません。英語版のβ2を使いましょう。
(いや、XAMLファイルを生成した後、手修正するなら別ですけどね)


ご覧の通り、プロジェクト画面からして違います。

β1(日本語版) β2(英語版)
Silverlight1
Silverlight1 posted by (C)wacky		 Silverlight3
Silverlight3 posted by (C)wacky

初体験：Blendで作ったXAMLを動かしてみる

最初からいきなり新規作成するのは気が引けるので、Silverlight 1.1αのSDKから適当なサンプルを持ってきて、それを改変する方法を試します。

step.1：SDKからIronPythonを使ったサンプルを元にする
まずは、以下のサンプルを元にします。

-Silverlight1.1SDK\Silverlight_1.1_QuickStarts\Samples\DynamicLanguage\py
│  Default.html
│  Default.xaml
│  Default.xaml.py
│
└─js
        agHost.js

上のサンプルを丸ごと適当な場所にコピーします。

step.2：Blendで画面を作る
次に、Blendで画面を作って、元のDefault.xamlファイルと入れ替えてみましょう。
メニューから、「File」→「New Project...」を選び、「Select a project type」では、「Silverlight Application(javascript)」を選びます。
(XAMLファイルだけ抜き取るつもりなので、javascriptだろうが.NETだろうが、どっちでもOKです)


プロジェクトを作ったら、適当に画面を作ります。
Silverlight4
Silverlight4 posted by (C)wacky
上の画面では、TextBlockに対して、"text1"という名前を与えています。


step.3：Blendで作成したXAMLファイルを抜き取る
プロジェクトを保存したら、以下のようなファイルが出来上がってます。

+TEST1
    Default.html
    Default.html.js
    Scene.xaml
    Scene.xaml.js
    Silverlight.js
    test1.csproj

上のファイルから、Scene.xamlを取り出し、step.1のDefault.xamlと変えてしまいます。


step.4：XAMLファイルを修正する
次に、XAMLファイルを修正します。


元は、以下のようなソースでした。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    >
    <TextBlock x:Name="text1" Width="336" Height="176" Canvas.Left="152" Canvas.Top="32" TextWrapping="Wrap">TextBlock</TextBlock>
    <Rectangle Fill="#FFF33333" Stroke="#FF000000" x:Name="Box" Width="128" Height="32" Canvas.Left="256" Canvas.Top="232"/>
</Canvas>


これを、以下のように修正します。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    >
    <x:Code Source="Default.xaml.py" Type="text/ironpython" />
    <TextBlock x:Name="text1" Width="336" Height="176" Canvas.Left="152" Canvas.Top="32" TextWrapping="Wrap">TextBlock</TextBlock>
    <Rectangle Fill="#FFF33333" Stroke="#FF000000" x:Name="Box" Width="128" Height="32" Canvas.Left="256" Canvas.Top="232" MouseLeftButtonDown="OnClick"/>
</Canvas>

追加されたのは、以下の通りです。

  • ""というタグを追加
  • Rectangleタグに、MouseLeftButtonDown="OnClick"を追加した


step.5：IronPythonの呼び出しコードを修正する
Default.xaml.pyを開いて、以下のように修正します。

def OnClick(sender, e):
    text1.Text = text1.Text + "Click Me to Grow Me\n"

上のXAMLコードを見ると、どうやら以下のように動く事が想像できます。

  1. RectangleのMouseLeftButtonDownイベントが発生すると、Default.xaml.pyソースのOnClick関数が呼ばれる
  2. OnClick関数内では、text1というオブジェクト(XAMLのTextBlockのNameを見て下さい)のTextプロパティを操作している
  3. Default.xaml.pyを呼び出しているのは、""というタグのようだ


step.6：実際に動かしてみる
試しに動かしてみましょう。
エクスプローラから、Default.htmlをダブルクリックします。
Silverlight5
Silverlight5 posted by (C)wacky


試しに、赤いボックスをマウスで左連打してみましょう。
Silverlight6
Silverlight6 posted by (C)wacky
おぉ、ちゃんと動きましたよ！こんなに簡単に動いていいの？

改造：IronPythonからJavaScriptの関数を呼び出してみる

先のコードを更に改造し、IronPythonからJavaScriptの関数を呼び出してみましょう。


以下のように追加＆修正して下さい。

Default.xaml(修正)：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    >
    <x:Code Source="Default.xaml.py" Type="text/ironpython" />
    <x:Code Source="Default.xaml.jsx" Type="text/jscript" />
    <TextBlock x:Name="text1" Width="336" Height="176" Canvas.Left="152" Canvas.Top="32" TextWrapping="Wrap">TextBlock</TextBlock>
    <Rectangle Fill="#FFF33333" Stroke="#FF000000" x:Name="Box" Width="128" Height="32" Canvas.Left="256" Canvas.Top="232" MouseLeftButtonDown="OnClick"/>
</Canvas>

Default.xaml.py(修正)：

val = 1

def OnClick(sender, e):
    global val
    val = Test1(val)
    text1.Text = "Call JavaScript function" + str(val)

Default.xaml.jsx(追加)：

function Test1(x) {
    return x + x;
}


コード的には、以下のように動きます。

  1. 赤いボックスを左クリックすると、MouseLeftButtonDownが発生し、Default.xaml.pyのOnClick関数が呼ばれる
  2. OnClick関数内では、Default.xaml.jsxのTest1関数が更に呼ばれる
  3. 2つのソースコードは、XAMLの""と""タグで読み込まれる。


実際に動かしてみましょう。
Silverlight7
Silverlight7 posted by (C)wacky
おぉ、異種言語のコラボレーションが簡単に実現してしまいましたよ！？

参考リンク

まとめ

恒例のまとめ〜

  • Silverlightを単に動かすだけなら、ランタイムを導入するだけでOKっぽいです
  • GUIデザインする時は、Expression Blend β2を使いましょう(2007/5現在)
  • GUI(View)がXAML、制御(Model？)がIronPython/JavaScriptと完全に分かれているので、プログラムの見渡しがしやすいです
  • 異種言語の相互呼び出しは、あっけないほど簡単です