【孟宪会之精彩世界】之.NET开发者园地

Silverlight 2学习教程（七）：在Silverlight 2.0中制作资源加载进度条

Tue, 06 May 2008 09:01:06 GMT

Silverlight 2.0去掉了原来的downloader对象，代之以WebClient对象。WebClient类为Silverlight插件提供了一整套的HTTP客户端功能。可以下载应用程序数据，比如XAML内容，附加的程序集或者诸如图片的媒体文件。WebClient类可以根据程序的需要下载内容，可以异步呈现或者利用下载的内容，而不是随HTML页面一起下载。如果你要按照一定的序列替换Silverlight内容，不需要刷新页面。比较常见的来自是从视频库中播放视频，但本节是以播放图片为例子的。
关于WebClient
WebClient请求是异步的，大部分的交互操作都是依靠事件处理器来完成的。通常，需要定义如下中的一个或者多个处理器函数。

    ■ DownloadStringCompleted 
    ■ OpenReadCompleted 
    ■ DownloadProgressChanged 
    
    根据你请求的资源是字符串还是流，需要使用不同的API，当请求一个字符串时，可以调用下面的方法：
    
        ■ DownloadStringAsync(Uri) 
        ■ DownloadStringAsync(Uri, Object) 
        
        然后再处理DownloadStringCompleted事件。
        当请求的是一个流时，可以调用下面的方法：
        
            ■ OpenReadAsync(Uri) 
            ■ OpenReadAsync(Uri, Object) 
            
            然后处理OpenReadCompleted事件。
            OpenReadCompleted事件处理器基本的签名如下：
            
            void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) {
...
}
            
            这个处理器中最相关的API是OpenReadCompletedEventArgs参数的Result属性，这个属性是Stream类型的，可以直接使用这个属性，或者调用需要Stream对象的方法，也可以使用StreamReader对象或者其他访问流的API。
            下面就是一个下载图片的例子，本例子通过输入文件路径，然后以进度条显示下载的状态，下载完毕后进行显示。
需要注意的是：给OpenReadAsync和DownloadStringAsync API制定的URI通常采用相对路径，WebClient不支持FILE协议下载，在进行测试的时候需要注意，必须建立站点进行测试。可以使用HTTPS协议，但包含这个插件的HTML也必须同时是HTTPS协议才可以。在URI中不能使用反斜杠（\），必须使用正斜杠（/）。
            例子代码如下：
            Page.xaml：
            
            <UserControl x:Class="SilverlightApplication3.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="1024" Height="800">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Canvas.Top="0">
            <Rectangle  Name="progressRectangle"  Canvas.Left="20" Canvas.Top="10" Height="10" Width="0"  Fill="Navy" />
            <Rectangle  Canvas.Top="9" Canvas.Left="19" Height="12" Width="202" StrokeThickness="1" Stroke="Black" />
            <TextBlock  x:Name="progressText" Canvas.Top="6" Canvas.Left="230" Text="0%" FontSize="12" />
            <TextBox x:Name="filepath" Canvas.Left="20" Width="100" Canvas.Top="26" Text="p1.jpg"></TextBox>
            <Button Canvas.Top="26" Canvas.Left="130" Content="下载文件" Click="Button_Click"></Button>
            <Image Canvas.Left="60" x:Name="img" Canvas.Top="60" Width="1024"></Image>
        </Canvas>
    </Grid>
</UserControl>
            
            Page.xaml.cs：
            
            using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Net;
using System.IO;
using System.Windows.Resources;

namespace SilverlightApplication3
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
          img.Source = null;
            WebClient wc = new WebClient();
            if (wc.IsBusy)
            {
                wc.CancelAsync();
            }
            wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
            wc.DownloadProgressChanged += new DownloadProgressChangedEventHandler(wc_DownloadProgressChanged);
            wc.OpenReadAsync(new Uri(filepath.Text, UriKind.Relative));

        }

        void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            BitmapImage imgsrc = new BitmapImage();
            imgsrc.SetSource(e.Result as Stream);
            img.Source = imgsrc;
        }

        void wc_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
        {
            progressText.Text = e.ProgressPercentage.ToString() + "%";
            progressRectangle.Width = (double)e.ProgressPercentage * 2;
        }
    }
}
            
            运行过程中的界面和最终运行结果如下：

Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象

Tue, 06 May 2008 08:59:47 GMT

在上一篇文章中，讲述了JavaScript与Silverlight托管代码相互调用的一些方法。实际上，HtmlWindow的GetProperty方法和Invoke/InvokeSelf方法的返回值是Object类型的，代表 DOM对象或者JavaScript对象（HtmlDocument、HtmlElement、HtmlObject、ScriptObject）的返回值自动作为最接近的类型进行返回，但是，程序开发人员仍然需要明确地将该对象转换成相应的类型。所有的数字，由于跨浏览器的原因，都作为Double类型返回，如果需要Int32类型，则执行Convert.ToInt32()方法即可。
在现代的Web应用中，JSON的使用越来越频繁。Silverlight 2中要调用JavaScript中的JSON对象，首先在托管代码中声明一个类，类的属性与JSON对象的属性一致（不必完全一致），然后在托管代码中将ScriptObject对象转换成声明的这个类型即可。
下面是一个完整的例子：
Page.xaml：

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="600" Height="480">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Canvas.Top="20">
            <TextBlock Canvas.Top="10" Canvas.Left="20">请输入您的姓名： </TextBlock>
            <TextBox x:Name="UserInput" Width="200" Height="30" Canvas.Top="40" Canvas.Left="20"></TextBox>
            <TextBlock x:Name="Msg" Canvas.Top="90" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
            <Button Click="Button_Click" Content="单击我" FontSize="24" Width="160" Height="60" x:Name="BtnTest" Canvas.Top="160" Canvas.Left="20"></Button>
            <Button Click="JSONButton_Click" Content="JavaScript JSON 对象测试" FontSize="24" Width="300" Height="50" Canvas.Top="240" Canvas.Left="20"></Button>
            <TextBlock x:Name="Msg2" Canvas.Top="300" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
            <TextBlock x:Name="Msg3" Canvas.Top="320" Canvas.Left="20" Foreground="Navy" FontSize="18" Width="500"></TextBlock>
        </Canvas>
    </Grid>
