views Windowing

views provides support for creating dialog boxes and other kinds of windows through its Widget object. The developer creates a WidgetDelegate (or sub-interface) implementation that provides the Window with the necessary information to display itself, and also provides callbacks for notifications about windowing events.

A Simple Example

To create a simple window:
 
#include "base/basictypes.h"
#include "base/compiler_specific.h"
#include "base/utf_string_conversions.h"
#include "ui/gfx/canvas.h"
#include "ui/views/controls/label.h"
#include "ui/views/view.h"
#include "ui/views/widget/widget.h"
#include "ui/views/widget/widget_delegate.h"
 
class WindowView : public views::WidgetDelegateView {
 public:
  WindowView() : label_(NULL) {
    Init();
  }
 
  virtual ~WindowView() {}
 
 private:
  // Overridden from views::View:
  virtual void OnPaint(gfx::Canvas* canvas) OVERRIDE {
    canvas->FillRect(GetLocalBounds(), SK_ColorWHITE);
  }
  virtual void Layout() OVERRIDE {
    gfx::Size ps = label_->GetPreferredSize();
    label_->SetBounds((width() - ps.width()) / 2, (height() - ps.height()) / 2, ps.width(), ps.height());
  }
  virtual gfx::Size GetPreferredSize() OVERRIDE {
    gfx::Size ps = label_->GetPreferredSize();
    ps.set_width(ps.width() + 200);
    ps.set_height(ps.height() + 200);
    return ps;
  }
 
  // Overridden from views::WidgetDelegate:
  virtual string16 GetWindowTitle() const OVERRIDE{
    return ASCIIToUTF16("Hello World Window");
  }
  virtual bool CanResize() const OVERRIDE {
    return true;
  }
  virtual bool CanMaximize() const OVERRIDE {
    return true;
  }
  virtual views::View* GetContentsView() OVERRIDE {
    return this;
  }
 
  void Init() {
    label_ = new views::Label(ASCIIToUTF16("Hello, World!"));
    AddChildView(label_);
  }
 
  views::Label* label_;
 
  DISALLOW_COPY_AND_ASSIGN(WindowView);
};
 
...
 
views::Widget::CreateWindow(new WindowView)->Show();
 
The window will delete itself when the user closes it, which will cause the RootView within it to be destroyed, including the WindowView.

WidgetDelegate

The WidgetDelegate is an interface that provides information to the Widget class used when displaying the window, such as its title and icon, as well as properties such as whether or not the window can be resized. It also provides callbacks for events like closing. It has an accessor window() which provides access to the associated Window object. A Widget has a ContentsView, provided by the WidgetDelegate, which is a View that is inserted into the Window's client area.

DialogDelegate

A DialogDelegate is a specialized kind of WidgetDelegate specific to dialog boxes that have OK/Cancel buttons. The DialogDelegate and its associated ClientView (see below) provide built in OK/Cancel buttons, keyboard handlers for Esc/Enter and enabling for those features. As a user, you write a View that is inserted into the DialogClientView that provides the contents of the dialog box, and implement DialogDelegate instead of WidgetDelegate, which provides callbacks for when the buttons are clicked as well as methods to provide the button text, etc.

Client and Non Client Views

 
Due to Chrome's non-standard window design, views supports custom rendered non-client areas. This is supported via the Window class and NonClientFrameView subclasses. To provide a custom window frame, a Viewsubclasses NonClientFrameView. This allows the overriding View to render and respond to events from the non-client areas of a window. views contains two built in type that do this - CustomFrameView and NativeFrameView. These are used for standard dialog boxes and top level windows.
 
For the Browser Window, different subclasses of NonClientFrameView are used (GlassBrowserFrameView and OpaqueBrowserFrameView). To allow these to be used the browser overrides Window's CreateFrameViewForWindow method to construct the appropriate frame view.
 
Aside from the RootView, the topmost View in a Window's View hierarchy is the NonClientView. This view is a container of exactly two views - the NonClientFrameView described above and a ClientView or subclass. The ClientView subclass contains the contents of the client area of the window (the stuff inside the titlebar/frame). A common ClientView subclass is DialogClientView, which provides built in handling for OK/Cancel buttons and a dialog theme background. The specific ClientView to be used is specified by a WidgetDelegate in its CreateClientView implementation. The default implementation of DialogDelegate automatically creates a DialogClientView. Custom WidgetDelegates can implement this method to return their own ClientView, which is what BrowserView does (the Browser window's WidgetDelegate implementor) to return itself. The ClientView API is fairly minimal except it is given a chance to perform non-client hit-testing, which is how the draggable title bar within the TabStrip and the resize corner of windows is implemented.
 
