开发者社区> 杨粼波> 正文

DirectUI: Become windowless

简介:
+关注继续查看

UI: Become windowless

A request on the Yahoo WTL newsgroup and a blog-article sparked some interest to look closer at creating a windowless user-interface. Traditionally, Windows applications are built upon the GDI/User windowing hierarchy, and thus restricted in several areas. While you can certainly generate a nice application quickly with the built-in control-set and get a standard clean look, you will soon enough stumble upon the limitations of the Windows controls - especially if you want to build something that looks a little more flashy. The native Win32 custom-draw/owner-draw technique is limited, next to no support for transparent windows, rigid control scaling/resizing and the Common Controls are merely remnants of Windows Explorer, Office or Internet Explorer widgets.

A windowless user-interface doesn't make use of the native Win32 controls. Instead it custom paints every control and widget on the screen - including labels, buttons, list control, etc. etc. Variations of this kind of interface is not new: "Skinning" has been widely accepted for its cool application-look, as seen in Nullsoft's WinAmp and the MS Media Player. But skinning is usually only feasible for small applications hosting a limited number of dialogs. If you're building a large database-driven application, you'll want to have a solid framework to back your dialog design up.

So I was looking at the Microsoft CRM application. In my opinion, this is one of the most successful DHTML interfaces I've seen (I should know because I've previously been assigned on a large browser-based CRM product). The MS CRM interface looks very Windows XP-like, but it also has several cool features, such as a navigation bar, a highly flexible list control and several shaded/gradient tool panels. I thought this would be a nice look to build for my windowless framework. I've previously tested a DHTML interface with this look, but wasn't satisfied - mostly because integrating with the browser (IE) was painfully complicated.

Direct UI sampleEven if constructing a windowless user-interface is a lot of hard work, it pays off in the end. But you do need to implement your own dialog builder, button-design, keyboard interface and lots of little things you take for granted. Actually it's not the painting of buttons and toolbars that take the most planning and effort; it's supporting keyboard shortcuts, tab-navigation, automatic tooltips and a scalable design. And then there are the mandatory - but often overlooked - features, such as list column-sorting, intuitive focus changes and overflow scrolling that need to be addressed.

The design

My Direct UI user-interface takes bits and pieces from other UI models. Specifically it borrows ideas of the "controls-inside-controls" design from the Java AWT framework, XML dialog-resources from .NET, event-bubbling from DHTML and C++ helper classes from MFC.

The code doesn't actually use the WTL library like most of my other user interface samples on this website. It's pure Win32 calls. 
One of the requirements for the framework was that it could be placed in an external DLL. This had a nasty impact on the design, because C++ templates are not by any sane method exportable in a DLL. So, a clean C++ old-skool (MFC) design is enforced, with single inheritance and few (if not none) macros. 
A window is built by nesting controls inside each other. Some controls are containers (such as the ToolBar, which contains ToolButtons). To insert a ToolBar button, you simply construct a CToolButton C++ class and add it to theCToolPanel control container. Most containers define layout algorithms such as the vertical layout-panel, which arranges the contained elements below each other - a feature known from Java AWT.

Using a Java-like design, such as the layout containers, make sure that your controls will rescale automatically when the window is resized. But anyone who has done any Java development knows how limiting its control layout features are and has wished to kick the authors of the GridBagLayout class in the nuts. So there's also room for a dialog layout-panel, which allows you to put controls at a fixed position, but with the option of scaling based on various stretching rules. 
Constructing an entire window by hand is tedious, so there's a small XML parser included (extremely fast, extremely non-compliant) which parses and builds a window from an XML string. 
The framework caches all of its Win32 brushes and pens. Most of the GDI resources saved on window handles are probably spent on this. But these kinds of objects are light-weight; it's the paint job that gets an incredible overhaul. 
Native Win32 controls are used only for the EDIT control. This control contains so much functionality that it would take ages to do a decent replacement. Single-line edit controls are created on the fly (when you click on the frame) and multi-line edits are always visible. So the framework does have the ability to embed native Win32 controls and even ActiveX controls, but at the expense of screen flickering and severe restrictions in the visual effects I'm planning.

Alluring text

The real benefits of this type of interface are the simple things. For instance, you can with one single swoop replace all occurences of Win32 DrawText() with DrawPrettyHtmlFormattedText() - which instantly gives you icons, customizable text-colors and clickable hyperlinks in the entire user-interface. With one single line of code, you can now add HTML links in the statusbar panel. 
Similar, you are not restricted to only put CToolButton controls inside the ToolBar. Any kind of control can be added. This also goes for the list control, which quickly can be made cool by adding some group-labels, or just by adding buttons or HTML links. Since the individual controls rarely erase the background, most of them will actually fit transparently inside the other container controls, so once you've made a neat widget it can be reused in the entire user interface.

3D Animations

Another cool effect that can be easily added is the ability to do 3D rendering directly on the canvas. Just throw in some DirectX calls and you'll be able to write cool page transitions, highlight a control with some cool sparkling particle-effect or just put some glow effect on the edit-box with focus. 
You can also read about how I integrated DirectX into the application.

The sample

This may all sound very nice. However, the sample presented here is just the initial stage of a windowless framework I'll use for further testing. The library will need to mature a bit and go through a few rewrite cycles before I'll attempt to actually incorporate it in a real application. Still, it's pretty functional already. Enjoy.

The sample should be run with DirectX 9 installed and a modern 3D graphics card. Otherwise you will not be able to view the pretty 3D animations.

Source Code Dependencies

Microsoft Visual C++ 6.0
Microsoft DirectX 9 SDK

Download Files

Download Demonstration (91 Kb)
Source Code (126 Kb)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
17200 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
10005 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14743 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
13974 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21678 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25231 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
13948 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
33605 0
+关注
杨粼波
网游的老兵
1152
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载