WPF Tutorials — Application Architecture

A well-conceived and documented architecture is at the heart of most successful software. As such, that’s where we’re going to start with what I’m going to call our Gradient Previewer. This post will concentrate on the goals of our architecture, the inspiration I’m drawing from, and the basic tact we’ll be taking. At the end, I’ll include a packaged Visual Studio 2008 Solution that you can download and look at what we’re starting with.

Architecture Goals

For this application, I have two main architectural goals. The first involves the separation of application logic from the user interface. Fortunately, WPF and the .NET 3.5 framework make this easy to do once you know a few tricks. This separation helps keep each separate piece of the application focused on a single task or set of tasks, making maintenance easier and the application more apt to be understood.

The second goal is to make the application skinnable. Quite frankly, I am not a very practiced visual designer, and I know that the first UI for this application will definitely not be the greatest thing since sliced bread. Taking an architectural approach that allows for the application to be skinned provides for the opportunity for the UI to be reworked down the line into something more beautiful. That’s the plan at least.

Architectural Inspiration

I’m definitely not going into this project blind. I’ve taken inspiration from many places. First and foremost, I’d like to thank Josh Smith for allowing the download of the source for his Podder application. You can find Podder here.

Another resource that I’ve relied upon as I’ve learned about WPF is the idea of the Model-View-ViewModel pattern that I first learned about on Pete W’s Idea Book. While I’ve taken it in a somewhat different direction (moving control out of the viewmodel and into a controller) it was a great resource to get me thinking.

Architectural Design

Getting down to the nitty gritty, let’s go ahead and examine the solution explorer window at this point. It will help illustrate how I’ve laid out the application.
The solution explorer after just laying down the basic architecture of the gradient previewer.

The first thing you’ll notice is that the solution is split into two projects. The first project is GradientPreviewer, where our application lives and where all the stuff that makes the application work will happen. The second project is GradientPreviewerLib, which holds the models and viewmodels for this project. These are the back end data objects that will eventually be bound to our UI in various forms.

Looking through the first project, you’ll notice a number of different folders. The first is the Controllers folder. In the Controllers folder (and namespace), we’ll be placing a controller for each major UI element in our application. These controllers will be responsible for managing the actions that occur in the UI element that they encapsulate. Next, you’ll see the DefaultSkin folder and it’s subfolders. Here we’ll be creating the UI for use in the default skin. The default skin contains Converters.cs and Resources.xaml files. The former will hold any converter classes necessary for the default UI while the latter will define the view parts and any other resources to use for the default skin.

Speaking of the UI, we come to the UI folder and namespace. Each part of the user interface that is absolutely needed for the application to function will reside here. For now, we just have the MainWindow.xaml file representing the main window for the Gradient Previewer application. The content of each UI part will be dynamically filled using a dynamic resource that is returned from the current skin’s Resources.xaml file.

Finally, we come to the App.xaml and Commands.cs files that reside in the default namespace. App.xaml and it’s codebehind class App.xaml.cs provide for startup of the application and are pretty much necessary in every WPF application. Commands.cs will encapsulate a number of RoutedCommands that will be used to trigger actions within the application. Every action that can be taken will first be defined in this class as a public static RoutedCommand.

Download

If you’ve enjoyed this tutorial and want to see where we’re currently at as far as code goes, download the following zip file: Gradient Previewer Solution Part 1

A Tale of Two Operating Systems: The Applications

One of the reasons I decided to reformat my computer was because I always end up installing many more applications then I actually need. In addition to that, I often have to install software that I downright hate for some of my computer science classes (Xilinx IDE, I’m looking at you!). Because some applications’ uninstall features don’t actually remove themselves and all their components from the computer, I end up with a bunch of registry cruft and folders on my file system that I’m not particularly happy about.

Of course, a computer can’t really do you any good unless you’re running some type of applications on it. In this post, I’d like to summarize the applications that I’m using on Microsoft Windows Vista and those that I utilize on Ubuntu. In general, I only install applications that I’m actually going to use, and those are the applications that made this list.

Vista Applications

There are two main types of applications that I run on my Vista partition. First is productivity software. These are the applications that I need in order to manage documents, write and process documentation, and generally get by in today’s connected world. The second type of software I run on Vista is utility applications. These are generally small things that I use to speed up my wok or provide some small little pieces of functionality.

Here are the applications that I run exclusively on Vista:

  • Microsoft Office 2007 — Honestly, this is almost a must have for me. I don’t know what I’d do without it, to be completely honest with you. I use Microsoft Word 2007 for creating almost all my documents for school (its what everyone on my teams prefers) and the formatting options are so easy to use that its ridiculously easy to create a good looking document. Outlook 2007 is the best all in one scheduling, tasking, and email application I’ve ever utilized. I used Thunderbird for a while, but Outlook is in a whole other universe when it comes to functionality. Sometimes, I am near amazed by the functionality it provides.
  • Adobe Creative Suite 3 — Without a doubt, this package of software is the industry standard when it comes to creative endeavors. I have the Web Premium edition of the software, and it is awesome in general. I am generally using either Fireworks, Photoshop, or Flash Professional, but I’ve dabbled in Illustrator from time to time. I’m just not that great at using it, yet.
  • Microsoft Visual Studio 2005 — I’m a part time C# developer, so this application is almost a necessity. C# as a programming language is awesome. It is easy to learn for someone with a background in Java, and the design time tools for Windows Forms are easy to pick up. The Visual Studio IDE is very, very powerful and easy to use. If you’re doing any type of .NET development, you should be using this IDE, and I do.
  • TortoiseSVN — This is one of the utility applications that I utilize. It is a great graphical interface for subversion repository access. Without a doubt, if you’re going to use SVN on Windows, you’d be well suited to use this application.
  • Notepad++ — Another utility application, Notepad++ is the best pure text editor that I’ve ever used. It has an extensible architecture that allows for an infinite number of plugins. It can be used for reading plain text files as well as various source code listings. The syntax highlighting is great, and the use of line numbers and other programmer friendly things is awesome. I highly recommend this application for HTML editing over a big IDE like Dreamweaver or something like that.

Ubuntu Applications

For my purposes, Ubuntu is meant almost solely as a development environment. I’m not going to cover the applications that are pre-installed with the operating system unless I explicitly use them and would have installed them if they weren’t present. Instead, I’m going to cover the applications that I installed using the Synaptic package manager or the apt-get terminal command.

  • eclipse IDE — If you’re doing Java development, you have one of two choices when it comes to full featured Java IDEs. The first is NetBeans. It is a lightweight IDE that includes, out of the box, a visual editor for user interfaces. That’s a nice feature to have. My choice of IDE, however, is the eclipse open source IDE. Eclipse is more like an IDE framework then anything else. It originally was meant for Java, but can be used with PHP, Javascript, C, C++, Scheme, and many other languages now. In addition, eclipse has more plugins developed for it than anything I’ve ever seen. It might even have more than WordPress, another really extensible system. My favorite features are the source formatter and class browser. I strongly recommend the use of the eclipse IDE for all Java developers.
  • Pidgin — You can’t keep in touch with anyone anymore unless you’re using some type of instant messaging client. In my experience, Pidgin is a lightweight and responsive IM client. It is another extensible application with numerous plugins providing an enormous amount of extra functionality.

Common Applications

I’ve obviously left off numerous other applications that I use. One example is Firefox, my web browser of choice. I use it on both platforms, Vista and Ubuntu, and love it for its plugins and responsiveness. I also have the JRE installed and other things like that.

In the next part of this series, I’ll be posting my impressions of my dual booting experience and the positives and negatives of the process as I see it. If you know of any other excellent applications that I’m missing, be sure to let me know.