基于Chrome开源提取的界面开发框架开篇--转

简介: 初衷 一直希望VC开发者能够方便的开发出细腻高品质的用户界面。我喜欢C++,选择的平台是Windows,所以大部分时间用VC。我自身不排斥其他技术或者开发语言或者开发工具,都去了解,了解的目的是想吸取好的思想补充VC开发方面的不足。

初衷

一直希望VC开发者能够方便的开发出细腻高品质的用户界面。我喜欢C++,选择的平台是Windows,所以大部分时间用VC。我自身不排斥其他技术或者开发语言或者开发工具,都去了解,了解的目的是想吸取好的思想补充VC开发方面的不足。从事界面开发方面的研究有5年了,学过很多,尝试过很多,失败过很多,但是没有气馁。感谢开源,尤其是谷歌的Chrome开源,使我再次提高。在论坛和代码网站,都能看到一些界面方面作品,有源码的也有纯欣赏的,大多数一看上去还不错,本地执行就会发现粗糙的地方,不细腻,难以商业化使用。总体来讲,国内很难看到好的界面方面的开源框架,优秀公司也以此为傲,不断引导界面潮流,使得其他一些公司模仿起来都累得喘气。

 
界面开发跟所有其他开发一样,都是有技术含量的,对于真正研究的人来说应该清楚。我在初期也遇到有人问我:xp换肤不是挺好嘛?vista都出来了,还需要换肤嘛?win7很漂亮,完全不需要额外的界面开发呀?我想一直界面代表了一个企业的标识文化,比如qq的蓝色以及企鹅,迅雷的动态效果窗口和蜂鸟。有兴趣研究没错,能做好更难得。

互联网客户端的特点是小巧灵,界面本身比较绚丽,背后依赖的界面引擎很重要。谷歌倾尽所有的开源姿态,是对微软的一种挑衅,在互联网方面我打败了你,在传统桌面上无法打败,把自己优秀的桌面代码开源出去联合所有人来不断孤立你。

Chrome开源牵扯的其他开源达30多个,几百个工程,一般的开发者想要利用其中的部分功能需要花费一些学习时间,要有移植大项目的经验。这里我做的就是抽取其中的view部分,做出一个基本的开发框架,斩断过多的牵连,尽量利用Windows平台的sdk,希望对渴望学习开发者的或者有能力扩展的公司有用。


背景

界面方面的研究,经过了三个阶段:传统Win32窗口、Win32窗口的子类化自绘、无窗口界面开发(directui)。这三个阶段有交集,大致还是按照时间推移不断提高的。

第一阶段:04-05年当时处于研究生实习时期,在导师公司做gis平台开发,对于界面要求不高,但也有一些定制性开发,那个时期基本上就是上codeproject,学习常规窗口编程技巧,那些api能做那些事,会引起什么效果,有那些附带作用,久而久之就知道做一个效果最直接的办法是组合那些api。当时自绘的工作不多,但是长时间的反复调用控件会让人厌烦,当时看了arcgis的平台里面开始使用网页做一些界面,限于当时的知识,无法获取研究的途径。后来我知道了一个叫BCG的界面开发库,从它开始进入了自绘阶段。

第二阶段:06-07年一开始是对BCG界面库的研究,说起这件事,觉得泄露的代码对我国软件开发水平的提高有很大帮助。BCG界面库在当时模拟的是office2003界面风格,模拟的很像但它的代码自身并不是非常清晰,模块的划分不一目了然。他在当时是把开源的CJLib打垮了,不过随后又被CJLib的商业公司Codejoke干翻,直至最后跟VC8mfc弱弱联合,仓促间形成一个mfcx,就现在来看使用的公司很少。Codejokextp也是以泄漏的方式才能有机会学到,他的界面组件划分比较合理,代码很清晰,尤其是其中的skinframework框架,单独拿出来编译一个dll即可实现常规窗口的换肤,皮肤格式可以和xp的兼容。也是他,让我彻底放弃常规窗口的子类化自绘的工作,转而是研究他的实现,因为他已经做到极致。后来我08年的毕业设计也是以他为基础,题目是软件构造方面的,各种形式的界面插件构造软件框架。在这个时候qq已经向无窗口发展了,这时候我得到了directui的概念,开始了无窗口界面方面的研究。

