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. Composer使用实践

    Composer 是 PHP5.3以上 的一个依赖管理工具.它允许你声明项目所依赖的代码库,它会在你的项目中为你安装他们. 地址在这里 库地址 这里相当于php应用商店,存放着很多库. 这些库,基本上 ...

  2. DB-MySQL:MySQL 运算符

    ylbtech-DB-MySQL:MySQL 运算符 MySQL 运算符 本章节我们主要介绍 MySQL 的运算符及运算符的优先级. MySQL 主要有以下几种运算符: 算术运算符 比较运算符 逻辑运 ...

  3. [JZOJ 5908] [NOIP2018模拟10.16] 开荒(kaihuang)解题报告 (树状数组+思维)

    题目链接: https://jzoj.net/senior/#contest/show/2529/1 题目: 题目背景:尊者神高达作为一个萌新,在升级路上死亡无数次后被一只大黄叽带回了师门.他加入师门 ...

  4. html5学习之第一步:认识标签,了解布局

    图1. Acme United的网页的规划 Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容.除了网页本身之外,< header ...

  5. 利用js自带函数 数组去重

    <script> ,,]; //原数组 var a=[]; //定义空数组 arr.map(function(x){ //用 map 遍历数组 ){ //如果当前值没有存在空数组中 a.p ...

  6. 向ueditor中插入内容

    html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...

  7. 多任务-进程之Queue的进程间通信

    1.经过线程和进程的对比,不难的知道,线程和进程有相当大的区别,如全局变量资源不能够共享. 2.在不同的进程间,如何实现通信呢? 需要提及的一个概念就是Queue,它是一个消息队列,下面通过一个例子来 ...

  8. [arc082e]ConvexScore

    题意: 给出直角坐标系中的$N$个点$(X_i,Y_i)$,定义由其中部分点构成的点集为“凸点集”当且仅当这些点恰好能构成一个凸多边形(内部没有其他点). 如图,点集$\{A,C,E\}$和$\{B, ...

  9. ansible搭建mysql主主模式

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)等优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  10. 四则运算1 java+jsp+SQLServer

    1,设计思想(1)在java resourse里定义包和类 (2)在类里定义生成算式,并将算式保存在数据库中的方法 (3)在jsp文件中调用java方法 2,源程序代码 生成算式的方法 public ...