|
这篇文章是接着上篇文章继续聊的，Chrome的代码实在太多，每一个东西单拿出来都可以说很很多，单就一个breakpad都说了两篇。恩，不过也许是我太啰嗦了。 1. UI控件库（Control）简介 我们知道Chrome做这一套皮肤引擎是为了替换掉Windows原生的控制UI的方式，所以这个皮肤引擎上怎么能没有控件呢？所以在建立好各种基础的UI元素和默认处理之后，Chrome在上面开始封装各种基础的控件，比如button等等。
其相关代码主要分布在src/ui/views/control目录下。 为了进一步的方便开发，Chrome的UI控件库中包括了很多基础的控件，这些控件现在包括如下几种：
这些控件中有一些并不一定是全部自绘的，而是使用系统原生的控件，比如tabbed_pane，tree和table。按照Chrome的文档来看，Chrome团队应该并不喜欢使用系统原生的控件，所以从长远来看，这些代码应该是中间代码，毕竟很好的实现一个这样的控件还是比较复杂的，所以Chrome就暂时使用着原生的控件。 另外还有一种我们在控件库中找不到，但是却十分重要的控件：容器。
Chrome的皮肤引擎有一个特点：万物皆容器。所有的控件都继承于一个同一个基类：View，所以所有的控件都可以有子元素。在Chrome里面，你可以建立一个其他什么都不做的View，只用它来排布他的子元素。用过GTK的朋友们肯定对GtkHBox和GtkVBox这个类有一定的印象，这两个类对辅助控件的布局是很有帮助的。在Chrome里面，你也可以使用类似的用法来辅助控件的布局，而且在UI里面还提供了几种基础的布局方法来帮助大家开发。 2. 实现方式 提供的控件确实比较全面，那么为了更好的帮助我们理解和使用这些控件，在使用这些控件之前，先让我们来看一下Chrome的UI控件的实现方法。 2.1. 自绘控件实现 我们知道自绘控件的关键是三个方面：绘制、数据提供和事件回调。所以Chrome在代码里面也就是针对着这样三个方面来实现他的封装。
真是熟悉的三个方面啊，想必很多朋友已经能对Chrome控件的实现方式猜个大概了，如果还对于Chrome UI绘制机制有一定了解，那么代码估计自己也能写出个大概了。
没错，就是MVC模型：
- 使用Canvas来实现绘制的接口，在控件的OnPaint回调中进行自绘。
- 采用MVC的设计思想，对于复杂的控件，如Tree，Table等等，提取出Model接口和Controller接口，分别用于管理数据和处理事件回调并控制控件行为。
我们拿Tree来举例，Chrome将一个Tree分为三个部分：TreeView，TreeModel，TreeViewController。
- TreeView主要用于绘制。现在TreeView已经被系统原生控件接管，但是在Chrome代码里面，我们依然能找到自绘的TreeView。
- TreeModel主要用于管理数据。
- TreeViewController主要用于处理事件回调，控制控件行为，如：控制树中某一项能不能被编辑。
chrome-ui-control-tree:
 这样Chrome就实现了自绘控件。 2.2. 与原生控件的兼容 由于Chrome的控件还有一部分控件是直接使用的系统原生的控件，所以就会牵涉到自绘控件和原生控件如何在View控件树兼容的问题。
一个很自然的解决方法就是建立一个继承自View的原生控件基类，而具体的控件和逻辑则放入他的子类。这个基类就是NativeControl，通过继承他，来将原生控件纳入Views的层次结构中。在Chrome的代码中，Tree就是这样来实现的。 chrome-ui-native-control:
 但是Chrome认为这样做存在问题，于是Chrome对其结构进行了改进，以求更好的支持跨平台和代码复用。
