<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UIEASY界面库技术博客</title>
	<atom:link href="http://www.uieasy.cn/blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.uieasy.cn/blog</link>
	<description>前沿界面开发-完整界面库解决方案</description>
	<lastBuildDate>Tue, 31 May 2011 08:04:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>DSkinLite界面库的使用：Step by Step</title>
		<link>http://www.uieasy.cn/blog/?p=653</link>
		<comments>http://www.uieasy.cn/blog/?p=653#comments</comments>
		<pubDate>Tue, 31 May 2011 07:52:56 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinLite界面库]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=653</guid>
		<description><![CDATA[UIeasy界面库系列产品之一：DSkinLite界面库的使用 1.         下载试用版本并安装 DSkinLite界面库下载：http://www.uieasy.cn/downloads.html 在安装目录结构如下： 目录解释如下： bin – dskinlite dll 文件，示例应用程序，皮肤文件目录 demos – 比较全面的示例工程目录 doc – 文档目录 examples – 简单特性示例工程目录 include – 头文件目录 lib – dll 导入库目录，分为unicode，多字节两个文件 2.         拷贝dll，lib导入库，include头文件至应用程序相应目录下 因为试用版本的dskinlite为debug版本，依赖于msvcp80d.dll等库，因此这些文件需一同拷贝。 3.         引用头文件并连接lib库 如下所示： #include &#8220;..\include\dskinlite.h&#8221; #include &#8220;..\include\dskindef.h&#8221; 头文件引用可以考虑放置在stdafx.h文件中 4.         编写皮肤配置文档，即XML编写 如果您是第一次了解DSkinLite，可能会对皮肤配置文档XML有些不知如何下手。您可不必为此担忧，DSkinLite的XML语法相当简单，只有5-6个常用的标签。从我们目前得到的反馈来看，一般开发人员可以在2-3天内掌握编写方法，在一周内熟练使用。 如果第一次您只是测试评估DSkinLite，可以考虑先使用我们示例中提供的皮肤配置文件。也可以根据我们提供的文档及其他界面开发教程来学习编写xml文件。 5.         程序中加载皮肤 此部分工作，首先是加载皮肤配置文件目录，如： BOOL CXXApp::InitInstance() { &#8230;&#8230;. dsLoadskin(_T(&#8220;TreeListSkin&#8220;));   &#8230;&#8230;&#8230; } int CXXApp::ExitInstance() { dsExitSkin(); [...]]]></description>
			<content:encoded><![CDATA[<p>UIeasy<a href="http://www.uieasy.cn/" target="_blank">界面库</a>系列产品之一：<a href="../../dskinlite/" target="_blank"><strong>DSkinLite界面库</strong></a><span style="color: #000000;">的使用</span></p>
<p>1.         <strong>下载</strong><span style="color: #000000;"><a href=" http://www.uieasy.cn/dskinlite/" target="_blank"><strong></strong></a></span><strong>试用版本并安装</strong></p>
<p>DSkinLite界面库下载：<a href="../../downloads.html">http://www.uieasy.cn/downloads.html</a></p>
<p>在安装目录结构如下：</p>
<p>目录解释如下：<br />
bin – dskinlite dll 文件，示例应用程序，皮肤文件目录<br />
demos – 比较全面的示例工程目录<br />
doc – 文档目录<br />
examples – 简单特性示例工程目录<br />
include – 头文件目录<br />
lib – dll 导入库目录，分为unicode，多字节两个文件</p>
<p>2.         <strong>拷贝dll</strong><strong>，lib</strong><strong>导入库，include</strong><strong>头文件至应用程序相应目录下</strong></p>
<p>因为试用版本的dskinlite为debug版本，依赖于msvcp80d.dll等库，因此这些文件需一同拷贝。</p>
<p>3.         <strong>引用头文件并连接lib</strong><strong>库</strong><br />
如下所示：<br />
#include &#8220;..\include\dskinlite.h&#8221;<br />
#include &#8220;..\include\dskindef.h&#8221;<br />
头文件引用可以考虑放置在stdafx.h文件中</p>
<p>4.         <strong>编写皮肤配置文档，即XML</strong><strong>编写</strong></p>
<p><strong>如果您是第一次了解DSkinLite</strong><strong>，可能会对皮肤配置文档XML</strong><strong>有些不知如何下手。您可不必为此担忧，DSkinLite</strong><strong>的XML</strong><strong>语法相当简单，只有5-6</strong><strong>个常用的标签。从我们目前得到的反馈来看，一般开发人员可以在2-3</strong><strong>天内掌握编写方法，在一周内熟练使用。<br />
</strong> 如果第一次您只是测试评估DSkinLite，可以考虑先使用我们示例中提供的皮肤配置文件。也可以根据我们提供的文档及其他<a href="http://www.uieasy.cn/tutorial.html" target="_blank">界面开发教程</a>来学习编写xml文件。</p>
<p>5.         <strong>程序中加载皮肤</strong><br />
此部分工作，首先是加载皮肤配置文件目录，如：<br />
BOOL CXXApp::InitInstance()<br />
{<br />
&#8230;&#8230;.<br />
<strong>dsLoadskin</strong>(_T(&#8220;<strong>TreeListSkin</strong>&#8220;));   &#8230;&#8230;&#8230;<br />
}</p>
<p>int CXXApp::ExitInstance()<br />
{<br />
<strong>dsExitSkin</strong>();<br />
}</p>
<p>此次调用后，即可在程序中开始对窗口进行美化，如：</p>
<p>BOOL CDlgButton::OnInitDialog()<br />
{<br />
CDialog::OnInitDialog();<br />
<strong>dsSkinWindow( GetSafeHwnd(), SKIN_TYPE_DIALOG, _T(“dialog”), TRUE);</strong></p>
<p>return TRUE;<br />
}</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=653</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅谈软件界面运行速度测试</title>
		<link>http://www.uieasy.cn/blog/?p=648</link>
		<comments>http://www.uieasy.cn/blog/?p=648#comments</comments>
		<pubDate>Fri, 08 Apr 2011 10:15:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[界面编程]]></category>
		<category><![CDATA[uieasy]]></category>
		<category><![CDATA[界面库]]></category>
		<category><![CDATA[软件界面]]></category>
		<category><![CDATA[运行效率]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=648</guid>
		<description><![CDATA[对于软件界面来说，运行效率低可能导致非常糟糕的用户体验。同样对于我们的界面库产品来说也是这样，如果在引入炫丽的界面的同时，损失了软件产品的运行效率，那么对于客户的软件产品来说，是得不偿失的。UIEASY在设计每一款界面相关产品时，产品的效率是第一步需要设计考虑的问题，同时在整个产品的发展过程中，效率也是我们始终关注的重点。 界面库只是整个软件的一部分，很多因素都会影响到整个软件的运行效率，比如程序逻辑，开发人员对界面开发的理解程度等。在此我们将多年来在软件界面开发方面的经验做一个分享，包括界面开发需要注意的要点，及从那些方面来测试及改进软件运行效率。当然这些内容是常见的一些方法和策略，具体到每一个软件，需要具体测试和分析，如您对软件运行效率不满意，可以与我们联系，我们可以协助您分析软件运行效率的各个方面。 软件运行性能测试要点： 操作系统启动后，软件首次启动时间。即从点击exe图标或者桌面图标，到主窗口显示出来的时间。 首次启动时间一般耗时较长，如果处理的不当，软件启动时间可能高达几十秒，会带来糟糕的用户体验。 测试软件界面重绘效率以其他窗口覆盖软件窗口，并来回移动，观察软件窗口的重绘情况。 拖动软件窗口，拉大，缩小，观察是否感觉迟钝。 软件界面基本操作，观察是否有明显停顿感，明显界面闪烁。 可考虑改进的方案： CWnd窗口，代替DoModal 对于MFC来说，CDialog::DoModal相对来说会导致多次OnSize操作，同时也会消耗更多时间。对于主窗口来说，如果在启动时间等方面有较高要求，可考虑使用CWnd Create来代替DoModal操作。 尽量减少重画的工作 在程序撰写的任何地方，尽量减少重画相关API的调用，如Invalidate等；尤其在会被频繁调用的函数中。 测试是否多次触发OnSize操作 通过调试，日志输出等方式查看是否有多余的OnSize操作，以便相应作出处理。 软件模块化，做延迟处理。 软件模块化，主要指尽量避免同时处理大量窗口，大量逻辑。最常见的比如Tab，列表性质的界面，可能一次只需要处理的是当前显示的窗口，其他隐藏窗口的操作，可以采用延迟的方式完成，即需要显示出来的时候再处理一些窗口大小移动，界面skin等操作。 减少文件读写操作，在整个软件运行中，外部的文件读写操作相对于与程序运行来说，会占用更多的资源。 一般来说，硬盘操作是最为耗时的，尤其是此文件被第一次读取时。软件中也要考虑尽量减少文件读写操作。 IE控件及RichEdit等控件的加载。一般来说含有IE控件的界面，首次加载时会慢很多。按我们之前测试，这个时间有时高达5-6秒。 IE控件过多，不当的使用会对软件速度造成很大的影响。我们的一些经验，不同的操作系统，不同的IE版本都会对软件速度产生影响。可以考虑延迟加载IE控件，或者在对IE需要不太多的情况下，使用其他简单控件代替IE控件的使用。 UIEASY在运行效率方面为您做了那些优化： 图片资源按需延迟加载。如果是从文件目录读写，则图片文件的读写会耗时很多。DSkinLite等界面库产品图片采取按需延迟加载。即图片只在最需要的时候读取，解析。 内存DC缓存。 采用这种方式缓存窗口界面，窗口的界面只会在“最需要的”时候重绘。 独立的图形库。软件界面绘制，不同于web，flash等界面，可以针对于软件界面的特点，对图形绘制库做优化，以提高效率。 绘制算法优化，产品内部会根据不同控件的特点，优化绘制方式，尽量减少绘制次数。]]></description>
			<content:encoded><![CDATA[<p>对于<strong>软件界面</strong>来说，<strong>运行效率</strong>低可能导致非常糟糕的用户体验。同样对于我们的<a href="http://www.uieasy.cn" target="_blank">界面库</a>产品来说也是这样，如果在引入炫丽的界面的同时，损失了软件产品的运行效率，那么对于客户的软件产品来说，是得不偿失的。UIEASY在设计每一款界面相关产品时，产品的效率是第一步需要设计考虑的问题，同时在整个产品的发展过程中，效率也是我们始终关注的重点。</p>
<p><span id="more-648"></span></p>
<p>界面库只是整个软件的一部分，很多因素都会影响到整个软件的运行效率，比如程序逻辑，开发人员对界面开发的理解程度等。在此我们将多年来在软件界面开发方面的经验做一个分享，包括界面开发需要注意的要点，及从那些方面来测试及改进软件运行效率。当然这些内容是常见的一些方法和策略，具体到每一个软件，需要具体测试和分析，如您对软件运行效率不满意，可以与我们联系，我们可以协助您分析软件运行效率的各个方面。</p>
<p>软件运行性能测试要点：</p>
<ol>
<li>操作系统启动后，软件首次启动时间。即从点击exe图标或者桌面图标，到主窗口显示出来的时间。<br />
首次启动时间一般耗时较长，如果处理的不当，软件启动时间可能高达几十秒，会带来糟糕的用户体验。</li>
<li>测试软件界面重绘效率以其他窗口覆盖软件窗口，并来回移动，观察软件窗口的重绘情况。<br />
拖动软件窗口，拉大，缩小，观察是否感觉迟钝。</li>
<li><strong>软件界面</strong>基本操作，观察是否有明显停顿感，明显界面闪烁。</li>
</ol>
<p>可考虑改进的方案：</p>
<ol>
<li>CWnd窗口，代替DoModal<br />
对于MFC来说，CDialog::DoModal相对来说会导致多次OnSize操作，同时也会消耗更多时间。对于主窗口来说，如果在启动时间等方面有较高要求，可考虑使用CWnd Create来代替DoModal操作。</li>
<li>尽量减少重画的工作<br />
在程序撰写的任何地方，尽量减少重画相关API的调用，如Invalidate等；尤其在会被频繁调用的函数中。</li>
<li>测试是否多次触发OnSize操作<br />
通过调试，日志输出等方式查看是否有多余的OnSize操作，以便相应作出处理。</li>
<li>软件模块化，做延迟处理。<br />
软件模块化，主要指尽量避免同时处理大量窗口，大量逻辑。最常见的比如Tab，列表性质的界面，可能一次只需要处理的是当前显示的窗口，其他隐藏窗口的操作，可以采用延迟的方式完成，即需要显示出来的时候再处理一些窗口大小移动，界面skin等操作。</li>
<li>减少文件读写操作，在整个软件运行中，外部的文件读写操作相对于与程序运行来说，会占用更多的资源。<br />
一般来说，硬盘操作是最为耗时的，尤其是此文件被第一次读取时。软件中也要考虑尽量减少文件读写操作。</li>
<li>IE控件及<a title="RichEdit扩展控件-聊天窗口工具截屏预览" href="http://www.uieasy.cn/richedit/?tab=2/" target="_blank">RichEdit</a>等控件的加载。一般来说含有IE控件的界面，首次加载时会慢很多。按我们之前测试，这个时间有时高达5-6秒。<br />
IE控件过多，不当的使用会对软件速度造成很大的影响。我们的一些经验，不同的操作系统，不同的IE版本都会对软件速度产生影响。可以考虑延迟加载IE控件，或者在对IE需要不太多的情况下，使用其他简单控件代替IE控件的使用。</li>
</ol>
<p><span style="color: #3366ff;"><strong>UIEASY</strong></span>在运行效率方面为您做了那些优化：</p>
<ol>
<li>图片资源按需延迟加载。如果是从文件目录读写，则图片文件的读写会耗时很多。<a href="http://www.uieasy.cn/dskinlite/?tab=2">DSkinLite</a>等界面库产品图片采取按需延迟加载。即图片只在最需要的时候读取，解析。</li>
<li>内存DC缓存。 采用这种方式缓存窗口界面，窗口的界面只会在“最需要的”时候重绘。</li>
<li>独立的图形库。软件界面绘制，不同于web，flash等界面，可以针对于软件界面的特点，对图形绘制库做优化，以提高效率。</li>
<li>绘制算法优化，产品内部会根据不同控件的特点，优化绘制方式，尽量减少绘制次数。</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=648</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UIEASY研发管理介绍</title>
		<link>http://www.uieasy.cn/blog/?p=611</link>
		<comments>http://www.uieasy.cn/blog/?p=611#comments</comments>
		<pubDate>Wed, 09 Mar 2011 09:47:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[关于我们]]></category>
		<category><![CDATA[研发管理]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=611</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160; 研发管理的每个环节不仅关系到公司的研发效率，也影响软件产品质量。UIEASY开发团队拥有在国内著名互联网公司开发客户端的经验，不仅将丰富的界面开发经验带到UIEASY，同时也将成熟的软件研发管理理念带到UIEASY。我们重视软件的研发管理，将其视为公司发展壮大的基石，也视之为高质量软件产品的基础。在本篇文章，我们将介绍UIEASY软件研发从代码管理到产品发布的各个环节。 代码管理 代码管理这块，我们采用了subversion代码管理工具。同时严格采用subversion代码管理理念，每一个版本发布都会标记tag，每一次功能特性提交，bug修正都有详细的消息说明。可以做到随时回滚代码，比较代码，查找相关bug。 &#160; 新需求及bug反馈管理 &#160;&#160;&#160;&#160; 我们采用trac管理系统，管理产品需求及bug。客户通过邮件，电话等方式向我们反馈的bug，需求等我们会在第一时间记录到trac系统并分配开发人员处理。如下图：&#160;&#160;&#160;&#160; &#160;&#160;&#160; Trac系统的引入有效控制和跟踪新需求及bug的处理。 自动编译系统 &#160;&#160; 为有效防止不同计算机环境对编译带来的影响，UIEASY采用独立的电脑来专门负责产品的编译及发布。当有新的版本需要build时，所有开发人员将代码提交至svn服务器。由产品build负责人打开编译机器，执行svn update 更新代码。并通过自动编译脚本，编译不同Visual studio环境下的动态库，静态库相关版本，并通过NSIS脚本工具自动打包。 &#160; &#160; 我们将不断优化研发管理的各个环节，为高质量的软件产品提供基本保障。为客户打造更多高优质的软件产品。如您对我们研发管理有任何建议和意见，我们非常欢迎您与我们联系，共同探讨。]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image5.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image_thumb4.png" width="275" height="122" /></a>     <br />&#160;&#160;&#160;&#160;&#160;&#160; 研发管理的每个环节不仅关系到公司的研发效率，也影响软件产品质量。UIEASY开发团队拥有在国内著名互联网公司开发客户端的经验，不仅将丰富的界面开发经验带到UIEASY，同时也将成熟的软件研发管理理念带到UIEASY。我们重视软件的研发管理，将其视为公司发展壮大的基石，也视之为高质量软件产品的基础。在本篇文章，我们将介绍UIEASY软件研发从代码管理到产品发布的各个环节。</p>
<p> <span id="more-611"></span>
</p>
<ol>
<li>
<h2>代码管理</h2>
<p>代码管理这块，我们采用了subversion代码管理工具。同时严格采用subversion代码管理理念，每一个版本发布都会标记tag，每一次功能特性提交，bug修正都有详细的消息说明。可以做到随时回滚代码，比较代码，查找相关bug。       </p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image2.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image_thumb1.png" width="283" height="506" /></a>&#160; </p>
</li>
<li>
<h2>新需求及bug反馈管理 </h2>
<p>&#160;&#160;&#160;&#160; 我们采用trac管理系统，管理产品需求及bug。客户通过邮件，电话等方式向我们反馈的bug，需求等我们会在第一时间记录到trac系统并分配开发人员处理。如下图：&#160;&#160;&#160;&#160; </p>
<p>&#160;<a href="http://www.uieasy.cn/blog/wp-content/uploads/2011/04/image.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2011/04/image_thumb.png" width="420" height="282" /></a>&#160;&#160; </p>
<p>Trac系统的引入有效控制和跟踪新需求及bug的处理。       </p>
</li>
<li>
<h2>自动编译系统 </h2>
<p>&#160;&#160; 为有效防止不同计算机环境对编译带来的影响，UIEASY采用独立的电脑来专门负责产品的编译及发布。当有新的版本需要build时，所有开发人员将代码提交至svn服务器。由产品build负责人打开编译机器，执行svn update 更新代码。并通过自动编译脚本，编译不同Visual studio环境下的动态库，静态库相关版本，并通过NSIS脚本工具自动打包。       </p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image4.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2011/03/image_thumb3.png" width="421" height="396" /></a>&#160; </p>
</li>
</ol>
<p></p>
</p>
<p>&#160; 我们将不断优化研发管理的各个环节，为高质量的软件产品提供基本保障。为客户打造更多高优质的软件产品。如您对我们研发管理有任何建议和意见，我们非常欢迎您与我们联系，共同探讨。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=611</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>DSkinControl（For MFC）控件库 — dsLayout</title>
		<link>http://www.uieasy.cn/blog/?p=571</link>
		<comments>http://www.uieasy.cn/blog/?p=571#comments</comments>
		<pubDate>Fri, 24 Dec 2010 09:01:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinControl控件库]]></category>
		<category><![CDATA[dskincontrol]]></category>
		<category><![CDATA[dskinlite]]></category>
		<category><![CDATA[dsLayout]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=571</guid>
		<description><![CDATA[dsLayout类用于管理子窗口的位置布局，支持多个splitter参与的窗口布局。支持动态布局，支持同比例拉伸布局，支持最小，最大宽度（高度）设置。 dsLayout产生背景 在MFC/WTL等开发环境中，一直没有一个好用的管理类。其他同类型的Framework，如QT，Android中皆有布局相关的类或者支持。复杂界面的布局管理是非常常用的，这也是其他framework非常完整的支持layout的原因。 促使我们开发这样一个布局类的最直接原因，是在给一个客户调试一个多子窗口，多splitter的窗口时，我们发现为了完成界面布局，客户使用了很多childdialog来做容器，实际上就是要保证一个splitter左右两边是两个窗口。如下图所示： 在此窗口布局中，理论上来讲除了几个splitter， window 1 – windows 6 就可以了，无需其他窗口。在实际上从客户得到的反馈看来，除了以上窗口，还增加了红色方框显示出来的四个子窗口。这四个窗口完全是为了布局窗口而产生了，充做窗口容器。这种做法是为了保证splitter两边始终是两个窗口。而过多的子窗口对windows界面来说，显然不是一件好事，窗口过多会影响绘制效率，同时会使得逻辑程序变得复杂不堪。 产生这种现象的原因是在VC的开发平台长期缺乏一些布局类的支持，导致开发人员也缺乏布局类的开发观念。而实际上在其他平台如QT，Android，WPF等平台，都有很多layout相关类的支持。 鉴于此，我们针对windows界面开发的常用布局，参考其他平台布局类设计，设计dsLayout用于满足类似windows多窗口布局支持。 dsLayout类设计及使用 dsLayout中子元素有两个概念，group和item。如下图所示： 首先整个dsLayout需要指定一个方向模式： m_pMainLayout = new dsLayout( this, Vertical); 如上图所示，这是一个竖直方向的layout。 如果方向是竖直的，那么每个group的高度在任何时候都等于这个layout的高度。我们只能设置这个group的最小宽度，最大宽度，和宽度的一些特性如，FixedStyle，ExpandStyle等。 同理对于方向是水平的也是这样。 我们来看第一列group0的代码语句： int nGroupIndex1 = m_pMainLayout-&#62;AddGroup( FixedStyle); //插入第一列，FixedStyle表示在整个layout宽度变化时（我们拖拽窗口时），此group的宽度不变。 m_pMainLayout-&#62;SetGroupSize( nGroupIndex1, 300); //此group的宽度（高度）。 m_pMainLayout-&#62;SetGroupMinSize( nGroupIndex1, 160); //此group如果位于一个splitter旁边时，其最小宽度（高度）。 int nIndex = m_pMainLayout-&#62;AddItem( nGroupIndex1, m_pMicChildDlg, FixedStyle); //在上面创建的group中，插入一个item。item可以是控件ID，CWnd*或者是spaceitem。 //FixedStyle表示在整个group高度变化时，其高度不变。 m_pMainLayout-&#62;SetItemSize( nGroupIndex1, nIndex, 170); //设置此item的高度。 int [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image5.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb5.png" width="216" height="123" /></a> </p>
<p>dsLayout类用于管理子窗口的位置布局，支持多个splitter参与的窗口布局。支持动态布局，支持同比例拉伸布局，支持最小，最大宽度（高度）设置。</p>
<p> <span id="more-571"></span><br />
<h2>dsLayout产生背景</h2>
<p>在MFC/WTL等开发环境中，一直没有一个好用的管理类。其他同类型的Framework，如QT，Android中皆有布局相关的类或者支持。复杂界面的布局管理是非常常用的，这也是其他framework非常完整的支持layout的原因。</p>
<p>促使我们开发这样一个布局类的最直接原因，是在给一个客户调试一个多子窗口，多splitter的窗口时，我们发现为了完成界面布局，客户使用了很多childdialog来做容器，实际上就是要保证一个splitter左右两边是两个窗口。如下图所示：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image6.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb6.png" width="453" height="550" /></a> </p>
<p>在此窗口布局中，理论上来讲除了几个splitter， window 1 – windows 6 就可以了，无需其他窗口。在实际上从客户得到的反馈看来，除了以上窗口，还增加了红色方框显示出来的四个子窗口。这四个窗口完全是为了布局窗口而产生了，充做窗口容器。这种做法是为了保证splitter两边始终是两个窗口。而过多的子窗口对windows界面来说，显然不是一件好事，窗口过多会影响绘制效率，同时会使得逻辑程序变得复杂不堪。</p>
<p>产生这种现象的原因是在VC的开发平台长期缺乏一些布局类的支持，导致开发人员也缺乏布局类的开发观念。而实际上在其他平台如QT，Android，WPF等平台，都有很多layout相关类的支持。</p>
<p>鉴于此，我们针对windows界面开发的常用布局，参考其他平台布局类设计，设计dsLayout用于满足类似windows多窗口布局支持。</p>
<h2>dsLayout类设计及使用</h2>
<p>dsLayout中子元素有两个概念，group和item。如下图所示：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image7.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb7.png" width="464" height="496" /></a></p>
<p>首先整个dsLayout需要指定一个方向模式：    <br />m_pMainLayout = new dsLayout( this, <strong>Vertical</strong>);     <br />如上图所示，这是一个竖直方向的layout。     </p>
<p>如果方向是竖直的，那么每个group的高度在任何时候都等于这个layout的高度。我们只能设置这个group的最小宽度，最大宽度，和宽度的一些特性如，FixedStyle，ExpandStyle等。     <br />同理对于方向是水平的也是这样。     </p>
<p>我们来看第一列group0的代码语句：     </p>
<pre class="brush: cpp;">int nGroupIndex1 = m_pMainLayout-&gt;AddGroup( FixedStyle);
//插入第一列，FixedStyle表示在整个layout宽度变化时（我们拖拽窗口时），此group的宽度不变。
m_pMainLayout-&gt;SetGroupSize( nGroupIndex1, 300);
//此group的宽度（高度）。
m_pMainLayout-&gt;SetGroupMinSize( nGroupIndex1, 160);
//此group如果位于一个splitter旁边时，其最小宽度（高度）。

int nIndex = m_pMainLayout-&gt;AddItem( nGroupIndex1, m_pMicChildDlg, FixedStyle);
//在上面创建的group中，插入一个item。item可以是控件ID，CWnd*或者是spaceitem。
//FixedStyle表示在整个group高度变化时，其高度不变。
m_pMainLayout-&gt;SetItemSize( nGroupIndex1, nIndex, 170);
//设置此item的高度。

int nSplitterIndex = m_pMainLayout-&gt;AddSplitterItem( nGroupIndex1,FALSE,IDC_STATIC_HORIZ);
//在上面创建的group中，插入一个splitter item。
m_pMainLayout-&gt;SetItemSize( nGroupIndex1, nSplitterIndex, 3);
//设置此item的高度（宽度）。

int nIndex2 = m_pMainLayout-&gt;AddItem( nGroupIndex1, m_pChannelDlg, ExpandingStyle);
//在上面创建的group中，插入另一个item。
//ExpandingStyle 表示在group高度变化时，此item的高度随之变化。

m_pMainLayout-&gt;SetItemMinSize( nGroupIndex1, nIndex, 20);
//此item如果位于一个splitter旁边，其在splitter移动时，最小的高度。

m_pMainLayout-&gt;SetSplitterWnd( nGroupIndex1, nSplitterIndex, nIndex, nIndex2);
//指定splitter item两边的item。splitter的两边的item，不一定是位置上相邻的两个。</pre>
<p>关于item高度和宽度的问题，可能是dsLayout不容易理解的问题。一个原则是在任何时候，我们只能控制item的一个方向属性宽度或者高度，另一个属性（宽度或高度）随group或者整个layout大小变化而变化。</p>
<p><strong>Splitter item两边的元素不一定是相邻的两个元素<br />
    <br /></strong>如下图：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image8.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb8.png" width="269" height="470" /></a> </p>
<p>在Group2中，item3(splitter item)两边的item，是item2和item5。 而不是相邻的item4.</p>
<p><strong>三种item，splitter item，window item，space item<br />
    <br /></strong></p>
<p>其中splitter item需要指定一个控件（常用static，static需设置SS_NOTIFY属性）。添加item时，可以指定控件ID，也可以指定窗口指针CWnd*。<br />
  <br />Space item为一个虚拟的item，无窗口。用来做一些位置的填充。</p>
<p><strong>指定拉伸倍数因子</strong></p>
<p>如果当整个layout大小变化时，有两个或两个以上的group都需要随之调整大小（ExpandingStyle ）。那么dsLayout将根据设置的stretchfactor来计算需要调整的大小。<br />
  <br />void SetGroupStretchFactor( int nGroupID, int nFactor); </p>
<p>默认参数是1:1。</p>
<p>这个概念，对于对个item之间也是这样的。通过函数设置：<br />
  <br />void SetItemStretchFactor( int nGroupID,int nItem, int nFactor);</p>
<p>
  </p>
<h2>应用场景</h2>
<p>按以上描述，dsLayout可以用在多splitter布局界面，多个子窗口布局界面。同时也适合用在多个控件需根据屏幕大小调整控件大小的情况。</p>
<h2>示例截屏</h2>
<p>示例界面窗口及控件使用dskinlite美化界面。</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image9.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb9.png" width="497" height="400" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=571</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DSkinControl( For MFC) 控件库 &#8211; dsCtrlListView</title>
		<link>http://www.uieasy.cn/blog/?p=520</link>
		<comments>http://www.uieasy.cn/blog/?p=520#comments</comments>
		<pubDate>Wed, 22 Dec 2010 10:35:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinControl控件库]]></category>
		<category><![CDATA[dsCtrlListView]]></category>
		<category><![CDATA[dskincontrol]]></category>
		<category><![CDATA[dskinlite]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=520</guid>
		<description><![CDATA[dsCtrlListView 控件主要用来列表显示一组图片，图标，项目等。该控件内部使用DSkinLite绘制内部控件，支持滚动条，支持根据窗口大小自动布局。 dsCtrlListView控件结构构成 dsCtrlListView 控件分为两个概念，group和item。dsCtrlListView 控件下可以添加多个group，group下面可以添加多个item项。如下图所示： 其中Group部分为一个static控件，item为button控件。内部使用dskinlite绘制这些控件。因为dskinlite可以自由绘制static及button界面，因为dsCtrlListView的group及item样式也可以自由定义。 int AddGroup( LPCTSTR strName, LPCTSTR strStyle, BOOL bVisible = TRUE); int AddItem( int nGroupIndex, LPCTSTR strStyle, LPCTSTR strName, LPCTSTR strImage); 其中第二个参数strStyle指定XML中控件的风格定义。以下为item的xml风格定义： &#60;window name=&#34;listface.item&#34; type=&#34;button&#34;&#62; &#60;property bkcolor=&#34;RGB(255,255,255)&#34; /&#62; &#60;buttoninfo subtype=&#34;push&#34; /&#62; &#60;image state = &#34;normal&#34; picfile=&#34;#listview.face.item.normal&#34; /&#62; &#60;image state = &#34;over&#34; picfile=&#34;#listview.face.item.over&#34; /&#62; &#60;image state = &#34;down&#34; picfile=&#34;#listview.face.item.over&#34; /&#62; [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image2.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb2.png" width="264" height="124" /></a>     </p>
<p>dsCtrlListView 控件主要用来列表显示一组图片，图标，项目等。该控件内部使用DSkinLite绘制内部控件，支持滚动条，支持根据窗口大小自动布局。</p>
<p> <span id="more-520"></span>
</p>
<h2>dsCtrlListView控件结构构成</h2>
<p>dsCtrlListView 控件分为两个概念，group和item。dsCtrlListView 控件下可以添加多个group，group下面可以添加多个item项。如下图所示：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image3.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb3.png" width="444" height="419" /></a></p>
<p>其中Group部分为一个static控件，item为button控件。内部使用dskinlite绘制这些控件。因为dskinlite可以自由绘制static及button界面，因为dsCtrlListView的group及item样式也可以自由定义。</p>
<p>int AddGroup( LPCTSTR strName, LPCTSTR strStyle, BOOL bVisible = TRUE);    <br />int AddItem( int nGroupIndex, LPCTSTR strStyle, LPCTSTR strName, LPCTSTR strImage);     </p>
<p>其中第二个参数strStyle指定XML中控件的风格定义。以下为item的xml风格定义：     </p>
<pre class="brush: xml;">&lt;window name=&quot;listface.item&quot; type=&quot;button&quot;&gt;
   &lt;property bkcolor=&quot;RGB(255,255,255)&quot; /&gt;
   &lt;buttoninfo subtype=&quot;push&quot; /&gt;
   &lt;image state = &quot;normal&quot;  picfile=&quot;#listview.face.item.normal&quot;  /&gt;
   &lt;image state = &quot;over&quot;    picfile=&quot;#listview.face.item.over&quot;  /&gt;
   &lt;image state = &quot;down&quot;    picfile=&quot;#listview.face.item.over&quot;  /&gt;
   &lt;image id=&quot;image.default&quot; state=&quot;all&quot; picfile=&quot;#listview.item.icon&quot;
      left=&quot;4&quot; top=&quot;4&quot; width=&quot;40&quot; height=&quot;40&quot;  /&gt;
&lt;/window&gt;</pre>
<p>其中LPCTSTR strImage 指定item对应的id为“image.default”值。<br />
  </p>
<p>&#160;</p>
<h2>dsCtrlListView 模式选择</h2>
<p>dsCtrlListView 控件有两个模式设置选择。 </p>
<h3>Group显示与隐藏</h3>
<p>dsCtrlListView中控件中group可以显示出来，也可以隐藏。如果group隐藏，则其只是一个逻辑意义上的group，作为容器用来载入items。由以下函数的最后一个参数决定：<br />
  <br />int AddGroup( LPCTSTR strName, LPCTSTR strStyle, BOOL bVisible = TRUE); </p>
<p>group隐藏后，示例图如下：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image4.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb4.png" width="481" height="461" /></a> </p>
<p>
  </p>
<h3>item 模式</h3>
<p>item分为Mode_Normal，Mode_Checked两种模式。<br />
  <br />其中Mode_Normal意义为所有items都类似button，没有选中和不选中的状态。 </p>
<p>其中Mode_Checked意义为item有选中状态，如上图所示。通过以下函数设置： </p>
<p>void SetItemMode( ItemMode mode); </p>
<h2>dsCtrlListView控件消息处理</h2>
<p>控件的item项目被单击或者双击后，将有消息发送至父窗口。消息定义如下：<br />
  </p>
<p>//click<br />
  <br />#define WM_LISTVIEW_ITEM_CLICK ( WM_USER + 1200) </p>
<p>//double click<br />
  <br />#define WM_LISTVIEW_ITEM_DBCLICK ( WM_USER + 1201)</p>
<p>其中WPARAM为groupIndex，LPARAM为itemIndex。</p>
<h2>总结</h2>
<p>从以上描述可以看出，dsCtrlListView控件使用dskinlite绘制子控件，同时我们提供dsCtrlListView源代码，开发人员可以根据自己的需要配置item，group等界面风格。同时控件很好的支持滚动条，窗口滚动，根据窗口大小重新布局items等特性。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=520</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DSkinControl( For MFC) 控件- dsCtrlComboBox</title>
		<link>http://www.uieasy.cn/blog/?p=513</link>
		<comments>http://www.uieasy.cn/blog/?p=513#comments</comments>
		<pubDate>Fri, 17 Dec 2010 12:23:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinControl控件库]]></category>
		<category><![CDATA[界面编程]]></category>
		<category><![CDATA[combobox]]></category>
		<category><![CDATA[dsCtrlComboBox]]></category>
		<category><![CDATA[dskincontrol]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=513</guid>
		<description><![CDATA[传统的combobox 在使用方面有很多限制，很难满足我们combobox类型控件的需求。主要表现中combobox内置的listbox难以控制且比较难以完美绘制。因此我们在DSkinControl控件中添加了新的控件dsCtrlComboBox来实现一些标准combobox难以实现的功能。 dsCtrlComboBox控件结构 由于使用dskinlite可以自由绘制一个子窗口，绘制listbox，因此上图所示界面很容易配置出来。首先是上部继承自CWnd的子窗口，我们在dsCtrlCombobox中使用combobox_bk来绘制。xml配置如下： &#60;window name=&#34;combobox_bk&#34; type=&#34;static&#34;&#62; &#60;property bkcolor=&#34;RGB(255,255,255)&#34; btransparentbk=&#34;false&#34; /&#62; &#60;text state=&#34;all&#34; font=&#34;#default&#34; left=&#34;30&#34; vertalign=&#34;center&#34; bsingleline=&#34;true&#34; textcolor=&#34;RGB(0,0,0)&#34; /&#62; &#60;image state=&#34;normal&#34; picfile=&#34;#extend.combobox.bk.nor&#34; paintmode=&#34;stretchparthorz&#34; left_part=&#34;3&#34; right_part=&#34;3&#34;/&#62; &#60;image state=&#34;over&#124;down&#34; picfile=&#34;#extend.combobox.bk.over&#34; paintmode=&#34;stretchparthorz&#34; left_part=&#34;3&#34; right_part=&#34;3&#34;/&#62; &#60;image state=&#34;all&#34; index=&#34;100&#34; id=&#34;image.default&#34; picfile=&#34;#extend.combobox.bk.nor&#34; left=&#34;5&#34; top=&#34;3&#34; width=&#34;20&#34; height=&#34;20&#34;/&#62; &#60;image state=&#34;normal&#34; index=&#34;2&#34; left=&#34;-25&#34; top=&#34;1&#34; width=&#34;24&#34; height=&#34;24&#34; picfile=&#34;#extend.combobox.btn.nor&#34; /&#62; &#60;image state=&#34;over&#34; index=&#34;2&#34; left=&#34;-25&#34; top=&#34;1&#34; width=&#34;24&#34; [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb.png" width="157" height="101" /></a> </p>
</p>
<p>传统的combobox 在使用方面有很多限制，很难满足我们combobox类型控件的需求。主要表现中combobox内置的listbox难以控制且比较难以完美绘制。因此我们在DSkinControl控件中添加了新的控件dsCtrlComboBox来实现一些标准combobox难以实现的功能。</p>
<p> <span id="more-513"></span><br />
<h3>dsCtrlComboBox控件结构</h3>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image1.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/12/image_thumb1.png" width="354" height="207" /></a> </p>
<p>由于使用dskinlite可以自由绘制一个子窗口，绘制listbox，因此上图所示界面很容易配置出来。首先是上部继承自CWnd的子窗口，我们在dsCtrlCombobox中使用combobox_bk来绘制。xml配置如下：</p>
<pre class="brush: xml;">&lt;window name=&quot;combobox_bk&quot; type=&quot;static&quot;&gt;
    &lt;property bkcolor=&quot;RGB(255,255,255)&quot; btransparentbk=&quot;false&quot;  /&gt;
    &lt;text state=&quot;all&quot; font=&quot;#default&quot; left=&quot;30&quot; vertalign=&quot;center&quot; bsingleline=&quot;true&quot; textcolor=&quot;RGB(0,0,0)&quot; /&gt;
    &lt;image state=&quot;normal&quot;   picfile=&quot;#extend.combobox.bk.nor&quot; paintmode=&quot;stretchparthorz&quot; left_part=&quot;3&quot;  right_part=&quot;3&quot;/&gt;
    &lt;image state=&quot;over|down&quot;   picfile=&quot;#extend.combobox.bk.over&quot; paintmode=&quot;stretchparthorz&quot; left_part=&quot;3&quot;  right_part=&quot;3&quot;/&gt;
    &lt;image state=&quot;all&quot; index=&quot;100&quot; id=&quot;image.default&quot;   picfile=&quot;#extend.combobox.bk.nor&quot; left=&quot;5&quot; top=&quot;3&quot; width=&quot;20&quot; height=&quot;20&quot;/&gt;
    &lt;image state=&quot;normal&quot; index=&quot;2&quot; left=&quot;-25&quot; top=&quot;1&quot; width=&quot;24&quot; height=&quot;24&quot; picfile=&quot;#extend.combobox.btn.nor&quot; /&gt;
    &lt;image state=&quot;over&quot;   index=&quot;2&quot; left=&quot;-25&quot; top=&quot;1&quot; width=&quot;24&quot; height=&quot;24&quot; picfile=&quot;#extend.combobox.btn.over&quot; /&gt;
    &lt;image state=&quot;down&quot;   index=&quot;2&quot; left=&quot;-25&quot; top=&quot;1&quot; width=&quot;24&quot; height=&quot;24&quot; picfile=&quot;#extend.combobox.btn.down&quot; /&gt;
&lt;/window&gt;</pre>
<p>其中<br />
  <br />&lt;image state=&quot;all&quot; <strong>index=&quot;100&quot; id=&quot;image.default&quot;</strong>&#160;&#160; picfile=&quot;#extend.combobox.bk.nor&quot; left=&quot;5&quot; top=&quot;3&quot; width=&quot;20&quot; height=&quot;20&quot;/&gt; </p>
<p>是我们为类似IM登陆中使用的combobox优化的一种模式。其中index=100 id=&quot;image.default&quot;是固定的值，用于显示dsCtrlCombobox前面的用户头像。</p>
<p>在dsCtrlComboBox内部代码中，通过如下调用来控制界面显示：</p>
<pre class="brush: cpp;">void dsCtrlComboBox::SetWindowImage( CString strImage)
{
    ShowWindowImage( TRUE);

    if ( !strImage.IsEmpty())
        dsSetDrawItemValue( GetSafeHwnd(), _T(&quot;image.default&quot;), strImage, FALSE);
}

void dsCtrlComboBox::ShowWindowImage(BOOL bShow)
{
    if ( bShow )
        dsSetDrawItemVisible( GetSafeHwnd(),  100,100, TRUE, FALSE);
    else
        dsSetDrawItemVisible( GetSafeHwnd(), 100,100, FALSE, FALSE);
}</pre>
<p>因为我们提供dsCtrlComboBox的所有源码，因此开发人员也可以根据自己的需要来定义这些绘制元素。</p>
<p>同时我们通过以下xml配置绘制下拉的listbox：</p>
<pre class="brush: xml;">&lt;window name=&quot;combobox.listbox&quot; type=&quot;&quot;&gt;
  &lt;property bkcolor=&quot;#system_bg&quot; bordercolor=&quot;RGB(255,0,0)&quot;  btransparentbk=&quot;false&quot; scrollbar=&quot;scrollbar&quot;  /&gt;
  &lt;rect id=&quot;border&quot; index=&quot;1&quot; bordercolor=&quot;#system.border&quot;  borderwidth=&quot;1&quot; style=&quot;hole&quot; /&gt;
  &lt;rect id=&quot;border&quot; index=&quot;2&quot; bordercolor=&quot;RGB(255,255,255)&quot;  left=&quot;1&quot; top=&quot;1&quot; right=&quot;-1&quot; bottom=&quot;-1&quot; borderwidth=&quot;1&quot; style=&quot;hole&quot; /&gt;
  &lt;rect  id=&quot;item&quot;  state=&quot;checked&quot;   gradientmode=&quot;horiz&quot;   gradientbegincolor=&quot;RGB(63,152,217)&quot; gradientendcolor=&quot;RGB(48,134,198)&quot; /&gt;
  &lt;rect  id=&quot;item&quot;  bordercolor=&quot;RGB(255,255,255)&quot; fillcolor=&quot;RGB(255,255,255)&quot;  state=&quot;normal&quot;/&gt;

 &lt;listboxinfo  bDrawOver=&quot;true&quot; itemheight=&quot;35&quot;  &gt;
    &lt;drawitem id=&quot;default&quot; &gt;
      &lt;image state=&quot;all&quot; id=&quot;image.default&quot;   picfile=&quot;#extend.combobox.bk.nor&quot; left=&quot;5&quot; top=&quot;2&quot; width=&quot;20&quot; height=&quot;20&quot;/&gt;
      &lt;text id=&quot;text.default&quot;   content=&quot;&quot; left=&quot;30&quot; top=&quot;4&quot; state=&quot;normal&quot;  textcolor=&quot;RGB(0,0,0)&quot; font=&quot;#default&quot;/&gt;
      &lt;text id=&quot;text.default&quot;   content=&quot;&quot; left=&quot;30&quot; top=&quot;4&quot; state=&quot;over&quot;  textcolor=&quot;RGB(68,138,237)&quot; font=&quot;#default&quot;/&gt;
      &lt;text id=&quot;text.default&quot;   content=&quot;&quot; left=&quot;30&quot; top=&quot;4&quot; state=&quot;checked&quot;  textcolor=&quot;RGB(255,255,255)&quot; font=&quot;#default&quot;/&gt;

    &lt;eventitem id=&quot;close&quot; event=&quot;LButtonDown&quot; cursor=&quot;handcur&quot; state=&quot;checked&quot;  left=&quot;-20&quot; top=&quot;5&quot; width=&quot;15&quot; height=&quot;15&quot;  visible=&quot;true&quot;&gt;
        &lt;image state=&quot;normal&quot; picfile=&quot;#extend.listbox.closebtn.nor&quot; /&gt;
        &lt;image state=&quot;over&quot; picfile=&quot;#extend.listbox.closebtn.over&quot; /&gt;
    &lt;/eventitem&gt;

    &lt;/drawitem&gt;

  &lt;/listboxinfo&gt;
&lt;/window&gt;</pre>
<p>同样以上XML中id为“text.default” 和id 为“image.default”的绘制元素在代码中会被设置不同的值，用以显示每一个item对应的文本和图片值。 </p>
<p>&#160;</p>
<h3>dsCtrlComboBox 函数使用</h3>
<p>基本上我们完全按照MFC CComboBox的API来做封装，为了使用户很容易理解并使用。CComboBox的大部分函数我们在dsCtrlComboBox中都实现了，有些做了一些扩展。如：</p>
<p>int dsCtrlComboBox::AddString( LPCTSTR lpszString, LPCTSTR lpszImage);</p>
<p>此函数表示在添加item项时，同时指定item text及 item image。详情请参考我们的ComboBoxTest示例工程。</p>
<p>
  </p>
<h3>总结：</h3>
<p>由于DSkinLite对界面绘制灵活的支持，使得我们可以使用dsCtrlComboBox非常容易的绘制出不同样式的界面，本文中的类似IM软件中用户登陆combobox只是一个方面的应用，因为我们提供了DSkinControl的所有源码，开发人员可以根据界面需要配置不同的界面来。
  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=513</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何选择VC界面库产品？（四）&#8212; DSkinLite vs DirectUI</title>
		<link>http://www.uieasy.cn/blog/?p=486</link>
		<comments>http://www.uieasy.cn/blog/?p=486#comments</comments>
		<pubDate>Tue, 23 Nov 2010 06:18:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinLite界面库]]></category>
		<category><![CDATA[DirectUI界面库]]></category>
		<category><![CDATA[界面编程]]></category>
		<category><![CDATA[DirectUI]]></category>
		<category><![CDATA[dskinlite]]></category>
		<category><![CDATA[界面库]]></category>
		<category><![CDATA[皮肤库]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=486</guid>
		<description><![CDATA[&#160; 客户经常来信询问该如何选择界面库产品： “你们的产品跟其他同类产品相比有什么优势？” “你们的DSkinLite界面库跟DirectUI界面库有什么不同，哪个产品更适合我们公司？” 前面的三篇文章分别介绍了： 如何选择VC界面库产品（一）&#8211; 选择界面库产品需考虑的因素 如何选择VC界面库产品（二）–- DSkinLite界面库介绍 如何选择VC界面库产品（三）–- DirectUI界面库介绍 本篇文章将分析这两种界面库中，您可以根据自己团队的情况作出选择。 &#160; 在界面开发中，目前DirectUI是个热门的技术名称，因为众多的知名公司都是用DirectUI方式作出了很炫丽的界面。而对于大多数熟悉Win32控件，熟悉MFC开发的开发人员来说，我们应该做何选择？ 因为传统的Win32/ MFC大家都比较了解，所以首先我们分析DirectUI，看看DirectUI能完成哪些普通Win32控件难以实现的功能，同时实现一个完整的DirectUI有那些关键点。 &#160; 基于DirectUI技术的界面库的优势 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 以下是我们总结的一个完善的DirectUI库的优势，这些特性Win32控件方式难以实现的： 界面完全换肤 这里的“界面完全换肤”，是指用户可完全定制化的换肤，软件界面控件大小，位置等都可能有变化等。DirectUI界面库一般都是用XML定义界面虚拟控件并直接布局界面，因此可以实现此功能。但实际上完全的换肤涉及到很多问题，目前很少有界面库产品可以实现这种完全换肤。从界面设计的发展来看，目前已经不流行这种界面的完全换肤，因为这不仅对技术要求比较多，同时也对UI设计要求很高。目前界面换肤大量采用的是更换色调，局部的背景更换（如MSN/QQ最新版本）。 理论上更高的效率 由于在DirectUI控件中，更多的控件为逻辑上的虚拟控件。因此理论上来讲DirectUI运行效率会更高一些，但这个效率也与DirectUI界面库整体的软件架构及软件实现有密切关系。在实际考虑时，效率问题应该不是关注的重点，因为目前设计及实现良好的Win32 界面库在效率方面也没有任何问题。 容易实现更加炫丽的动态效果 由于DirectUI的技术特点，使其更容易实现一些特效的动画效果，如菜单的动态徐徐展开和收缩，窗口的动态渐隐渐显的弹出和关闭，控件的动画展开和关闭。当然以上这些特性也取决于开发团队的技术实力，同时也需要顶尖优秀的UI设计师配合，方能带来所期望的炫丽效果。 防止软件被破解，防外挂 关于这一点，可能是众多关注DirectUI的人没有考虑到的。但实际上恰恰是这一点可能是最为关键的。众多知名互联网公司不遗余力研发DirectUI界面，这一点也是重要考量。传统的Win32控件由于其消息、原理公开，使得通过一些简单的Hook或其他方式可以很容易破解软件。而一个完全的DirectUI界面，其界面元素及内部逻辑完全为私有实现，外界无从得知。这就使得破解变得困难的多。 界面与逻辑的完全分离（需要完整脚本支持） 在说明这个问题前，我们来了解这个基本问题： 什么是界面与逻辑的分离？ 界面是指涉及界面元素操作的部分代码，比如控件位置大小，控件的状态；窗口的大小；控件界面的绘制代码；控件的动态创建。 逻辑是指软件的程序逻辑，与界面操作完全无关，如网络操作，内部事件与消息。 &#160;&#160; &#160;&#160;&#160;&#160;&#160;&#160;&#160; 在Win32控件或者MFC等设计里，实际上是将界面和程序逻辑完全糅合在一起，这样做的缺陷在于如果界面UI设计有一些改变，我们可能要大面积的修改程序代码并重新编译，同时程序也难以重用，我们可能需要重载好多类如CCongfigButton，CSettingButton，CXXXButton等。每一个新的界面效果的增加，我们都需要去修改程序，添加支持。 &#160;&#160;&#160;&#160;&#160;&#160;&#160; 目前来说，基于Win32的大部分界面库已经能最大限度的分离界面与逻辑，最主要的是将界面控件的绘制代码分离出去，使得应用程序变得更加清晰，更加容易维护，容易重用；也能很容易适应界面UI设计的变化。 什么是界面与逻辑的完全分离？ 完全分离是指程序中不出现任何界面控件元素属性的相关操作，如调整界面控件位置，控制控件的显示/隐藏。即在不重新编译程序的情况下，仅通过修改界面配置文件(XML)和脚本文件，即可加载一个新的界面效果。 &#160;&#160;&#160;&#160;&#160;&#160; 理论上来说，Win32控件库不能做到界面与逻辑的完全分离。比如MFC框架，更是将界面与逻辑完全融合在一起。这也是很多大的互联网公司花重金研发完全的DirectUI界面引擎的原因，这类公司基本都是快速开发模式，产品更新快，界面UI设计更新快，常常一个软件开发出来，皮肤已经换了好几套了，界面调整无数次了。如果采用传统的方式，这里面会带来巨大的工作量及重复工作。 以上几点是一个基于DirectUI技术的界面库可以实现的，但基于Win32控件的界面库难以实现的。但同时我们也会发现，还没有一个通用的DirectUI界面库产品中实现以上所有特性；即DirectUI的真正优势还未能在实践中实现。以下的关键点是一个完整，通用的DirectUI界面库难以实现的原因。 &#160; DirectUI界面框架开发的关键点（或者称为难点） DirectUI界面库整体架构设计 &#160;&#160;&#160;&#160;&#160;&#160;&#160; 一个完整的DirectUI界面库，可以等同于一个Mini的QT、WPF，Flash等。需要一整套的系统级别的架构，而不仅仅只是界面元素的绘制。这个架构非常重要，同时也对软件架构师有非常高的要求。 完整的事件响应模块 &#160;&#160;&#160;&#160;&#160; Win32控件的事件很多，而一般的DirectUI界面库指实现基本的几个事件如单击，mouse in, mouse leave。其他一些事件如双击，右键，滚轮这些，也许不常用，但如果不能提供这些事件，会是一个比较头疼的问题。 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb33.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb3" border="0" alt="image_thumb3" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb3_thumb2.png" width="220" height="153" /></a>&#160; </p>
</p>
<p>客户经常来信询问该如何选择界面库产品：    <br />“你们的产品跟其他同类产品相比有什么优势？”     <br />“你们的<strong>DSkinLite</strong>界面库跟<strong>DirectUI</strong>界面库有什么不同，哪个产品更适合我们公司？” </p>
<p>前面的三篇文章分别介绍了：    </p>
<p><a href="http://www.uieasy.cn/blog/?p=462" target="_blank">如何选择VC界面库产品（一）&#8211; 选择界面库产品需考虑的因素</a>     <br /><a href="http://www.uieasy.cn/blog/?p=473" target="_blank">如何选择VC界面库产品（二）–- DSkinLite界面库介绍</a>     <br /><a href="http://www.uieasy.cn/blog/?p=479" target="_blank">如何选择VC界面库产品（三）–- DirectUI界面库介绍</a>     </p>
<p>本篇文章将分析这两种界面库中，您可以根据自己团队的情况作出选择。</p>
<p> <span id="more-486"></span>
<p>&#160;</p>
<p>在界面开发中，目前DirectUI是个热门的技术名称，因为众多的知名公司都是用DirectUI方式作出了很炫丽的界面。而对于大多数熟悉Win32控件，熟悉MFC开发的开发人员来说，我们应该做何选择？</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image9.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb9.png" width="418" height="273" /></a> </p>
<p>因为传统的Win32/ MFC大家都比较了解，所以首先我们分析DirectUI，看看DirectUI能完成哪些普通Win32控件难以实现的功能，同时实现一个完整的DirectUI有那些关键点。    </p>
<h2>&#160;<a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10.png" width="27" height="25" /></a> 基于DirectUI技术的界面库的优势</h2>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 以下是我们总结的一个完善的DirectUI库的优势，这些特性Win32控件方式难以实现的：</p>
<ol>
<li><strong>界面<font color="#ff0000">完全</font>换肤         <br /></strong>这里的“界面完全换肤”，是指用户可完全定制化的换肤，软件界面控件大小，位置等都可能有变化等。DirectUI界面库一般都是用XML定义界面虚拟控件并直接布局界面，因此可以实现此功能。但实际上完全的换肤涉及到很多问题，目前很少有界面库产品可以实现这种完全换肤。从界面设计的发展来看，目前已经不流行这种界面的完全换肤，因为这不仅对技术要求比较多，同时也对UI设计要求很高。目前界面换肤大量采用的是<strong>更换色调</strong>，<strong>局部的背景更换</strong>（如MSN/QQ最新版本）。 </li>
<li><strong>理论上更高的效率</strong>       <br />由于在DirectUI控件中，更多的控件为逻辑上的虚拟控件。因此理论上来讲DirectUI运行效率会更高一些，但这个效率也与DirectUI界面库整体的软件架构及软件实现有密切关系。在实际考虑时，效率问题应该不是关注的重点，因为目前设计及实现良好的Win32 界面库在效率方面也没有任何问题。 </li>
<li><strong>容易实现更加炫丽的<font color="#ff0000">动态</font>效果         <br /></strong>由于DirectUI的技术特点，使其更容易实现一些特效的动画效果，如菜单的动态徐徐展开和收缩，窗口的动态渐隐渐显的弹出和关闭，控件的动画展开和关闭。当然以上这些特性也取决于开发团队的技术实力，同时也需要<strong>顶尖优秀的UI设计师</strong>配合，方能带来所期望的炫丽效果。 <strong>       <br /></strong></li>
<li><strong>防止软件被破解，防外挂        <br /></strong>关于这一点，可能是众多关注DirectUI的人没有考虑到的。但实际上恰恰是这一点可能是最为关键的。众多知名互联网公司不遗余力研发DirectUI界面，这一点也是重要考量。传统的Win32控件由于其消息、原理公开，使得通过一些简单的Hook或其他方式可以很容易破解软件。而一个完全的DirectUI界面，其界面元素及内部逻辑完全为私有实现，外界无从得知。这就使得破解变得困难的多。 </li>
<li><strong>界面与逻辑的<font color="#ff0000">完全</font>分离（需要完整脚本支持）</strong>
<p>在说明这个问题前，我们来了解这个基本问题：       <br /><strong>       <br />什么是界面与逻辑的分离？         <br /></strong>      <br /><strong>界面</strong>是指涉及界面元素操作的部分代码，比如控件位置大小，控件的状态；窗口的大小；控件界面的<strong>绘制代码</strong>；控件的动态创建。       <br /><strong>逻辑</strong>是指软件的程序逻辑，与界面操作完全无关，如网络操作，内部事件与消息。       <br />&#160;&#160; <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; 在Win32控件或者MFC等设计里，实际上是将界面和程序逻辑完全糅合在一起，这样做的缺陷在于如果界面UI设计有一些改变，我们可能要大面积的修改程序代码并重新编译，同时程序也难以重用，我们可能需要重载好多类如CCongfigButton，CSettingButton，CXXXButton等。每一个新的界面效果的增加，我们都需要去修改程序，添加支持。       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; 目前来说，基于Win32的大部分界面库已经能最大限度的分离界面与逻辑，最主要的是将界面控件的绘制代码分离出去，使得应用程序变得更加清晰，更加容易维护，容易重用；也能很容易适应界面UI设计的变化。       </p>
<p><strong>什么是界面与逻辑的完全分离？        <br /></strong>完全分离是指程序中不出现任何界面控件元素属性的相关操作，如调整界面控件位置，控制控件的显示/隐藏。即在不重新编译程序的情况下，仅通过修改界面配置文件(XML)和脚本文件，即可加载一个新的界面效果。       </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160; 理论上来说，Win32控件库不能做到界面与逻辑的完全分离。比如MFC框架，更是将界面与逻辑完全融合在一起。这也是很多大的互联网公司花重金研发完全的DirectUI界面引擎的原因，这类公司基本都是快速开发模式，产品更新快，界面UI设计更新快，常常一个软件开发出来，皮肤已经换了好几套了，界面调整无数次了。如果采用传统的方式，这里面会带来巨大的工作量及重复工作。       </li>
</ol>
<p>以上几点是一个基于DirectUI技术的界面库可以实现的，但基于Win32控件的界面库难以实现的。但同时我们也会发现，还没有一个通用的DirectUI界面库产品中实现以上所有特性；即DirectUI的真正优势还未能在实践中实现。以下的关键点是一个完整，通用的DirectUI界面库难以实现的原因。</p>
<h2><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10.png" width="27" height="25" /></a>&#160; DirectUI界面框架开发的关键点（或者称为难点）</h2>
</p>
<ol>
<li><strong>DirectUI界面库整体架构设计        <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160;&#160; 一个完整的DirectUI界面库，可以等同于一个Mini的QT、WPF，Flash等。需要一整套的系统级别的架构，而不仅仅只是界面元素的绘制。这个架构非常重要，同时也对软件架构师有非常高的要求。 </li>
<li><strong>完整的事件响应模块        <br /></strong>&#160;&#160;&#160;&#160;&#160; Win32控件的事件很多，而一般的DirectUI界面库指实现基本的几个事件如单击，mouse in, mouse leave。其他一些事件如双击，右键，滚轮这些，也许不常用，但如果不能提供这些事件，会是一个比较头疼的问题。 </li>
<li><strong>复杂控件的支持        <br /></strong>&#160;&#160;&#160;&#160; 复杂控件的支持也是众多DirectUI界面库的软肋。复杂的控件如Menu，list control，tree control，Edit等，也许实现起来必须并不复杂，但要实现一个可完全替代Win32标准控件的控件就比较麻烦了。这涉及到三个方面：&#160; <br />&#160;&#160;&#160; <strong>功能特性的完整性        <br /></strong>&#160;&#160;&#160; 很多DirectUI提供商实际上只实现了部分的功能就宣称支持某某控件，这种说法是不负责任的。例如树形控件，其涉及的接口函数有40多个，Notify消息有20多个。这些函数和消息中，可能常用的只有小部分，但其他不常用的也是不能忽略的。&#160; <br />&#160;&#160; <strong>效率问题        <br /></strong>&#160;&#160;&#160; 拥有这个功能的实现，不一定代表能广泛通用。是否能承受大数据量的插入？是否保证内存的占用问题？这些都是我们在测试一个自绘控件需要考虑的问题。 另外也需要保证在自绘模式下的效率问题。      <br />&#160;&#160;&#160; </li>
<li><strong>剪贴，拖拽，热键快捷键等        <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160; Windows标准控件我们用了好久了，但其中很多我们非常常用的功能，会常常被的DirectUI的设计者忽略。也许正因为这些功能太平常，太常用了，所以容易被人忽略。如剪贴，拖拽，热键，快捷键，tooltips等。这些功能特性也是不能缺少的，因为太常用了！
</li>
<li><strong>界面样式多样性的支持       <br /></strong>&#160;&#160;&#160;&#160;&#160; 目前有些DirectUI类的产品在控件设计时只是模仿MFC等相应控件的API。例如：      <br />ListView::SetItemImage函数，用来为list的一个item设置图片。但实际上当前软件界面中，设置一张图片是远远不够的，一般Item中不仅需要根据程序逻辑动态显示多个图片，而且还需要显示一些可以响应事件的图片，如QQ好友列表树。对于DirectUI类产品来说，应该对这些提供完整支持，而不是仅仅提供一个自绘结构，让用户自己来处理。
</li>
<li><strong>高效灵活的自绘机制       <br /></strong>&#160;&#160;&#160; 当前的软件界面控件的样式是多样的，需要有灵活高效的自绘机制来保证。      <br />&#160;&#160;&#160;&#160; Windows标准控件提供了非常灵活的自绘处理，我们可以在WM_PAINT，WM_ERASEGRND等消息中绘制自己的界面。同时对于Button，Menu，List Control，Tree Control， list Box等控件，微软提供WM_DRAWITEM, CustomDraw 等机制，使得我们可以随心所欲的绘制item内容。而各种情况下的效率则由标准控件内部保证。我们只需要在OnDrawItem等消息中绘制item内容即可。      <br />&#160;&#160;&#160;&#160; 众观所有UI框架，QT，WPF等都提供了完整的自绘机制。如QT甚至提供了CSS等方式来配置界面。足以看出灵活的自绘机制对一个界面产品的重要性。如果DirectUI类界面库不能提供一种高效，灵活的自绘机制，则无法满足软件对界面库的基本需求。      <br />&#160;&#160;&#160; </li>
<li><strong>与脚本语言的整合</strong>&#160;&#160;&#160;&#160;&#160;&#160;&#160; <br />&#160;&#160;&#160;&#160;&#160;&#160; 我们坚持认为一个完整的DirectUI界面库应该提供完整的脚本支持。如果将内部的XXLabel, XXButton, XXProgress,&#160; XXSliderCtrl等内部类或结构暴露给界面库的使用者，则势必带来界面和逻辑的重新糅合，同时使得应用程序变得深度依赖界面库，带来很多不稳定因素。如无法将界面和逻辑很好的分离，DirectUI就变得没有意义。&#160;
<p>&#160;&#160;&#160;&#160;&#160;&#160; 一些知名的互联网公司不但在自己的DirectUI系统中深度整合脚本语言，在脚本语言的选择上也在变化，之前常用的是vbscrip/jsscript语言，目前多使用lua脚本语言，lua脚本为开源项目，其特点是灵活，高效，容易扩展。       </p>
</li>
</ol>
<h2><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10.png" width="27" height="25" /></a>&#160; 与DirectUI界面库相比，DSkinLite界面库的优势</h2>
<ol>
<li><strong>对开发人员界面开发能力要求低        <br /></strong>如上面所描述的，由于目前还未有一个完整的DirectUI类型界面库，大多数情况我们需要在DirectUI界面库的源码上做开发，这对参与二次开发的人员有很高要求，需要对界面开发的各方面有所积累。而DSkinLite界面库主要基于Win32控件，封装完整，无需开发人员熟悉界面开发，同时我们设计时非常重视界面库的易用性，对MFC，WTL，Win32控件有些基本了解的开发人员即可胜任。 </li>
<li><strong>可迅速实施到项目中</strong>       <br />如果已有VC项目，使用DSkinLite这类Win32控件库，可以很容易整合到现有项目中，基本无需修改已有程序逻辑。对于新的项目由于省去了整合并扩展DirectUI框架的工作，使用DSkinLite也会比较快。       </li>
<li><strong>项目风险小，投入少        <br /></strong>由于一个完整的DirectUI库相当于一个新的GUI Framework框架，这样DirectUI界面库本身在架构设计，程序代码质量等方面会给项目带来新的风险。同时需要对项目增加相应的界面开发人员，用以维护DirectUI界面库产品。而基于Win32控件的DSkinLite界面库没有方面的问题。       </li>
</ol>
<h2><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10.png" width="27" height="25" /></a>我们该如何选择? </h2>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 以上是我们对基于Win32控件的界面库和DirectUI界面库做了差异化的分析。以下是我们得出的一些结论：</p>
<ol>
<li><strong>目前还没有一个完整且通用的DirectUI类型界面库        <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160;&#160; <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; 鉴于以上列举的DirectUI界面库设计的种种关键点，可以看出以个人或者国内中小公司的技术实力，基本很难实现一个完整且通用的DirectUI类型界面库，也很难保证产品的功能扩展性及产品效率。 </li>
<li><strong>在UIEASY的界面产品选择上DSkinLite界面库优于DirectUI界面库        <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160; <br />&#160;&#160;&#160;&#160; 如果您是中小型企业，在界面开发方面没有太多开发资源可投入，我们建议您选择DSkinLite界面库产品。从以上我们列举的DirectUI的几点优势来看，对于大多数中小型企业来说，这些优势都是不重要的。更重要的是要实现这些DirectUI技术的优势，没有现成的商业产品可以使用，需要企业在界面开发，UI设计等方面大量投入才行。&#160; <br />&#160;&#160;&#160; </li>
<li><strong>哪些公司适合选择UIEASY的DirectUI界面库产品？
<p></strong>&#160;&#160;&#160;&#160;&#160; 如果贵公司目前计划引入的界面产品必须要有以上我们列举的DirectUI技术优势，如：<strong>界面完全换肤、理论上更高的效率、容易实现更加炫丽的动态效果、防止软件被破解，防外挂、界面与逻辑的完全分离</strong>等。您需要考虑DirectUI界面库产品，您可以考虑购买我们的DirectUI界面库产品源码，在此基础上做二次开发。       <br />&#160;&#160;&#160;&#160;&#160; 在复杂控件的使用上，可以考虑直接使用Windows标准控件。即DirectUI+Win32控件的方式，很多知名软件采用这种方式，如QQMusic等。 </li>
</ol>
<p></p>
<p>其他相关文章：</p>
<p> <a href="http://www.uieasy.cn/blog/?p=462" target="_blank">如何选择VC界面库产品（一）&#8211; 选择界面库产品需考虑的因素</a>   <br /><a href="http://www.uieasy.cn/blog/?p=473" target="_blank">如何选择VC界面库产品（二）–- DSkinLite界面库产品</a>   <br /><a href="http://www.uieasy.cn/blog/?p=479" target="_blank">如何选择VC界面库产品（三）–- DirectUI界面库产品</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=486</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何选择VC界面库产品？（三）&#8212; DirectUI 界面库介绍</title>
		<link>http://www.uieasy.cn/blog/?p=479</link>
		<comments>http://www.uieasy.cn/blog/?p=479#comments</comments>
		<pubDate>Mon, 22 Nov 2010 09:18:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinLite界面库]]></category>
		<category><![CDATA[DirectUI界面库]]></category>
		<category><![CDATA[界面编程]]></category>
		<category><![CDATA[DirectUI]]></category>
		<category><![CDATA[dskinlite]]></category>
		<category><![CDATA[界面开发]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=479</guid>
		<description><![CDATA[&#160;&#160; 客户经常来信询问该如何选择界面库产品： “你们的产品跟其他同类产品相比有什么优势？” “你们的DSkinLite界面库跟DirectUI界面库有什么不同，哪个产品更适合我们公司？”&#160; 上一篇文章： &#160;&#160;&#160;&#160;&#160; 如何选择VC界面库产品（二）–- DSkinLite界面库介绍&#160; &#160;&#160;&#160; 本文主要介绍UIEASY DirectUI库界面产品的特点及优势。 &#160; UIEASY DirectUI界面库产品 DirectUI界面库背景知识 &#160;&#160;&#160;&#160;&#160;&#160;&#160; DirectUI界面库使用XML来描述界面风格，界面布局，使用脚本语言（如vbscript，javascript，lua）等来作为界面元素和程序逻辑的交互。从这方面来看，DirectUI界面库可以看成是一个迷你的微软WPF，mozilla XUL，或者Adobe的Flex，这些平台代表的应用程序的发展方向，同时也有很多相似的架构，比如多采用类似XML的方式描述定义界面，使用脚本语言 （xul使用javascript，flex使用Action Script）来作为控制界面元素并和程序逻辑之间交互。 &#160;&#160;&#160;&#160;&#160;&#160;&#160; DirectUI 界面库采用相似的设计，使用xml描述界面，同时使用javascript / vbscript来作为界面和逻辑的粘合。在控件设计方 面，DirectUI界面库更多的融入了XUL，WPF，Flex等控件设计理念，并没有一味的照搬window标准控件，以期望其成为一款真正使用实用的界面库。 UIEASY DirectUI界面库 &#160;&#160;&#160; UIEASY于2008年正式推出DirectUI界面库产品，是国内外最早推出的DirectUI类界面产品。DirectUI界面库深受欢迎，同时其首创的界面设计思路影响了众多国内外界面开发人员，目前大多数国内外DirectUI类型界面产品大多都采用了我们的界面设计思路。 &#160;&#160;&#160;&#160; UIEASY DirectUI界面库产品不仅是一款界面库产品，也是一种全新的界面库设计框架。如果您是界面开发人员，无论您否有意选择我们的产品，都可以下载我们的产品，了解我们的产品设计思路，相信会对您的界面开发带来全新的思路。 UIEASY DirectUI界面库有以下主要特点： &#160; XML配置界面 支持XML配置应用程序界面的虚拟控件及Win32控件，同时可以布局界面。在DirectUI界面库中，界面元素分为虚拟控件（Windowless 控件）和Win32控件。如下图所示： &#160; 可在XML中定义Windowsless控件，Win32 控件，并定义界面布局；同时也可以在XML中定义控件元素风格。 事件与脚本 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 支持脚本语言。通过使用脚本语言来实现界面元素和程序逻辑之间交互，可以简化代码的编写与调试。 为什么需要脚本语言？ &#160;&#160;&#160;&#160;&#160;&#160; DirectUI界面库内部会创建一些虚拟控件，如label，button，checkbox等，这些虚拟控件主要用以显示界面和响应事件。同时我们在程序中，也需要改变这些控件属性，如显示/隐藏，位置变化等。如果像MFC等框架那样处理，则应用程序需要直接操作这些虚拟控件类，造成程序逻辑与界面操作深度交叉，违背了我们将程序与脚本分离的初衷；同时应用程序将依赖一系列新的UI类，程序变得复杂，也带来不稳定性。 &#160;&#160;&#160;&#160;&#160; 鉴于这种情况，很多界面框架都引入脚本，用以控制界面元素并响应事件。在UIEASY的DirectUI界面库中，我们也引入的脚本控制。每个界面控件都会对应一个脚本对象，这样开发人员可以在脚本中操作此控件。 &#160;&#160;&#160;&#160;&#160; 通过脚本的引入，内部虚拟控件对应用程序来说是不可见的。这样极大的减少应用程序对界面库的依赖，简化了程序。 脚本控制界面控件属性 &#160;&#160;&#160;&#160; 脚本一个重要作用就是控制界面控件的属性。如下脚本代码： [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb32.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb3" border="0" alt="image_thumb3" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb3_thumb1.png" width="220" height="153" /></a> </p>
<p>&#160;&#160; 客户经常来信询问该如何选择界面库产品：    <br />“你们的产品跟其他同类产品相比有什么优势？”     <br />“你们的<strong>DSkinLite</strong>界面库跟<strong>DirectUI</strong>界面库有什么不同，哪个产品更适合我们公司？”&#160; </p>
<p>上一篇文章：    <br />&#160;&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=473" target="_blank">如何选择VC界面库产品（二）–- DSkinLite界面库介绍</a>&#160; </p>
<p>&#160;&#160;&#160; 本文主要介绍UIEASY <strong>DirectUI</strong>库界面产品的特点及优势。</p>
<p> <span id="more-479"></span><br />
<h2>&#160;<a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb101.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb.png" width="27" height="25" /></a> UIEASY DirectUI界面库产品</h2>
<p><strong>DirectUI界面库背景知识      <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160;&#160; DirectUI界面库使用XML来描述界面风格，界面布局，使用脚本语言（如vbscript，javascript，lua）等来作为界面元素和程序逻辑的交互。从这方面来看，DirectUI界面库可以看成是一个迷你的微软WPF，mozilla XUL，或者Adobe的Flex，这些平台代表的应用程序的发展方向，同时也有很多相似的架构，比如多采用类似XML的方式描述定义界面，使用脚本语言 （xul使用javascript，flex使用Action Script）来作为控制界面元素并和程序逻辑之间交互。     </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; DirectUI 界面库采用相似的设计，使用<strong>xml描述界面</strong>，同时使用<strong>javascript / vbscript</strong>来作为界面和逻辑的粘合。在控件设计方 面，DirectUI界面库更多的融入了XUL，WPF，Flex等控件设计理念，并没有一味的照搬window标准控件，以期望其成为一款真正使用实用的界面库。     </p>
<p><strong>UIEASY DirectUI界面库      <br /></strong><strong>     <br /></strong>&#160;&#160;&#160; UIEASY于2008年正式推出DirectUI界面库产品，是国内外最早推出的DirectUI类界面产品。DirectUI界面库深受欢迎，同时其首创的界面设计思路影响了众多国内外界面开发人员，目前大多数国内外DirectUI类型界面产品大多都采用了我们的界面设计思路。     </p>
<p>&#160;&#160;&#160;&#160; UIEASY DirectUI界面库产品<strong>不仅是一款界面库产品，也是一种全新的界面库设计框架。</strong>如果您是界面开发人员，无论您否有意选择我们的产品，都可以下载我们的产品，了解我们的产品设计思路，相信会对您的界面开发带来全新的思路。     </p>
<h2><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb101.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb.png" width="27" height="25" /></a>UIEASY DirectUI界面库有以下主要特点：</h2>
<p>&#160;</p>
<h3>XML配置界面</h3>
<p>支持XML配置应用程序界面的虚拟控件及Win32控件，同时可以布局界面。在DirectUI界面库中，界面元素分为虚拟控件（Windowless 控件）和Win32控件。如下图所示：</p>
<p>&#160; <a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image8.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb8.png" width="420" height="325" /></a> </p>
<p>可在XML中定义Windowsless控件，Win32 控件，并定义界面布局；同时也可以在XML中定义控件元素风格。</p>
<h3>事件与脚本</h3>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 支持脚本语言。通过使用脚本语言来实现界面元素和程序逻辑之间交互，可以简化代码的编写与调试。   <br /> 
<ol>
<li><strong>为什么需要脚本语言？        <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160; DirectUI界面库内部会创建一些虚拟控件，如label，button，checkbox等，这些虚拟控件主要用以显示界面和响应事件。同时我们在程序中，也需要改变这些控件属性，如显示/隐藏，位置变化等。如果像MFC等框架那样处理，则应用程序需要直接操作这些虚拟控件类，造成程序逻辑与界面操作深度交叉，违背了我们将程序与脚本分离的初衷；同时应用程序将依赖一系列新的UI类，程序变得复杂，也带来不稳定性。       <br />&#160;&#160;&#160;&#160;&#160; 鉴于这种情况，很多界面框架都引入脚本，用以控制界面元素并响应事件。在UIEASY的DirectUI界面库中，我们也引入的脚本控制。每个界面控件都会对应一个脚本对象，这样开发人员可以在脚本中操作此控件。       <br /><strong>&#160;&#160;&#160;&#160;&#160; 通过脚本的引入，内部虚拟控件对应用程序来说是不可见的。这样极大的减少应用程序对界面库的依赖，简化了程序。</strong>       </li>
<li><strong>脚本控制界面控件属性        <br /></strong>&#160;&#160;&#160;&#160; 脚本一个重要作用就是控制界面控件的属性。如下脚本代码：       <br /> 
<pre class="brush: js;">function Window::OnInit()
{
   edit1.title = &quot;DirectUI is powerful gui library! &quot;;
   edit2.title = &quot;DirectUI is powerful gui library!&quot;;
   search_edit2.title = &quot;DirectUI is powerful gui library!&quot;;
   win32button1.title = &quot;NotifyScript1&quot;;
   win32button2.title = &quot;NotifyScript2&quot;;

}
function Button2::onClick(cx,cy)
{
    //Hide the CheckBoxGroup
    if (progress1.value &gt;= 100)
       progress1.value = 0;
    else
       progress1.value = progress1.value + 10;

    if (progress2.value &gt;= 100)
       progress2.value = 0;
    else
       progress2.value = progress2.value + 10;

    if (progress3.value &gt;= 100)
       progress3.value = 0;
    else
       progress3.value = progress3.value + 10;
}</pre>
</li>
</ol>
<p>以上代码在相应的程序中，设置控件edit title，设置progress控件value。 在DirectUI界面库中，脚本支持控制<strong>虚拟控件属性</strong>，也支持<strong>控制Win32控件属性</strong>。</p>
<p>
  <br /><strong>3.&#160;&#160;&#160; 响应来自虚拟控件的事件<br />
    <br /></strong>&#160;&#160;&#160;&#160;&#160;&#160;&#160; 虚拟控件为DirectUI创建的逻辑控件，应用程序无法获得其事件。这样我们通过脚本将将相应的事件传递出来，发送到应用程序中。如以下代码： </p>
<p></p>
<pre class="brush: js;">function linkSkinCmd1::onClick(cx, cy)
{
   var str = &quot;http://www.uieasy.com&quot;;
   Window.OnSkinCmd (101, str);
}</pre>
<p>以上代码相应linkSkinCmd1虚拟控件的click消息，并通知应用程序。</p>
<p><strong>4.&#160; 响应来自应用程序的事件<br />
    <br /></strong>&#160;&#160;&#160;&#160; 在实际程序开发中，有些时候需要根据程序逻辑来控制界面虚拟控件的属性等。这种需求也通过脚本来实现。如以下代码： </p>
<p></p>
<pre class="brush: js;">function Window::OnNotify(code, var1)
{
    if (code == 1000)
    {
       if ( Button1.title == &quot;HideCheck&quot;)
       Button1.title = var1;
       else if ( Button1.title == &quot;New Text&quot;)
       Button1.title = &quot;HideCheck&quot;
    }
    else if ( code == 1001)
    {
      if (slider1.pos &gt;= 100)
       slider1.pos = 0;
      else
       slider1.pos = slider1.pos + var1
    }
}</pre>
<p>以上代码根据程序发送过来的消息，设置虚拟控件的titile，slider控件的pos等。</p>
<p>下一篇文章： </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=486" target="_blank">如何选择VC界面库产品？（四）— DSkinLite vs DirectUI</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=479</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何选择VC界面库产品？（二）&#8211; DSkinLite界面库介绍</title>
		<link>http://www.uieasy.cn/blog/?p=473</link>
		<comments>http://www.uieasy.cn/blog/?p=473#comments</comments>
		<pubDate>Sat, 20 Nov 2010 05:16:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinLite界面库]]></category>
		<category><![CDATA[DirectUI界面库]]></category>
		<category><![CDATA[界面编程]]></category>
		<category><![CDATA[dskincontrol]]></category>
		<category><![CDATA[dskinlite]]></category>
		<category><![CDATA[ekRichEdit控件]]></category>
		<category><![CDATA[界面库]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=473</guid>
		<description><![CDATA[&#160; 客户经常来信询问该如何选择界面库产品： “你们的产品跟其他同类产品相比有什么优势？” “你们的DSkinLite界面库跟DirectUI界面库有什么不同，哪个产品更适合我们公司？” 前面的三篇文章分别介绍了： 如何选择VC界面库产品（一）&#8211; 选择界面库产品需考虑的因素 本文主要介绍UIEASY DSkinLite库界面产品的特点及优势。 DSkinLite界面库产品 &#160;&#160;&#160;&#160;&#160; DSkinLite 是一款轻量级的C++界面库，未使用复杂的Hook操作，仅使用替换窗口过程的方式（SubclassWindow）来处理控件界面绘制。使用XML文件管理GDI资源如颜色，字体，图片，并描述界面构成，最大程度的将界面和程序逻辑分离，同时为软件皮肤更换，换色等提供基础支持。 &#160;&#160;&#160;&#160;&#160; 同时UIEASY首次创造性的将界面构成元素抽象为线条元素，矩形元素，图片元素，文本元素，并提供相应规则来使用这些元素“组合” 界面。这极大的提高了界面库产品的灵活性，使得界面库产品可以随意构造出多种多样的控件界面。 &#160;&#160;&#160;&#160;&#160; DSkinlite融合了DirectUI元素并提供多款自绘控件。 &#160;&#160;&#160; DSkinLite秉承UIEASY界面产品设计理念- 高效，简单，灵活，稳定。拥有以下显著特点： 简单易用 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; DSkinLite界面库API及XML配置语法简单，开发人员一般可以在2-3天内熟悉使用方法。DSkinLite界面库API共20个左右，常用API函数应该在5左右。同时DSkinLite采用C++编写，专为Visual Studio开发者设计，开发者可以很容易的将DSkinLite整合到已有软件工程中或者迅速开发新的软件。 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; DSkinLite使用XML配置界面样式，定义界面资源（字体，颜色，图片）等。借助于XML的灵活的语法，可以描述多种多样的控件界面风格。因此不管您是否有意选择DSkinLite界面产品，您都可以下载我们的使用试用版，了解DSkinLite界面库的设计风格，相信会让您了解一种全新的界面产品设计理念，给您的界面开发带来启发。 界面配置灵活 &#160;&#160;&#160;&#160;&#160; 界面配置灵活。DSkinLite界面库采用XML管理GDI元素，并独创了将界面元素抽象为图片，矩形，线条，文字等元素。任何一个控件界面均可以由这些元素来组合，使用DSkinLite可以轻松配置各种界面效果。如下图所示： 由此在一个控件界面中，可以灵活的配置界面元素，可以满足绝大多数界面设计需要。 动态的控制界面元素。同时DSkinLite提供相应的API可以控制这些元素（image，text，rect）的显示/隐藏，同时修正某些属性，如image的picfile属性即更换图片，text的content属性即文本内容。这种界面需求在界面开发中十分常见。如： if ( bVoice ) { dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&#62;GetSafeHwnd(), 101,101, FALSE, FALSE); dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&#62;GetSafeHwnd(), 100,100, TRUE, TRUE); //Because there are tow calls for [...]]]></description>
			<content:encoded><![CDATA[<p>&#160;</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb31.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb3" border="0" alt="image_thumb3" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb3_thumb.png" width="220" height="153" /></a> </p>
<p>客户经常来信询问该如何选择界面库产品：    <br />“你们的产品跟其他同类产品相比有什么优势？”     <br />“你们的<strong>DSkinLite</strong>界面库跟<strong>DirectUI</strong>界面库有什么不同，哪个产品更适合我们公司？” </p>
<p>前面的三篇文章分别介绍了：    </p>
<p><a href="http://www.uieasy.cn/blog/?p=462" target="_blank">如何选择VC界面库产品（一）&#8211; 选择界面库产品需考虑的因素</a> </p>
<p>本文主要介绍UIEASY DSkinLite库界面产品的特点及优势。</p>
<p> <span id="more-473"></span>
</p>
<h2>DSkinLite界面库产品</h2>
<p>&#160;&#160;&#160;&#160;&#160; DSkinLite 是一款轻量级的C++界面库，未使用复杂的<strong>Hook</strong>操作，仅使用替换窗口过程的方式（SubclassWindow）来处理控件界面绘制。使用XML文件管理GDI资源如颜色，字体，图片，并描述界面构成，最大程度的将<strong>界面和程序逻辑分离</strong>，同时为软件皮肤更换，换色等提供基础支持。     <br />&#160;&#160;&#160;&#160;&#160; 同时UIEASY首次创造性的将<strong>界面构成元素抽象</strong>为线条元素，矩形元素，图片元素，文本元素，并提供相应规则来使用这些元素“组合” 界面。这极大的提高了界面库产品的灵活性，使得界面库产品可以随意构造出多种多样的控件界面。     <br />&#160;&#160;&#160;&#160;&#160; DSkinlite融合了DirectUI元素并提供多款自绘控件。</p>
<p>&#160;&#160;&#160; DSkinLite秉承UIEASY界面产品设计理念- 高效，简单，灵活，稳定。拥有以下显著特点：</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb102.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb1.png" width="27" height="25" /></a> 简单易用</h3>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; DSkinLite界面库API及XML配置语法简单，开发人员一般可以在2-3天内熟悉使用方法。DSkinLite界面库API共20个左右，常用API函数应该在5左右。同时DSkinLite采用C++编写，专为Visual Studio开发者设计，开发者可以很容易的将DSkinLite整合到已有软件工程中或者迅速开发新的软件。    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; DSkinLite使用XML配置界面样式，定义界面资源（字体，颜色，图片）等。借助于XML的灵活的语法，可以描述多种多样的控件界面风格。因此不管您是否有意选择DSkinLite界面产品，您都可以下载我们的使用试用版，了解DSkinLite界面库的设计风格，相信会让您了解一种全新的界面产品设计理念，给您的界面开发带来启发。</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb103.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb2.png" width="27" height="25" /></a> 界面配置灵活</h3>
<p><strong>&#160;&#160;&#160;&#160;&#160; 界面配置灵活。</strong>DSkinLite界面库采用XML管理GDI元素，并独创了将界面元素抽象为<strong>图片，矩形，线条，文字</strong>等元素。任何一个控件界面均可以由这些元素来组合，使用DSkinLite可以轻松配置各种界面效果。如下图所示：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image17.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image17_thumb.png" width="510" height="255" /></a>     </p>
<p>由此在一个控件界面中，可以灵活的配置界面元素，可以满足绝大多数界面设计需要。</p>
<p><strong>动态的控制界面元素。</strong>同时DSkinLite提供相应的API可以控制这些元素（image，text，rect）的显示/隐藏，同时修正某些属性，如image的picfile属性即更换图片，text的content属性即文本内容。这种界面需求在界面开发中十分常见。如：     </p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image7.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb7.png" width="386" height="77" /></a>     </p>
<pre class="brush: cpp;">if ( bVoice )
{
    dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&gt;GetSafeHwnd(), 101,101, FALSE, FALSE);
    dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&gt;GetSafeHwnd(), 100,100, TRUE, TRUE);
    //Because there are tow calls for dsSetDrawItemVisible,
    //it only need redraw the window after the last time.
    bVoice = FALSE;
}
else
{
    dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&gt;GetSafeHwnd(), 101,101, TRUE, FALSE);
    dsSetDrawItemVisible( GetDlgItem( IDC_BUTTON8)-&gt;GetSafeHwnd(), 100,100, FALSE, TRUE);
    bVoice = TRUE;
}</pre>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb104.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb3.png" width="27" height="25" /></a> 控件支持全面</h3>
<p>&#160;&#160;&#160; DSkinLite除支持一般控件之外，还完整支持各种控件的内置滚动条。同时还采用可以配置listctrl，listbox，treectrl等控件的item内容的绘制，无需额外编写绘制代码。具体请参见：<br />
  <br />&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=296" target="_blank">Item控件（List control, List Box, Tree Control）绘制(一)–DrawItem配置</a> </p>
<p>&#160;&#160;&#160; <br />&#160;&#160;&#160;&#160;&#160; 同时针对Win32控件本身的一个局限，DSkinLite中加入了一些自绘的控件，来解决使用标准Win32控件无法解决的界面需求。详细了解，WidgetTree自绘控件，WidgetTab自绘控件。 </p>
<p>&#160;&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=183" target="_blank">DSkinLite 新特性– 自绘树形控件(QQ好友列表)</a> </p>
<p>&#160;&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=371" target="_blank">DSkinLite新特性—WidgetTab</a></p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb104.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb3.png" width="27" height="25" /></a>高效图形绘制模块</h3>
<p>&#160;&#160;&#160; DSkinLite未使用GDI+等图形库，使用针对公司开发的图形库来绘制界面，图形库对界面编程优化并扩展；支持各种paintmode（参考<a href="http://www.uieasy.cn/blog/?p=391" target="_blank">DSkinLite 使用技巧(六) – 绘制元素</a>），同时支持png，bmp，gif, jpeg等图形格式。</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb104.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb3.png" width="27" height="25" /></a>与其他产品组成界面解决方案</h3>
<p>&#160;&#160;&#160;&#160; DSkinLite界面库周边产品完善。<br />
  <br />&#160;&#160;&#160;&#160; <strong>DSkinControl( For MFC )</strong> 是一款MFC扩展控件库，同时使用DSkinLIte处理界面绘制。了解更多关于DSkinControl 控件库： </p>
<p>&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=359" target="_blank">UIEASY 控件库DSkinControl ( For MFC) V1.0 发布</a> </p>
<p>&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=378#more-378" target="_blank">DSkinControl( For MFC) 新控件 StackWnd</a></p>
<p>&#160;&#160;&#160;&#160; <strong>ekRichEdit控件</strong>为一款RichEdit扩展控件，主要对微软RichEdit控件做扩展，实现显示图片动画，文本，超链接等，满足Windows客户端软件对富文本控件的需求。同时我们针对IM等聊天窗口中的需求，封装相应的类来支持；可以满足IM软件对RichEdit的基本需求。了解更多关于ekRichEdit控件： </p>
<p>&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=419" target="_blank">RichEdit扩展控件–ekRichEdit简介</a> </p>
<p>&#160;&#160;&#160;&#160; <a href="http://www.uieasy.cn/blog/?p=426" target="_blank">RichEdit扩展控件– ekRichEdit API 说明</a> </p>
<p>&#160;&#160;&#160; DSkinLite界面库与这些控件产品完全兼容，可以同时在软件产品中使用。</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb104.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image_thumb10" border="0" alt="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb3.png" width="27" height="25" /></a>产品稳定</h3>
<p>&#160;&#160;&#160; DSkinLite界面库产品自2008年推出以来，先后经历三次大的版本发布，并持续更新至今，最新版本为V3.7.5.3。未来还将有更多的新特性加入DSkinLite。<br />
  <br />&#160;&#160;&#160;&#160; DSkinLite产品从推出以来，受到市场广泛好评。企业客户遍及中国，韩国，日本，美国，印度，欧洲。<strong>欢迎您与我们联系，索取成功案例信息</strong>。</p>
<p>&#160;</p>
<h2>DSkinLite详细功能特性</h2>
<p>&#160;</p>
<p><strong>界面库统一特性：</strong></p>
<table border="1" cellspacing="0" cellpadding="2" width="507">
<tbody>
<tr>
<td valign="top" width="134"><strong>功能特性</strong> </td>
<td valign="top" width="371"><strong>详细描述</strong> </td>
</tr>
<tr>
<td valign="top" width="134">界面色调动态调整</td>
<td valign="top" width="371">支持界面整体换色调，同时可自由控制图片，文字，控件等是否换色。可通过HSL和color两种方式来更换色调。</td>
</tr>
<tr>
<td valign="top" width="143">多种皮肤加载方式</td>
<td valign="top" width="371">支持从文件夹，压缩文件，VC资源三种方式加载皮肤</td>
</tr>
<tr>
<td valign="top" width="148">全面支持滚动条</td>
<td valign="top" width="371">
<p>除支持list box, edit,rich edit, list control, tree control等滚动条外，也支持windows内置的滚动条。</p>
</td>
</tr>
<tr>
<td valign="top" width="152">皮肤文件打包</td>
<td valign="top" width="371">可使用我们提供的SkinBuilder工具，将皮肤文件整体打包。</td>
</tr>
<tr>
<td valign="top" width="154">高速图片解析库</td>
<td valign="top" width="371">支持多种图片格式<br />
        <br />支持bitmap，png带透明通道，gif，jpeg等格式。 </p>
<p>采用公司研发的图片解析库，针对界面编程做了诸多优化和扩充。 </td>
</tr>
<tr>
<td valign="top" width="156">支持多个开发平台</td>
<td valign="top" width="371">支持MFC，ATL，WTL，win32等多个开发环境，同时支持VC6-VS 2010 多个平台。</td>
</tr>
<tr>
<td valign="top" width="157">静态库</td>
<td valign="top" width="371">可提供VS 2003 &#8211; 2010 各个平台下的静态库版本</td>
</tr>
<tr>
<td valign="top" width="158">Unicode</td>
<td valign="top" width="371">支持Unicode/多字节开发环境</td>
</tr>
<tr>
<td valign="top" width="159">支持控件自绘</td>
<td valign="top" width="371">提供控件背景自绘功能，用户可以DSkinLite绘制控件前或者绘制控件后，根据提供的接口绘制控件界面。同时支持list control，listbox，tree control等控件自绘功能。</td>
</tr>
<tr>
<td valign="top" width="159">动态控制界面显示效果</td>
<td valign="top" width="371">可以根据程序逻辑动态控制控件界面的显示效果，如更换控件背景，控件文本等。</td>
</tr>
<tr>
<td valign="top" width="159">支持动画显示</td>
<td valign="top" width="371">支持动画显示，并通过API控制动画显示。支持gif格式，和多张png图片格式组成的动画。</td>
</tr>
<tr>
<td valign="top" width="159">自定义数据支持</td>
<td valign="top" width="371">可以在XML中配置控件的自定义的属性。例如：控件大小，行高以及每行的显示内容等，这样可以大大的方便换肤以后的整体的效果。</td>
</tr>
<tr>
<td valign="top" width="159">动态加载xml配置文件</td>
<td valign="top" width="371">完全支持插件式开发。在插件式界面开发中，某些界面可能是后来通过升级等方式添加的功能模块，DSkinLite可以动态加载这些插件界面的xml配置文件。 </td>
</tr>
<tr>
<td valign="top" width="159">支持控件、子窗口透明</td>
<td valign="top" width="371">DSkinLite高效支持大部分控件，子窗口透明，以及多层窗口透明。</td>
</tr>
<tr>
<td valign="top" width="159">ToolTips支持</td>
<td valign="top" width="371">可以自由在XML定义控件tooltips提示语，也可以通过函数dsSetToolTips动态设置。</td>
</tr>
<tr>
<td valign="top" width="159">标题栏添加控件</td>
<td valign="top" width="371">支持在窗口标题栏区域，添加控件。</td>
</tr>
<tr>
<td valign="top" width="159">支持美化的MessageBox</td>
<td valign="top" width="371">DSkinLite通过API dsMessageBox支持MessageBox的美化，您可以完全配置MessageBox窗口背景，提示icon图标等。 </td>
</tr>
</tbody>
</table>
<p>&#160;</p>
<p><strong>控件类型支持</strong></p>
<table border="1" cellspacing="0" cellpadding="2" width="509">
<tbody>
<tr>
<td valign="top" width="151"><strong>功能特性</strong></td>
<td valign="top" width="356"><strong>详细描述</strong></td>
</tr>
<tr>
<td valign="top" width="151">支持标准控件</td>
<td valign="top" width="356">支持static，button，checkbox,radiobox,edit,listbox,list control, tree control<br />
        <br />combobox, header control, group box, slider,spin, tab control, progress,toolbar control. </p>
<p>menu, richedit,datetime control. </td>
</tr>
<tr>
<td valign="top" width="151">支持Split button</td>
<td valign="top" width="356">Split button，是指一个button有两部分，左右均可响应事件。</td>
</tr>
<tr>
<td valign="top" width="151">完全支持Menu的绘制</td>
<td valign="top" width="356">支持Menu背景，item绘制，同时支持设置item图标ico。</td>
</tr>
<tr>
<td valign="top" width="151">支持Item绘制</td>
<td valign="top" width="356">支持根据XML定义list control,tree control, list box等item的风格，并绘制item。同时支持定义eventitem响应事件。</td>
</tr>
<tr>
<td valign="top" width="151"><a href="http://www.uieasy.cn/blog/?p=183" target="_blank">dsTreeControl自绘控件</a></td>
<td valign="top" width="356">dsTreeControl（WidgetTree）控件是一款类似Tree control的树形控件，主要支持一些标准树形控件不能完成的功能，如设置不同item的不同高度。 </td>
</tr>
<tr>
<td valign="top" width="151"><a href="http://www.uieasy.cn/blog/?p=371" target="_blank">dsTabControl自绘控件</a></td>
<td valign="top" width="356">dsTabControl（WidgetTab）控件是一款类似Tab control的树形控件，主要是为了解决标准Tab控件的限制，满足更多需求。</td>
</tr>
</tbody>
</table>
<p>
  </p>
<p>下一篇文章：</p>
<p><a href="http://www.uieasy.cn/blog/?p=479" target="_blank">如何选择VC界面库产品（三）–- DirectUI界面库产品</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=473</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何选择VC界面库产品？（一）&#8211; 选择界面库产品需考虑的因素</title>
		<link>http://www.uieasy.cn/blog/?p=462</link>
		<comments>http://www.uieasy.cn/blog/?p=462#comments</comments>
		<pubDate>Fri, 19 Nov 2010 12:02:00 +0000</pubDate>
		<dc:creator>UIEASY</dc:creator>
				<category><![CDATA[DSkinLite界面库]]></category>
		<category><![CDATA[DirectUI界面库]]></category>
		<category><![CDATA[界面编程]]></category>
		<category><![CDATA[DirectUI]]></category>
		<category><![CDATA[dskinlite]]></category>
		<category><![CDATA[控件库]]></category>
		<category><![CDATA[界面库]]></category>
		<category><![CDATA[界面解决方案]]></category>
		<category><![CDATA[皮肤库]]></category>

		<guid isPermaLink="false">http://www.uieasy.cn/blog/?p=462</guid>
		<description><![CDATA[客户经常来信询问该如何选择界面库产品： “你们的产品跟其他同类产品相比有什么优势？” “你们的DSkinLite界面库跟DirectUI界面库有什么不同，哪个产品更适合我们公司？” 在此我们对这些问题做详细和专业的分析，希望这一系列四篇文章能帮您更好的了解界面产品的软件原理和特点，了解UIEASY相关产品。从而做出适合公司研发状况的正确选择。 本文主要从界面库软件产品的特点，阐述我们在选择界面库产品时需要考虑的几个方面。 我们认为如下几点是选择界面库/控件类产品时需要认真考虑的： 产品易用性 软件控件的API及使用 是否简单易用是我们需要考虑的一个重要关键。这个问题涉及到两个方面： 是否容易整合到现有应用程序中？是否容易在新的应用程序项目中应用？ 界面控件类产品对应用程序的影响应该越小越好，要易于在现有应用程序中整合。这要求API简洁，同时也要求界面库易扩展，兼容性强。 开发人员能否及时掌握并使用 开发人员各有不同，需要让不同能力，不同经验背景的开发人员都能迅速掌握其使用方法并灵活使用。有些界面产品动则近百个API函数或者好几十个类，需要开发人员继承并二次开发，这样反而加大了开发人员的工作量。 同样有些界面控件产品甚至独立打造一套GUI的framework，如果不是国际知名的大公司，这样规模比较大的软件产品的架构设计，可扩展性，稳定性等都值得我们怀疑，这样的产品也会给我们的软件项目带来极大的风险。 产品稳定性 界面库产品当前的稳定性当然是首要考虑的问题，目前可以从以下几个方面来鉴别产品的稳定性： 是否有足够多的示例Demos来演示控件库产品的各个方面的功能特性 尤其对于DirectUI技术类型的产品，因为控件都为自绘产生，不再是标准的Win32控件，因此DirectUI类型的界面库的评估要格外的重视，如事后发现有些需求不能满足，有些效率不能跟上，那么对项目的影响将是巨大的。是否支持所需的控件？每种控件的效率如何 ？相应控件是否满足当前需求？如不满足是否提供相应的解决办法？最好能索取尽可能多的示例程序来测试各种控件，或者使用试用版编写Demo来测试项目所需的关键控件的特性。 是否已经有众多的成功案例 发布多长时间，同时是否一直有持续更新。 界面配置灵活性 界面开发一个很重要的问题是界面的样式是非常灵活的。比如一个button上面可能有一个图标，但有时也有可能需要两个图标；有时有一行文字，但有时也可能有两行不同颜色的文字。界面库产品都需要考虑这些因素。以下是我们在开发中经常遇到的问题： 控件界面的多样性。 如上面提到的不同位置多个图标，多行文字等。如果一个控件库的button只支持设置一个图标，这显然是不够灵活的，不实用的。有人可能会说“把几张图片，切图时做到一起不就可以了么，反正一个控件也可以理解只有一个背景。” 如果涉及到色调调整，这种做法会遇到麻烦，比如如下界面： 其中间图标在色调调整时，其色调不变的。如果图标和背景做到一起，则不能做到此效果。 控件界面元素的动态变化。 控件的界面表现不是静态的，很多情况我们需要能根据程序逻辑动态调整界面表现。 比如： 这种情况在界面设计与开发中是非常常见的，界面库产品需要非常容易的支持此特性。 需要根据程序逻辑自绘界面。 界面库不是万能的，界面库的设计者需要考虑尽可能的避免让客户去绘制界面，但却无法做到100%避免，由于程序逻辑的需要，客户有时候需要自己绘制控件的某一部分。因此一个完整的界面库系统需要有自绘的支持，即在界面库绘制之后，让客户有绘制的机会。同时也需要有一套机制来管理自绘部分的图片，颜色等资源，不然无法保证界面色调的一致性。 以上是我们经常碰到的一些应用场景，这些应用场景要求我们的界面库产品能对应对灵活多样的界面表现。 界面库高效性 界面库的效率是一个核心问题。糟糕的界面库效率会带来极坏的用户体验，这也应是公司在考虑一个界面控件类产品时首要考虑的问题。可以通过以下几种方式来判断界面库类产品的效率： 拖拽窗口，观察是否有明显的停顿感。 可在一个系统下，找一些知名软件比较，如QQ/MSN等。如果有明显差异，则说明界面库在界面的绘制等方面存在欠缺。 拖拽窗口，观察界面控件是否有明显闪烁 如发生界面闪烁，则说明界面绘制的处理有些问题。有些界面库产品可能出于逃避这种拖拽窗口方式的检验的目的，直接通过程序修改，使得窗口拖动过程中只有虚框，而窗口内容不随之变化。我们认为这是不合适的做法，也将影响用户体验。用户可以自己决定是否在系统设置中选择“拖动时显示窗口内容”，而不是由一个界面库来改变用户的习惯。就目前所有知名软件来说，也没有见到有这种处理方式的。当您在选购界面库产品时，如果发现这种情况，则证明此产品在绘制效率等方面可能存在严重问题，建议您向界面库提供商详细了解相关情况。 软件启动速度 界面库产品应该对图片等资源加载做优化，以尽可能的减少界面库加载等带来的时间开销。也可以通过比较软件启动速度来比较界面库的效率。 软件色调调整时的效率 色调调整等操作一般会涉及到整体界面库的运算与操作，这种情况下也可以显示出不同界面库产品之间的效率差异。如果色调调整明显带来停顿感，则说明界面库某些方面的效率偏低；一般来说DirectUI类型的库这方面效率会稍微高些。 周边产品完整性 软件界面开发会涉及到很多部分，通用的界面库产品只是其中的一个需求。界面开发中还会涉及到其他行业相关的特殊控件、组件需求，如果控件提供商能一站式的解决这些问题，提供完整的界面解决方案，那将极大的减少界面方面的研发投入。 如IM即时聊天客户端产品，除了通用界面库的需求外，可能还需要制作聊天窗口的RichEdit扩展控件，配置面板，系统消息组件，这些都是一个IM客户端必须的。 产品升级及售后服务 产品是否有持续的更新和升级 所选择的产品是否有持续的、及时的升级及更新，是否有可靠的售后服务也是需要考虑的重点。 如果控件提供商不能对产品持续投入，则产品不能保持技术竞争力，也不能给客户以信心。一个优秀的产品成长的过程应该是根据客户的需求及行业的发展来不断升级和完善的过程。 售后服务是否有保障 有保障的售后服务是选择软件产品的基本条件。 一般来说以公司方式运营的产品在售后服务方面更有保障，双方可以以合同或协议的方式来保证产品的售后服务质量及持续性。 下一篇文章： [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image41.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image4_thumb.png" border="0" alt="image" width="220" height="153" /></a></p>
<p>客户经常来信询问该如何选择界面库产品：<br />
“你们的产品跟其他同类产品相比有什么优势？”<br />
“你们的<strong>DSkinLite</strong>界面库跟<strong>DirectUI</strong>界面库有什么不同，哪个产品更适合我们公司？”</p>
<p>在此我们对这些问题做详细和专业的分析，希望这一系列<strong>四篇文章</strong>能帮您更好的了解界面产品的软件原理和特点，了解UIEASY相关产品。从而做出适合公司研发状况的正确选择。</p>
<p>本文主要从界面库软件产品的特点，阐述我们在选择界面库产品时需要考虑的几个方面。</p>
<p><span id="more-462"></span></p>
<p>我们认为如下几点是选择界面库/控件类产品时需要认真考虑的：</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a> 产品易用性</h3>
<p>软件控件的API及使用 是否简单易用是我们需要考虑的一个重要关键。这个问题涉及到两个方面：</p>
<ol>
<li><strong>是否容易整合到现有应用程序中？是否容易在新的应用程序项目中应用？<br />
</strong><br />
界面控件类产品对应用程序的影响应该越小越好，要易于在现有应用程序中整合。这要求API简洁，同时也要求界面库易扩展，兼容性强。</li>
<li><strong>开发人员能否及时掌握并使用<br />
</strong><br />
开发人员各有不同，需要让不同能力，不同经验背景的开发人员都能迅速掌握其使用方法并灵活使用。有些界面产品动则近百个API函数或者好几十个类，需要开发人员继承并二次开发，这样反而加大了开发人员的工作量。<br />
同样有些界面控件产品甚至独立打造一套GUI的framework，如果不是国际知名的大公司，这样规模比较大的软件产品的架构设计，可扩展性，稳定性等都值得我们怀疑，这样的产品也会给我们的软件项目带来极大的风险。</li>
</ol>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a>产品稳定性</h3>
<p>界面库产品当前的稳定性当然是首要考虑的问题，目前可以从以下几个方面来鉴别产品的稳定性：</p>
<ol>
<li><strong>是否有足够多的示例Demos来演示控件库产品的各个方面的功能特性 </strong>
<p><strong> </strong> 尤其对于DirectUI技术类型的产品，因为控件都为自绘产生，不再是标准的Win32控件，因此DirectUI类型的界面库的评估要格外的重视，如事后发现有些需求不能满足，有些效率不能跟上，那么对项目的影响将是巨大的。是否支持所需的控件？每种控件的效率如何 ？相应控件是否满足当前需求？如不满足是否提供相应的解决办法？最好能索取尽可能多的示例程序来测试各种控件，或者使用试用版编写Demo来测试项目所需的关键控件的特性。</li>
<li><strong>是否已经有众多的成功案例 </strong></li>
<li><strong>发布多长时间，同时是否一直有持续更新。</strong></li>
</ol>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a>界面配置灵活性</h3>
<p>界面开发一个很重要的问题是界面的样式是非常灵活的。比如一个button上面可能有一个图标，但有时也有可能需要两个图标；有时有一行文字，但有时也可能有两行不同颜色的文字。界面库产品都需要考虑这些因素。以下是我们在开发中经常遇到的问题：</p>
<ol>
<li><strong>控件界面的多样性。<br />
</strong>如上面提到的不同位置多个图标，多行文字等。如果一个控件库的button只支持设置一个图标，这显然是不够灵活的，不实用的。有人可能会说“把几张图片，切图时做到一起不就可以了么，反正一个控件也可以理解只有一个背景。” 如果涉及到色调调整，这种做法会遇到麻烦，比如如下界面：</p>
<p><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image4.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb4.png" border="0" alt="image" width="30" height="30" /></a> 其中间图标在色调调整时，其色调不变的。如果图标和背景做到一起，则不能做到此效果。</li>
<li><strong>控件界面元素的动态变化。<br />
</strong>控件的界面表现不是静态的，很多情况我们需要能根据程序逻辑动态调整界面表现。<br />
比如：<br />
<a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image5.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb5.png" border="0" alt="image" width="67" height="22" /></a><br />
这种情况在界面设计与开发中是非常常见的，界面库产品需要非常容易的支持此特性。</li>
<li><strong>需要根据程序逻辑自绘界面。<br />
</strong>界面库不是万能的，界面库的设计者需要考虑尽可能的避免让客户去绘制界面，但却无法做到100%避免，由于程序逻辑的需要，客户有时候需要自己绘制控件的某一部分。因此一个完整的界面库系统需要有自绘的支持，即在界面库绘制之后，让客户有绘制的机会。同时也需要有一套机制来管理自绘部分的图片，颜色等资源，不然无法保证界面色调的一致性。</li>
</ol>
<p>以上是我们经常碰到的一些应用场景，这些应用场景要求我们的界面库产品能对应对灵活多样的界面表现。</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a>界面库高效性</h3>
<p>界面库的效率是一个核心问题。糟糕的界面库效率会带来极坏的用户体验，这也应是公司在考虑一个界面控件类产品时首要考虑的问题。可以通过以下几种方式来判断界面库类产品的效率：</p>
<ol>
<li><strong>拖拽窗口，观察是否有明显的停顿感。<br />
</strong> 可在一个系统下，找一些知名软件比较，如QQ/MSN等。如果有明显差异，则说明界面库在界面的绘制等方面存在欠缺。</li>
<li><strong>拖拽窗口，观察界面控件是否有明显闪烁<br />
</strong> 如发生界面闪烁，则说明界面绘制的处理有些问题。有些界面库产品可能出于逃避这种拖拽窗口方式的检验的目的，直接通过程序修改，<strong>使得窗口拖动过程中只有虚框</strong>，而窗口内容不随之变化。我们认为这是不合适的做法，也将影响用户体验。用户可以自己决定是否在系统设置中选择“拖动时显示窗口内容”，而不是由一个界面库来改变用户的习惯。就目前所有知名软件来说，也没有见到有这种处理方式的。当您在选购界面库产品时，如果发现这种情况，则证明此产品在绘制效率等方面可能存在严重问题，建议您向界面库提供商详细了解相关情况。</li>
<li><strong>软件启动速度</strong><br />
界面库产品应该对图片等资源加载做优化，以尽可能的减少界面库加载等带来的时间开销。也可以通过比较软件启动速度来比较界面库的效率。</li>
<li><strong>软件色调调整时的效率<br />
</strong> 色调调整等操作一般会涉及到整体界面库的运算与操作，这种情况下也可以显示出不同界面库产品之间的效率差异。如果色调调整明显带来停顿感，则说明界面库某些方面的效率偏低；一般来说DirectUI类型的库这方面效率会稍微高些。</li>
</ol>
<h3></h3>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a> 周边产品完整性</h3>
<p>软件界面开发会涉及到很多部分，通用的界面库产品只是其中的一个需求。界面开发中还会涉及到其他行业相关的特殊控件、组件需求，如果控件提供商能一站式的解决这些问题，提供完整的界面解决方案，那将极大的减少界面方面的研发投入。</p>
<p>如IM即时聊天客户端产品，除了通用界面库的需求外，可能还需要制作聊天窗口的RichEdit扩展控件，配置面板，系统消息组件，这些都是一个IM客户端必须的。</p>
<h3><a href="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb105.png"><img style="display: inline; border-width: 0px;" title="image_thumb10" src="http://www.uieasy.cn/blog/wp-content/uploads/2010/11/image_thumb10_thumb4.png" border="0" alt="image_thumb10" width="27" height="25" /></a>产品升级及售后服务</h3>
<ol>
<li><strong>产品是否有持续的更新和升级</strong><br />
所选择的产品是否有持续的、及时的升级及更新，是否有可靠的售后服务也是需要考虑的重点。<br />
如果控件提供商不能对产品持续投入，则产品不能保持技术竞争力，也不能给客户以信心。一个优秀的产品成长的过程应该是根据客户的需求及行业的发展来不断升级和完善的过程。</li>
<li><strong>售后服务是否有保障</strong><br />
有保障的售后服务是选择软件产品的基本条件。<br />
一般来说以公司方式运营的产品在售后服务方面更有保障，双方可以以合同或协议的方式来保证产品的售后服务质量及持续性。</li>
</ol>
<p>下一篇文章：<br />
<a href="http://www.uieasy.cn/blog/?p=473" target="_blank">如何选择VC界面库产品（二）–- DSkinLite界面库介绍</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uieasy.cn/blog/?feed=rss2&#038;p=462</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

