ふにゃるん

2007-05-13 寒いのか暑いのか?

[][] 初めてのSilverlight 1.1α + Expression Blend β2(取っ掛かり編?) 23:07  初めてのSilverlight 1.1α + Expression Blend β2(取っ掛かり編?)を含むブックマーク

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


(最初に)御免なさい

今回は、自分でもよく判ってなくて、ここいら辺から入門すりゃOKなのかな?という状態です。

先達の方々は、遥か先を行ってらっしゃっていて、このネタも果たして正しい手順かどうか不明です。そこいら辺、ご承知ください。


Silverlightって何だ?

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


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

  • 使い勝手的には、FlashMicrosoft版みたいなもの
  • 技術的には、.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 StudioExpression Blendを導入して下さい。


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

日本語版のExpression Blend β1では、SilverlightGUIデザインは出来ません。英語版のβ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>

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

  • "<x:Code Source="Default.xaml.py" Type="text/ironpython" />"というタグを追加
  • 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を呼び出しているのは、"<x:Code Source="Default.xaml.py" Type="text/ironpython" />"というタグのようだ

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の"<x:Code Source="Default.xaml.py" Type="text/ironpython" />"と"<x:Code Source="Default.xaml.jsx" Type="text/jscript" />"タグで読み込まれる。

実際に動かしてみましょう。

Silverlight7
Silverlight7 posted by (C)wacky

おぉ、異種言語のコラボレーションが簡単に実現してしまいましたよ!?


参考リンク


まとめ

恒例のまとめ〜

ishisakaishisaka 2007/05/14 08:54 Silverlight V1.1 SDKのドキュメントを読み限りVisual Studioのバージョンは次バージョンOrcasのBetaを使用した方がよいようです。Sliverlight V1.1ではLinqがサポートされることもあるので、Orcasの法が良さそうです。ということで敷居高いなぁと思う今日この頃。

WackyWacky 2007/05/14 22:56 ishisakaさん、情報ありがとうございます。

> …OrcasのBetaを使用した方がよいようです。
そういえば、ソリューション付きのサンプルをVS2005で開こうとすると、「バージョンが違うねん」エラーが出たです。
そういう事だったんですね…。