1 SkinUI的发展历史和开发环境

  • 官方网站:http://www.skinui.cn
  • 下载地址:http://pan.baidu.com/s/1slKsMGt

SkinUI界面库提供Windows界面开发全套解决方案,经过几年不断的优化和迭代,变得非常稳定和高效。本文将会简单介绍如何使用SkinUI界面库开发Windows客户端应用。

本章是全书的基础,简要介绍SkinUI界面库的历史、现状和发展趋势,并重点向读者讲解如何搭建和使用SkinUI界面开发环境,包括SkinUI提供的Sln++、Res++、Spy++工具。掌握这些工具是开发SkinUI应用的基础技能。

1.1 历史和现状

SkinUI是本人利用业余时间开发的用于Windows客户端开发的界面库,从2010年8月至今一直不断优化和迭代。

第一版的界面库以MFC为基础自定义了一系列的控件,布局只有绝对定位。虽然能实现市面上大部分客户端软件的效果,但是难以扩展,开发效率低下。同时,因为依赖MFC,安装包需要携带庞大的MFC库文件,其体积是核心库文件的几十倍以上,对于开发一些几百KB的小程序,代价有点大。

为了解决以上问题,第二版本的界面不再依赖MFC,转而以WTL为基础,解决了库文件体积庞大的问题。同时,该版本的界面库增加了相对布局,开发效率显著提高。但是,MFC、WTL存在一些坑,需要写很多猥琐代码才能绕过,不够优雅。另外,跟市面上其他产品相比,界面效果没有让人眼前一亮的感觉。一些动画、换肤等高级功能实现起来依然繁琐、最终实现的效果也无法令人满意。例如采用双窗口联动方式实现的阴影存在跟随问题,在窗口拖动和最大最小化的时候有迟滞。

实际上,以上两个版本都没能完美解决扩展性的问题。例如,为了实现产品各式各样的按钮,每种按钮都需要从按钮类继承一下,最后可能存在几十个类似的按钮类,而它们仅仅只是绘制部分的代码不同。

为了解决以上存在的种种问题,最终开发了第三版的界面库。这一版本的界面库以Win32为基础,不再依赖MFC和WTL等第三方界面库,历史遗留问题得到彻底解决。除了支持相对布局,还支持水平布局、垂直布局、帧布局、表格布局、比例布局等高效的布局方式。同时,以组合的方式实现绝大部分控件,再也不需要每种按钮继承一个按钮类,直接替换布局文件即可得到完全不同样式的按钮。

1.2 发展趋势

Windows客户端开发的一项重要工作就是用户界面的开发。不管客户端应用实际包含的逻辑多么复杂、多么优秀,如果这个应用没有提供友好的图形用户界面,也将很难吸引最终用户。

相反,如果为应用程序提供了友好的图形用户界面,最终用户通过鼠标点点就可以操作整个应用,这个应用程序就会受欢迎得多。实际上,Windows之所以广为人知,其最初的吸引力就是来自于它所提供的图形用户界面。作为一个程序开发者,必须优先考虑用户的感受,一定要让用户感到爽,我们的程序才会被需要、被使用,这样的程序才有价值。

从趋势上看,用户对Windows客户端界面的要求会越来越高,对Windows界面开发人才的需求也越来越大。对于大部分Windows客户端来说,新增功能50%以上的开发量来自于界面开发,后期迭代70%以上的工作量同样来自界面开发。

虽然界面开发的工作量越来越大,但是MFC、WTL等传统界面库开发效率低下,实现动画、换肤等高级需求困难,同时卡顿、闪烁等一系列问题难以彻底解决,已经无法满足互联网时代多变的需求。

SkinUI提供了大量功能丰富的UI组件,开发者只需要按一定的规律把这些UI组件组合起来——就像小朋友“搭积木”一样,把这些UI组件按一定规律搭建在一起就可以开发出优秀的图形用户界面。为了让这些UI组件响应用户的鼠标点击、键盘动作,SkinUI提供了事件响应机制,这样可以方便的响应用户的交互操作。

SkinUI致力于做最好用的Windows客户端界面库,是现阶段界面开发的不二选择。

1.3 开发环境

SkinUI当前版本为2.0,可以从官网下载SkinUI开发包,官网地址:www.skinui.cn。当前版本仅支持Microsoft Visual Studio 2013,SkinUI开发包不需要安装,解压下载的压缩包,开发环境就准备好了。以下是常用的工具:

  • SkinUISln++,用来新建工程
  • SkinUIRes++,用来打包资源文件
  • SkinUISpy++,用来查看组件类型和位置

1.3.1 SkinUISln++

SkinUI使用工具【SkinUISln++】来新建工程。工具截图如下:

1 SkinUI的发展历史和开发环境_第1张图片
SkinUISln++

新建项目的步骤如下:

  1. 在编辑框输入工程名称【MyProject】;
  2. 单击按钮【立即新建】;
  3. 等进度条走完。

新建项目成功后,工作目录下多了以下目录:1)【src】目录下的源码目录【MyProject】;2)【res】目录下的资源目录【MyProject】;3)【skin】目录下的皮肤目录【MyProject】。

将源码目录【MyProject】下的工程文件加入VS2013的解决方案,编译运行即可看到项目的主界面。开发者可以根据自己软件的需求,随意修改主界面的布局。

1.3.2 SkinUIrRes++

SkinUI使用工具【SkinUIRes++】来打包资源文件。工具截图如下:

1 SkinUI的发展历史和开发环境_第2张图片
SkinUIRes++

新建项目的步骤如下:

  1. 单击按钮【立即打包】;
  2. 等进度条走完。

打包资源文件成功后,【res】目录下任意资源目录【AnyProject】将会生成资源包文件【AnyProject.res】。关于资源包的用法,我们将在后面的章节详细讲解,此处先略过。

1.3.3 SkinUIrSpy++

SkinUI使用工具【SkinUISpy++】来查看控件的属性,包括控件Id、类型、位置和大小。工具截图如下:

1 SkinUI的发展历史和开发环境_第3张图片
鼠标在非SkinUI窗口上的显示效果
1 SkinUI的发展历史和开发环境_第4张图片
鼠标在SkinUI窗口上的显示效果

查看控件属性的步骤如下:

  1. 移动鼠标到SkinUI窗口;
  2. 放在需要查看的控件上。

观看上面的截图,可以看到以下信息:

  • 控件的Id为【1】;
  • 控件类名为【SkinButton】;
  • 控件的位置为【199,177,125,30】;
  • 控件的大小为【125*30】。

你可能感兴趣的:(1 SkinUI的发展历史和开发环境)