存档

2011年8月 的存档

Hybrid开发手记之聊天窗口的WebKit支持

八月 5th, {2011 16 条评论 10,067 人阅读过  

近两天给Hybrid(https://github.com/levin108/hybrid)的聊天窗口加上了WebKit支持,之前没有实际用过WebKit,而且Web前台开发功力也不强,草草做了一个界面,但相比用GtkTextView来实现看上去还是要舒服好多,先上个图吧:

本篇没有什么高深的东西,作为一个简单的开发文档。

一,主题组件化的方法

聊天窗口的显示区域已经组件化,并没有进行深层次的模块化,代码还是在一起编译的,只是逻辑上组件化了。

之前是固定的由GtkTextView实现,在加入GtkWebKit的时候同时也保留了GtkTextView的实现,这两者是可选的,不管是GtkWebKit还是GtkTextView都需要实现四个最基本的函数:

typedef GtkWidget* (*text_create)(void);
typedef void (*text_append)(GtkWidget *, HybridAccount *,
							HybridBuddy *,	const gchar *, time_t);
typedef void (*text_notify)(GtkWidget *, const gchar *, gint);
typedef void (*theme_set_ops_func)(void);

前三个函数是组件的操作函数,功能分别是创建聊天区域,向聊天区域中添加消息,向聊天区域中添加提示消息,最后一个是设置操作集合的钩子函数。

对于这两种不同的实现分别定义了两个文件,chat-textview.c和chat-webkit.c,这两个文件里面分别是两者各自的实现,而它们对外的接口只是一个GtkWidget,这得利于GOBJECT的这种类似多态的特性。

对于不同的实现会定义操作集变量:

static HybridChatTextOps webkit_ops = {
	hybrid_chat_webkit_create,
	hybrid_chat_webkit_append,
	hybrid_chat_webkit_notify
};

聊天窗口当前使用的聊天区域实现方式全由该操作集来确定,而使用哪个操作集可以由两种方式各自的theme_set_ops_func函数来设置。

我们可以把两种组件看成两个不同的主题,在聊天窗口文件中定义了该主题的列表:

struct _HybridChatTheme {
	const gchar *name;
	theme_set_ops_func func;
};
 
static HybridChatTheme theme_list[] = {
#ifdef USE_WEBKIT
	{
		"webkit",
		hybrid_chat_set_webkit_ops
	}, 
#endif
	{
		"textview",
		hybrid_chat_set_textview_ops
	}, {
		NULL, NULL
	}
};

运行时程序会根据用户的当前配置情况来选择使用哪种主题。

二,WebKit遇到的问题

关于WebKit有几点小问题,第一次用难免会碰到些小问题,不过幸好还是解决掉了。

1. undefined @1: ReferenceError: Can’t find variable

WebKit外部来操作DOM模型主要是通过从外部调用webkit_web_view_execute_script()来实现的,当然我看最新的GtkWebKit API里面已经支持直接操作DOM了,但貌似手头的系统上安装的版本都还没有这个API函数,为了兼容性的考虑还是采用了传统的方法。在HTML模块中用Javascript定义了函数appendMessage(html),通过这个函数向WebKit中定义聊天信息,但当收到消息自动弹出的时候会提示undefined @1: ReferenceError: Can’t find variable appendMessage(),这种情况的原因很简单,函数是定义了但找不到,原因只能是因为模板字符串还没有加载完成便调用了appendMessage()函数,因此会出现这样的错误,因此在对WebKit进行脚本操作之前首先要等它初始化完成,也就是等它load_finished之后,WebKit提供了load_finished事件,但这个事件目前已经Deprecated了,替代的方法是使用load_status属性,属性和事件的使用方法明显不一样,关于WebKit deprecate load_finished事件的原因我没去仔细想,load_status属性的方法只能是轮询,在收到消息时检测load_status,或未加载完成,则调用g_timeout_add()将操作延时后执行,执行中再检测load_status,若仍未完成则继续延时,直到加载完成为止,实际上在实现的时候我给g_timeout_add的第一个参数写了0,事实证明在进入加调函数时需要的那个简单的HTML模板就已经加载完成了,这时候再去调用webkit_web_view_execute_script()去添加一条新消息。

2. Message: console message: undefined @1: SyntaxError: Parse error

同样是在调用webkit_web_view_execute_script()遇到了上面的错误,通过对比和分析发现我传入的字符串参数中夹带了\n字符,把这个字符换成空格后便没有这个问题了,但换行在HTML中应该是
,于是需要把\n替换成
,C语言以及glibc都没有提供形如replace()这种方便的函数,于是我用GString,把字符一个一个的贴过去,遇到\n就贴一个
在后面,效率是低点,但实现起来比较方便,代码如下:

static gchar*
escape_string(const gchar *str)
{
	GString *res;
 
	res = g_string_sized_new(strlen(str));
 
	while (str && *str) {
		switch (*str) {
			case 13:
				res = g_string_append(res, "<br/>");
				break;
			case '\"':
				res = g_string_append(res, "\\\"");
				break;
			case '\t':
				break;
			default:
				res = g_string_append_c(res, *str);
				break;
		}
		str ++;
	}
 
	return g_string_free(res, FALSE);
}

以上大致完成了文章开头图片的样式,已经可以正常使用,但字体在我这slackware系统上还有些不太完美,也可能是我系统字体设置有问题,这个等后期再处理。

分类: C/C++ 标签: ,