Silverlight ??

Laurence Moroney
Microsoft Corporation

?????2007 ? 4 ? 30 ?

????
   Microsoft Silverlight (????? "WPF/E")
   Microsoft Expression Blend

???????????? Silverlight ?????????????? Web ???????????(??? 8 ?)

??

??? Silverlight?
Web ?????????? Web.Next
????? Silverlight ????
????????? UI
?? Silverlight ??
??

??? Silverlight?

Silverlight ????? Web ???????????????????????????????????????????????????????????????????????????? (?? Apple Macintosh) ??????XAML (????????????eXtensible Application Markup Language) ??? Microsoft .NET Framework 3.0 (Windows ????????) ?? WPF (Windows Presentation Foundation) ?????????? Silverlight ????????

???????????? Silverlight ??????????????? Microsoft ?? (?? Microsoft Expression Blend?Microsoft Visual Studio 2005 ? XAML) ????????????????? Silverlight ??????????? "WPF/E" ??????????

Web ?????????? Web.Next

Tim Berners-Lee ??? CERN ????? Web ?????????????????????????????????????????????????????????????????????????????????????CGI ?????????????????????? Web ?????????????????? CGI?Java?ASP ??? ASP.NET?

ASP.NET ???????????????? Visual Studio ??????????????????????????? Web ????????

Web ???????????????????????? Web ???????????????????????????????????????

Microsoft ? 2000 ?? Internet Explorer 5 ???? XMLHttpRequest ???????? JavaScript ? XML (Asynchronous JavaScript And XML?AJAX) ???????? Web ?????????????????????????????????????????????????? AJAX ????????????? Windows Live Local ???? Web ????????????????????????

Silverlight ????????????????????????????????????????????? "WPF/E" ???????????????????????????????? Web ???????????????????????????????????????????????????????????? Web ??????? Silverlight ????????????????????????? XAML ??????????????? Silverlight Runtime????? XAML ???????????????????????????????????

XAML ?? XML?????????????????????????????????????? Java Applets?ActiveX ? Flash ???????????? DHTML/CSS/JavaScript ????????????????????????????????????????????????????????????????????????????????????????????????????? Silverlight ????????????????????????? XAML ???????????????????? XAML ????????????????

Silverlight ????????????????? XAML ????????????????????????? (2 MB ??)??????????? Silverlight ??????????????? JavaScript ?????? XAML ?????????????????????????????????????????? JavaScript ?????? XAML ?????

??????????????????????????? Silverlight ???

????? Silverlight ????

?????? Microsoft Expression Blend ??? XAML ??????? Silverlight ???????? Blend ??? Silverlight ???????? [File] (??) ->[New Project] (????)?[New Project] (????) ???????????? [? 1]?

[? 1] ? Expression Blend ???? Silverlight ??

?? [OK] (??)???????????????? HTML ????????? JavaScript ??????XAML ???? XAML ??? Silverlight.js ? JavaScript ??????

Silverlight.js ??????? Silverlight ?????????? Silverlight SDK ?????

Default.html ??? HTML ???????? JavaScript ?????????? Silverlight.js?Default.html.js (???? Silverlight ??????????) ? Scene.xaml.js (?? XAML ??????????????????)?

??????? (default.html) ???????? (default.html.js)??? (Scene.xaml) ?????? (Scene.xaml.js) ????????????????????????????????

????????? UI

????????????????????????? [Project Files] (???) ???????????????????? [Add Existing Item...] (??????...).

???? WMV ???????????????????????Media ??????????

[? 2] ? Media ???? XAML ???

????????????????????????

???? XAML??????????????XAML ??????????????[Design] (??) ? [XAML]??? [XAML] ?????XAML ????????? [? 3] ??????????? XAML ?????? MediaElement ???? AutoPlay=False?

[? 3] ? XAML ?????? XAML

????????????????? Silverlight ????????????????????

?????????????

??????????????????? Play ? Stop ???? txtPlay ? txtStop ???????XAML ?????

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="640" Height="480"
   Background="White"
   >
   
<MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" 
Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
   
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>

   <TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
</Canvas>

??????????????????? XAML????????????? MouseLeftButtonDown ???????????????? txtPlay ??????????????? DoPlay???? txtStop ??????????????? DoStop?????XAML ?????

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>

<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="javascript:DoStop"/>

?????????????????????????? JavaScript ???????????

? JavaScript ?????

????? Scene.xaml.js ??? JavaScript ????????????? XAML ??? DoPlay ? DoStop ????????????????????????????????????????

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Play();
}

function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Stop();
}

?????Silverlight ??????? SilverlightControl????? theHost ? JavaScript ?????????????? Media ???????????? Movie_wmv????????????????????????????????????????????? Movie.wmv??????? Movie_wmv???????????????????????

????? Play ? Stop ??????????????????

???????????????????????????????? [? 4] ????

[? 4] ??????

????????? Silverlight ??????? Silverlight ???????????? Silverlight Developer Center ? http://www.silverlight.net/?

?? Silverlight ??

HTML ????? createSilverlight()??????????????? Default.html.js ??

Sys.Silverlight.createObjectEx({
      source: "Scene.xaml",
      parentElement: document.getElementById("SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
         width: "100%",
         height: "100%",
         version: "0.9"
      },
      events: {
         onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
      }
   }); 

????????????????? Xaml ?????? Silverlight ????????????? onLoad ? onError ??????????

source:property ???????? Silverlight ?????? XAML????????? (???) ? XAML ???????? <script> ???

???????? Silverlight ???????????? <DIV> ?????? <DIV> ???? parentElement: ???

????????? id: property ????

??????????? height?width ? version?????? properties: ????????????????????? Silverlight SDK ???

??

???????? Microsoft Silverlight ??????????????? Web ??????????????????? XAML ?????????????????????????? Expression Blend???????????? UI??????? JavaScript ???????

??????? Silverlight ????????????????????????????? Web ????????????????????