所以现在更多的控件的实现是建立一个Wrapper封装NativeControl，Wrapper的实现则继承自NativeControlWin，以便更加方便的控制控件，或者使用View进行替换，如Combobox。 3. 使用范例 好了，扯了这么多，我们来看一下如何使用这个皮肤引擎吧。 3.1. 建立一个工程 由于Chrome UI库和其他工程关联太紧，所以我们如果要建立一个测试工程其实并没有那么容易，我们可以在view_example_exe这个工程上直接进行修改，或者利用gclient生成一个测试工程。
- 打开src/ui/views/views.gyp，将views_examples_exe的描述段复制一份，粘贴在# target_name: views_examples_lib之后。
- 修改其工程名为你想要的工程名，如：view_test。
- 删除其source区域下除了.rc文件以外的所有源代码。
- 在dependencies中加入一项：views。
- 打开配置好的cygwin或者命令行，进入chromium源代码根目录，也就是存放.gclient文件的目录，输入gclient runhooks。
- 重新打开src/ui/views/views.sln，我们就可以在(views)目录下，看到view_test的工程了。
chrome-add-ui-proj:
 3.2. 准备工程 为了能让这个UI工程运行起来，我们需要写一些准备的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
#include "base/at_exit.h"
#include "base/command_line.h"
#include "base/message_loop.h"
#include "base/i18n/icu_util.h"
#include "ui/base/ui_base_paths.h"
#include "ui/base/resource/resource_bundle.h"
#include "ui/views/widget/widget.h"
#include "ui/views/widget/widget_delegate.h"
using
namespace
views;
void
test()
{
return
;
}
int
main(
int
argc,
char
** argv)
{
// 以下内容必不可少，如果不添加会导致程序无法运行
OleInitialize(NULL);
// Windows上必备，OLE初始化
CommandLine::Init(argc, argv);
// 初始化命令行参数
base::AtExitManager at_exit;
// 为MessageLoop所使用的，用于在退出时清理对象的工具类
ui::RegisterPathProvider();
// 注册UI组件所需要的路径，不然会出现资源找不到的问题
bool
icu_result = icu_util::Initialize();
// 注册ICU，用于国际化
CHECK(icu_result);
ui::ResourceBundle::InitSharedInstanceWithLocale(
"en-US"
);
// 初始化国际化资源包
// 以上内容必不可少，如果不添加会导致程序无法运行
// 初始化消息循环
MessageLoopForUI msg_loop;
test();
msg_loop.Run();
OleUninitialize();
return
0;
}
|
之后我们把测试代码都加载test()这个函数中就可以了，另外这里之后的代码可能会泄漏的问题，这里我们先暂时不去理会他，后面会单独聊。 3.3. 实现一个简单的窗口 建立好了工程之后，我们就可以添加代码了，先让我们来建立一个最简单的窗口：一个空白的Widget。
|
1
2
3
4
5
|
void
test()
{
// 创建窗口并显示
Widget::CreateWindowWithBounds(NULL, gfx::Rect(0, 0, 320, 240))->Show();
}
|
短短几行我们就创建了一个最基本的窗口了，但是这个窗口实在是。。。有点难看啊。。 chrome-base-ui:
 3.4. 添加一个按钮吧 既然难看，我们就来添加一些小控件到里面吧，先加一个小按钮吧。
首先，让我们来回想一下Chrome UI的元素结构，还记得这幅图么：
chrome-view-hierarchy:
 所以为了增加按钮，我们需要创建一个按钮的控件，并且为Widget的ClientView生成一个ContentsView来保存我们的这个按钮。 首先我们先添加几个头文件：
