HTMLayout界面技术研究

原文地址：http://blog.sina.com.cn/s/blog_44f68c960100sgdl.html

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

 

自己做的一些界面展示