开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

在两个Silverlight应用间数据通信(包括与Flash通信)

简介:
+关注继续查看
 因为Silverlight可以访问HTML中的DOM元素以及调用HTML页面中的JS方法,并且可以将自身的方法“暴露”给HTML页面中的JS方法(通过ScriptableMember]),所以我们可以利用这一特点来实现两个Silverlight应用程序之间的数据通信。为了直观起见,本人做了这个DEMO,希望能够对大家在理解上有所帮助。
     本DEMO的工作流程如下:     
     
     Silverlight 1 调用HTML中的JS方法,而该方法会去调用Silverlight 2中“暴露”的方法来显示选中的数据。  
     请大家先看一下这个DEMO的运行效果,如下图所示:
     
     
  
     在上图中分别有两个Silverlight应用,一个是雇员列表,一个是详细信息。其中的雇员列表是我以前在园子里发表过的一遍文章中提到的DEMO,这里只是为了便于演示而简单的加以改造,其雇员类信息如下:
 
[ScriptableType]
public class EmployeeInfo
{
    
/// <summary>
    
/// 雇员编号
    
/// </summary>
    [ScriptableMember]
    
public int EmployeeNo { getset; }
    
/// <summary>
    
/// 雇员名称
    
/// </summary>
    [ScriptableMember]
    
public string EmployeeName { getset; }
    
/// <summary>
    
/// 地址
    
/// </summary>
    [ScriptableMember]
    
public string Address { getset; }
}
    
    上面的ScriptableType,ScriptableMember属性绑写是为了让html中的脚本代码可以访问(即可见)。
    
    而下面的代码则是为了定义一个“脚本对象类”及其事件处理(包括参数)。    
/// <summary>
/// 雇员事件参数(用于完成与js绑定事件参数)
/// </summary>
[ScriptableType]
public class EmployeeInfoEventArgs : EventArgs
{
    [ScriptableMember]
    
public EmployeeInfo employeeInfo { getset; }
}

/// <summary>
/// 要注册并在页面中使用的js调用脚本对象
/// </summary>
[ScriptableType]
public class JavaScriptableObject
{
    
/// <summary>
    
/// js捆绑的事件处理器
    
/// </summary>
    [ScriptableMember]
    
public event EventHandler<EmployeeInfoEventArgs> SelectEmployeeInfo;

    
public void OnSelectEmployeeInfo(EmployeeInfo employeeinfo)
    {
        
if (SelectEmployeeInfo != null)
        {
            SelectEmployeeInfo(
thisnew EmployeeInfoEventArgs()
            {
                employeeInfo 
= employeeinfo
            });
        }
    }
}

    接着就是一个雇员数据操作类,主要用于获取雇员信息,如下:
 
/// <summary>
/// 雇员信息管理类
/// </summary>
public class EmployeeManager
{
    
public IEnumerable<EmployeeInfo> employeeList;
    
/// <summary>
    
/// 初始化会员数据
    
/// </summary>
    public EmployeeManager()
    {
        
//初始化雇员数据
        employeeList = new List<EmployeeInfo>()
        {
            
new EmployeeInfo(){EmployeeNo = 10001, EmployeeName = "张三" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10002, EmployeeName = "李四" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10003, EmployeeName = "王五" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10004, EmployeeName = "马六" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10005, EmployeeName = "王大麻子" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10006, EmployeeName = "王宝强" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10007, EmployeeName = "王蛋蛋" , Address = "北京"},
            
new EmployeeInfo(){EmployeeNo = 10008, EmployeeName = "王五强" , Address = "北京"}
        };
    }

    
/// <summary>
    
/// 获取指定数量的雇员数据
    
/// </summary>
    
/// <param name="count">要获取的雇员信息数</param>
    
/// <returns></returns>    
    public IEnumerable<EmployeeInfo> GetEmployeeList(int count)
    {
        
return (from e in employeeList
                select 
new EmployeeInfo
                {
                    EmployeeNo 
= e.EmployeeNo,
                    EmployeeName 
= e.EmployeeName,
                    Address 
= e.Address

                }).Take(count);
    }

}


    有了数据和数据结构,我们可以在应用程序中给列表控件绑定数据源了,如下:
    
//这里必须声明是public,否则js调用该方法时会报错
[ScriptableMember]
public void LoadData(int count)
{
    
//加载指定数据的雇员信息
    EmployeeList.ItemsSource = new EmployeeManager().GetEmployeeList(count);
}

    
    当然DEMO中所提供的功能里有“选取某一行雇员信息”的操作,其实现方法如下:
 
/// <summary>
/// 单击编辑雇员列表信息事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void EmployeeList_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)
{
    
//当有要编辑的信息时
    if (EmployeeList.SelectedItem != null)
    {
        EmployeeInfo employeeInfo 
= EmployeeList.SelectedItem as EmployeeInfo;
        
//执行选中信息事件操作(最终会执行js所绑定的function代码)
        javaScriptableObject.OnSelectEmployeeInfo(employeeInfo);
    }
}
 
     大家请注意上面的这一行代码:     