第三阶段:07-现在。最开始是研究http://www.viksoe.dk/code/windowless1.htm这个开源,相信很多人都知道也研究过。他抽象了一些无窗口的界面元素,翻译常规窗口消息解释并重新派发给无窗口元素,引入了一些ddraw特效,当时能接触到这样的代码很兴奋,界面初看起来很震撼,尤其是主界面的动画效果。他也有很明显的缺点:不支持unicodepretytext的计算有问题,本地窗口跟无窗口的布局混合会遮盖。基于他,我做出了自己的第一个界面框架,并应用在公司商业化产品中,可以从这里欣赏:http://www.cppblog.com/wlwlxj/archive/2007/08/28/31014.html。由于他对Windows的封装和无窗口元素的抽象并不是很强大,所以想要真正的用它做很强大的界面框架有困难,后来看qq、迅雷的界面,感觉到之前的界面元素并不通用,且缺少动态的能力,有一些想法在这个帖中提及:http://hi.baidu.com/wlwel/blog/item/ad08bfc8108ff78dc9176808.html。我后来想自己可能需要的是网页那种动态能力的界面,对图形图像的处理,以及界面的动态布局拖拽,我想起手里的Win2000泄漏代码,于是乎开始了一件疯狂的事情:移植其中的ie部分代码,只要其中的界面引擎,带上css和滤镜,支持各种交互事件,这就是我当时的想法。历时8个月,出来的成果:http://www.cppblog.com/wlwlxj/archive/2009/06/28/88695.html。这一次失败了,没法商业化应用,有很多问题,按钮的焦点有1像素偏差,css由于那个ie版本比较低,非常有限且不规范,滤镜由于一个组件创建不成功且无代码没法使用。整理的代码有30多兆,代码本身结构不清晰,砍掉的地方也非常多且很乱,最终我也没有能力去继续修改。中间有很多次的放弃,又不服气继续,最终走了下来。这一次研究对我最大的帮助就是在一个巨大的软件代码中,如何找到自己想要的东西,如何大刀阔斧的砍代码。里面就像大观园,技术很全,学到的东西太多太多。后来我意识到网页有网页布局的特点,桌面软件有桌面软件的特点,需要的地方互操作即可。接下来,我又研究了几个月comctl32部分,最后发现研究edit button需要走到ntuser部分,甚至想要朝显卡驱动调用方面走,就打住了,当然也有一些成果:http://www.cnblogs.com/wlwel/archive/2010/05/10/1732160.html,是一个失败的研究,但是学到了很多东西。有段时间我甚至刻意的躲避界面开发,直到后来接触到Chrome浏览器,看了他的开源。



针对
Chrome开源所做的工作

Chrome开源,主要是抽取其中的view部分代码,依赖的有他的basegfxskiaapp部分,我把base分成了basemessage_frameworkrfc_algorithmskiagdiplus替换合并到gfxapp划分到animationview_framework,去掉linux以及mac平台的支持部分,去掉了一些不需要的功能比如网页拖拽相关,形成了一个最小的开发框架,并修改了标题栏自绘的一个bug。Base部分起初想用boost替换,后来发现工作量很大,还是没敢做。截图如下:

所有整理代码下载


后续工作

继续增加控件、功能、修改现有代码中的一些注释的问题。接受所有的批评和建议,但不要人身攻击。希望能看到更多其他人的作品,现在的开源世界太丰富,很多东西不是接触不到,而是肯不肯静下心来研究。

注:工程是2005的,额外需要的头文件<vsstyle.h> <vssym32.h>可以从vc2008sdk中拷贝或者任意其他地方下载。2008直接转换即可编译。

 

from:http://www.cppblog.com/wlwlxj/archive/2011/03/20/142246.aspx

目录
相关文章
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
583 0
使用vue快速开发一个带弹窗的Chrome插件
|
2月前
|
Web App开发 人工智能 IDE
从痛点到解决方案:为什么我开发了Chrome元素截图插件
传统的截图方式要么截取整个页面然后手动裁剪,要么使用浏览器自带的截图功能,但效果都不理想。特别是当内容包含SVG元素或复杂样式时,截图质量和速度、便捷性往往不尽如人意。
152 4
|
7月前
|
Web App开发 安全 iOS开发
基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战
《基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战》详细解析了如何在macOS下通过Python脚本自动化清理Chrome浏览器的历史记录。文章以`clear_chrome_history.py`为例,结合PyCharm开发环境,深入讲解技术实现。内容涵盖进程检测、文件清理、虚拟环境配置及断点调试技巧,并提供安全增强与跨平台适配建议。该工具不仅保障个人隐私,还适用于自动化运维场景,具备较高实用价值。
207 0
|
12月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
359 1
|
12月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
1010 1
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
925 2
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
3213 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
406 11
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
922 8