2008年01月07日

初めてのSilverlight

Silverlight本体はブラウザのplugin形式のアプリケーションであるが
Silverlight1.0のコンテンツは
JavaScript+XAML(XML型言語)という単純な構成で開発可能であり
テキストエディタ1つで開発が可能となる。

Silverlightのコンテンツ上に配置するオブジェクト等は
主にXAML上にタグの形式で記述していくのだが
今回は初歩の初歩という意味で
ブラウザ上にSilverlightのオブジェクトを表示させる為の
JavaScriptの紹介だけに留めたい。

まず初めにSilverlightの開発環境であるSilverlightSDKを
ダウンロード、インストールする。

・MS Silverlight SDK
http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en

このページからSilverlightSDKをダウンロードし
インストールが完了すると
デフォルトでは
C:\Program Files\Microsoft Silverlight 1.0 SDK
にSDK一式がインストールされる。
SDKの中にはオンラインヘルプやクイックスタートなどの
学習用素材などが含まれているが
基本的に必要なのは
Tools\Silverlight.js\Silverlight.js
のファイルのみとなる。

このファイルをSilverlightを埋め込むhtmlのファイルで
読み込んで利用することでSilverlightコンテンツの利用が
可能となる。

手始めに利用するSilverlight.js内の関数は
Silverlight.createObject()という関数のみで
5つの引数を渡すことでSilverlightのコンテンツが表示される。

Silverlight.createObject(
XAMLファイルのパス,
HTML内の表示位置,
オブジェクト名,
イニシャライズオブジェクト,
エラー処理等のオブジェクト
)

参考までにXAMLファイルを用意せずに
Silverlightの領域のみを描くHTMLを紹介する。

01:<html>
02:<head>
03:<script type="text/javascript" src="js/Silverlight.js"></script>
04:<script language="JavaScript">
05:<!--
06:  function init(){
07:    Silverlight.createObject(
08:      "test.xaml",
09:      document.getElementById("helloworld"),
10:      "helloworld",
11:      {width: "500",height: "450",background: "#0000FF",version: "1.0"},
12:      {}
13:    )
14:  }
15://-->
16:</script>
17:</head>
18:<body onLoad="javascript:init();">
19:<center>
20:<div id="helloworld"></div>
21:</center>
22:</body>
23:</html>

最後になったが当然ながらRuntime環境となる
Silverlightがインストールされていないと
動作を確認できないので、インストールがまだの方は
以下のURLからインストールください。

http://www.microsoft.com/japan/silverlight/downloads.aspx

・完成形イメージ
http://www.iretj.com/~ak/study/silverlight/SilverlightCreateObject.html
タグ:Silverlight xaml
posted by zis at 17:41| Comment(0) | TrackBack(0) | Silverlight | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。