创建Chromium WebUI接口
转载自：http://www.chromium.org/developers/webui
Chrome的WebUI是那种，在Chrome中输入 "chrome://xxxx"就能打开一个URL页面的对象。
创建一个Chrome WebUI接口非常的简单，只需要改动数个文件。
创建WebUI页面
webui的资源，放在资源目录下：src/chrome/browser/resources. 当创建WebUI资源时，参考Web Development Style Guide。例如,我们创建一个HelloWorld的页面
src/chrome/browser/resources/hello_world.html
<!DOCTYPE HTML><html i18n-values="dir:textdirection"><head> <meta charset="utf-8"> <title i18n-content="helloWorldTitle"></title> <link rel="stylesheet" href="hello_world.css"><script src="chrome://resources/js/cr.js"></script>
<script src="strings.js"></script>
<script src="hello_world.js"></script>
<h1 i18n-content="helloWorldTitle"></h1>
<p id="welcome-message"></p>
<script src="chrome://resources/js/i18n_template2.js"></script>
</body>
</html>
p {
white-space: pre-wrap;
}
cr.define('hello_world', function() {
'use strict';
/**
* Be polite and insert translated hello world strings for the user on loading.
*/
function initialize() {
}
// Return an object with all of the exports.
return {
initialize: initialize,
};
});
document.addEventListener('DOMContentLoaded', hello_world.initialize);
src/chrome/browser/browser_resources.grd文件中。
+ <include name="IDR_HELLO_WORLD_HTML" file="resources\hello_world.html" type="BINDATA" />
+ <include name="IDR_HELLO_WORLD_CSS" file="resources\hello_world.css" type="BINDATA" />
+ <include name="IDR_HELLO_WORLD_JS" file="resources\hello_world.js" type="BINDATA" />
添加URL标识到新的Chrome URL中
src/chrome/common/url_constants.*文件中。
+ extern const char kChromeUIHelloWorldURL[];
...
+ extern const char kChromeUIHelloWorldHost[];
+ const char kChromeUIHelloWorldURL[] = "chrome://hello-world/";
...
+ const char kChromeUIHelloWorldHost[] = "hello-world";
添加本地字符串
+ <message name="IDS_HELLO_WORLD_TITLE" desc="A happy message saying hello to the world">
+ Hello World!
+ </message>
+ <message name="IDS_HELLO_WORLD_WELCOME_TEXT" desc="Message welcoming the user to the hello world page">
+ Welcome to this fancy Hello World page <ph name="WELCOME_NAME">$1<ex>Chromium User</ex></ph>!
+ </message>
添加处理chrome://hello-world/请求的WebUI类
下面我们增加一个新的类来处理新的资源。通常情况下，它是ChromeWebUI的一个子类(WebUI对话框则从HtmlDialogUI继承）
#ifndef CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_
#define CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_
#pragma once
#include "content/public/browser/web_ui_controller.h"
// The WebUI for chrome://hello-world
class HelloWorldUI : public content::WebUIController {
public:
explicit HelloWorldUI(content::WebUI* web_ui);
virtual ~HelloWorldUI();
DISALLOW_COPY_AND_ASSIGN(HelloWorldUI);
};
#endif // CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_
#include "chrome/browser/ui/webui/hello_world_ui.h"
#include "chrome/browser/profiles/profile.h"
#include "grit/browser_resources.h"
#include "grit/generated_resources.h"
HelloWorldUI::HelloWorldUI(content::WebUI* web_ui)
: content::WebUIController(web_ui) {
// Set up the chrome://hello-world source.
content::WebUIDataSource
* html_source =
new content::WebUIDataSource
(chrome::kChromeUIHelloWorldHost);
html_source->SetUseJsonJSFormatV2()
;
// Localized strings.
html_source->AddLocalizedString("helloWorldTitle", IDS_HELLO_WORLD_TITLE);
html_source->AddLocalizedString("welcomeMessage", IDS_HELLO_WORLD_WELCOME_TEXT);
// As a demonstration of passing a variable for JS to use we pass in the name "Bob".
html_source->AddString("userName", "Bob");
html_source->SetJsonPath
("strings.js");
// Add required resources.
html_source->AddResourcePath
("hello_world.css", IDR_HELLO_WORLD_CSS);
html_source->AddResourcePath
("hello_world.js", IDR_HELLO_WORLD_JS);
html_source->SetDefaultResource
(IDR_HELLO_WORLD_HTML);
Profile* profile = Profile::FromWebUI(web_ui);
content::WebUIDataSource::Add(profile, html_source);
}
HelloWorldUI::~HelloWorldUI() {
}
编译新的类，需要添加到工程的gyp文件中
'sources': [
...
+ 'browser/ui/webui/hello_world_ui.cc',
+ 'browser/ui/webui/hello_world_ui.h',
添加WebUI请求到Chrome WebUI工厂
WebUI的工厂负责响应并创建你的请求
+ #include "chrome/browser/ui/webui/hello_world_ui.h"
+ if (url.host() == chrome::kChromeUIHelloWorldHost)
+ return &NewWebUI<HelloWorldUI>;
测试
OK!假定没有错误，你可以编译和运行chrome了。并在地址栏输入 chrome:://hello-world/ 你将看到欢迎信息。
增加回调处理句柄
你也许你问新的WebUI页面能够做些什么事情，或者从C++世界获取一些信息。为此，我们使用消息回调句柄。 假设我们不信任javascript引擎的两个整数相加（因为我们知道，它内部是使用浮点数的）。我们可以增加回调句柄来处理我们的整数运算。
#include "chrome/browser/ui/webui/chrome_web_ui.h"
+
+ namespace base {
+ } // namespace base
...
// Set up the chrome://hello-world source.
ChromeWebUIDataSource* html_source =
new ChromeWebUIDataSource(chrome::kChromeUIHelloWorldHost);
+
+ // Register callback handler.
+ RegisterMessageCallback("addNumbers",
// Localized strings.
...
virtual ~HelloWorldUI();
+
+ private:
+ // Add two numbers together using integer arithmetic.
+ void AddNumbers(const base::ListValue* args);
DISALLOW_COPY_AND_ASSIGN(HelloWorldUI);
};
#include "chrome/browser/ui/webui/hello_world_ui.h"
+
+ #include "base/values.h"
#include "chrome/browser/profiles/profile.h"
...
}
+
+ void HelloWorldUI::AddNumbers(const base::ListValue* args) {
+ int term1, term2;
+ if (!args->GetInteger(0, &term1) || !args->GetInteger(1, &term2))
+ return;
+ base::FundamentalValue result(term1 + term2);
+ CallJavascriptFunction("hello_world.addResult", result);
+ }
function initialize() {
+ chrome.send('addNumbers', [2, 2]);
}
+
+ function addResult(result) {
+ alert('The result of our C++ arithmetic: 2 + 2 = ' + result);
+ }
return {
+ addResult: addResult,
initialize: initialize,
};
请注意调用是异步的。我们必须等待C++端主带调用javascript的函数才能获取到结果。
创建WebUI对话框
一旦你按照上面的步骤创建了一个WebUI，你需要修改两个地方来创建一个WebUI Dialog。你必须从HtmlDialogUI继承，并创建一个HtmlDialogUIDelegate类。
1. 替换ChromeWebUI为HtmlDialogUIDelegate
- #include "#chrome/browser/ui/webui/chrome_web_ui.h"
+ #include "#chrome/browser/ui/webui/html_dialog_ui.h"
- class HelloWorldUI : public ChromeWebUI {
+ class HelloWorldUI : public HtmlDialogUI {
2. 创建一个HtmlDialogUIDelegage
#ifndef CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_H_
#define CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_H_
#include "chrome/browser/ui/webui/html_dialog_ui.h"
class HelloWorldDialog : private HtmlDialogUIDelegate {
public:
// Shows the Hello World dialog.
static void ShowDialog();
virtual ~HelloWorldDialog();
private:
// Construct a Hello World dialog
explicit HelloWorldDialog();
// Overridden from HtmlDialogUI::Delegate:
virtual bool IsDialogModal() const OVERRIDE;
virtual string16 GetDialogTitle() const OVERRIDE;
virtual GURL GetDialogContentURL() const OVERRIDE;
virtual void GetWebUIMessageHandlers(
std::vector<WebUIMessageHandler*>* handlers) const OVERRIDE;
virtual void GetDialogSize(gfx::Size* size) const OVERRIDE;
virtual std::string GetDialogArgs() const OVERRIDE;
virtual void OnDialogClosed(const std::string& json_retval) OVERRIDE;
virtual void OnCloseContents(
TabContents* source, bool* out_close_dialog) OVERRIDE;
virtual bool ShouldShowDialogTitle() const OVERRIDE;
DISALLOW_COPY_AND_ASSIGN(HelloWorldDialog);
};
#endif // CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_H_
#include "chrome/browser/ui/browser_list.h"
#include "chrome/browser/ui/webui/hello_world.h"
#include "chrome/common/url_constants.h"
void HelloWorldDialog::ShowDialog() {
Browser* browser = BrowserList::GetLastActive();
DCHECK(browser);
browser->BrowserShowHtmlDialog(new HelloWorldDialog(), NULL);
}
HelloWorldDialog::HelloWorldDialog() {
}
HelloWorldDialog::~HelloWorldDialog() {
}
bool HelloWorldDialog::IsDialogModal() {
return false;
}
string16 HelloWorldDialog::GetDialogTitle() {
return UTF8ToUTF16("Hello World");
}
GURL HelloWorldDialog::GetDialogContentURL() const {
return GURL(chrome::kChromeUIHelloWorldURL);
}
void HelloWorldDialog::GetWebUIMessageHandlers(
std::vector<WebUIMessageHandler*>* handlers) const {
}
void HelloWorldDialog::GetDialogSize(gfx::Size* size) const {
size->SetSize(600, 400);
}
std::string HelloWorldDialog::GetDialogArgs() const {
return std::string();
}
void HelloWorldDialog::OnDialogClosed(const std::string& json_retval) {
delete this;
}
void HelloWorldDialog::OnCloseContents(TabContents* source,
bool* out_close_dialog) {
if (out_close_dialog)
*out_close_dialog = true;
}
bool HelloWorldDialog::ShouldShowDialogTitle() const {
return true;
}
你需要通过HelloWroldDialog::ShowDialog来创建一个新的dialog。
传递参数给WebUI
你可能猜到HtmlDialogUIDelegate::GetDialogArgs()函数是用来传递参数给对话框页的。例如，如果我们希望显示一个自定义的消息给用户，这个自定义消息是在创建对话框时传递给它，并由GetDialogArgs返回，并在javascript中通过chrome.dialogArguments来返回。例子如下：
- static void ShowDialog();
+ static void ShowDialog(std::string message);
+ // The message to be displayed to the user.
+ std::string message_;
+
DISALLOW_COPY_AND_ASSIGN(HelloWorldDialog);
};
- HelloWorldDialog::HelloWorldDialog() {
+ : message_(message) {
}
- return std::string();
+ return message_;
}
+ document.getElementsByTagName('p')[0].textContent = chrome.dialogArguments;
}
实际上，你可以传递一个结构体给你的WebUI。你可以通过base::JSONWriter来产生一个JSON字符串，在javascript端通过JSON.parse(chrome.dialogArguments)获得这个参数。
例子待序.....
创建Chromium WebUI接口的更多相关文章
- 更改VisualStudio默认创建类和接口不加public问题
由于VisualStudio创建类和接口时,默认的是不加public关键字的,而我们大多数时候创建的类都是public的,于是,为了更好工作觉得改之. 首先找到在VisualStudio安装目录下路径 ...
- day114:MoFang:基于支付宝沙箱测试环境完成创建充值订单接口&服务端处理支付结果的同步通知和异步通知
目录 1.基于支付宝提供的沙箱测试环境开发支付接口 1.后端提供创建充值订单接口 2.前端调用AlipayPlus发起支付 3.注意:自定义APPLoader完成接下来的开发 4.下载支付宝沙箱钱包A ...
- Android开发10.1：UI组件适配器AdapterView(创建ListView,Adapter接口)
@version:Android4.3 API18 @author:liuxinming 概述 AdapterView继承了ViewGroup,它的本质是容器 ...
- Zynq-PL中创建AXI Master接口IP及AXI4-Lite总线主从读写时序测试(转）
转载:原文 http://www.eefocus.com/antaur/blog/17-08/423751_6cc0d.html 0. 引言 通过之前的学习,可以在PL端创建从机模式的AXI接口IP ...
- Unity3D学习笔记4——创建Mesh高级接口
目录 1. 概述 2. 详论 3. 其他 4. 参考 1. 概述 在文章Unity3D学习笔记2--绘制一个带纹理的面中使用代码的方式创建了一个Mesh,不过这套接口在Unity中被称为简单接口.与其 ...
- Elasticsearch：创建 API key 接口访问 Elasticsearch
转载自:https://blog.csdn.net/UbuntuTouch/article/details/107181440 在之前我的文章 "Elastic:使用Postman来访问El ...
- 采用CXF+spring+restful创建一个web接口项目
这篇文章是http://blog.csdn.net/zxnlmj/article/details/28880303下面,加入的基础上的restful特征 1.参加restful必jar包裹 jsr31 ...
- Android studio无法创建类和接口问题解决办法。提示 Unable to parse template "Class"
重新配置了studio 的工作环境, 没问题,后来加需求要新增java类和接口,这就出现问题了,新建的时候,就会报错: Unable to parse template "Interface ...
- UVM：8.4.3 用factory 机制创建实例的接口
1.create_object_by_name,依据类名字创建object,原型: 一般仅仅用第一个: 2.create_object_by_type.依据类型创建一个object,原型: 一般仅仅用 ...
随机推荐
- eclipse 库 library jar包 工程 总结
引用库错误 如果在libraries中发现有小红叉,表明引用库错误 解决办法:在左侧projects中add引用到的库 如:我们的支付库引用了以下三个库 那么需要在projects中add这三个库 ...
- SIEBEL安装问题
安装siebel 分三步走: 1.安装oracle 11g 2.安装Client 3.分别安装siebel tools.siebel web client,之后打上补丁 安装siebel tools. ...
- JSP学习笔记（1）
JSP本质就是一个servlet,当第一次接受到客户端请求时会被编译成对应的servlet,且对应的每个servlet在容器中只要一个实例. 1.1.JSP注释 <%-- JSP注释部分 --& ...
- jquery mini ui 学习
1.mini.parse(); 将html标签解析为miniui控件.解析后,才能使用mini.get获取到控件对象. 2.mini.get(id);根据id获取控件对象. 3.grid.load() ...
- SpringMVC简单例子
http://www.cnblogs.com/wawlian/archive/2012/11/17/2775435.html
- Ubuntu 11.10 安装GMONE3，卸载 UNITY和UNITY 2D
Ubuntu 11.10安装GNOME3: 1)sudo apt-get install gnome-shell sudo apt-get install gnome-themes* (或者 ...
- java代码实现 金字塔（倒置）
在jsp中实现如图所示的金字塔,,代码如下: 大致思路如下: 1.先画出前5行.因为 i+空格数=总行数,所以第一行的空格数是 总行数-i(第几行),然后画出 *,*的数目=2*i-11: 2.在画出 ...
- C# 操作电脑 关机 重启 注销 休止 休眠
// 关机 强制电脑10秒之内关机 //System.Diagnostics.Process.Start("shutdown", "-s -f -t 10"); ...
- windows下安装apache笔记
之前一直是用别人配置好的apache环境来开放,今天想自己安装配置下windows下的apache(nginx+fastcgi).mysql.php等. 虽然大部分时间是在搞前端开发,偶尔也要搞服务端 ...
- 《Linux内核分析》 week5作业-system call中断处理过程
一.使用gdb跟踪分析一个系统调用内核函数 1.在test.c文件中添加time函数与采用c语言内嵌汇编的time函数.具体实现请看下图. 2.然后在main函数中添加MenuConfig函数,进行注 ...