IT tutorials
 
Mobile
 

Windows Phone 7 : Silverlight User Interface Development - Designing for Windows Phone 7 (part 2) - Designer and Developer Mechanics

6/7/2013 7:43:11 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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.

Figure 4. Expression Blend 4 file menu import capabilities

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.

Figure 5. Windows Phone 7 design template 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.

Figure 6. Import a layer from a sample Photoshop file

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.

 
Others
 
- Windows Phone 7 : Silverlight User Interface Development - Designing for Windows Phone 7 (part 1) - Design Approach, Design Resources
- Developing BlackBerry Tablet Applications : Working with the File System - SQLite Databases
- Developing BlackBerry Tablet Applications : File System Access (part 3) - File Browse for Multiple Files
- Developing BlackBerry Tablet Applications : File System Access (part 2) - File Browse for Single File
- Developing BlackBerry Tablet Applications : File System Access (part 1)
- iPhone Developer : Assembling Views and Animations - Managing Subviews - Tagging and Retrieving Views
- iPhone Developer : Assembling Views and Animations - Recovering a View Hierarchy Tree, Querying Subviews
- Java ME on Symbian OS : Handling Diversity - Handling Screen and Display Diversity
- Java ME on Symbian OS : Handling Diversity - Handling Diverse Multimedia Formats and Protocols
- Java ME on Symbian OS : Handling Diversity - Supporting Diverse Input Mechanisms
 
Youtube channel
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS