To keep in step with the pace of software innovation, application developers are under on-going pressure to deliver high quality application interfaces built around the needs of users. Increasingly, users are more interested in accomplishing specific tasks with a simple, elegant set of controls rather than in the underlying mechanics of the application. This article shows the new way.

To keep in step with the pace of software innovation, application developers are under on-going pressure to deliver high quality application interfaces built around the needs of users. Increasingly, users are more interested in accomplishing specific tasks with a simple, elegant set of controls rather than in the underlying mechanics of the application.

While the applications themselves will vary, well designed interfaces often employ a common set of features, such as frame docking and toolbar management, that expose key application functions in an unobtrusive, easily-accessible manner. This framework enables developers to offer users the tools they need exactly when and where they need them.

In our applications, we always want to make sure our users have convenient access to their key tools. Throughout our experience, we've realized that many key GUI features can be factored into a set of generalized behavior. We realized that if we created a specific library to address these issues, we could more quickly create "advanced" interfaces without having to implement individual pieces in an ad hoc fashion.

The result, wxAUI, is an Advanced User Interface library for the wxWidgets toolkit that aims to implement "cutting-edge" interface usability and design features so developers can quickly and easily create both beautiful and usable application interfaces that work natively across multiple platforms. It is an open source library provided under the wxWidgets license and is available for download from www.kirix.com.

Using wxAUI, developers can create applications with native, floating and docking frames, draggable, "spring-loaded" toolbars, perspective saving and loading, and special graphical effects, such as a customizable look and feel and transparent windows while dragging.

Figure 1. wxAUI Sample Application

Getting Started

To see how these features are implemented, let's build a sample application that implements frame docking, moveable toolbars, perspective saving and loading, and several different look and feel options.

Before we can implement any of these interface features, we need to build a basic application using the wxWidgets library, a powerful graphical toolkit that enables developers to easily build cross-platform applications with native look and feel.

First, we derive a class called MyApp from the wxApp class, which represents the application and stores application settings, creates the window messaging system or event loop, and allows command line arguments to be passed to the application.

Next, in our derived MyApp class, we implement the application behavior by overriding the OnInit() function, which defines the entry point into the application. In this function, we need to create a frame, tell the application to use that frame as the top-level application window, show it so it is visible to the user, and continue processing events until that frame is closed.

To create a frame, we derive another class called MyFrame from the wxFrame class, where we implement our window interface, such as menus, toolbars, child windows, docking behavior, and other specifics of the interface. Once we've created this frame, we tell the application to use it as the top-level application window by passing it to the SetTopWindow() function in the MyApp::OnInit() function.

Finally, we tell the application to display the frame using the Show() function and to continue to process window events by returning true from the OnInit() function.

At this point, we've defined the basic application framework and top-level window, as shown in Listing 1, and we are ready to customize the application interface by building onto the MyFrame class.

Frame Docking

Here's where the fun beings. To implement frame-docking and moveable toolbars, we create a wxAUI frame manager in the MyFrame class that will be responsible for managing our application's frames and toolbars. In fact, because wxAUI implements this functionality in a separate class called wxFrameManager, we can use it with any wxFrame-derived class, including wxMDIParentFrame, giving us greater flexibility in how we utilize the manager's functionality.

Once we create the wxAUI frame manager in MyFrame, we need only add the frames and toolbars we want managed to the manager and specify the information the manager needs to determine how the windows and toolbars are managed.

First, to create a wxAUI frame manager, we add a wxFrameManager member variable to MyFrame, and then put MyFrame under the manager's control by passing MyFrame to the manager's SetFrame() function in the MyFrame constructor.

Next, we create the frames and toolbars we want to be dockable and add these to the manager using the Add() function along with some frame management information, specified using wxAUI's wxPaneInfo class.

Finally, we tell the manager to start managing the newly added panes by calling its Update() function. Of course, we also need to unitialize the manager when the frame is destroyed, which we do by calling the manager's UnInit() function in the MyFrame destructor.

When the application runs, wxFrameManager manages the panes associated with it for a particular wxFrame, using replaceable dock art class to do all drawing which may be customized depending on an application's specific needs.

The manager determines the docking layout using four parameters: direction, position, row, and layer. The direction parameter determines whether a frame will be docked at the top, bottom, left, right, or center of the top-level window. The position and row parameters allow more than one frame to be docked in each of these locations. For example, with two frames docked on the left side, the top frame in the dock would have a position of zero, and the second would have a position of one. Finally, the layer parameter allows multiple levels of dock positions.

Listing 2 shows our application with the newly added frame manager, along with some toolbars and frames for it to manage.

Perspectives and Appearance

Once we've implemented frame docking, we can save the positions of the frames and reload them at a later time to create different perspectives of the application.

With wxAUI, this is easy: we configure the panels the way we want and save the perspective using the wxFrameManager's SavePerspective() function, which creates a string that stores the information needed to restore that dock configuration. When we want to restore this perspective, we pass this string to the wxFrameManager's LoadPerspective() function, and the manager will reconfigure the panels to the saved perspective's state.

To add perspective support to our application, we add a View menu item that will allow us to create new panels that we can dock, as well as create and load the perspectives. Once we've added the menu and panel creation functions, we create two menu event handlers, one for saving the perspective called OnCreatePerspective(), and the other for loading the perspective called OnRestorePerspective().

The OnCreatePerspective() opens a dialog that let's us type in the name of a perspective, then adds this named perspective to the View menu so it can be loaded when the menu item is clicked. The OnRestorePerspective() function restores the perspective associated with the particular name of the perspective listed in the View menu.

To finish our application, we want to change the docking look and feel of our application, which we can do by setting wxFrameManager's flags with the SetFlags() function. Following the same course of action we used with saved perspectives, we create an Options menu item that will allow us to set different combinations of these flags, then use these menu items to call the OnManagerFlag() function, which updates the flags and changes the docking look and feel.

Listing 3 shows the finished program.

Conclusion

Using wxAUI, developers can create applications with native, floating and docking frames, draggable, "spring-loaded" toolbars, perspective saving and loading, and special graphical effects, such as a customizable look and feel and transparent windows while dragging.

Using these features, developers can focus their energy on designing elegant interfaces that not only incorporate advanced interface features, but also help the end user work more effectively.

A d v e r t i s e m e n t

sum:

0 €

» Library of the Month
» Workshop
» Software Engineering
» Programming Tools
» Interview
» High quality and
secure programming
» Reverse Engineering
» Portable GUI
» Artificial intelligence