The ClientView and NonClientFrameView are siblings because it is fairly common for Views to do one-time initialization when they are inserted into a View hierarchy and DWM toggling on Windows Vista and newer mean the NonClientFrameView needs to be swapped out when the DWM is enabled or disabled. As such if the ClientView were a child of the NonClientFrameView it would be re-parented, meaning its children might re-initialize with negative side-effects.

Creating a Window

Some simple code to create a window using the WindowView defined in the example above:
 
views::Widget* window = views::Widget::CreateWindow(new WindowView);
window->Show();

UI Framework-1: views Windowing的更多相关文章

  1. iOS10 UI教程子视图和父视图UI层次结构和Views继承

    iOS10 UI教程子视图和父视图UI层次结构和Views继承 iOS10 UI教程子视图和父视图UI层次结构和Views继承,本节将讲解与UI层次结构和Views继承相关的内容,其中包括子视图和父视 ...

  2. Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

    1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybr ...

  3. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  4. [转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

    本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic i ...

  5. UI Framework-1: Aura Views

    Views Views is a user interface framework built on a type called, confusingly, View. Responsible for ...

  6. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  7. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  8. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  9. 04 - Vue3 UI Framework - 文档页

    官网的首页做完了,接下来开始做官网的文档页 返回阅读列表点击 这里 路由设计 先想想我们需要文档页通向哪些地方,这里直接给出我的设计: 所属 子标题 跳转路径 文件名(*.vue) 指南 介绍 /do ...

随机推荐

  1. 51nod-1253: Kundu and Tree

    [传送门:51nod-1253] 简要题意: 给出一棵n个点的树,树上的边要么为黑,要么为红 求出所有的三元组(a,b,c)的数量,满足a到b,b到c,c到a三条路径上分别有至少一条红边 题解: 显然 ...

  2. 英语影视台词---八、the shawshank redemption

    英语影视台词---八.the shawshank redemption 一.总结 一句话总结:肖申克的救赎 1.It's funny. On the outside, I was an honest ...

  3. 查看typedef类型

    typedef unsigned long int NUM; #include <iostream> using namespace std; NUM x; cout << t ...

  4. C# Lambda && Linq

    Lambda表达式在C#3.0加入,它是一个匿名函数,可用于创建委托或者表达式树类型,运算符为=>,读作"goes to",=>左侧是变量,右侧是表达式,变量类型可以自 ...

  5. python 3.x 学习笔记7 ( 模块 (修))

    1.定义:模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是.py结尾的python文件包:用来从逻辑上组织模块的,本质就是一个目录(必须带有一个__init__. ...

  6. Glide中的回调:targets

    Glide隐藏了一大推复杂的在后台的场景,Glide做了所有的网络请求和处理在后台线程中,准备好了切回到ui线程后更新ImageView. 假设ImageView不再是图像的最后一步.我们只要Bitm ...

  7. canvas 连线曲线图

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...

  8. HNU 13101 The Triangle Division of the Convex Polygon 组合数的因式分解求法

    题意: 求第n-2个Catalan数 模上 m. 思路: Catalan数公式: Catalan[n] = C(n, 2n)/(n+1) = (2n)!/[(n+1)!n!] 因为m是在输入中给的,所 ...

  9. 【BZOJ 1483】[HNOI2009]梦幻布丁

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 链表,启发式合并. 把x变成y,和y全都变成x. 不论是前者还是后者.连续段的个数都是相同的,不影响结果. 那么我们把x,y中出现次 ...

  10. Opencv 三对角线矩阵(Tridiagonal Matrix)解法之(Thomas Algorithm)

    1. 简介 三对角线矩阵(Tridiagonal Matrix),结构如公式(1)所示: aixi−1+bixi+cixx+1=di(1) 其中a1=0,cn=0.写成矩阵形式如(2): ⎡⎣⎢⎢⎢⎢ ...