Silverlight2関連のサンプルとドキュメントを修正中

2009 年 1 月 10 日 – 10:36 PM

ようやく、JavaScript+Silverlight2関連のサンプルとドキュメントの修正を始めています。ベータ2で書いたものが、正式版になって動かなくなっていたのですが、いろいろと調べていくうち、少しずつ理由がわかってきたからです。

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2 ……>
　　　↓
<object data="data:application/x-silverlight," type="application/x-silverlight-2 ……>

もちろん、ヘッダは上記のように修正したのですが、それでも動かないのが多数発生していました。

1つはChiron.exeです。ベータ2で入手したChiron.exeを、Silverlight2の正式版リリース後もそのまま使っていたのですが、どうも、Chiron.exeも新しくしないと正しく動作してくれないようです。下のcodeplexのサイトで、最新のSDKを入手し、そのSDKに含まれているChiron.exeを入手し、環境変数でパスを通したら、サンプルがローカルで動くようになりました。問題はコードにあるとばかり思い込んでいたので、Chiron.exeはまったくノーチェックでした。

http://www.codeplex.com/sdlsdk/Release/ProjectReleases.aspx?ReleaseId=11955

あと、HTMLブリッジ のサンプルが動かなかったのは、β2と正式版で仕様が変化しているのが原因のようです。β2では、Silverlightのプラグインの外のHTMLファイルが別ドメインにあってもアクセスできたのですが、正式版ではそれができなくなっているようです。

1つのドメイン上に上げたxapファイルを、他のドメインのブログ等からSilverlightプラグインのソースとして指定してサンプルを書いていたので、これらがすべてアウトになっていました。今は修正しているので、動くと思います。たとえばコレなど。

ただ、ドキュメント類などはβ2を前提にした内容が多数残っているので、時間を見て修正します。特に、Silverlight2のプログラムをテキストエディタとJavaScriptだけで作成する簡単チュートリアル は、大幅に修正しようかと思っています。

ずっとつっかえてたものが、少しとれた感じなので、また少しずつSilverlightまわりのサンプルやドキュメントを増やしていきたいと思います。

以下、修正したサンプルです。

［MAKOTO3.COM］

［MAKOTO3.NET Blog］

Posted in Silverlight2, メモ | No Comments »

デバッグ情報を表示するパラメータ initParams

2008 年 8 月 29 日 – 11:18 PM

Tech・Ed 2008で教わったTipsの1つです。Silverlight2のプログラムをテキストエディタとJavaScriptだけで作成する簡単チュートリアルで説明したように、テキストエディタだけでSilverlight2のブログラムを作る場合、HTMLファイルの<object>タグのパラメータに次のように書いておくと、エラーが起きたときエラー箇所などのデバッグ箇所を表示できるようになります。

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="300" height="300">
　　　　　　　：
        <param name="initParams" value="debug=true, reportErrors=ErrorReport"/>
　　　　　　　：
</object>

nameはinitParamsとし、valueにdebug=trueと指定したあと、reportErrorsにはデバッグ情報を表示するdivのID名を指定します。上記の例なら、HTMLファイル中にあるID名がErrorReportのdiv内に表示されることになります（reportErrorsの指定を省略しても表示はされるようです）。次は、表示したデバッグ情報の例です。HTML中のdivにスタイルシートを使って色（背景色：黒、文字：緑）を指定しています。より詳しい情報はこちらに書かれてます。

Posted in Silverlight2 | 2 Comments »

CheckBoxのサンプル

2008 年 8 月 29 日 – 10:54 PM

コントロールのCheckBoxのサンプルです。状態によって、TextBlockの文字を書き換えています。

【index.html】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Silverlight Javascript sample</title>
</head>
<body>
<div style="text-align:center;height:100%;">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="300" height="300">
        <param name="enableHtmlAccess" value="true" />
        <param name="source" value="app.xap"/>
        <param name="initParams" value="debug=true, reportErrors=ErrorReport"/>
        <param name="onerror" value="onSilverlightError"/>
        <param name="windowless" value="true"/>
    </object>
</div>
<div id="ErrorReport" style="background-color:black;color:lime;">
</div>
</body>
</html>

【app.xaml】

<Canvas
  x:Class="System.Windows.Controls.Canvas"
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="300">
<CheckBox x:Name="cb1" Width="20" Height="20"
 Canvas.Left="80" Canvas.Top="100" Background="Red" />
<TextBlock x:Name="text1" Canvas.Left="100" Canvas.Top="100" Text="チェックボックスのテスト"/>
<TextBlock x:Name="text2" Canvas.Left="100" Canvas.Top="150" Text="状態を表示" Foreground="Blue"/>
</Canvas>

【app.js】

Import("System.Windows.*");
Import("System.Windows.Controls.*");
Import("System.Windows.Browser.*");
var root = Application.Current.LoadRootVisual(new Canvas(), "app.xaml");
root.cb1.Checked += function(sender,arges)    {
    sender.findName("text2").Text = "チェックされました！"
}
root.cb1.Unchecked += function(sender,arges)    {
    sender.findName("text2").Text = "チェックが外れました！"
}

Posted in Silverlight2 | 1 Comment »

ListBoxとListBoxItem:選択されたリストアイテムの値を取得する

2008 年 8 月 18 日 – 12:52 AM

コントロールのListBoxとListItemで選択されたリスト（ListItem）の文字（Contentプロパティ）を取得しています。SelectedItemプロパティで選択されたListItemを得られるのがポイントです。

【index.html】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Silverlight Javascript sample</title>
</head>
<body>
<div style="text-align:center;height:100%;">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="300" height="300">
        <param name="enableHtmlAccess" value="true" />
        <param name="source" value="app.xap"/>
    </object>
