HTMLayout界面技术研究

为软件设计一个漂亮的界面，是每一个软件开发者的梦想和目标。诚然，越来越“智能化”的快速开发工具（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.具有较高的学习曲线。

30 个解决方案

#1

加入讨论一下

#2

该回复于2011-03-23 13:37:22被版主删除

#3

该回复于2011-03-23 13:37:22被版主删除

#4

该回复于2011-04-12 17:11:34被版主删除

#5

该回复于2011-03-23 14:54:23被版主删除

#6

我仔细研究了一下HTMLayout库，感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。

#7

引用 6 楼 fafa_cai 的回复:

我仔细研究了一下HTMLayout库，感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。

+++

#8

这个不能说是开源的吧?

If this is open source.Then windows is too.

Why I can't input chinese sometime.

#9

引用 8 楼 b2b160 的回复:

这个不能说是开源的吧?

If this is open source.Then windows is too.

Why I can't input chinese sometime.

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

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

#10

引用 6 楼 fafa_cai 的回复:

我仔细研究了一下HTMLayout库，感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。

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

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

#11

不开源，使用起来还是很不爽的，htmlayout无非就是比较轻量级，要不直接就可以用webkit了

#12

引用 11 楼 achellies 的回复:

不开源，使用起来还是很不爽的，htmlayout无非就是比较轻量级，要不直接就可以用webkit了

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

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

我不会采用webkit去开发桌面，基于脚本（JS）的引擎，本身就存在性能问题。htmlayout完全采用c++语言去编写业务代码，更利于代码的调试和优化，而且充分利用了c++开发工具的智能辅助，比起js代码的跟踪和调试来，真的要方便很多。而且，也更好的保护了代码。

#13

受教了

#14

htmlayout老了

#15

引用 10 楼 tttk 的回复:

引用 6 楼 fafa_cai 的回复:
我仔细研究了一下HTMLayout库，感觉实现能力相当有限。比如一些相对复杂的控件似乎无法实现。


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

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

这对程序员的要求太高了，一般html+css这是web程序员需要掌握的，而mfc一般是桌面程序员要掌握的。如果在做网页界面，那么dw,fp这些都可以用，如果做mfc界面，那么Libuidk就很精彩，即使纯mfc，也有CHtmlDialog可以用web做界面，或者使用CHtmlView来做。像wpf，也仅仅是使用xml语言来组织界面，并不要求程序员去了解html，甚至xml也不需要了解，因为它提供了所见即所得的工具来生成xaml语言。

#16

qhtml其实也不错，只是现在不更新了，代码值得一看

#17

该回复于2011-04-01 16:07:44被版主删除

#18

引用 14 楼 jameshooo 的回复:

htmlayout老了

为何?

#19

挺感兴趣的  但网上资料好少啊  

#20

听激动了  搞了半天终于配置好了
VC6.0下  需要支持6.0最后一个版本的SDK  汗
SDK地址  以及如何处理已经在
http://blog.csdn.net/QQ282881515/archive/2011/04/02/6298757.aspx里边了

#21

您好
我是本版版主
此帖已多日无人关注
请您及时结帖
如您认为问题没有解决可按无满意结帖处理
另外本版设置了 疑难问题汇总帖
并已在版面置顶
相关规定其帖子中有说明
您可以根据规定提交您帖子的链接
如您目前不想结帖只需回帖说明
我们会删除此结帖通知

见此回复三日内无回应
我们将强制结帖
相关规定详见界面 界面版关于版主结帖工作的具体办法

#22

支持Htmlayout

#23

我使用该东西很久了，估计都6年了，先说说其缺点：
1、不开源,代码质量不是很稳定，估计测试不充分。很多在低版本成立的东西，在高版本就不一定成立；
2、未定义更改的用户参与扩充机制，是否发生更改全由作者确定。不像python的PEP方式；
3、不跨平台，只能在Windows/WinCE(已经废了)上使用，其实完全可以做到跨平台的；

#24

再说说其优点：
1、概念上应等同于xul/xaml,设计理念远高于QT/wxWidget等库，区别是：QT等库用程序员写代码去构建界面,Htmlayout用打字员去打印界面；
2、接口简单，标准的操作dom树即可，不像一个QWidget，如果你想设置文本,那么是setCaption/setTitle/setWindowText/setValue?不知道，没有QT帮助，寸步难行,加上VS的智能提示的不可靠，足够让你发狂；
3、扩充容易，想想将Scitilla和Coin3d嵌入到网页中，支持各种浏览器看看；想想嵌入二次开发语言如python看看；想想调用原生API看看。这些都是浏览器中难以实现的；

#25

1. HTMLayout 现在还是挺不错的，最近修正Bug的频率已经很少，能成功运用在这么多成功的产品上就说明了还是比较稳定的，使用过程中遇到一些小问题这个什么界面库也都难免的。
2. HTMLayout 使用behavior扩展还是很方便的，毕竟只是用来做界面而已，其实不开源的好处是保持了一致性，没有必要去了解太多的细节。真有需要的话，HTMLayout的源码也是可以购买的。
3. 跨平台有他的优势，同样有他的劣势，跨是要付出代价的，例如QT,CEF他跨平台，可是他的DLL有十几MB、甚至是几十MB,跟几百KB的HTMLayout就没得比了，如果是开发一些共享软件，体积还是很重要的。

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


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

#26

HTMLayout实现 仿WIN8 风格界面：源码下载

#27

加入，讨论一下

#28

该回复于2013-03-28 08:57:38被管理员删除

#29

随着软件上的功能越来越成熟了，在UI上可以放更多的时间。近段时间一直想找一种适用的界面技术。HTMLayout似乎不错。

#30

HTMLayout 仿QQ2013 登录界面:  源码下载