</UserControl>


Page.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Runtime.Serialization.Json;

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string UserInputContent = this.UserInput.Text;
            if (UserInputContent.Equals(String.Empty))
            {
                UserInputContent = "Hello Silverlight World!";
            }
            else
            {
                UserInputContent = "你好，" + UserInputContent;
            }
            HtmlWindow win = HtmlPage.Window;
            this.Msg.Text = UserInputContent;
            win.Alert("Silverlight 里面弹出的对话框。 " + UserInputContent);
            //执行页面中的js函数：
            win.Eval("getArrayTest()");
            Object[] args = { "将此参数传递给 js 函数" };
            win.Invoke("getArrayTest", args);
         
            //如果页面中的值
            HtmlDocument doc = HtmlPage.Document;
            doc.GetElementById("UserName").SetAttribute("value", this.UserInput.Text);          
        }
        
        [ScriptableMember()]
        public string InterInvole()
        {
            string username = HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
            this.UserInput.Text = username;
            this.Msg.Text = "您输入了：" + username; 
            return "你从js脚本中调用了 Silverlight 里面的方法。";
        }

        private void JSONButton_Click(object sender, RoutedEventArgs e)
        {
            ScriptObject so = HtmlPage.Window.Invoke("ReturnObject", null) as ScriptObject;
            Staple s = so.ConvertTo<Staple>();
            this.Msg2.Text = "大家好，我在  JavaScript JSON 对象中的名称是：" +  s.UserName;            
        }

        //接受Html页面传递的 JSON 字符串
        [ScriptableMember()]
        public void ReveiveJSON(string jsonString)
        {
            //注意引用：System.Runtime.Serialization.Json

            DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(Staple));
            System.IO.MemoryStream ms = new System.IO.MemoryStream(System.Text.Encoding.Unicode.GetBytes(jsonString));
            Staple staple = new Staple();
            staple = (Staple)json.ReadObject(ms);
            Msg3.Text = "UserId = " + staple.UserId.ToString() + " ， UserName = " + staple.UserName;
        }
    }

    public class Staple
    {
        public string UserName { set; get; }
        public Double UserId { set; get; }       
    }
}


App.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace SilverlightApplication1
{
    public partial class App : Application
    {

        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            // Load the main control           
            Page p = new Page();
            HtmlPage.RegisterScriptableObject("SilverlightApplicationExample", p);

            // 请注意这里的定义方法，如果这里的p写成 new Page()，则Javascript基本不能给 UserInput 赋值！
            this.RootVisual = p;
        }

        private void Application_Exit(object sender, EventArgs e)
        {

        }
        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {

        }
    }
}



SilverlightApplication1TestPage.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">
<head runat="server">
 <title>Silverlight 2托管代码与Javascript交互的例子</title>
 <script type="text/javascript">
 //<!{CDATA[
 //定义全局变量：
 var testVar = "孟宪会";
 
 //定义全局函数：
 function getArrayTest()
 {
  if(arguments.length > 0)
  {
   alert("js 对话框：您传递了参数。" + arguments[0]);
   return  arguments[0];
  }
  else
  {
   alert("js 对话框：无参数调用。");
   return "js 函数返回值";
  }
 } 
 
function SetUserName()
{
  alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}


 var Staple = {
               UserId:100,
               UserName:'孟宪会',
               SayHello:function(){alert(this.UserName)}
               };
               
function ReturnObject()
{
  return Staple;
}

function SendJSONToSilverlight()
{
  SilverlightPlugin.Content.SilverlightApplicationExample.ReveiveJSON(JSON.stringify(Staple));
}

//定义Silverlight插件对象
var SilverlightPlugin = null;;
function pluginLoaded(sender)
{
   SilverlightPlugin = sender.get_element();  
}
 //]]>
 </script>
 <script src="json2.js" type="text/javascript"></script>
 <!-- http://www.JSON.org/json2.js -->
</head>
<body style="height: 100%; margin: 0;">
 <form id="form1" runat="server">
 <div style="border: 2px solid #EEE; margin: 20px;padding:20px">
  请输入你的名字：<input id="UserName" type="text" value="" />
  <input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" /> <input type="button" onclick="SendJSONToSilverlight()" value="将JSON传递到 Silverlight" /> 
 </div>
 <br />
 <div style="border: 2px solid #EEE;margin: 20px;">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <asp:Silverlight ID="Xaml1" runat="server" OnPluginLoaded="pluginLoaded" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="600px" Height="480px" />
 </div>
 </form>
</body>
</html>


单击“JavaScript JSON 对象测试”按钮，运行结果如下：