</div>
</body>
</html>

【app.xaml】

<Canvas
  x:Class="System.Windows.Controls.Canvas"
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="300">
<ListBox Width="150" Canvas.Top="50" Canvas.Left="50" x:Name="myList">
<ListBoxItem Content="Windows 95" />
<ListBoxItem Content="Windows 98" />
<ListBoxItem Content="Windows Me" />
<ListBoxItem Content="Windows 2000" />
<ListBoxItem Content="Windows XP" />
<ListBoxItem Content="Windows Vista" />
<ListBoxItem Content="Windows 7" />
<ListBoxItem Content="Windows Server 2008" />
</ListBox>
</Canvas>

【app.js】

Import("System.Windows.*");
Import("System.Windows.Controls.*");
Import("System.Windows.Browser.*");
var root = Application.Current.LoadRootVisual(new Canvas(), "app.xaml");
root.myList.SelectionChanged += function(sender,arges)    {
    HtmlPage.Window.Alert(sender.SelectedItem.Content + "が選択されました");
}

Posted in Silverlight2 | No Comments »

HTMLブリッジ：Silverlightプラグインから外のHTMLドキュメントにアクセスする

2008 年 8 月 12 日 – 8:46 PM

Silverlight2には、プラグインの内側から外のHTMLドキュメントにアクセスできるHTMLブリッジという仕組みが用意されています。次はそのサンプルです。四角いエリアはSilverlightのプラグインですが、3つのスライダーで外にあるHTMLドキュメントのbgcolorのRGB値を変えることができます。下はブログに埋め込んでますが、埋め込んでないのはこちらです。

なお、アクセスできるのはxapファイルが属しているのと同じドメインのHTMLファイルに限られるようです（Silverlight 2.0のベータ版では他ドメインにもアクセスできたのですが、正式版ではできなくなっているようです）。

ソースは次のとおりです。

【index.html】

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>Silverlight Javascript sample</title>
</head>
<body bgcolor=”#000000″>
<div style=”text-align:center;height:100%;”>
<object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”300″ height=”300″>
        <param name=”background” value=”#000000″/>
        <param name=”enableHtmlAccess” value=”true”/>
        <param name=”source” value=”http://www.makoto3.com/sample0006/app.xap”/>
    </object>
</div>
</body>
</html>

【app.xaml】

<Canvas x:Class=”System.Windows.Controls.Canvas”
  xmlns=”http://schemas.microsoft.com/client/2007″
  xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    Width=”300″ Height=”300″>
    <TextBlock x:Name=”text1″ Canvas.Top=”50″
        Canvas.Left=”80″ Width=”200″ Foreground=”Lime”
 Text=”000000″  FontSize=”30″ >
    </TextBlock>
    <Rectangle Canvas.Top=”0″ Canvas.Left=”0″ Width=”300″ Height=”300″ Stroke=”lime” StrokeThickness=”10″>
    </Rectangle>
    <Slider Canvas.Top=”100″ Canvas.Left=”50″ Value=”0″ Maximum=”255″ Minimum=”0″  x:Name=”Slider_red” Width=”200″ Cursor=”hand” />
    <Slider Canvas.Top=”150″ Canvas.Left=”50″ Value=”0″ Maximum=”255″ Minimum=”0″ x:Name=”Slider_green” Width=”200″ Cursor=”hand” />
    <Slider Canvas.Top=”200″ Canvas.Left=”50″ Value=”0″ Maximum=”255″ Minimum=”0″ x:Name=”Slider_blue” Width=”200″ Cursor=”hand” />
</Canvas>

【app.js】

Import(”System.Windows.*”);
Import(”System.Windows.Controls.*”);
Import(”System.Windows.Browser.*”);
var root = Application.Current.LoadRootVisual(new Canvas(), “app.xaml”);
root.Slider_red.ValueChanged += function(sender, args)    {
    setBgColor(sender);
}
root.Slider_green.ValueChanged += function(sender, args)    {
    setBgColor(sender);
}
root.Slider_blue.ValueChanged += function(sender, args)    {
    setBgColor(sender);
}
function setBgColor(sender)    {
    var r = sender.findName(”Slider_red”).Value;
    var g = sender.findName(”Slider_green”).Value;
    var b = sender.findName(”Slider_blue”).Value;
    r = Math.round(r).toString(16);
    g = Math.round(g).toString(16);
    b = Math.round(b).toString(16);
    r = (r.length ==1 )?  ”0″ + r : r;
    g = (g.length ==1 )?  ”0″ + g : g;
    b = (b.length ==1 )?  ”0″ + b : b;
    var colorValue = “#” + r + g + b;
    sender.findName(”text1″).text = colorValue;
    HtmlPage.Document.body.bgColor = colorValue;
}

まず、index.htmlのobjectタグでは、パラメータのenableHtmlAccessの値をtrueにします（初期値はfalse）。これによって、プラグインからHTMLドキュメントにアクセスできるようになります。ここがfalseだと動作しません。app.jsでは、System.Windows.Browserのライブラリをインポートしています。

この2つの指定によって、スクリプトを使って外のHTMLにアクセスできるようなります。HtmlPage.Documentでブラウザのdocumentオブジェクトを取得できるので、あとはbody.bgColorに、スライダーから取得した色の16進数指定をセットしているだけです。

【参考】
HTML ブリッジ : HTML とマネージ コード間の対話


※注意：Silverlight2 β2を前提にしていますので、内容は変更される可能性があります。

Posted in Silverlight2 | 1 Comment »

Previous Entries
MAKOTO3.COM is proudly powered by WordPress Entries (RSS) and Comments (RSS). Theme by Bob