chrmoium中创建WebUI

chromium的UI非常简洁,我想有两个方面原因:

  1. 让用户更加简单上手,网页的可视面积更大
  2. 简单的UI减少了代码跨平台的复杂性

相比传统的windows客户端程序,chromium中设置页面、历史记录、书签管理统统都是通过所谓WebUI的网页实现了。WebUI把c++、html、css、js组织在一起,css,html做界面,js和c++做逻辑,灵活而又强大。chromium有篇文档介绍如何创建WebUI界面。可惜这个文档有些过时,有些地方已经改变了。我最近自己也按照例子HelloWorld写了WebUI,总结一下。

创建WebUI网页

chromium中的WebUI资源都是放在src/chrome/browser/resources目录下面。我们在这个目录下面创建一个src/chrome/browser/resources/hello_world.html:

接着是我们的css文件src/chrome/browser/resources/hello_world.css:

js文件:

把资源添加到chromium中

我们增加了3个新的资源文件,为了在chromium使用这些资源,我们还需要把它加入到grd文件中,给他们分配一个ID,其他地方就可以根据ID引用这个资源了。在src/chrome/browser/browser_resources.grd里面,我们增加以下这几行:

增加页面的URL

跟chrome://settings/类似,也可以给我们创建的WebUI分配一个url。在src/chrome/common/url_constants.h:

然后在src/chrome/common/url_constants.cc:

增加本地化的字符串资源

chroumium为了实现多语言,它把字符串当作一种资源,不同的语言版本可以加载不同的语言资源。在src/chrome/app/generated_resources.grd:

增加WebUI类来处理请求

当我们在浏览器打开chrome://hello-world/时,会调用我们HelloWorldUI类去处理对应的逻辑。
src/chrome/browser/ui/webui/hello_world_ui.h:

在src/chrome/browser/ui/webui/hello_world_ui.cc:

增加c++代码文件到chromium中

我们刚才增加了2个cpp文件hello_world_ui.cc,hello_world_ui.h,我们需要把它加到chromium的gyp文件里,重新生成编译工程文件sln。

在src/chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc:把我们的webui类和url对应起来:

回调处理

WebUI中的js可以通过回调函数跟c++代码交互。下面是js代码中传入两个数字参数,然后c++计算出结果在回调给js代码。

src/chrome/browser/ui/webui/hello_world_ui.h:

src/chrome/browser/ui/webui/hello_world_ui.cc:

src/chrome/browser/resources/hello_world.js:

我们在地址栏输入“chrome://hello-world”最后的效果是这样的:

20130714175050

 

 

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注