This chapter is from the book
This chapter is from the book
This chapter is from the book
Develop User Applications
.NET has quickly become pervasive throughout the entire Windows product world. It took only a few short years, but it is now fair to say that .NET is everywhere; Windows programming and .NET programming are now synonymous. Many of the user applications we interact with have some if not all of their base in .NET. This includes web applications, rich clients built on Windows, mobile applications, Office solutions, smart clients that work across the Web, and more. The good news is that the .NET developer is in high demand, and you can leverage your skills to target a wide audience.
Figure 1.12 shows the New Project dialog in Visual Studio 2008; it serves as an example of the myriad of user solutions that are possible with .NET.
)
Figure 1.12 The many application faces of Visual Studio 2008.
Although Figure 1.12 shows many project templates, it does not represent a road map with respect to user applications. The .NET developer has many choices for creating the user experience using both Visual Studio and the new Expressions Studio (discussed later in the chapter). The following list is meant to provide an overview of the presentation technologies available to the .NET developer:
- ASP.NET—This allows you to build web-based (and browser-based) solutions using HTML, AJAX, and server-side processing.
- NetCF—The .NET Compact Framework 3.5 runs on small devices and allows you to build applications that target these mobile devices.
- Sliverlight—This is Microsoft's new solution for developing highly interactive solutions experiences that combine video and animation, delivered across the Web for both Windows and Mac.
- VSTO—Visual Studio Tools for Office allows you to build solutions based on the Office productivity tools (including Outlook and SharePoint).
- WinForms—These are Windows forms used to deliver business applications and tools built on the windows platform. WinForms applications can be stand-alone or data-driven. In addition, WinForm applications may connect to web services, leverage resources on the client, and more.
- WPF—Windows Presentation Foundation combines WinForms, XAML, Smart Clients, 3D graphics, and more to allow you to create the richest, most fully featured client solutions that run on Windows. WPF applications can be delivered similar to a WinForms application. In addition, they can exist as a browser-hosted solution that runs in a security sandbox.
- XNA—This technology allows you to build Xbox games using Visual Studio (a topic for another book).
Each of these technologies is supported by Visual Studio 2008. With them, you have many options for creating user applications. This section highlights a number of development improvements in Visual Studio 2008 with respect to developing the user experience.
Enhance the Web Developer's Productivity
The vast majority of applications built these days involve some semblance of a web component—be it a full-blown browser-based, web application; a smart client that works across the Web; a web service; or otherwise. In fact, the line between a traditional rich client and a web application is blurring. Technologies such as AJAX (Asynchronous JavaScript and XML), Web Services, Smart Clients, and XAML (Extensible Application Markup Language) have ensured this. You can now build rich user experiences as your needs dictate. Of course, Microsoft has remained suitably focused on expanding Visual Studio's capabilities with respect to web development.
Web developers want tools that help them through the common functions of building their application. Let's face it, the HTML, CSS, and XML standards can sometimes be a pain to follow by memory and by hand. Instead, we want tools that guide us. And of course, as soon as we want to work with code, we want to be able to access the entire related source and massage it as necessary. Visual Studio 2008 builds on recent (2005) enhancement. It's a step forward in adding productivity to the web development day. We highlight many of these advancements in the following sections.
Create a Richer Web Interface
AJAX represents the capability to leverage the ubiquitous support for JavaScript in web browsers to create a more interactive user experience. Client applications built to leverage AJAX still have a client-server paradigm. However, with AJAX the client can update portions of a given page without appearing to have posted back to the server (of course, it typically does). In addition, most AJAX-enabled applications put more processing on the client for things like toggling sections of a page, working with tabs, auto-completing data entry, popping up dialogs, and more. The result is a step forward in interactivity for a user.
AJAX is not a Microsoft-specific technology. It represents more of a programming model. However, Microsoft released the AJAX Extensions for Visual Studio targeting both the 2003 and 2005 versions. These controls allowed developers to more easily create AJAX experiences. These controls have been enhanced and are now incorporated into Visual Studio 2008 and the .NET Framework 3.5. Figure 1.13 shows the controls inside the Visual Studio Toolbox.
)
Figure 1.13 The AJAX Extensions in Visual Studio 2008.
These controls allow you to create a page that can receive partial, asynchronous updates (using UpdatePanel) and show update progress (using UpdateProgress). They also allow you to create your own controls and features that implement AJAX without having to write the client-side JavaScript.
In addition to these controls, Visual Studio 2008 supports IntelliSense, code comment documentation, and client-side debugging for JavaScript. It also contains the Microsoft AJAX Library, which is a JavaScript common library that supports object-oriented development for JavaScript. For a detailed overview of these items, AJAX, and more, see Chapter 17.
Work with an Expanded Toolbox
Visual Studio 2008 provides a rich set of tools and controls for the web developer. It still supports the standard controls for ASP.NET and HTML. This includes labels, text boxes, buttons, and the like. In addition, the validation, data, WebParts, and login controls are all still present. There are, of course, enhancements to many of these controls. However, here we focus on introducing the new controls for the ASP.NET developer.
There are three ASP.NET user interface controls that should be highlighted to the web developer: ListView, DataPager, and LinqDataSource. The first of these, ListView, is a control that simplifies the display of repeating data. The ListView control is driven based on user templates. In this way, you can easily configure how you want your UI to behave during operations such as view, edit, add, and delete. In addition, the ListView supports sorting, paging, and, of course, data binding. Figure 1.14 shows the Configure ListView screen. Here you can choose a default Runtime View layout, visual styles, and more.
)
Figure 1.14 Configuring a ListView control.
The ListView control is template driven. You, of course, have complete access to the layout and control of these templates. In addition, the control can assist in setting up the appropriate template. Figure 1.15 shows the ListView Tasks. Notice that you can change the Current View shown in the WebForm designer to another template view.
)
Figure 1.15 The ListView Tasks.
Figure 1.16 shows the template view for the EditItemTemplate. Again, the template layout source is available for you to customize. In fact, in this example, we put the form labels and controls into a table for a cleaner look. Notice too that the record navigation is available from within these templates. This allows your users to cycle through sections of their data and make appropriate updates.
)
Figure 1.16 The EditItemTemplate form designer layout.
Another new control in 2008 that we'd like to highlight is the DataPager control. This control allows you to manage the paging of data and the UI associated with that paging. You can use this control by itself or embed it as part of another control you create. In fact, the ListView control mentioned previously already uses the DataPager control. You can associate other, data-bound controls to a DataPager by using the DataPager's PagedControlID property (the given control must implement the IPageableItemContainer interface).
You have full control over the customization, layout, and behavior of the DataPager. Figure 1.17 shows the DataPager Fields editor (accessed from the control's Tasks window). Notice that you can set appearance and behavior for all items associated with a given DataPager layout.
)
Figure 1.17 The DataPager Fields editor.
The final new ASP.NET control we will highlight here is the LinqDataSourceControl. LINQ (Language Integrated Query) is a new programming model introduced in Visual Studio 2008. It combines database query and .NET language. In this way, you can write strongly typed code (and not just simple strings) to query your data. This includes writing queries with full IntelliSense support that is based on your data. In addition, LINQ can work with data from various data sources including SQL Server, XML, and many more. For a richer overview of this new technology, check out Chapter 18, "Working with Databases."
The LinqDataSourceControl gives you the ability to bind controls using the LINQ technology in a familiar construct as other ASP.NET data sources. You can use the LinqDataSourceControl to gain access to database data, in-memory collections of data, data-source classes, and more. When you connect with these data sources, the LinqDataSourceControl allows you to write your data interaction using the power of LINQ. Your database query code for selecting, grouping, ordering, filtering, updating, inserting, and deleting will all be strongly typed and based on LINQ. In fact, the LinqDataSourceControl writes this code for you. Figure 1.18 shows an example of configuring a LinqDataSourceControl to connect and work with a LINQ data class.
)
Figure 1.18 The LinqDataSource Configure Data Source Wizard.
Develop and Design at the Same Time
Most web form developers switch between the Source and Design view of a web form many times during its development. The Source view allows you full access to editing the XHTML of the page. Design view lets you see the page develop and gives access to the many shortcuts attached to controls in the designer. Visual Studio 2008 makes this switching much easier. It provides a Split view. With it, you can see both the XHTML and the Designer. Figure 1.19 shows an example.
)
Figure 1.19 The Web Form Designer Split view.
Split view tries to keep both the source and the design in synch. This works when you drag items from the toolbox to either the Source or the Design view panes. However, the Design view can get out of synch when you are doing a lot of edits to your source. In these cases, the Design view indicates that it is out of synch (see the middle of Figure 1.19). A click on the Designer and everything is back in synch. This new view can make developing your web forms more intuitive and more productive.
Create and Manage Your Look
Styles and style sheets have been part of the web development world for years now. They help ensure a consistent look and feel that can be managed centrally. The CSS (cascading style sheet) specification also continues to evolve; it allow you to do more and more with the visual display of our applications. Of course, this introduces additional elements, attributes, and complexity. Thankfully, Visual Studio 2008 introduces better tools for creating and managing both inline styles (styles defined directly in your XHTML source) and style sheets (.css files).
One such tool is the Manage Styles pane available to the web form developer. Figure 1.20 shows the pane in action. From here you can attach a style sheet to a web form, create a new style, preview styles, and more. Notice the Options button and related menu. These options help you control which styles you want to see and how you want to see them.
)
Figure 1.20 Managing styles in your application.
Also revised for 2008 is the New Style/Modify Style dialog. Here you can create or modify a style based on the appropriate CSS spec (through 2.1). This dialog has been revamped to give you access to new features and make things a bit more intuitive. You can access this dialog from the Build Style button on the Style Sheet toolbar, from within a style sheet, or from within the Manage Styles pane using the New Style option. Figure 1.21 shows an example of the New Style dialog as accessed from the Manage Styles pane.
)
Figure 1.21 Creating or modifying a style.
You can quickly apply styles to the elements on your page using the Apply Styles pane. Here you can see all the styles define on your form or the attached style sheet. Each style is shown with a visual representation for quick access. To apply the style, you simply select the form element and click the style. Figure 1.22 shows an example of this feature. Notice too that the ToolTip text for a style shows its CSS definition.
)
Figure 1.22 Applying styles to your source.
The final, new style management item we will cover here is the CSS Properties pane. Here you can quickly see the properties of a given style and manage them as you would the properties of a control. Figure 1.23 shows the use of this pane. Notice that you can work with styles defined within your web form. Each style is also grouped or available alphabetically. This can make things a bit easier for those who do not like to hunt through IntelliSense when defining styles.
)
Figure 1.23 Editing the properties of a given style.
Centrally Manage Navigation and Design
Visual Studio 2005 introduced the capability to create master pages. These pages centralized the management of a site's design and navigation elements. In addition, master pages are supported by the designer, which allows for a richer design experience (and replaced the need for include files that were only seen in a browser). A developer is able to see the page in the context of the site's central design while in design mode.
One drawback, however, was that you could have only one level of master page. You could not nest master pages inside of each other and view the results in the designer. For example, a common scenario is to define a main master page to contain your site's frame, navigation, footer information, and the like. You might then create separate, sub–master pages for various content types. These sub–master pages would have their own, central design elements in addition to those defined by the main master page. Again, this scenario is not supported in 2005.
Thankfully, Visual Studio 2008 does support this scenario. With it, you can select an existing master page when creating a new master page. Figure 1.24 shows doing just that. Previously, during creation of a master page, this option was disabled.
)
Figure 1.24 Selecting the master page for a new, sub–master page.
With the new, nested master page, you can define master content inside the content placeholder defined by the main master page. You then add a new content placeholder inside your nested page. Pages based on this nested master page will put their content inside this area. Of course, you can go multiple levels deep with nested master pages. The designer will then show your various master pages during design. Figure 1.25 shows a simple example of an .aspx page created from a nested master page.
)
Figure 1.25 A page created from a nested master page.
Smarter Clients
Rich clients are having a bit of a renaissance in 2008. The line between a web-based and Windows-like user experience continues to blur thanks to many UI advancements in terms of technology and tools. We have already discussed AJAX. Here we look at how 2008 allows you to create richer, smarter clients with Microsoft's new Windows Presentation Foundation (WPF).
WPF is both an addition to the .NET Framework and a set of tools with which developers can create richer solutions for the Web. The presentation code itself is based on XAML (Extensible Application Markup Language). The UI XAML is created using the Visual Studio WPF designer (or a similar tool called Expression Blend). The XAML is then run by the .NET CLR. Because it is processed on the client and not bound by HTML, it runs as a vector-based, hardware-accelerated user experience. The result is an extremely rich and interactive experience that supports both 2D and 3D graphics.
Visual Studio provides a familiar experience for creating WPF solutions. You first define a WPF project and add WPF forms to the project. When creating your solution, you select a project type based on whether the application will run as a browser add-in or as an installed desktop client. Figure 1.26 shows the WPF project templates. Selecting WPF Application will create a basic WPF application that is pushed to or installed on a client. It may have access to local resources on the client.
)
Figure 1.26 Creating a new WPF project with Visual Studio 2008.
The WPF Browser Application, on the other hand, is meant to be deployed through a URL and run as a browser extension. The application, called an XBAP (XAML browser application), runs inside a sandbox. It does not have rights to the client machine and is cleaned up as part of the browser's cache. It does not require a download provided that the user has the .NET Framework 3.5 on their machine. It can work with the browser's cookies and is supported by both IE and Firefox.
Making the wrong choice here is not too problematic. You can move the WPF forms between application types. Note that the other two application types highlighted in Figure 1.26 are WPF User Controls and WPF Custom Control Library. Both are for creating reusable controls for WPF applications.
The next step in building your WPF form is to simply open it and drag and drop UI controls onto a design surface. One big difference for Windows developers, however, is that you now have control over the form layout code (or XAML). This is more akin to designing a web form with Visual Studio. Figure 1.27 shows the XAML designer in action.
)
Figure 1.27 Designing a WPF form.
Notice that the XAML controls are listed in the toolbox on the left. While they are similar to Windows and web controls, they are a new set of controls just for WPF. Also, notice how the designer has a split view between the design surface and the XAML. These stay in synch as you develop your code. Finally, the properties window shown on the left provides a similar experience when you're editing the many properties of a XAML control.
We cover the designer in greater detail in Chapter 16. Here we focus on the forms engine, the controls, event programming, debugging support, deployment, IntelliSense, configuration, and more inside of WPF.
Designers and Developers
When discussing WPF, it's important to note the work that went into the technology and tools to support a strong designer-developer workflow. It's understood that traditionally developers have been left to try to "design" the UI. It goes without saying that developers have not exactly shined as UI designers.
However, even in scenarios where designers were employed on projects, the design would often fall short or the implementation would be an arduous process. Designers had their own tools that did not talk with those of the developers. A design was often provided to the development team as a picture or some basic HTML. Developers were often left to try to realize the intricacies of the design while having to concern themselves with coding the solution. In the end, nobody was happy. The design was never exactly what was envisioned and developers would spend too much time trying to get the look right.
WPF tries to right this wrong. It keeps the UI markup (XAML) as totally separate from the implementation code (C# or VB). In addition, Microsoft has provided design tools that let designers create real user interfaces that can be leveraged by the development team. There are no more "lost in translation" issues. Instead, a designer can create or open a WPF UI element, edit it using the power of Expression Blend (they do not have to learn Visual Studio), and save it back to the solution or send it to a developer. The developer can then open the same item inside of Visual Studio and begin responding to key UI events with their code. This back-and-forth can continue as the UI builds up over time. Nobody's code gets stepped on; everyone focuses on their strength.
Figure 1.28 shows a sample of the Expression Blend tool. Notice that the same .xaml file (WFP form) is open here. Designers can use a tool with which they are more familiar to lay out the UI and apply visual techniques such as 3D and animation. Also notice that the C# project file is being used to maintain continuity between the solutions. After the designers are finished, their save goes right back to the development team. They can even test their UI in the context of the application by building and running the project.
)
Figure 1.28 Designing a WPF form inside of Expression Blend.
Making a Choice
The many options for developing rich user experiences on Windows invariably leads to the question: "What is the right UI technology for my next Windows application?" Of course, the answer depends on your specific scenario. When making your decision, you should keep the intent of each technology in mind.
WPF is a Windows technology that requires the .NET Framework on the client. It can run in a browser sandbox or as a fully featured Windows application. You should leverage WPF when you need to create a rich user experience with high design aesthetics, want a low cost of installation and update, and require distributed connectivity.
Sliverlight, on the other hand, requires only a browser plug-in. The browser plug-in runs a mini version of the CLR on the client. In this way, you still can write your code in C# or VB and have access to bits of the .NET Framework. Silverlight is a very lightweight, cross-platform version of WPF. Its core strength is video, animation, and sound (multimedia). Think of Silverlight as an alternative to Adobe's Flash product.
Lastly, Windows forms still has a place in creating installed, business applications that connect with the operating system, leverage resources on the client, connect to databases, and more. They offer standard, workman-like user experiences for data entry, file manipulation, configuration, and related task-oriented solutions. They are easy to develop and do not typically involve much work from a design perspective.
Office-Based Solutions
Developers have been able to customize Office for a long time now; some of us still remember writing Excel macros on Windows 3.1 or automating Word with Word Basic. Visual Studio 2008 is another step forward for Office development. The tools are now are built into the IDE. With them, you can create Office-based projects and solutions that leverage Word, Excel, Project, Visio, PowerPoint, Outlook, SharePoint, and InfoPath.
There are project templates for all the Office products. In fact, you can create solutions for both Office 2003 and 2007. Figure 1.29 shows the New Project dialog for Office solutions. These are Visual Basic templates but the same exist for C#.
)
Figure 1.29 The many project templates inside VSTO.
There are a few scenarios that would lead you to create an application based on Office. The most common is when you need to extend a line-of-business (LOB) application to provide functionality inside the common, information-worker productivity tools of Office. A LOB typically has a lot of rich data and some workflow.
For example, you may work with a financial, manufacturing, or payroll application. Each of these fills a specific need. However, users may need to work with the data that is housed inside the application and make key decisions that feed back into these systems. This work is often done through cut-and-paste and is often not captured by the systems. Users lose productivity switching back and forth between the Office tools and the LOB. This is where you should consider creating an Office Business Application (OBA) to help bridge this gap.
Develop Documents, Templates, and Add-Ins
Notice the many templates in Figure 1.29. There are three separate templates for Excel 2007, for example. Each of these templates provides a specific purpose. Office application templates allow you to create solutions built on a single document, a document template, or as an add-in to the given Office application. The following list provides a brief overview of these three project subtypes:
- Document—Document projects allow you to build a solution based on a specific document. There are typically not multiple instances of the document. As an example, suppose you have an Excel document that needs to read and write project resource billing information from and to an ERP system. This document might be updated weekly as part of a resource meeting. The data should be up-to-date and changes should feed the billing system. In this instance, you would create a solution based on this single document.
- Template—An Office Template project is one that is based on an Office template file (an Excel .xltx, for example). Creating a solution based on an Office template file gives you the flexibility to provide users with assistance when creating a new instance of a given template. You might push common document templates out to your users. When a user creates a new instance, the template may reach into data housed in other systems to help the user fill out the details of the document. You might then, in turn, capture the results in a database after routing the template through a basic SharePoint workflow.
- Add-in—An Add-in project allow you to extend the features and functionality of a given Office application. You create Add-ins to offer additional productivity and solutions inside a given application. You might, for example, write an Outlook Add-in that allows users to more easily file and categorize their email.
Whichever template you choose, Visual Studio 2008 provides a rich, design-time experience for building your Office solution. As an example, Figure 1.30 shows the Visual Studio 2008 design experience building a solution for a Word 2007 Template. In this example, a user is creating a quote for training. The fields in the document pull from a LOB database that includes customer information, resource data, and common pricing.
)
Figure 1.30 Designing a Word 2007 Template project in Visual Studio 2008.
VSTO 3.0 also provides design support for working with the Office 2007 Ribbon. In this way, your application can behave like the rest of Office. You can embed productivity features and aids on your own tab of the Office Ribbon. Figure 1.31 shows a simple example. The features here apply to the document template discussed previously. In this example, a developer provides specific features based on the document template and accessed by the user directly from Word's Ribbon.
)
Figure 1.31 Customizing the Microsoft Office Ribbon.
Create SharePoint Solutions
SharePoint has become nearly as ubiquitous as Office. Companies are leveraging it for knowledge management, collaboration, and business process automation. Of course, this inevitably means customization and extension by developers. If you customized SharePoint using the existing tools for Visual Studio prior to 2008, you know that this presented a big challenge. The design-time support was not there, configuration was difficult, and debugging was very challenging.
Visual Studio 2008 presents a much richer toolset for SharePoint developers. With it, you can create SharePoint workflows (see the project templates back in Figure 1.29) and build WebParts based on ASP.NET. In addition, the debug experience has been reduced from approximately 15 to 5 steps in the IDE. SharePoint development is now a first-class consideration inside the IDE. This should streamline the process for extending SharePoint and help meet the business demand this collaboration product has generated.
This section highlighted many of the new features in VSTO 3.0 for Visual Studio 2008. There are many more advancements, however. These include access to open XML formats, the capability to add features to existing Outlook forms, custom task panes in Word and Excel, data binding, and improved deployment and security. We cover all of these and more in Chapter 21.
Target Mobile Devices
Visual Studio 2008 continues to extend the power to write applications that target mobile devices. This latest version allows you to build applications on a wide variety of technologies and devices. You can build solutions based on Windows Mobile 2003, Windows CE 5.0 and 6.0, and Windows Mobile 5.0 and 6.0 for both Smartphone and Pocket PC. In addition, you can target many devices and device types that leverage these operating systems and related versions of the .NET Compact Framework.
The IDE provides the forms designers, code editors, and debugging support for building mobile applications. You start with a Smart Device project. You can then select your Target Platform, the target version of the .NET Compact Framework (NetCF), and the project template type (forms application, class library, control, and so on). Figure 1.32 shows an example. Here the application is targeting Windows Mobile 5.0 and the latest version of NetCF.
)
Figure 1.32 Selecting a Smart Device project template.
Designing Windows Mobile forms is a familiar process. There is a set of device controls in the toolbox. You select a control and drop it on a Mobile form. The form looks and acts like the device you are targeting. Figure 1.33 is an example of the design experience. This example is a simple customer search form. Notice the menus at the bottom of the screen. You use these menus to allow the user to work with the form from the major keys on the phone (of course, a Smartphone has no stylus or mouse).
)
Figure 1.33 Designing a Smartphone form.
As you develop your application, you can deploy and test it against device emulators. This allows you to debug your application and see how it behaves on a simulated device. Visual Studio 2008 ships with the basic emulators for Smartphones and Pocket PC. However, there are more than 20 device emulators available for download. Figure 1.34 shows the application deployed and running on the basic Smartphone emulator. From here, you can interact with the application and debug your code.
)
Figure 1.34 Running a mobile application in a device emulator.
A big addition for 2008 is the capability to write unit tests for mobile device applications. You can now create these tests using the standard unit test framework built into Visual Studio as of 2005. These unit tests behave the same way. In addition, they can integrate with Team System products (like Team Test) and publish test data to Team Foundation Server.
The Compact Framework 3.5 provides some welcome enhancements. These include support for LINQ data binding, Windows Communication Foundation, better compression, advancements in sound, better security management, and more.