最新版本将在这里更新：
http://code.google.com/p/project41984/w/edit/SelfDefChatUI (如果无法打開就看本帖)
*** 欢迎把设计好自己想要的界面的同学，建新标题为“我的自定义聊天代码”的文章，然后把代码贴到里面去，跟大家分享。 ***由于每人都有自己创意和风格。选美工也不容易，還是把美工的设定交给每个人自己设置吧。希望美工能搞好的人能积极参与自定义设计，然后能把自己的作品供出以给大家挑选出做公共页面的。
如果感觉后面的内容太复杂了，可以看看这两个例子，稍懂javascript和html的兄弟，应该不用看说明就知道如何修改了：
例子一：（如果无法打開，请参照９楼）
http://code.google.com/p/project41984/wiki/Ex1 例子二：（如果无法打開，请参照８楼）
http://code.google.com/p/project41984/wiki/Ex2自定义页面如下是几个可以用用户登录后自定义的页面，每人登录后只看见自己的那个页的。
要编辑这几个页面可访问如下几个对应的地址
编辑好点submit就行了。
强烈建议把css放置在
https://1984bbs.com/edit_file.php?page=chat_css ， javascript代码放置在
https://1984bbs.com/edit_file.php?page=chat_js ，然后在
https://1984bbs.com/edit_file.php?page=chat_html通过代码引入。
初级编辑为避免直接重新设计整个聊天浏览器客户端而带来麻烦，現在提供一个比较初级的系统，所有人只要引用这个系统，对界面风格做修改即可。
如下是整个代码示例。后面介绍如何修改。
引用:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" language="javascript">
function runClearChatBox()
{
document.getElementById('chat_msg').value = "";
}
function sendChatCommentButtonObjct(o)
{
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
function getChatItemWriteStart()
{
return "<b>";
}
function getChatItemWriteEnd()
{
return "</b>";
}
function getChatListLimit(i)
{
return i+1;
}
</script>
<script type="text/javascript" language="javascript" src="../OnlineChat/port.for1984.OnlineChat.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<form>
<textarea id='chat_msg'>
</textarea>
</form>
<span id='chatAutoRefreshBox'></span>
<span id='chatSubmitBox'></span>
<hr />
<span id='chatListBox'></span>
</body>
</html>
以上示例，在html中插入js代码
../OnlineChat/port.for1984.OnlineChat.nocache.js即引入了基础系统。
引用:
<script type="text/javascript" language="javascript" src="../OnlineChat/port.for1984.OnlineChat.nocache.js"></script>
加入
引用:
<script type="text/javascript" language="javascript">
function runClearChatBox()
{
document.getElementById('chat_msg').value = "";
}
function sendChatCommentButtonObjct(o)
{
}
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
function getChatItemWriteStart()
{
return "<b>";
}
function getChatItemWriteEnd()
{
return "</b>";
}
function getChatListLimit(i)
{
return i+1;
}
</script>
就是引入，javascript部分的接口。除了防止布局和css风格外，主要的界面内容就是通过修改这一块代码来修改的。其含义如下:
初级界面修改如下函数是打印每一条消息时会被调用，要求返回改消息组织的html代码。
引用:
function getChatItemWriteString(Id,Sender,Msg,Time,Reply)
{
h=":"+Sender+":"+Time+":"+Msg+"<br />";
return h;
}
开始输出消息时会被用到，此函数要求返回消息块的头部内容。如下两条示例是把消息内容加粗。
引用:
function getChatItemWriteStart()
{
return "<b>";
}
结束输出消息时会被用到，此函数要求返回消息块的尾部内容。
引用:
function getChatItemWriteEnd()
{
return "</b>";
}
打印消息内容的循环限制函数，如果是return i+1，则有多少显示多少，如果是return 10，则只显示最新10条消息。
引用:
function getChatListLimit(i)
如下函数负责清除文本框内容，每次消息发送成功后则会被调用：
引用:
function runClearChatBox()
初始化界面的时候会把发送Button的对象传递到这个函数，如果需要把文本框电击的動作和button关联起来，只要通过它获取按钮对象则可：
引用:
function sendChatCommentButtonObjct(send_button)
整体html文档的布局上，通过id为chat_msg , chatAutoRefreshBox , chatSubmitBox , chatListBox进行设置。
如下代码表示文本消息输入框用textarea表示，实际上可以用input代替，只要是id为chat_msg即可。
引用:
<textarea id='chat_msg'>
</textarea>
代码是标记放置自动刷新ClickBox的位置。与后面2个一样，不一定要使用span，如div等的其他元素标签亦可。
引用:
<span id='chatAutoRefreshBox'></span>
代码是标记放置发送按钮的位置。
引用:
<span id='chatSubmitBox'></span>
代码是标记放置消息列表的位置。
引用:
<span id='chatListBox'></span>
－－－－－－－－－－－－－－－－－－－－－－－－
Update: 20091013
新增接口:1、回调函数setMyChatNickName，系统初始化时会把获得的用户名username传递给函数。通过它可以获取用户名。
引用:
function setMyChatNickName(username)
获取用户名后，可作存储起来，在显示聊天列表时可判断消息是否为自己所发出的。例如：
引用:
var mynickname;
function setMyChatNickName(o)
{
mynickname=o;
}
2、利用getMakeWriteRedefine()设置自定义输出
增加代码：
引用:
function getMakeWriteRedefine()
{
return true;
}
可以把聊天对话输出设置为自定义模式，这样如果不想按照原来的顺序输出，而希望最新的放置在最下面的话，在增加上述代码后，把 getChatItemWriteString修改成如下（增加Str参数）：
引用:
function getChatItemWriteString(Id,Sender,Msg,Time,Reply,Str)
{
var h;
if (Sender==mynickname)
{
h="me:"+Time+":"+Msg+"<br />";
}
else
{
h=":["+Sender+"]:"+Time+":"+Msg+"<br />";
}
return h+Str;
}
最后不是return h，而是return h+Str，让显示的顺序反过来。
