Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Be an Avalon Test Pilot and Build the Windows UIs of Tomorrow : Page 3

Avalon, the nascent framework for building next-generation user interfaces in Windows Vista, is available now in beta, but you don't have to wait for Vista (a.k.a. Longhorn) to get started. We unpacked it early in order to give you a jump start on building the UIs of tomorrow.


advertisement
Types of Avalon Applications
So far I have been using the XAMLPad to build the UI. However, a real application needs business logic to function. So I will now use Visual Studio 2005 (Beta 2 at the moment of writing) to build a functional Avalon application.

Using Visual Studio 2005 Beta 2, create a new project by going to File -> New Project… The New Project window will appear (see Figure 5).




Figure 5. The New Project template: Visual Studio offers you one of four different template types for Avalon.
 
Figure 6. An Avalon Application Project: The screenshot shows the template created by Visual Studio for the Avalon Application template.

For this article, I will use Visual Basic as the language and so under the Visual Basic item, select Avalon and you should see the four primary types of Avalon project templates:
  • Avalon Application—works just like conventional Windows application;
  • Avalon Express Application—hosted within Internet Explorer;
  • Avalon Control Library—Avalon controls to be hosted within another Avalon application;
  • Avalon Navigation Application—works like a Windows application except that it navigates between "pages" rather than opening new windows.
I will show you an example of three out of four of these project types. I'll save the Avalon Control Library type for a future article, as it is far more involved than the others.

Avalon Application
First, select the Avalon Application template and click OK. You will see the default Window1.xaml window and the Solution Explorer as shown in Figure 6.

Note that the root element for an Avalon Application project type is Window. Besides the StackPanel and DockPanel that I discussed in the last section, you can also use the Grid element to position controls within the window. The Window1.xaml.vb is the code-behind for the page and this is the place where you write your code for the application. The x:Class attribute within the Window element specifies the name of the class. During compilation stage this page is compiled into a partial class and combined with the code-behind (Window1.xaml.vb) to form a complete application.

Copy the code shown in Listing 1 and replace the Grid element in the Window1.xaml file. In the Button element, add the Click attribute and set its value as shown in Figure 7.


Figure 7. Setting the Click: Add an event to the Button element.
 
Figure 8. Testing the application. Your first Avalon application at work.

Essentially, you are creating an event handler for the button control. When the button is clicked, the ButtonClick event will handle the event. To service this event, double-click on Window1.xaml.vb in Solution Explorer. You should see two sample events that are commented out. Uncomment the ButtonClick event and remove the Handles clause at the end of the event handler. The ButtonClick event should now look like this:

' Event handler for a Button with a Name of Button1 Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs) End Sub

For this example, simply display a "Hello World!" message to see that the event handler really works. I'll go over this feature in more detail in a future article.

' Event handler for a Button with a Name of Button1 Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs) ' Add this MsgBox("Hello World!") End Sub

That's it! Press F5 to run the application now. You will see the application window and when you click on the OK button, you will see a message box (see Figure 8).

Now, try clicking on the "Page 2" link on the window. Nothing happens. This is because the Avalon Application project type does not support navigation. Instead you need to open a new window just like a conventional Windows application.

Stop the debugging and add a new Avalon window to the application (right-click on the project name in Solution Explorer and select Add -> New Item…). Select the Avalon Window template and click Add (see Figure 9).


Figure 9. Putting in a Window: The screenshot shows how to add a new Avalon Window to the project.
 
Figure 10. Two Windows: The files in the project are shown. There is one set of Window.xaml files for each window in the application.

Your project now has two windows (see Figure 10)—Window1.xaml and Window2.xaml.

Change the ButtonClick event as follows:

Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs) Dim win2 As New Window2 win2.Show() End Sub

Press F5 to debug the application and click on the OK button again. You will see that the new window now appears (see Figure 11; windows have been resized for presentation purpose).


Figure 11. Next Window: Clicking on the button now opens a new window.
 
Figure 12. Avalon Express: The template created by Visual Studio for the Avalon Express Application template is shown.

Avalon Express Application
For Avalon Express, the application will be hosted within Internet Explorer. Using Visual Studio 2005, create a new Avalon Express Application by choosing the Avalon Express Application template.

By default, Page1.xaml page will be created (see Figure 12).

Notice that the root element for the XAML page is now Page, rather than Window. Again, replace the Grid element with the content of Listing 1. Also, add a new page to the project by right-clicking on the project name in Solution Explorer and then selecting Add -> New Item…. In the Add New Item dialog window, select Avalon Page (see Figure 13) and use the default name of Page2.xaml. Click Add.


Figure 13. Avalon Page: Select Avalon Page from the Add New Item dialog to add a new Avalon page to the project.
 
Figure 14. In IE: The screenshot shows the application again, this time hosted within Internet Explorer.

Press F5 to debug the application. Internet Explorer will load and the application should look like Figure 14.

One interesting feature of this project type is that if you use the MsgBox() function to display a message box (as I did earlier with the OK button), it will still work.

Notice the Navigational buttons on the top of the application (see Figure 15). These two buttons allows you to navigate between pages, just like browsing Web pages.


Figure 15. The Navigational buttons: Avalon builds traditional browser-style animation for you in the Express project type.
 
Figure 16. Running the application: Here's the final application in action.

To see how page navigation works, click on the Page 2 hyperlink, which will, not surprisingly, load Page2.xaml. For Avalon Express application project type, all navigation will happen with the browser; no new windows will be created. You can go back to the previous page (Page1.xaml) by clicking on the Back navigation button from Page2.xaml.

Avalon Navigation Application
The third type of Avalon application, which is also likely to be the most common type of Avalon app, is the Avalon Navigation Application. Using Visual Studio 2005, create a new Avalon Navigation Application by choosing the Avalon Navigation Application template.

Like the Avalon Express application, the Page1.xaml page is created by default. As usual, replace the Grid element with the content of Listing 1. Also, add a new page to the project by right-clicking on the project name in Solution Explorer and then selecting Add -> New Item…. In the Add New Item dialog window, select Avalon Page and use the default name of Page2.xaml. Click Add.

Press F5 to debug the application. Instead of hosting the application within IE, it now has its own window looking much like IE (see Figure 16).

Clicking on the Page 2 link will load Page2.xaml. To return to the previous page, click on the Back navigation button.

Like the Avalon Express application project type, all navigation in an Avalon Navigation Application will take place within the window itself; no new windows will be created.

In this article, you have seen the basics of Avalon and how XAML has played a role in creating the UI of an Avalon application. You have also seen the different Avalon project types and their differences. However, this has been the tip of the iceberg. In the next article, I will walk you through the navigational structure of Avalon applications and discuss how to move from one page to another. In another article, I will show you how data-binding is done in Avalon. So, stay tuned for the next article!



Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap