HTMLayout界面技术研究

tttk 2011-03-23 11:57:47
为软件设计一个漂亮的界面,是每一个软件开发者的梦想和目标。诚然,越来越“智能化”的快速开发工具(RAD),在给予开发者快捷高效的开发效率的同时,也剥夺了越来越多开发者在软件界面上的创造性。

•如果你是一个VC/VB/Delphi等桌面工具的开发人员,对传统开发工具的界面设计充满乏味;
•如果你希望自己的软件界面充满个性,不再受锢于Windows界面的制约;
•如果你有一点HTML/CSS的基础和一些界面设计的灵感
•如果你喜欢钻研,为了新技术而乐于交流
•如果你想了解或深入HTMLayout,欢迎阅读本文章。
•加入HTMLayout的研究群:145775715

什么是HTMLayout

HTMLayout是一个免费的开源界面库(核心未开源),以DLL的方式运行,并提供一个API的调用接口和一系列的C++封装和sample例程。HTMLayout相当于一个轻量级浏览器引擎,可以高效的解析和渲染HTML网页。其几乎支持所有的HTML元素和CSS3标准,并根据界面库的特征,做了很多有用的功能性扩展,简要列举如下:

1.强大的CSS+扩展,支持九宫格的图片扩展和拉伸模式,增强了容器的前景和背景图片填充能力,支持PNG图片透明和动画;
2.支持多样化功能强大的布局模式,有效了解决了标准HTML中流模式布局的不足;
3.功能完善的事件传播机制和定时机制,通过behavior行为在应用中通过c++类和网页元素进行交互,制作网页效果易如反掌;
4.功能齐全的字符串处理和及c++类,并提供了功能完善的JSON字符串和类Variant的VALUE值类型,有效的解决多字符/UNICODE/UTF8/BYTE等字符串之间的转换和操作。
5.强大的图像处理API,可以在任何的HTML元素之上绘图。
6.支持自定义控件,例如Flash、Chart等第三方ActiveX元素的绘制,方便了界面库的扩展;
7.运行速度飞快,占用内存低,性能高效。
8.和DirectUI一样,控件以无窗口模式运行,所有的控件都是绘制在界面上;

HTMLayout的应用

目前,基于HTMLayout的应用在全世界已经有成千上万个。在HTMLayout的官方网站上,列举了一些比较知名的企业:http://www.terrainformatica.com/customers.whtm

•Symantec Corporation
•Hewlett-Packard Corporation
•Motorola company
•Real Networks, Inc. •Alawar Entertainment, Inc. •EverNote Corporation •Munnin •Gaijin Entertainment •ALWIL Software, home of the AVAST! •Maxthon •BitDefender •SpamFighter

国内的应用,例如傲游浏览器3.0,其界面基于HTMLayout设计。由于HTMLayout中文文档缺乏,且早些年处于商业收费状态,在国内的应用并不广泛,甚至很少有人谈论。作为这个技术的受益者,本人建立一个推广群,希望能带动这个技术的发展。群:145775715 欢迎加入!



同传统的IE浏览器对比

作为对比,IE浏览器也可以通过ActiveX嵌入到对话框中的方式进行基于Web的开发,但IE浏览器作为一个界面引擎有以下不足:

1.IE浏览器对HTML标准和CSS支持不足,不同版本的支持经常有很大差异。导致在不同的客户端上部署经常出现问题;
2.IE基于COM模型集成,应用程序的代码与IE之间通讯困难,往往需要大量的COM接口类进行辅助,而且字符串形式单一,很多交互通过JS代码方式进行,性能低下;
3.图片透明和扩展不灵活,不能支持复杂的背景和前景图片;
4.流模式的布局在支持复杂的网页布局方面力不从心。
5.加载速度慢,内存占用高。

同传统的贴图方式比较

传统的贴图界面具有较强的用户群体,主要是通过把界面分隔成小块的图片,在界面更新时绘制到界面的对应位置。这种方式完全模拟了Windows界面处理的逻辑,在性能上具有较大优势。但缺点依然很显著:

1.界面的切割相当麻烦,用户需要精确的知道切割的坐标和大小,稍有不慎便面目全非;
2.仅支持界面的换肤,功能单一,对界面元素和系统之间的交互性没有任何支持;
3.缺乏一个统一的标准来统一,各种API的使用方式大相径庭,各显神通

