前一段阅读Google gadget for Linux的源码，发现其中没有对HTML及CSS的支持部分，用到的库也没有类似的名字。而在gadget sample中有个RSS的例子，其中JS文件中涉及到了HTML和CSS代码，那么Google gadget engine到底支不支持HTML/CSS呢？如果支持的话那么支持到何种程度，又是在哪里实现的呢？
测试gadget XML中对HTML的支持
编写一个简单的HelloWorld gadget进行试验，main.xml代码如下所示：
<view width=”250″ height=”150″>
<label x=”0″ y=”60″ align=”center” width=”250″ size=”20″
enabled=”true”>”HelloWorld”</label>
</view>
写一个简单的gadget.gmanifest文件双击即可运行此gadget，只在界面正中显示HelloWorld字样。如图1所示：
图1. HelloWorld Gadget运行效果
现在此xml文件中写入HTML语言，来为此gadget加入一张背景图：
<view width=”250″ height=”150″>
<html>
<head>
<title>Hello</title>
</head>
<body>
<img src=”background.png” />
</body>
</html>
<label x=”0″ y=”60″ align=”center” width=”250″ size=”20″
enabled=”true”>”HelloWorld”</label>
</view>
Gadget中负责绘制界面的XML文件是一定要以<view>开头以</view>结尾的，因此HTML语句只能放到view对象内部，否则加载时会报错。然而，嵌入了HTML语句却并没有实现加入背景图的预期，运行效果没有任何变化。为验证engine对HTML语句确实进行了操作，去掉<img src=”background.png” />中结尾处的’/’，再次运行报错。可见，写在gadget XML文件中的HTML语句Google gadget engine并不予解析。
测试gadget XML中对CSS的支持
下面再来检验XML文件中是否支持CSS。同样是上面的HelloWorld，写入CSS语句来调整字体的颜色：
<view width=”250″ height=”150″>
label
{
Color: #FF0000;
}
<label x=”0″ y=”60″ align=”center” width=”250″ size=”20″
enabled=”true”>”HelloWorld”</label>
</view>
运行发现依然没有任何变化。可见Google gadget engine只支持XML文件中用view对象进行绘图和排版，而不支持嵌入的HTML/CSS语句。
测试gadget JavaScript中对HTML/CSS的支持
从http://desktop.google.com/plugins上下载了一个叫做welt.de的gadget（因为其运行效果看起来有HTML和CSS的成分），打开welt.js文件，发现showDetails函数中有如下语句：
var htmlDetailsView = new DetailsView();
htmlDetailsView.html_content = true;
var htmlData = ‘<html>’;
htmlData += ‘<head><title> welt online - ‘+this.feedItems[id].title+’</title>’;
htmlData += ‘<style>’;
htmlData += ‘ html { padding:5px; font-family:sans-serif; font-size:10px; background-color:#ddd; }’;
htmlData += ‘ body { padding:5px; font-family:sans-serif; font-size:10px; background-color:#ddd; }’;
htmlData += ‘ a.head { font-size:12px; font-weight:bold; color:#000000; }’;
htmlData += ‘ div.date { font-size:9px; color:#aaa; }’;
htmlData += ‘</style>’;
htmlData += ‘<body>’;
if (this.feedItems[id].image!=”)
{
htmlData += ‘<a href=”‘+this.feedItems[id].url+’” target=”_blank”>’;
htmlData += ‘<img style=”float:left; width:100px; height:67px; border:0;” src=”‘+this.feedItem[id].image+’” /></a>’
}
htmlData += ‘<a class=”head” target=”_blank” href=”‘+this.feedItems[id].url+’”>’+this.feedItems[id].title+’</a><br/>’;
htmlData += ‘<div style=”clear:both;” />’;
htmlData += ‘<p>’+this.feedItems[id].copy+’</p>’;
htmlData += ‘<a style=”color:#000; font-size:11px; float:right;” target=”_blank” href=”‘+this.feedItems[id].url+’”>’;
htmlData += ‘>> Artikel lesen</a>’;
htmlData += ‘</body></html>’;
htmlDetailsView.setContent(”", undefined, htmlData, false, 0);
pluginHelper.showDetailsView(htmlDetailsView, ‘WELT ONLINE’, 0, function(flags) { welt.detailCallback(flags,id); } );
可见，htmlData变量中包含了HTML和CSS，此gadget运行效果如图2所示（不包括时钟）：
图2. welt.de Gadget运行效果
左边的WELT ONLINE详细信息窗口的内容则是以上程序段落进行填充和排版的。Gadget sample中也有一个叫做HtmlDetailsView的例子，也是用的同样的方法支持的HTML/CSS的显示。
pluginHelper是Google gadget engine支持的一个显示插件，图2中左边的窗口即为此插件实现的，而有关HTML/CSS的显示也只能在这个插件窗口中进行（采用pluginHelper.showDetailsView函数），而不能在gadget的主窗口中实现。所以，可以说Google gadget自身并不支持HTML/CSS的解析，而只能通pluginHelper实现。也就是说gadget界面部分只能通过view对象实现，不支持HTML/CSS的实现，而内容方面则可借用pluginHelper进行HTML/CSS的显示。
继续研究Google gadget engine的源码，pluginHelper部分也找不到HTML/CSS的解析，通过对依赖库的分析，怀疑libxml2可能支持HTML/CSS解析，但考虑到google gadget用的Gecko，而Gecko是一个完整的浏览器引擎，HTML部分为保证效率和容错性并没有采用第三方的库去实现，因此究竟HTML/CSS的支持由谁实现的还很难确定，这一点在后续的研究中将继续进行分析。
结论
1. Gadget的界面绘制和排版只支持用xml中的view对象进行，而不支持嵌入HTML/CSS的方式。
2. 可以在gadget的javascript中用pluginHelper对象实现在新窗口中HTML/CSS内容的显示。
3. 对HTML/CSS的解析源码中找不到相关内容，有可能是通过libxml2库或其他库实现的。
看过此博文的人还看过的