|
1
2
|
#include "ui/views/controls/button/text_button.h"
#include "ui/views/layout/fill_layout.h"
|
另外我们添加了一个TestWidgetDelegate的类，用于设置Widget样式并且提供ContentsView。另外我们还给它添加了一个FillLayout，让按钮与窗口保持一样的大小。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
class
TestWidgetDelegate :
public
WidgetDelegateView,
public
ButtonListener
{
public
:
TestWidgetDelegate() {
// 设置窗口背景，让其不为黑色
set_background(Background::CreateStandardPanelBackground());
// 添加子按钮
Button *button =
new
TextButton(
this
, L
"test"
);
button->set_tag(1);
// Button的tag是用于区分按钮的，在回调时，通过这个tag来区分不同的按钮
AddChildView(button);
// 设置子按钮保持和窗口一样大小的布局方式
SetLayoutManager(
new
FillLayout);
}
virtual
~TestWidgetDelegate() {}
// 可以变化大小
virtual
bool
CanResize()
const
{
return
true
; }
// 可以最大化
virtual
bool
CanMaximize()
const
{
return
true
; }
// 初始化焦点
virtual
View* GetInitiallyFocusedView() OVERRIDE {
return
this
; }
// 提供ContentsView
virtual
View* GetContentsView() OVERRIDE {
return
this
; }
// 窗口关闭是退出消息循环
virtual
void
WindowClosing() OVERRIDE { MessageLoopForUI::current()->Quit(); }
// 如果按钮发生点击，则回调此事件
virtual
void
ButtonPressed(Button* sender,
const
views::Event& event) {
if
(sender->tag() == 1) {
// 回调时，通过这个tag来区分不同的按钮
// .....
}
}
};
|
另外生成Widget的代码也要做少许的改动：
|
1
2
3
4
5
|
void
test()
{
// 创建窗口并显示
Widget::CreateWindowWithBounds(
new
TestWidgetDelegate, gfx::Rect(0, 0, 320, 240))->Show();
}
|
编译运行，可以看到一个按钮已经出现啦~ chrome-base-ui-with-button:
 3.5. 添加一个原生控件 好，我们已经可以添加一个自绘的控件了，现在让我们来试着添加一个系统原生的控件吧。 由于Chrome是在View的基础上封装的原生控件，所以添加原生控件也并非难事。比如我们现在来添加一个Tab栏，我们只需要添加一个头文件，再稍稍修改一下TestWidgetDelegate的构造函数就可以了。 添加头文件：
|
1
|
#include "ui/views/controls/tabbed_pane/tabbed_pane.h"
|
修改TestWidgetDelegate的构造函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
TestWidgetDelegate() {
// 设置窗口背景，让其不为黑色
set_background(Background::CreateStandardPanelBackground());
// 添加Tab栏
TabbedPane *tabbedpane =
new
TabbedPane();
AddChildView(tabbedpane);
// 此处创建完成需要立刻添加到View中，因为其后端实现是在此时被创建的，如果不添加，调用AddTab接口会发生崩溃。
// 添加子按钮
Button *button =
new
TextButton(
this
, L
"test"
);
button->set_tag(1);
// Button的tag是用于区分按钮的，在回调时，通过这个tag来区分不同的按钮
tabbedpane->AddTab(L
"Tab1"
, button);
// 设置子按钮保持和窗口一样大小的布局方式
SetLayoutManager(
new
FillLayout);
}
|
这里需要注意的一点是：Chrome很多原生控件的真实实现类都是在View层次关系发生改变的时候创建的，所以在Tab等原生控件创建完成之后，需要马上将其加入View中，不然后续调用其接口就会发生崩溃。 让我们来看看最终的效果： chrome-base-ui-with-tab:
 3.6. 控件的生命周期 Chrome控件的生命周期是比较晦涩的，在上面的代码，我们可以看见我们new出来了很多对象，但是从未调用过delete，那中间会有内存泄漏么？ 答案是：不会。这些的对象都会在窗口接收到最后一个消息的时候把所有在View树中的对象都释放掉。在Windows下，也就是在WM_NCDESTROY消息中的处理中，主动释放所有的对象的。
所以我们在使用中，只需要保存好这些对象的裸指针，并且在合适的时机将其置空即可。对于置空的时机，Widget和View也有对应的回调，如Widget::DeleteDelegate，或者在析构函数里面来进行。 4. 写在最后 对于Chrome UI控件库，这里只是做了写简要的记录。对于各种控件的使用，在Chrome的代码里面也提供了非常详细的实例程序，大家可以在src/ui/views/examples下找到这些代码。在VS中也提供了相应的工程：views_examples_exe，供大家参考。
| 
1314
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
