n the previous articles
in this series you took a look at how to use the Microsoft Expression Interactive Designer to separate the design from the underlying implementation of your applications. Expression is a next-generation tool, aimed at designers, that allows them to create rich, interactive clients that run using XML Application Markup Language (XAML) technology.
XAML is an important evolutionary step in application design, allowing, among other things, the clean separation of application design from implementation, and more importantly, letting designers and developers share the same technology base. I (and you've probably experienced this too) have worked on many projects where businesspeople work with designers who build elaborate front-end mockups in various designer-focused formats, such as Flash or Photoshop. Later, the project developers had to emulate those mockups using different tools and formats, such as Visual Studio.NET or Java.
The problem is that there's always an impedance mismatch between such disparate tools, which inevitably leads to designer-developer conflict.
Now, with Expression, designers have collaborative (if not familiar) tools with which to create their beautiful designs, outputting them directly as XAML, or as Visual Studio Projects. The implementers (developers) can use that output directly to build the back end functionality of the application, bypassing the need to re-create the UI from a mockup.
Additionally, using the Windows Communication Foundation, developers can build the back end to use secure, transactable, and reliable constructs that provide a true service orientation.
You saw the designer's side of this process in the article "Take Avalon to the Next Dimension to Achieve 3D Effects." In this article, you'll look at the process from the developer's side of the fence. It's important to note thatnow that developers and designers can use the same filesthe designer/developer collaboration can work both ways. In this article, you'll see how to build a service using the Windows Communication Foundation, and create a test client for it using "Cider," the plug-in for Visual Studio.NET that allows you to build XAML interfaces. Just as a design-first project forms the input for developers, this functionality-first project will form a prototype that you could then pass to a designer, who would use the object names and event mappings from this project to build the final UI.
Before You Start
First, I strongly recommend that you uninstall everything to do with WinFX, the Windows SDK and any other development betaware before you begin. Indeed, I think it is a good idea to even remove Visual Studio 2005 and the .NET framework 2 before beginning. You can try it with these pre-installed, but I have obtained the best results by starting with a completely clean machine. You might try all this out using a virtual machine image running in either Microsoft Virtual PC or VMWare Workstation.
Second, before you begin, you should download, install and run the terrific 'cleaner' utility from CCleaner.com. This tool plows through your registry looking for bad, old, or corrupt keys (the usual side effect of using betaware), and cleans them out. To get started with WPF, I followed this process, and everything worked cleanly, first time.
When you are ready, you should download and install this software in this order:
- First, you'll need SQL Server 2005 and the AdventureWorks sample database. If you don't have this already, there's a trial version available.
- Next, you'll need the WinFX runtime components.
- After installing these, rebootand if you don't have it already, you can install Visual Studio 2005. If you don't have a copy of this, you can use the free Express Edition.
- Next, download the Windows SDKa huge download of about 1GB. Note that with the SDK, one option is to download the IMG file and burn it to a DVD or load it into a virtual CD/DVD application and install it from there. Unfortunately, when I did this, the installation failed every time. So instead, I recommend that you download the IMG, and then download the associated Setup.exe (you'll find that download on the same page). Put both of these in a directory on your hard drive. Run the Setup.exe application and it will read the IMG file for you; then you can install successfully.
- Next, you must install the Visual Studio development tools (codenamed 'Orcas') for WinFX development. These include the 'Cider' designer for XAML in Visual Studio.
If you've gotten this far, you're now ready to start coding WPF applications, but one final download (and one well worth your time) is the Expression Designer for XAML
As a developer, you can use Cider to build basic XAML user interfaces within Visual Studio.NET, in a manner that you will be very familiar with, as it is virtually identical to the basic Windows forms designer, though a little rough around the edges.
To follow the flow of this article and start using some of the really slick features that XAML offers, I recommend that you explore the Expression Designer for XAML.