Lesktop开源WebIM更新——增加群聊等功能

经过一个多月的开发，Lesktop开源WebIM终于发布新的版本2.0.2.7，该版本主要做了以下更新：

1、增加群组功能；

2、增加用户和群组管理；

3、简化嵌入的方式；

4、增加显示用户头像的功能。

Lesktop演示和下载 [好文，推荐一下看不懂]

Lesktop 2.0.2.7 功能介绍：

聊天窗口（支持私聊和群聊）

10002[2]

10010[1]

文件传送：

10004[2]

10005[2]

修改个人资料：

10012[2]

好友和群组管理：

10007[2]

10008[1]

将Lesktop嵌入到自己的网站中

如果你需要在自己的网站中使用WebIM功能，可以将Lesktop嵌入到网站中，成为网站的一部分。新版本的Lesktop简化了嵌入的方式，具体方法如下：

1、下载源代码，将source\wwwroot中的Lesktop,App_Data,Bin三个文件夹拷贝到将嵌入WEBIM的网站根目录下(注意：拷贝即可，不需要建虚拟目录)；

2、在要嵌入WebIM的页面中加入以下代码：

<script language="javascript" type="text/javascript">
    document.writeln('<script type="text/javascript" src="/Lesktop/embed.js.aspx?'+(new Date()).getTime()+'"><'+'/script>');
    window.onload = function()
    {
        StartService();
    }
</script>

Lesktop源代码剖析——窗口

以上已经简要的介绍了Lesktop的新功能和如何将Lesktop嵌入到网站中，接下来，将介绍Lesktop内部的原理。由于涉及的技术比较多，因此，先从Lesktop的UI部分开始介绍。

如同Lesktop首页(www.luchuncheng.com)所示，Lesktop创建的窗口，既可以以客户端窗口的模式运行在Windows桌面上，也可以以浮层的模式飘浮在页面中。本文将示例如何创建这种窗口，下一篇文章再介绍Lesktop是如何实现的。

在Lesktop中，统一使用Core.CreateWindow来创建窗口，使用该函数创建出的窗口，可以同时运行在网页中和Windows桌面中。Core.CreateWindow只有一个参数，该参数指明了要创建的窗口的特征。完整的参数如下所示：

var config = {
    Left: 窗口左上角X坐标,
    Top: 窗口左上角Y坐标,
    Width: 窗口宽度,
    Height: 窗口高度,
    MinWidth: 窗口最小宽度,
    MinHeight: 窗口最小高度,
    Title: {
        InnerHTML: 标题
    },
    HasMaxButton: 是否有最大化按钮,
    HasMinButton: 是否有最小化化按钮,
    OnClose: function(form)
    {
        //窗口关闭时调用这个函数，如果要关闭窗口调用form.Close()，如果要组织窗口关闭，则不需要调用
    }
};

定义好窗口的配置后，就可以调用Core.CreateWindow(config)创建窗口了，创建窗口后，Core.CreateWindow将会返回一个窗口控制接口，你可以通过这个接口修改和获取窗口属性，处理窗口事件。窗口控制接口支持以下方法：

Show(isTop)	显示窗口，isTop指明是否置顶
Hide()	隐藏窗口，注意，Hide只是隐藏，窗口仍然存在
Close()	关闭并销毁窗口
ShowDialog(parent, pos, left, top, relativeParent, callback)	显示为模态窗口： parent - 父窗口，该窗口将会暂时无效，直至模态窗口关闭 pos - 窗口显示位置，CENTER表示居中 left - 窗口左上角X坐标 top - 窗口左上角Y坐标 relativeParent - 如果为true，left,top是相对于父窗口的 callback - 关闭模态窗口时的回调函数
GetClientWidth()	获取窗口客户区的宽度（除去边框和标题栏）
GetClientHeight()	获取窗口客户区的高度（除去边框和标题栏）
Move(left, top)	移动窗口
MoveEx(position, x, y, relativeParent)	移动窗口: position - 窗口显示位置，CENTER表示居中 x - 窗口左上角X坐标 y - 窗口左上角Y坐标 relativeParent - 如果为true, x, y是相对于父窗口的
Resize(width, height)	调整窗口大小: width - 窗口的新宽度 height - 窗口的新高度
SetTitle(title)	设置窗口标题
GetTitle()	获取窗口标题
IsTop()	窗口是否最顶
IsVisible()	窗口是否可视
Load(url, callback)	在窗口中加载网页，注意，这个网页不是任意的网页，具体规范将在下文介绍
GetHtmlWindow()	获取加载的网页的window

注意：调用这些方法时，不需要考虑当前窗口时运作在网页中，还是在客户端桌面，为兼容客户端窗口，调用以上方法时方法的参数缺一不可。

例如：以下代码用于创建一个窗口并显示：

var config = {
    Left: 0, Top: 0,
    Width: 700, Height: 550,
    MinWidth: 700, MinHeight: 550,
    Title: {
        InnerHTML: "消息管理"
    },
    Resizable: true,
    HasMaxButton: ClientMode,
    HasMinButton: true,
    AnchorStyle: Core.WindowAnchorStyle.Left | Core.WindowAnchorStyle.Bottom
}
var form = Core.CreateWindow(config);
form.MoveEx('MIDDLE|BOTTOM', 0, -30, true);
form.Show();

但是，创建窗口后，窗口的内容是空的，窗口中没有控件，您可以使用Load方法加载一个页面，作为窗口的内容，当然，这个页面不是任意的，必须遵循一定的规范（引用必要的脚本），以下是一个标准的页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Lesktop_Demo" %>

<%@ Register src="Script/SubScript.ascx" tagname="SubScript" tagprefix="uc1" %>

<!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></title>
    
    <uc1:SubScript ID="SubScript1" runat="server" />
    
    <script language="javascript" type="text/javascript">    
    function init()
    {
        //窗口初始化函数，加载页面后，该方法将被调用
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

加载页面后，您可以在页面中使用CurrentWindow的方法（Show,Hide,GetClientWidth等）控制窗口。例如：CurrentWindow.Move(0,0)可以将窗口移动到桌面的左上角。

Lesktop演示和下载 [好文，推荐一下看不懂]

posted @ 2010-11-15 20:02 卢春城阅读(7794) 评论(38) 编辑收藏举报

刷新页面返回顶部

Lesktop开源WebIM更新——增加群聊等功能

公告