最初は面白いニュースを共有したいと思います。 私たちは、Samara Turbomilkのクリエイティブデザイナーの支援を受けて、Silverlightユーザーコミュニティのアルファ版であるSilverlight Webサイトを立ち上げました。
ちなみに、Silverlightはコミュニティのメンバーであるだけでなく、写真にガスの輝きがある素晴らしい生物でもあります:)
さて、実際に、実際に記事に移りましょう。
こんにちは親愛なる読者。 私の名前はセルゲイ・プガチョフです。 私はかなり長い間、Silverlight開発者であり、このテクノロジーを積極的に推進してきました。そのため、この機能またはその機能を実装する方法についてよく尋ねられます。 この記事は、これらのよくある質問に対する回答の一種です。 これは最初の部分で、HTMLとJavaScriptとの統合に焦点を当てています。
ただし、小さなマーケティングの紹介から始めましょう。
最近、Microsoft Silverlightテクノロジーが広く知られています。 フォーラムやブログでは、2008年10月14日にリリースされた2番目のバージョン（Silverlight 2）のさまざまな機能について活発に議論されています。 多くの人がすでにSilverlightアプリケーションの作成を開始しており、誰かがSilverlightテクノロジーを使用したソリューションの開発を近い将来に開始しようとしています。 この技術の応用範囲は膨大です。 インターネットTV放送、エンターテイメント、教育ポータルもあります。 私の意見では、近い将来、本格的な企業（基幹業務、エンタープライズ、CRM、ERP）のSilverlightアプリケーションが登場し、積極的に開発されるでしょう。 さらに、Silverlightテクノロジーのような、私が話をしたほとんどの.NET開発者。 そして、これはいくつかの楽観主義を刺激します！ 彼らが言うように、あなたも試してください。
Silverlight技術にまだ慣れていない場合は、まず水に関する記事を読んで、サイトhttp://www.silverlighter.ruおよびhttp://techdays.ru/で見つけることができるスクリーンキャストを参照することをお勧めします。 そして、この記事の読みに進みます。
読者のみなさん、このマーケティングについてはもう十分だと思いましたか？ はい、確かに、私たちにとって、開発者にとっての主なものは、マーケティングの声明ではなくプログラムです。 この時点ですべてのマーケティングが終了し、私たちが愛するもの、つまりCODEが始まることを約束します。
そのため、この記事の最初の部分で取り上げたいトピックは次のとおりです。
- 初期化パラメーターの読み取り
- HTML DOM（ドキュメントオブジェクトモデル）へのアクセス
- SilverlightからJavaScript関数を呼び出す
- JavaScriptからSilverlight関数を呼び出す
Silverlightアプリケーションプロジェクトの作成
Visual Studio用のSilverlightツールをインストールして、Visual Studio 2008 SP1で新しいSilverlightアプリケーションを作成しましょう。 これを行うには、[ファイル]-> [新規]-> [プロジェクト]-> [Silverlight]-> [Silverlightアプリケーション]を選択します。 アプリケーションにMySilverlightApplicationという名前を付けて、[OK]をクリックします。 [Silverlightアプリケーションの追加]ダイアログで、デフォルト値のままにします。 [OK]をクリックすると、Visual Studioで2つの新しいプロジェクトが表示されます。 実際には、SilverlightアプリケーションをホストするためのSilverlightアプリケーションとASP.NETアプリケーション。 まあ、おそらくあなたはすでにそれを知っています。
初期化パラメーターの読み取り
次のことを行います。 MySilverlightApplicationTestPage.htmlおよびMySilverlightApplicationTestPage.aspxページで、Silverlightプラグインの初期化パラメーターを設定します。 Silverlightの初期化パラメーターを読み取った後、アプリケーションは開始ページを作成するXAMLページを選択し、起動時にそれに応じてユーザーに表示します：作成したデフォルトのPage.xamlまたはNextPage.xaml。
これを行うには、Silverlightアプリケーションに新しいページを追加します。 プロジェクトの名前を右クリックして、[追加]-> [新しい項目]-> [Silverlightユーザーコントロール]を選択します。 NextPage.xamlコントロールに名前を付けます。 OKボタンを押します。
次に、Page.xamlページの背景は白のままなので、実行時にロードされたページを判別するために、NextPageページの背景色を赤に変更します。 Grid要素（LayoutRootという名前）のBackgroundプロパティを「Red」に設定します。
ASP.NETプロジェクトで、MySilverlightApplicationTestPage.htmlページを開き、アプリケーションのSilverlight実装コードを確認します。
< object data ="data:application/x-silverlight-2,"
type ="application/x-silverlight-2"
width ="100%" height ="100%" >
< param name ="source" value ="ClientBin/MySilverlightApplication.xap" />
< param name ="onerror" value ="onSilverlightError" />
< param name ="background" value ="white" />
< param name ="minRuntimeVersion" value ="2.0.31005.0" />
< param name ="autoUpgrade" value ="true" />
< a href ="http://go.microsoft.com/fwlink/?LinkID=124807"
style ="text-decoration: none;" >
< img src ="http://go.microsoft.com/fwlink/?LinkId=108181"
alt ="Get Microsoft Silverlight" style ="border-style: none" />
</ a >
</ object >
* This source code was highlighted with Source Code Highlighter .
次のタグをオブジェクトタグに追加しましょう。
< param name ="initParams" value ="startPage=Page" />
* This source code was highlighted with Source Code Highlighter .
このコードは、値が「Page」に等しい「startPage」という名前の初期化パラメーターを設定します。 この場合、パラメーターは1ですが、複数のパラメーターをコンマで区切って記述することができます。
ASP.NET MySilverlightApplicationTestPage.aspxページを開きます。 Silverlightアプリケーションの実装コードは異なり、次のようになります。
< asp:Silverlight ID ="Xaml1" runat ="server"
Source ="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion ="2.0.31005.0" Width ="100%" Height ="100%" />
* This source code was highlighted with Source Code Highlighter .
このコードに変更します。
< asp:Silverlight ID ="Xaml1" runat ="server"
Source ="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion ="2.0.31005.0" Width ="100%" Height ="100%"
InitParameters ="startPage=Page" />
* This source code was highlighted with Source Code Highlighter .
変更は明らかです。 InitParametersプロパティが追加されました。
初期化パラメーターの設定には、オブジェクトタグ用とASP：Silverlightサーバーコントロール用に、Silverlightと同等の2つのアプリケーションを使用しました。
次に、Silverlightアプリケーション自体で初期化パラメーターを取得する必要があります。 これを行うには、App.xamlページのC＃コードを開き、Application_Startup関数のコードを次のコードに置き換えます。
private void Application_Startup( object sender, StartupEventArgs e)
{
string startPage = e.InitParams[ "startPage" ];
if (startPage != null && startPage.Equals( "Page" ))
{
this .RootVisual = new Page ();
}
else
{
this .RootVisual = new NextPage();
}
}
* This source code was highlighted with Source Code Highlighter .
StartupEventArgs.InitParamsプロパティは、IDictionary <string、string>型です。 そして、この辞書から指定されたすべての初期化パラメーターを取得できます。 この場合、設定したstartPageパラメーターが「Page」に等しい場合、Page.xamlファイルに記述されているコントロールがアプリケーションのメインの視覚要素になります。 他の値を使用すると、NextPage.xamlページがアプリケーションのメインの視覚コントロールになります。
プログラムを実行して結果を見てみましょう。 「startPage」パラメーターの値を変更して、何が起こるかを確認します。 忘れずに、パラメータ値を返してください。 この例では、このSilverlightアプリケーションを使用します。
HTML DOM（ドキュメントオブジェクトモデル）へのアクセス
最初の例では、2つの（HTMLおよびASP.NET）ページで変更が行われました。 さらに、Silverlightアプリケーションのデバッグに関する記事では、ページのみが使用されます-MySilverlightApplicationTestPage.aspxおよびすべての変更は、それに応じてのみ実行されます。
SilverlightアプリケーションをホストしているページのHTMLドキュメントにアクセスするには、HtmlDocument型のHtmlPage.Documentオブジェクトが使用されます。 また、System.Windows.Browser名前空間を含めることを忘れないでください。 これを行うには、Page.xaml.csファイルのusings C＃セクションに追加します。
using System.Windows.Browser
* This source code was highlighted with Source Code Highlighter .
Page.xamlページにボタンを追加して、「mainButton」という名前を付け、ボタンクリックイベントを設定します。 ページのソースコードは次のとおりです。
< UserControl x:Class ="MySilverlightApplication.Page"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< Button Click ="Button_Click" Content =" "
Width ="250" Height ="50" x:Name ="mainButton" />
</ Grid >
</ UserControl >
* This source code was highlighted with Source Code Highlighter .
ASP.NETアプリケーションでMySilverlightApplicationTestPage.aspxページを開き、Silverlightプラグインの実装コードを確認します。
< div style ="height:100%;" >
< asp:Silverlight ID ="Xaml1" runat ="server"
Source ="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion ="2.0.31005.0" Width ="100%" Height ="100%"
InitParameters ="startPage=Page" />
</ div >
* This source code was highlighted with Source Code Highlighter .
asp：Silverlightタグはdivタグタグ内にあります。 divの名前をmyDIVに設定し、スタイルを変更します。
< div id ="myDIV" style ="background:blue;width:100%;height:100%" >
* This source code was highlighted with Source Code Highlighter .
また、Silverlightプラグインの幅を100％ではなく、Width =“ 50％”に設定します。
< asp:Silverlight ID ="Xaml1" runat ="server"
Source ="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion ="2.0.31005.0" Width ="50%" Height ="100%"
InitParameters ="startPage=Page" />
* This source code was highlighted with Source Code Highlighter .
次に、ボタンクリックハンドラーのコードを記述します。
private void Button_Click( object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.SetStyleAttribute( "background" , "green" );
}
* This source code was highlighted with Source Code Highlighter .
このコードを使用して、HTMLドキュメントを取得し、HTMLドキュメント内の要素を見つけて、この要素のスタイルを設定します。 したがって、Silverlightアプリケーションの内部には、HTMLページの外観とコンテンツを変更するための豊富な機能があります。
さらに、C＃コードでHTMLページイベントを処理できます。 これを行うには、ボタンクリックハンドラーButton_Clickにコードを追加します。
div.AttachEvent( "onclick" , new EventHandler((o, x) =>
{
div.SetStyleAttribute( "background" , "yellow" );
}));
* This source code was highlighted with Source Code Highlighter .
div要素の空き領域でクリックイベントに参加します。 このクリックで、背景色が黄色に変わります。 ここでは、ラムダ式がイベントハンドラーに使用されています。 完全なボタンクリックハンドラーコードを次に示します。
private void Button_Click( object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.AttachEvent( "onclick" , new EventHandler((o, x) =>
{
div.SetStyleAttribute( "background" , "yellow" );
}));
div.SetStyleAttribute( "background" , "green" );
}
* This source code was highlighted with Source Code Highlighter .
これはテストケースであるため、ボタンをクリックするたびに、イベントが署名されます。 実際のアプリケーションでは、これを行うことができず、このコードを初期化セクションに配置する必要があります。 たとえば、次のように：
public Page ()
{
InitializeComponent();
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.AttachEvent( "onclick" , new EventHandler((o, x) =>
{
div.SetStyleAttribute( "background" , "yellow" );
}));
}
private void Button_Click( object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.SetStyleAttribute( "background" , "green" );
}
* This source code was highlighted with Source Code Highlighter .
ここで、ページデザイナで、必要なイベントをサブスクライブします。
このアプリケーションを起動します。 ボタンをクリックします。 青いスペースが緑に変わります。 緑のスペースをクリックすると、黄色に変わります。
SilverlightアプリケーションからHTMLページへのアクセスを制限できることに注意してください。 これを行うには、asp：SilverlightサーバーコントロールでHtmlAccess = "Disabled"プロパティを設定します。 HTMLページおよびスクリプトへのアクセスが許可されているかどうかは、HtmlPage.IsEnabledプロパティのおかげで、Silverlightアプリケーションから確認できます。
SilverlightからJavaScript関数を呼び出す
次に、JavaScriptとの統合について説明します。 SilverlightからJavaScript関数を呼び出すには、次のコードを記述するだけで十分です。
HtmlPage.Window.Invoke( "DisplayMessage" , " Silverlight!" );
* This source code was highlighted with Source Code Highlighter .
ここでは、DisplayMessage JavaScript関数を呼び出し、パラメーターとして文字列を渡します。 このコードをボタンクリックイベントハンドラーに追加します。
次に、ASP.NETページでこのJavaScript関数を作成しましょう。 ページのヘッドセクションは次のようになります。
< head runat ="server" >
< title > MySilverlightApplication </ title >
< script type ="text/javascript" >
function DisplayMessage(message) {
alert(message);
}
</ script >
</ head >
* This source code was highlighted with Source Code Highlighter .
その後、ボタンをクリックすると、JavaScript関数が実行されます。 指定されたテキストでメッセージを表示します。 メッセージのテキストはパラメーターで渡されます。 アプリケーションを起動し、その動作を確認します。
JavaScriptからSilverlight関数を呼び出す
今度は、SilverlightアプリケーションでJavaScriptから関数を呼び出すときです。 これを行うには、ファイルPage.xaml.csでPageタイプのScriptableType属性を設定します。
[ScriptableType]
public partial class Page : UserControl
* This source code was highlighted with Source Code Highlighter .
これにより、このオブジェクトの特別にマークされた関数にJavaScriptからアクセスできるようになります。 しかし、最初に、呼び出し可能なページとしてクラスPageのオブジェクトを登録する必要があります。 これを行うには、次のコードをPage（）コンストラクターに追加します。
HtmlPage.RegisterScriptableObject( "silverlightApplication" , this );
* This source code was highlighted with Source Code Highlighter .
ここで、JavaScriptから.NETオブジェクトにアクセスできる名前（ "silverlightApplication"）を設定します。
Pageクラス内で、JavaScriptから呼び出す関数を作成する必要があります。 この関数のコードは次のとおりです。 ScriptableMember属性があり、スクリプトから呼び出す可能性を示しています。
[ScriptableMember]
public void ChangeButtonContent( string text)
{
mainButton.Content = text;
}
* This source code was highlighted with Source Code Highlighter .
この関数は、Silverlightページのボタンのテキストを設定します。
以下は、Pageクラスの完全なコードです。
[ScriptableType]
public partial class Page : UserControl
{
public Page ()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject( "silverlightApplication" , this );
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.AttachEvent( "onclick" , new EventHandler((o, x) =>
{
div.SetStyleAttribute( "background" , "yellow" );
}));
}
private void Button_Click( object sender, RoutedEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement div = doc.GetElementById( "myDIV" );
div.SetStyleAttribute( "background" , "green" );
HtmlPage.Window.Invoke( "DisplayMessage" , " Silverlight!" );
}
[ScriptableMember]
public void ChangeButtonContent( string text)
{
mainButton.Content = text;
}
}
* This source code was highlighted with Source Code Highlighter .
そして、Page.xamlファイル：
< UserControl x:Class ="MySilverlightApplication.Page"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="400" Height ="300" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< Button Click ="Button_Click"
Content =" "
Width ="250" Height ="50" x:Name ="mainButton" />
</ Grid >
</ UserControl >
* This source code was highlighted with Source Code Highlighter .
次に、DisplayMessage JavaScript関数を変更して、ChangeButtonContent C＃関数を呼び出すようにします。
function DisplayMessage(message) {
alert(message);
silverLightControl = document.getElementById( "Xaml1" );
silverLightControl.content.silverlightApplication.ChangeButtonContent(
message);
}
* This source code was highlighted with Source Code Highlighter .
プラグインのSilverlightオブジェクトを取得し、ChangeButtonContent関数を呼び出して、C＃コードからDisplayMessage関数に渡したのと同じパラメーターを渡します。
MySilverlightApplicationTestPage.aspxページの完全なコードは次のとおりです。
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<! 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" style ="height:100%;" >
< head runat ="server" >
< title > MySilverlightApplication </ title >
< script type ="text/javascript" >
function DisplayMessage(message) {
alert(message);
silverLightControl = document .getElementById( "Xaml1" );
silverLightControl.content.silverlightApplication.ChangeButtonContent(
message);
}
</ script >
</ head >
< body style ="height:100%;margin:0;" >
< form id ="form1" runat ="server" style ="height:100%;" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" ></ asp:ScriptManager >
< div id ="myDIV" style ="background:blue;width:100%;height:100%" >
< asp:Silverlight ID ="Xaml1" runat ="server"
Source ="~/ClientBin/MySilverlightApplication.xap"
MinimumVersion ="2.0.31005.0" Width ="50%" Height ="100%"
InitParameters ="startPage=Page" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
アプリケーションを起動し、そのパフォーマンスを確認します。
Silverlightアプリケーションでボタンをクリックすると、HTMLページのdiv要素の背景色が変わり、JavaScriptはDisplayMessage関数を呼び出して、メッセージを表示します。 このJavaScript関数は、PageクラスのC＃ChangeButtonContent関数を呼び出します。 ChangeButtonContent関数は、ボタン上のテキストを変更します。
これで記事の最初の部分は終わりです。 以下のセクションでは、他の関連するSilverlightアプリケーション開発の問題について説明します。 私はあなたの願いとコメントに喜んでいるでしょう。