javaScriptableObject.OnSelectEmployeeInfo(employeeInfo);
     
     其完成的就是对HTML页面上JS绑定事件的调用,其JS绑写事件代码如下:
     

//初始化操作
function Init(obj) {
    
//绑定js函数到silverlight的事件处理器
    $get("Xaml1").content.EmployeeObject.SelectEmployeeInfo = ShowSelectEmployeeInfo;
    
}
        
     当然,上面还有一个内容没有说明,即EmployeeObject对象是从哪来的,其实它就是我们公布到HTML中让 JS可以访问的对象JavaScriptableObject的实例,如下:      
JavaScriptableObject javaScriptableObject;
void Page_Loaded(object sender, RoutedEventArgs e)
{
    javaScriptableObject 
= new JavaScriptableObject();
    
//注册js可用的类型(详情见Silverlight_JS_callTestPage.aspx中的js代码)
    HtmlPage.RegisterScriptableObject("EmployeeObject", javaScriptableObject);
    ..
}

                
     而JS方法"ShowSelectEmployeeInfo"即是实现对Silverlight 2应用中“暴露”方法的调用。其内容如下:     
//显示选取的雇员信息
function ShowSelectEmployeeInfo(sender, args) {
    $get(
"Xaml2").content.Page.LoadDetailData(parseInt(args.employeeInfo.EmployeeNo),
                                              args.employeeInfo.EmployeeName,
                                              args.employeeInfo.Address);
}

    而Silverlight 2应用中的LoadDetailData方法所实现的就是将选中的单个雇员信息进行显示,如下:     
//这里必须声明是public,否则js调用该方法时会报错
[ScriptableMember]
public void LoadDetailData(int employeeNo, string employeeName, string address)
{
    
//加载指定数据的雇员信息
    EmployeeNo.Text = employeeNo.ToString();
    EmployeeName.Text 
= employeeName;
    Address.Text 
= address;
}
    
    到这里,基本上DEMO中的主要内容就介绍完了。
    
    下面再给大家演示一个Silverlight与FLASH进行数据通信 的例子,其实现的功能如下:    
 
    在Silverlight应用中拖动一张图片,在右侧的FLASH区域中相应的FLASH对象跟着被“移动”,其效果如下
图所示:
 
 
 
   
     其实这个DEMO最初的原型出自微软件的黄继佳,我是在一次SILVERLIGHT培训中看到他这个演示,当时我想实现原理应该与本文所提到的大同小异,后来被证实现确实如此。当然他的演示中实现的JS代码很简单,完全就是用纯JS来实现即可。我这里并未完全使用了他的模型代码。因为上面所说的是在CS代码中进行事件的
绑定及其相关操作,所以我还是照上面所提供的思路重新写了这个DEMO,实现的效果与黄纪佳的原型基本相似。因为篇幅起见,这里就不多做赘述了,大家下载代码后一看便知(SLImage.xaml.cs和SLtoFlash.htm文件)。


本文转自 daizhenjun 51CTO博客,原文链接:http://blog.51cto.com/daizhj/124340,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[连载]《C#通讯(串口和网络)框架的设计与实现》- 6.通讯控制器的设计
目       录 第六章           通讯控制器的设计... 2 6.1           控制器接口... 2 6.2           串口控制器... 3 6.3           网络控制器... 5 6.4           通讯控制管理器... 9 6.5           远程交互... 9 6.6           小结... 10   第六章     通讯控制器的设计      经过前几章的介绍,这章介绍通讯控制器。
477 0
[连载]《C#通讯(串口和网络)框架的设计与实现》-1.通讯框架介绍
[连载]《C#通讯(串口和网络)框架的设计与实现》- 0.前言   目       录 第一章           通讯框架介绍... 2 1.1           通讯的本质... 2 1.
608 0
用SignalR 2.0开发客服系统[系列3:实现点对点通讯]
原文:用SignalR 2.0开发客服系统[系列3:实现点对点通讯] 前言 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了.
827 0
Silverlight下的Socket通讯
http://www.cnblogs.com/chengxingliang/archive/2012/05/24/2515100.html  在Silverlight中进行通讯,只能使用4502-4534之间的端口进行数据传输,另外Silverlight客户端会自动向943端口的服务器端发送一个“”的语句请求,然后服务器端943端口回发以下文件以许可Socket通讯。
712 0
silverlight:wcf双工通讯学习笔记
一直觉得SL中的wcf双工通讯方式有点鸡肋,如果是以http方式实现则效率太低,如果用SL4中的tcp方式实现,又跟socket太雷同,所以一直没去研究,不过这东西在对性能要求不高时(比如在网页上每5分钟更新一次天气预报/股票信息),实现起来还是蛮方便的.wcf双工通讯与传统的wcf相比,最大的区别就是:传统的wcf通常都是客户端去调服务,即客户端从服务端上“拉”信息,而双工通讯除了允许客户端从服务端"拉"信息外,服务端还能主动向客户端“推”送信息。
865 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载