同DirectUI的对比

受到MSN Messager界面技术的影响,DirectUI近几年有渐热的趋势,很多技术人员开始研究DirectUI的原理。DirectUI的原理其实很简单,也是通过图片绘制的方式把界面和控件绘制在一个平面空间上,摆脱了传统windows中父子控件层层嵌套的事件传播机制,并提供基于脚本的界面交互机制,在性能方面具有较大优势。缺点如下:

1.目前缺乏统一的技术规范和文档支持,很多商业库实行技术封锁,卖价高昂,让普通开发者望尘莫及;
2.开源库功能简单,缺乏有效的文档和界面设计器支持,开发效率低下;
3.缺乏如HTML中DOM元素一样的灵活的层次关系,系统和界面交互较为复杂;
4.具有较高的学习曲线。
...全文
9395 点赞 收藏 30
写回复
30 条回复
c10682 2013年04月16日
HTMLayout 仿QQ2013 登录界面: 源码下载




回复 点赞
Wildwolf 2013年04月10日
随着软件上的功能越来越成熟了,在UI上可以放更多的时间。近段时间一直想找一种适用的界面技术。HTMLayout似乎不错。
回复 点赞
weiys9532 2013年03月16日
加入,讨论一下
回复 点赞
c10682 2013年03月07日
1. HTMLayout 现在还是挺不错的,最近修正Bug的频率已经很少,能成功运用在这么多成功的产品上就说明了还是比较稳定的,使用过程中遇到一些小问题这个什么界面库也都难免的。
2. HTMLayout 使用behavior扩展还是很方便的,毕竟只是用来做界面而已,其实不开源的好处是保持了一致性,没有必要去了解太多的细节。真有需要的话,HTMLayout的源码也是可以购买的。
3. 跨平台有他的优势,同样有他的劣势,跨是要付出代价的,例如QT,CEF他跨平台,可是他的DLL有十几MB、甚至是几十MB,跟几百KB的HTMLayout就没得比了,如果是开发一些共享软件,体积还是很重要的。

HTMLayout实现的仿iPad界面:点这里下载完整源码


HTMLayout实现的仿360界面:点这里下载源代码

回复 点赞
hlqyq 2012年07月11日
再说说其优点:
1、概念上应等同于xul/xaml,设计理念远高于QT/wxWidget等库,区别是:QT等库用程序员写代码去构建界面,Htmlayout用打字员去打印界面;
2、接口简单,标准的操作dom树即可,不像一个QWidget,如果你想设置文本,那么是setCaption/setTitle/setWindowText/setValue?不知道,没有QT帮助,寸步难行,加上VS的智能提示的不可靠,足够让你发狂;
3、扩充容易,想想将Scitilla和Coin3d嵌入到网页中,支持各种浏览器看看;想想嵌入二次开发语言如python看看;想想调用原生API看看。这些都是浏览器中难以实现的;
回复 点赞
hlqyq 2012年07月11日
我使用该东西很久了,估计都6年了,先说说其缺点:
1、不开源,代码质量不是很稳定,估计测试不充分。很多在低版本成立的东西,在高版本就不一定成立;
2、未定义更改的用户参与扩充机制,是否发生更改全由作者确定。不像python的PEP方式;
3、不跨平台,只能在Windows/WinCE(已经废了)上使用,其实完全可以做到跨平台的;
回复 点赞
Conggang 2012年07月06日
支持Htmlayout
回复 点赞
向立天 2011年04月29日
您好
我是本版版主
此帖已多日无人关注
请您及时结帖
如您认为问题没有解决可按无满意结帖处理
另外本版设置了疑难问题汇总帖
并已在版面置顶
相关规定其帖子中有说明
您可以根据规定提交您帖子的链接
如您目前不想结帖只需回帖说明
我们会删除此结帖通知

见此回复三日内无回应
我们将强制结帖
相关规定详见界面界面版关于版主结帖工作的具体办法
回复 点赞
QQ282881515 2011年04月02日
挺感兴趣的 但网上资料好少啊
回复 点赞
qiuchengw 2011年04月02日
[Quote=引用 14 楼 jameshooo 的回复:]

