万星星@豌豆荚 欢迎加入我们
一个吃软饭的男人!!!!!我只想写程序####
微博:http://weibo.com/wanlianwen
posts - 172,  comments - 1253,  trackbacks - 0
 

初衷

一直希望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直接转换即可编译。

posted on 2011-03-20 00:24 万连文 阅读(32317) 评论(31)  编辑 收藏 引用 所属分类: 小作品

FeedBack:
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-20 01:18 | ballbillow
再次看到你写界面方面的技术文章,很期待哈,
让我想到了自己刚开始工作那会学习界面的情景,虽然每一步都没有你研究都那么深入,现在也完全不做GUI方面的事情了,但是对GUI一直有一种情结,呵呵
以前经常和你聊天的,学习到不少东西,现在怎么QQ上没有你了,奇怪  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-20 01:28 | ouyang
不错啊,继续写下去
看过你前面的文章,感觉你真是挺能钻研的。最后说的也不错,其实很多开源或者泄露出来的代码里面有非常多的好东西,就看你有没有静心下来研究了。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-20 10:12 | ccsdu2009
牛人就是这样炼成的!  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-20 10:21 | liquanhai
很高兴能看到楼主发表这么好的文章,我一直在用VC6,大家说是windows98风格的,呵呵,想研究一下QT,也没有时间  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-20 14:45 | null
不错,可以搞个开源项目。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2011-03-20 15:58 | Lucifer
顶  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-21 09:59 | boboman
实现DirectUI,可以参考upp的方法。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2011-03-21 12:22 | Jcily
顶你。关注

楼主很久没有写博了。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2011-03-21 14:39 | avlee
这个主意不错,什么想法导致使用gdiplus代替skia呢?  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-21 14:44 | 万连文
因为skia的代码有好几M,比起之外所有的代码总量还要大几倍,仅仅是因为这个原因。当然,我在接口层面还是尽量维持,以防有人替换回去。skia不错,作为安卓的底层图形引擎,授权方式不是BSD的。gdiplus的很多概念以及编程接口都和skia一致。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2011-03-21 17:31 | Ken
楼主很能坚持,赞

我也曾经妄想重用ie5的泄漏代码,但是看了数个星期后放弃了。呵呵

我对界面方面的经历和楼主很相似,只不过在知道 DirectUI 后,转到一个跨平台的Windowless UI 的开源实现 http://upp.sf.net,我们成功应用并开发了2个商业软件

其内有图文混排等类似HTML功能实现,较为稳定

关键其编程思想很有创意:嵌入png资源, Layout 实现方式等
当然其代码量在40W行的规模上,其作者是一群很低调、很老的人。
  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-21 18:46 | avatasia
@Ken
刚研究了ksafe的代码,chromium的一年前也研究过。
gdiplus的东西,如果开发轻巧的东西,用这个感觉不太好,部署起来又多了个dll。

关于图文并排,ksafe的xml里较弱化的实现了这个功能,如果复杂点,需要引入richedit控件,还是与directUI的思想有点偏差。

