3. Designer and Developer Mechanics
As with most client application development, Windows
Phone 7 applications begin as comprehensive artwork, or "comps" for
short, that can start out as a rough sketch wireframe that is refined
into a full user interface mock-up handed over to developers for
development. Quite often the actual development results in a far less
stunning UI when compared to original comps. This is a result of a
mismatch of the output from the design process, usually a vector drawing
flattened into an image format and the input of the development
process, which is a development language.
Starting with Windows Presentation Foundation, XAML
was introduced as a language to describe UX that is both user- and
tool-consumable, meaning a developer can author XAML directly or tools
vendors can build applications that allow a designer and developer to
visually create UX that generates the appropriate XAML. Silverlight was
introduced after XAML as a lightweight version of WPF that fits into a
small (approximately 5 MB) cross-platform, cross-browser desktop
plug-in. Initially Silverlight included a subset of the most commonly
used features of WPF. Since its introduction, Silverlight has steadily
added additional capabilities to match more closely the full
capabilities available in WPF. Examples include more support for
triggers, Commanding, and COM interop, making offline desktop
Silverlight a capable alternative to WPF for many desktop application
scenarios.
Silverlight for Windows Phone 7 is based on
Silverlight 3 with some Silverlight 4 features pulled forward, putting
XAML-based development front and center in mobile application
development. Also, since Silverlight for Windows Phone 7 does not run in
a browser, some features, like browser-interoperability available in
Silverlight for the desktop, are removed from Silverlight for Windows
Phone. Fundamentally, however, they share core capabilities.
The reason XAML is so important and useful is that
the output of visual design tools can be directly consumed by
developers, since the output of the visual design is human-readable
XAML. Designers can use Expression Design to create rich visual designs
for application control templates as well as general application UX.
Expression Design supports exporting XAML.
While Expression Design is a great tool, the world of
designers is dominated by the Adobe toolset. What may not be well-known
by many designers is that Expression Blend 4 has excellent import
capabilities to pull in the vector output from the Adobe toolset
directly into Expression Blend as XAML. The Expression Blend 4 import
capabilities are shown in Figure 4.
The menu offers import capabilities for three Adobe
file formats: .fxg, .psd (Photoshop), and .ai (Illustrator). The .fxg
file is the new file interchange format introduced in Adobe Creative
Suite 5 that provides a common interchange format for the Adobe toolset.
The format is very similar to .svg format. The other two file formats
are the native format of Adobe's well known Photoshop and Illustrator
tools. Figure 5 shows one of the Windows Phone 7 design templates opened in Photoshop.
Let's say the example in Figure 2-5 is part of a real application that you are building. In Expression Blend, you can import the background using the File => Import Photoshop File ... menu item and then selecting the desired layer as shown in Figure 6.
When you click OK in the dialog shown in Figure 6, a Canvas
object is added to the currently opened XAML file and the image assets
are brought into the project in a new folder named with the same name as
the imported asset but with the suffix _images appended. At the bottom
on the right of Figure 2-6
there's an option to generate a "Compatibility image" instead of
attempting to import the vector components of the image as XAML. What
this option does is take the selected layers and "flatten" it to a .png
image. This is a handy option when you just need a flattened image
instead of the layers, which in many cases has better performance than
having to calculate vector-based layout.
This section provided an overview of how designers
and developers can work in their preferred tools while allowing for the
smoothest work stream possible with Expression Blend 4 as the bridge
between a pure designer and developer.
