Microsoft Visual Web Developer 2008 Express Edition Silverlight 3 |
■Silverlight でコントロール | Prev Top Next |
まず始めに VisualStudio 2008 でプロジェクトを作成します。プロジェクト名は SilverlightTutrial で作成しました。
ソリューションエクスプローラー
いっぱいファイルが作成されますが、全部いりません。とりあえずいらないファイルをすべて削除します。
1.App.xaml と MainPage.xaml を削除
まずxamlファイルについて簡単に説明すると、Microsoftによって開発された、
アプリケーションソフトのユーザーインターフェースを記述するための言語仕様のことです。詳細は
IT用語辞典バイナリを参照してください。
Silverlight では Applicationクラス を継承するクラスが必要となります。
このクラスは Silverlight を管理するクラスです。
App.xaml 配下の App.xaml.cs の Appクラス が Applicationクラス を継承していますが、
コードを簡略化するために作成しなおします。なので App.xaml は削除します。
UserControlクラス についてはいずれ解説する予定です。とりあえず今回は使用しません。
2.Default.aspx を削除
このファイルはASP.NETでのコードのテンプレートです。今回は使用しません。
3.SilverlightTutrialTestPage.aspx を削除
トップページのファイルです。拡張子が aspx と html の2種類ありますが、どちらか一方のみ使用します。
今回は SilverlightTutrialTestPage.html を使用します。
トップページの変更は「ソリューションエクスプローラー」ウィンドウのファイル上で右クリックして表示されるメニューから「スタートページに設定」を選択します。
スタートページに設定
次にファイルを1つ追加します。
4.CodeFile.cs を追加
このファイル内にクラスを作成し、そのクラスがApplicationクラス を継承するように設計します。
ここでは SilverlightCls という名称のクラスを記述します。
5.コーディング
---SilverlightTutrialTestPage.html---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- スタートページです --> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>SilverlightTutrial</title> <!-- ********************************************************************************************************************************* スタイルシートの処理 ********************************************************************************************************************************* --> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } </style> <!-- Silverlight.js ファイルをインクルード --> <!-- Silverlight.js ファイルには、Web ページに Silverlight プラグインを埋め込んだり、Silverlight のインストール エクスペリエンスをカスタマイズしたりするための JavaScript ヘルパー関数が定義されています。 createObject 関数および createObjectEx 関数を使用すると、Web ページに Silverlight プラグインを動的に埋め込むことができます。 ですがここでは使用しません。 詳細は http://msdn.microsoft.com/ja-jp/library/cc838126(VS.95).aspx を参照 --> <script type="text/javascript" src="Silverlight.js"></script> <!-- ********************************************************************************************************************************* javascript ********************************************************************************************************************************* --> <script type="text/javascript"> // Silverlight内でエラーが発生したときにコールされる関数。 function onSilverlightError(sender, args) { var appSource = ""; if (sender != null && sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode; if (errorType == "ImageError" || errorType == "MediaError") { return; } var errMsg = "Silverlight アプリケーションでハンドルされていないエラーが発生しました " + appSource + "\n" ; errMsg += "コード: "+ iErrorCode + " \n"; errMsg += "カテゴリ: " + errorType + " \n"; errMsg += "メッセージ: " + args.ErrorMessage + " \n"; if (errorType == "ParserError") { errMsg += "ファイル: " + args.xamlFile + " \n"; errMsg += "行: " + args.lineNumber + " \n"; errMsg += "位置: " + args.charPosition + " \n"; } else if (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "行: " + args.lineNumber + " \n"; errMsg += "位置: " + args.charPosition + " \n"; } errMsg += "メソッド名: " + args.methodName + " \n"; } throw new Error(errMsg); } </script> </head> <body> <form id="form1" runat="server" style="height:100%"> HTMLに文字出力<p/> <!-- ********************************************************************************************************************************* Silverlight を初期化します。 ********************************************************************************************************************************* --> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="640px" height="480px"> <!-- 表示するコンテンツを指定または格納する初期ファイルの URI (Uniform Resource Identifier) を設定します。 初期ファイルは、JavaScript API の場合は XAML ファイル、マネージ API の場合は XAP パッケージになります。 ここではVisualStudio による開発を行うため XAP パッケージになります。--> <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838137(VS.95).aspx を参照 --> <param name="source" value="ClientBin/SilverlightTutrial.xap"/> <!-- Silverlight プラグインによってネイティブ コード レベルで XAML 解析エラーまたはランタイム エラーが生成されたときに呼び出すイベントハンドラーの名前を指定します。 --> <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838212(VS.95).aspx を参照 --> <param name="onError" value="onSilverlightError" /> <!-- XAML コンテンツが表示される四角形領域の背景色を設定します。--> <!-- ここでは白に設定します。 --> <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838148(VS.95).aspx を参照 --> <param name="background" value="#99ffff" /> <!-- Silverlight アプリケーションの実行に必要な最も古い Silverlight バージョンを示す値を設定します。 --> <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc917842(VS.95).aspx を参照 --> <param name="minRuntimeVersion" value="3.0.40624.0" /> <!-- Silverlight が 1 秒あたりに描画できるフレームの最大数を設定します。--> <param name="maxframerate" value="60"/> <!-- Silverlight プラグインのバージョンが、指定された minRuntimeVersion よりも前のものである場合に、 自動的に更新を試みるかどうかを示す値を設定します。--> <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc917827(VS.95).aspx を参照 --> <param name="autoUpgrade" value="true" /> <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> <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe> </div> </form> </body> </html>このファイルはコメント追加と、Silverlightの表示領域のサイズの変更と背景色を変更したくらいで、基本デフォルトと同じです。
---CodeFile.cs---
using System.Windows; using System.Windows.Controls; // Silverlight の動作を設定する public class SilverlightCls : Application { public SilverlightCls() { // テキストブロック TextBlock textBlock = new TextBlock(); textBlock.Text = "Silverlight に文字出力"; // ボタン Button button1 = new Button(); button1.Content = "ボタン1"; button1.Height = 30; // 縦幅設定 button1.Width = 100; // 横幅設定 Button button2 = new Button(); button2.Content = "ボタン2"; button2.Height = 30; // 縦幅設定 button2.Width = 100; // 横幅設定 // コントロールの表示位置を設定 Canvas.SetLeft(textBlock, 0); Canvas.SetTop(textBlock, 0); Canvas.SetLeft(button1, 350); Canvas.SetTop(button1, 420); Canvas.SetLeft(button2, 500); Canvas.SetTop(button2, 420); Canvas canvas = new Canvas(); // コントロールをキャンバスに追加する canvas.Children.Add(textBlock); canvas.Children.Add(button1); canvas.Children.Add(button2); RootVisual = canvas; } }このファイル内で Silverlight の動作を設定します。今回はテキストブロックコントロール1個とボタンコントロール2個を適当に表示してみます。
6.スタートアップ オブジェクトの設定
プロジェクトのプロパティ
「スタートアップ オブジェクト」でクラス名に SilverlightCls を指定します。
7.デバッグ
コーディングしたら F5 を押してデバッグして実行します。エラーがなければ実行できます。
8.配置
最後に配置します。実行に必要なファイルは2つです。
1)SilverlightTutrial\SilverlightTutrial.Web\SilverlightTutrialTestPage.html
2)SilverlightTutrial\SilverlightTutrial.Web\ClientBin\SilverlightTutrial.xap
SilverlightTutrialTestPage.html はトップページです。
SilverlightTutrial.xap は zip形式 の圧縮ファイルです。
解凍すると SilverlightTutrial.dll と AppManifest.xaml の2つのファイルが展開されます。
SilverlightTutrial.dll は VisualStudioでのコンパイルにより作成されたdllファイルです。
AppManifest.xaml はアセンブリの位置やエントリーポイントが記述されます。
アセンブリは実行時に使用するdllファイルのことです。今回のプログラムでは SilverlightTutrial.dll が記述されます。
エントリーポイントは起動もとの情報です。今回のプログラムでは SilverlightClsクラス が記述されます。
ホームページの公開にFC2の無料サービスを使用してますが、ここのサービスだと使用できる拡張子に制限があるため サンプルを公開できません。いっそ他のサービスに移行しようかな。