htmlayout老了
[/Quote]

为何?
回复 点赞
QQ282881515 2011年04月02日
听激动了 搞了半天终于配置好了
VC6.0下 需要支持6.0最后一个版本的SDK 汗
SDK地址 以及如何处理已经在
http://blog.csdn.net/QQ282881515/archive/2011/04/02/6298757.aspx里边了
回复 点赞
bfcode 2011年03月31日
qhtml其实也不错,只是现在不更新了,代码值得一看
回复 点赞
houxidong 2011年03月31日
[Quote=引用 10 楼 tttk 的回复:]
引用 6 楼 fafa_cai 的回复:
我仔细研究了一下HTMLayout库,感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。


htmlayout只是提供了一个引擎,剩下的就是你自己的想象力和创造力。html+css的组合,几乎可以实现大多数复杂的界面。

至于你说的相对复杂的控件,我不知道指的什么,世上没有包治百病的良药,软件也一样。
[/Quote]

这对程序员的要求太高了,一般html+css这是web程序员需要掌握的,而mfc一般是桌面程序员要掌握的。如果在做网页界面,那么dw,fp这些都可以用,如果做mfc界面,那么Libuidk就很精彩,即使纯mfc,也有CHtmlDialog可以用web做界面,或者使用CHtmlView来做。像wpf,也仅仅是使用xml语言来组织界面,并不要求程序员去了解html,甚至xml也不需要了解,因为它提供了所见即所得的工具来生成xaml语言。
回复 点赞
jameshooo 2011年03月30日
htmlayout老了
回复 点赞
g315580086 2011年03月30日
受教了
回复 点赞
tttk 2011年03月30日
[Quote=引用 11 楼 achellies 的回复:]
不开源,使用起来还是很不爽的,htmlayout无非就是比较轻量级,要不直接就可以用webkit了
[/Quote]

如果单从浏览器引擎方面考量,htmlayout和webkit这样的工具相比,的确算得上是轻量级,而且我的感受是,htmlayout甚至还算不上一个合格的浏览器引擎,因为它不支持很多HTML标记,不支持javascript,不支持DOM。

htmlayout说到底还是一种界面库引擎,其采用HTML作为其标记语言,同一些UI工具所谓的XML标记一样,不过是HTML+CSS,听起来更像网页而已。

我不会采用webkit去开发桌面,基于脚本(JS)的引擎,本身就存在性能问题。htmlayout完全采用c++语言去编写业务代码,更利于代码的调试和优化,而且充分利用了c++开发工具的智能辅助,比起js代码的跟踪和调试来,真的要方便很多。而且,也更好的保护了代码。
回复 点赞
achellies 2011年03月29日
不开源,使用起来还是很不爽的,htmlayout无非就是比较轻量级,要不直接就可以用webkit了
回复 点赞
tttk 2011年03月24日
[Quote=引用 6 楼 fafa_cai 的回复:]
我仔细研究了一下HTMLayout库,感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。
[/Quote]

htmlayout只是提供了一个引擎,剩下的就是你自己的想象力和创造力。html+css的组合,几乎可以实现大多数复杂的界面。

至于你说的相对复杂的控件,我不知道指的什么,世上没有包治百病的良药,软件也一样。
回复 点赞
tttk 2011年03月24日
[Quote=引用 8 楼 b2b160 的回复:]
这个不能说是开源的吧?

If this is open source.Then windows is too.

Why I can't input chinese sometime.
[/Quote]

htmlayout是免费而不是开源,开源是指完全公开源代码,官方license只是要求开发者在关于对话框中放上htmlayout的版权即可。作为一个开发者,我们只是要使用其功能,至于其完善和修复这些事,不用我们去关心。

至于中文输入法不能输入的问题,一般是发生在模式对话框中,微软的MFC和WTL 对话框解决方案有一个不会说清的问题,就是在消息泵中屏蔽了WCHAR消息,因此htmlayout不能进一步进行处理。作为使用者,我也曾遇到过此问题,并在官方论坛里寻求帮助。我的解决思路是,可以通过拦截并实现自己的消息泵循环来解决。
回复 点赞
发动态
发帖子
界面
创建于2007-09-28

7975

社区成员

11.5w+

社区内容

VC/MFC 界面
社区公告
暂无公告