views

Overview and background

Windows provides very primitive tools for building user interfaces. The system provides a few basic controls and native window containers, but building a custom user interface is difficult. Since we desired a differentiated aesthetic for Chromium, we have had to build a framework on Windows to accelerate our development of custom UI. This system is called views.

views is a rendering system not unlike that used in WebKit or Gecko to render web pages. The user interface is constructed of a tree of components called Views. These Views are responsible for rendering, layout, and event handling. Each View in the tree represents a different component of the UI. An analog is the hierarchical structure of an HTML document.

At the root of a View hierarchy is a Widget, which is a native window. The native window receives messages from Windows, converts them into something the View hierarchy can understand, and then passes them to theRootView. The RootView then begins propagation of the event into the View hierarchy.

Painting and layout are done in a similar way. A View in the View tree has its own bounds (often imbued upon it by its containing View's Layout method), and so when it is asked to Paint, it paints into a canvas clipped to its bounds, with the origin of rendering translated to the View's top left. Rendering for the entire View tree is done into a single canvas set up and owned by the Widget when it receives a Paint message. Rendering itself is done using a combination of Skia and GDI calls — GDI for text and Skia for everything else.

Several UI controls in Chromium's UI are not rendered using Views, however. Rather, they are native Windows controls hosted within a special kind of View that knows how to display and size a native widget. These are used for buttons, tables, radio buttons, checkboxes, text fields, and other such controls. Since they use native controls, these Views are also not especially portable, except perhaps in API.

Barring platform-specific rendering code, code that sizes things based on system metrics, and so on, the rest of the View system is not especially unportable, since most rendering is done using the cross-platform Skia library. For historical reasons, many of View's functions take Windows or ATL types, but we have since augmented ui/gfx/ with many platform independent types that we can eventually replace these with.

Code Location and Info

The base set of classes and interfaces provided by views can be found in the src/ui/views/ directory. All base views classes are in the "views" namespace.

Common Widgets

In the views framework:
  • WidgetWin: The base class for all Widgets in views. Provides a basic child window control implementation. Subclass this directly if you are not making a top-level window or dialog.
  • Window: A top-level window. A subclass of WidgetWin.

For more information on building dialog boxes and other windowed UI using Window, CustomFrameWindow, etc, read views Windowing.

 
In the Chromium browser front end:
  • BrowserFrame: A subclass of Window that provides additional message processing for the Browser window in Chrome. See Browser Window.
  • ConstrainedWindowImpl: A subclass of Window that provides the frame for constrained dialogs such as the HTTP basic auth prompt.

Other approaches

At the start of the project, we began building the Chromium browser using native windows and the owner-draw approach used in many Windows applications. This proved to be unsatisfactory, since native windows don't support transparency natively, and handling events requires tedious window subclassing. Some early UI elements gravitated towards custom painting and event handling (e.g. Autocomplete), but this was very ad-hoc based on the circumstance.

Existing UI toolkits for Windows are similarly unsatisfying, with limited widget sets, unnatural aesthetics, or awkward programming models.

Limitations/issues

By and large, views makes it relatively easy to build complex custom UIs. However it has a few rough edges that can be improved over time:

  • The Event types currently are occasionally problematic - they crack the native windows message parameters and then discard them. Sometimes this information is useful.
  • Some ad-hoc message processing.
  • Mix of native controls that don't work properly until inserted into a View hierarchy attached to a Widget with a valid HWND. Many of our native controls have API methods that require them to exist within a window hierarchy. This means that they cannot be fully initialized until they are inserted. The View API will eventually be improved to make this clearer (bug 5191).
  • The base Widget interface itself is somewhat frozen in time. Some improvement and consolidation would be worthwhile.

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

  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 ...

  10. 07- Vue3 UI Framework - Switch 组件

    为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过 ...

随机推荐

  1. iOS开发之UIAlertController的适配

    在iOS8中,只能用UIAlertController.而原来的UIAlertView及UIActionSheet已经被抛弃掉了.但是如果一台iOS 7 的手机运行到有UIAlertControlle ...

  2. m_Orchestrate learning system---十四、数据表中字段命名规则

    m_Orchestrate learning system---十四.数据表中字段命名规则 一.总结 一句话总结:a.保证唯一 b.见名知意 1.注意php中的数组类函数和字符串类函数的前缀? 数组类 ...

  3. caffe中LetNet-5卷积神经网络模型文件lenet.prototxt理解

    caffe在 .\examples\mnist文件夹下有一个 lenet.prototxt文件,这个文件定义了一个广义的LetNet-5模型,对这个模型文件逐段分解一下. name: "Le ...

  4. Codeforces 676E The Last Fight Between Human and AI 规律

    链接 Codeforces 676E The Last Fight Between Human and AI 题意 给一个多项式,有些系数不确定.人和机器轮流填系数,系数可以是任何数,问是否能使得最后 ...

  5. Windows版Redis如何使用?(单机)

    使用Windows版Redis 1.下载Windows版本的Redis 2.在redis目录里创建redis.conf ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  6. CSS3———linear-gradient() 线性渐变

    线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...

  7. Docker中免去sudo的设置方法

    Add the docker group if it doesn't already exist: sudo groupadd docker Add the connected user " ...

  8. Java可以远程操作服务器的协议笔记

    1.SCPClient(本地复制到远程.远程复制到本地.目前未看到可以远程操作文件) 2.SMB协议(可以远程操作文件:新增.修改) 3.SFTPv3Client(可以远程操作文件:新增.修改)

  9. js Date() 时间函数处理 关于 toLocaleDateString()

    toLocaleDateString()方法的真正含义为「根据本地时间把Date对象的日期部分转换为字符串」,这意味着:在不同的浏览器或者服务器中,我们可能得到不同的字符串. 例如,将 Chrome ...

  10. java compare 时间排序

    所有数据存进resultList中 Collections.sort(resultList, new Comparator<HashMap<String, Object>>() ...