« ◇代替色インク印刷:あって当然の機能 | トップページ | ◇セミの声の移り変わり »

SliverlightでhelloWorld改

Sliverlightを使ってボタンとボタンを押したときに文字列を 出すまでを示します。
Silverlightはブラウザ-クライアント側で動作するプラグイン で色々なUIを組める他、ビデオ再生などの機能をもちます。
画面定義と動作定義からなります。 画面設定と動作定義(C#プログラム)の連携を示します。

 WEBページに取り込む(今回のこの記事の到達点)

ブラウザでSilverlightが有効になっていると下にclick me というボタンが出ているはずです。(無効の場合silverlightの インストールサイトへのリンクが出ます)ボタンを押すたびに 「Hello World」「This is Silverlight-test-1]の文字が繰り返し出ます。

Microsoft Silverlight を入手

これはVisualStudioで作成したSilverlightプログラム(helloWorld.xap) を次の記述ではめ込んでいます。

<object width="480" height="100"
    data="data:application/x-silverlight-2," 
    type="application/x-silverlight-2" >
    <param name="source"  value="../../../xap/helloHAL.xap"/>
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
       style="text-decoration:none">
    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
       alt="Microsoft Silverlight を入手" style="border-style:none"/></a>
</object>

以下の説明は、開発環境の構築から、この表示に至るまでの作成に関してのものです。

 開発環境の構築

一発で環境を作れるようにはなっていませんので注意と 忍耐が必要です。

1. VisualStudio2008をインストールする
VisualStudio2008の体験版を ダウンロードするか、Standerd版 以上を購入する必要があります。
体験版は90日限定です。
VisualStudioとSilverlightは現時点では極めて相性が 悪いことは考慮する必要があります。
Silverlight-SDKというのも用意されており、これを 使う場合はVisualStudioは不要なのかも知れません。

2. VisualStudioのSP1を適用する
次のサイトからダウンロード、インストールできます。
http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=ja

3. Sliverligth3toolsをインストールする
次のサイトからダウンロード、インストールできます。
http://www.microsoft.com/downloads/details.aspx?displaylang=ja&FamilyID=9442b0f2-7465-417a-88f3-5e7b5409e9dd

補足:
Sliverlight3toolsをインストールすることにより ViualStudioでSilverlightプロジェクトを作成できる ようになったが、なぜかコントロールが有効になり ません。

VisualStudioでコントロールが有効となくてもソース 上に直接書けば動作します。
加えて、有効であったとしても、画面定義にVisualに はめ込むことができる訳ではなく、ソーステキスト上 に書かれるだけなので、あんまり役に立つ訳ではありません。 (なんじゃそりゃ?機能です)

 開発

1. VisualStudioでSilverlightプロジェクトを作成する
[ファイル]-[新規作成]-[プロジェクト]でSilverlightプロジェクト を作成します。

ソリューション名、プロジェクト名となっていますが、生成される ソリューションはプロジェクト名で作られ、プロジェクト管理の 基本フォルダがソリューション名となります。意味が分かりません。

理解しづらいダイアログがでますが、これはデフォルトのまま[OK]を 押します。

プロジェクトが開始されます。

ソリューションエクスプローラでMainPage.xaml(画面配置定義)と MainPage.xaml.cs(プログラム)を表示させておきます。

2. MainPage.xamlにボタンとテキストを配置

MainPage.xamlのxaml記述中にある<Grid></Grid>間に 表示オブジェクトを配置します。ここではボタン(Button)とテキスト(TextBox) を配置しています。ボタンがクリックされた時に呼ばれる関数をClick= "XXX" で定義しています。プログラムからテキストオブジェクトにアクセスするため Name="XXX"で名前を与えています。

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
  <Button Content="Click me" Click="button1_clicked" 
          Height="24" Width="100" Margin="20,20,0,0"
          HorizontalAlignment="Left" VerticalAlignment="Top"/>
  <TextBox Name="text1"
          Height="24" Width="300" Margin="20,60,0,0"
          HorizontalAlignment="Left" VerticalAlignment="Top"/>
  </Grid>
</UserControl>

3. MainPage.xaml.csにプログラム記述

MainPage.xaml.csを開き、ボタンのイベントを受け取る関数を追加記述します。 ここではbutton1_clicked()関数で text1のText要素に文字列を与えています。

namespace SilverlightApplication1 {
   public partial class MainPage : UserControl {
      public MainPage() {
         InitializeComponent();
         }
      private int  counter = 0;
      private void button1_clicked(object          sender
                                  ,RoutedEventArgs r_event){
         //MessageBox.Show("ボタンが押されました");
         if ((++counter % 2) == 1) {
            text1.Text = "Hello World.";
            }
         else {
            text1.Text = "This is Silverlight-test-1.";
            }
         }
      }
   }

4. デバグ起動

[デバグ]-[>デバグ開始]で仮のWEB画面でのデバグが開始されます。

デバグの画面はWEBブラウザ上にでます。



5. ソリューションのビルド

[>リリース]を選択し、

[ビルド]-[ソリューションのビルド]で実行ファイル(.axp)を 生成します。

生成されるのは
 プロジェクト名\Bin\Release\プロジェクト名.axp
です。

5. プロジェクトのクリーン

[ビルド]-[ソリューションのクリーン]と[ビルド]-[XXXX.webのクリーン]を実行し、 ゴミファイルを消します。
残念ながらこれを行ってもプロジェクトはゴミファイルだらけのままとなりますが、 どれが必要でどれが不要か現在良く分かっていません。

 WEB画面への取り込み/Silverlightそのもののインストール促進

ビルド結果の.axpをHTMLの<object>で参照します。
記述は冒頭に載せました。

sourceで指定できるファイルは通常同一ドメインにある必要があります。
セキュリティーの破壊者サンドボックス管理となっているためです。 (サンドボックスは面倒を嫌う利用者が自ら全面的にカギを開けるように しむけ、開発側の責任を逃れようとする悪魔の仕組みです; Flashも画像処理など一部ファイルアクセスで利用しています がプログラムの起動そのものをこの仕組みにするのは 狂気のさたとしか思えません)

<a href="..."><img ..></a> はsilverlightがインストールされていない場合 インストールを促すものです。抵抗があるのですが、 silverlightなど誰も使っておらず、知名度も全く ない現状では入れざるを得ないでしょう。(Flash ならこんな下品なことをしなくてもいいのですが)

|

« ◇代替色インク印刷:あって当然の機能 | トップページ | ◇セミの声の移り変わり »

トラックバック


この記事へのトラックバック一覧です: SliverlightでhelloWorld改:

« ◇代替色インク印刷:あって当然の機能 | トップページ | ◇セミの声の移り変わり »