豆瓣的电台 用了这么一套框架,OneRing + QT
http://code.google.com/p/onering-desktop/
我还没时间去研究,感兴趣的话,期待你的评价。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-21 18:57 | 万连文
@avatasia
也可以集成WebBrowser来实现,我这边做了一个电台就是采取这种办法。当然,我还是想能多一些native的开发能力,多一些技术选择。集成flash或者网页,也是不错的方案。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-22 11:35 | 小不点
牛逼! 无窗口界面开发,是不是类似于大多数游戏中的界面,几乎与HWND这些无关了,自己绘制,自己处理消息??  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-22 17:13 | 小程
不错,在Google reader里看到这篇文章,挺感兴趣的,虽然主业不做UI开发,但是曾经做过,目前也在用QT,就来关注一下,加油,期待后续!  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-28 19:47 | Iron
坚持做一件事,不断追求,做到极致,楼主真人才也~~~  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-03-29 15:21 | 甘草
顶!我从CSDN过来的。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-04-10 00:04 | 游戏桔子
我也做UI,3-4年了。也研究过chrome的代码过。做了一个简单的无窗口widget界面框架。不过没楼主哪样把整个给抠出来了。喜欢研究各式各样的代码。有收藏癖好。。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-06-01 10:17 | 李现民
兄弟你是完美的吧? 这个框架我在内部bbs上见过, 但rtx上怎么没有你的名字呢?  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2011-06-01 13:12 | 万连文
@李现民
五月初我辞职了  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-06-02 09:43 | 李现民
@万连文
哈哈, 现在哪高就呢?  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2011-12-27 15:32 | 开心日记
博主 很是佩服你的能力,我已经认真看了你写的经验积累,也下载了你的作品,要好好学习,呵呵,thank you  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2012-01-01 17:15 | 贝壳
1>------ 已启动生成: 项目: gfx, 配置: Debug Win32 ------
2>------ 已启动生成: 项目: view_framework, 配置: Debug Win32 ------
1>正在编译...
2>正在编译...
1>native_theme_win.cpp
2>dialog_client_view.cpp
2>正在编译...
1>正在创建库...
2>default_theme_provider.cpp
1>生成日志保存在“file://c:\Users\Will\Desktop\QVMKiller\gfx\Debug\BuildLog.htm”
1>gfx - 0 个错误,0 个警告
3>------ 已启动生成: 项目: test_base, 配置: Debug Win32 ------
3>正在链接...
2>正在编译...
2>drop_helper.cpp
2>正在编译...
2>native_view_host_win.cpp
3>正在嵌入清单...
2>正在编译...
2>native_view_host.cpp
2>正在创建库...
3>生成日志保存在“file://c:\Users\Will\Desktop\QVMKiller\test_base\Debug\BuildLog.htm”
3>test_base - 0 个错误,0 个警告
4>------ 已启动生成: 项目: test_view, 配置: Debug Win32 ------
4>正在链接...
4>LINK : fatal error LNK1104: cannot open file '../lib\lib_view_framework-vc80-mt-sd.lib'
4>生成日志保存在“file://c:\Users\Will\Desktop\QVMKiller\test_view\Debug\BuildLog.htm”
4>test_view - 1 个错误,0 个警告
2>生成日志保存在“file://c:\Users\Will\Desktop\QVMKiller\view_framework\Debug\BuildLog.htm”
2>view_framework - 0 个错误,0 个警告
========== 生成: 3 已成功, 1 已失败, 4 最新, 0 已跳过 ==========
  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2012-10-11 12:13 | Demon
请问万兄,xframework是基于哪个版本的chrome ?
我想去下一个, 然后比照学习, 谢谢.
  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2012-10-11 15:16 | 万连文
@Demon
这个版本很老了,我自己也记不住,当初最遗憾的就是没有前瞻性,保持跟踪,不过那样又会源码很大不便于学习,有利有弊。如果你一时无法接受Chromium那么大工程,可以看xframework好了,小而干净,学习起来更容易掌握。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2012-10-11 20:58 | Demon
@万连文
嗯,我喜欢小工程.今天下了一个最新的版本(太大了,压缩包1.8G,展开接近6G),然后又下了一个最早的版本,revision标号1.0.154. 不过大的小的都是一头雾水.

xframework的确是小而干净的好东西, 方便上手. 今天发现 examples/chrome 运行有个bug, 就是点 tab上的红叉后, 屏幕没有变化. 如果被关的是当前focus,则立即空指针崩溃. 看了一下午,没找到原因.  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2012-10-11 21:42 | 万连文
@Demon
那个工程剥离出来的不完整,仅仅用于学习参考,我也没有继续维护。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2013-07-11 16:10 | hikaruxx
你好,请问豌豆荚的界面是不是也是基于x-framework,还是基于最新的chromium??  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇[未登录]
2013-08-09 14:15 | Brent
一直在疑惑迅雷等软件的界面开发方法。谢谢你的博客,让我了解到了这一些GUI开发知识。  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2014-09-27 11:17 | 余上
楼主,你是自己实现了NativeWidgetPrivate接口吗?  回复  更多评论
  
# re: 基于Chrome开源提取的界面开发框架开篇
2014-09-27 11:24 | 余上
看了一下您的代码,貌似
https://code.google.com/p/x-framework/source/browse/trunk/library/view/widget/native_widget_win.h
是chromium库中的文件吧。记得这个文件在以前的chromium代码中是有的,貌似目前最新的chromium代码中已经没有这个文件了。  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理


简历下载
联系我

<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

常用链接

留言簿(66)

随笔分类

随笔档案

相册

搜索

  •  

最新评论

阅读排行榜

评论排行榜