Walkthrough: Building an Acropolis Notepad Application

Walkthrough: Building an Acropolis ...

Walkthrough: Building an Acropolis Notepad Application

[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

This walkthrough demonstrates how to use the CTP1 release of Code Name "Acropolis" to create a Notepad sample application. The following procedures explain how to create the application, create the Notepad part and part view, and modify the files to create a cohesive application. In addition, you will change the application from a single-part navigation model to a multi-part navigation model. For an overview of "Acropolis", see Acropolis Overview.

In this walkthrough, you perform the following tasks:

Create an "Acropolis" Document-Style application.
Add a Notepad part and view.
Modify the Notepad part and view for the Notepad application.
Change the application to use multi-part navigation.

Note:
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio Code Name "Orcas" Beta 1.
Code Name "Acropolis" CTP1.

Creating an Acropolis Document Application

The CTP1 release of the "Acropolis" Framework includes an application wizard and template that creates the "Acropolis" application files. When you use the application wizard to create an "Acropolis" application, the project has a structure similar to that of a new Windows Presentation Foundation (WPF) project. Like the application and window files in a new WPF project, The Application and Window1 classes are implemented as XAML files with Visual Basic or C# code-behind files. (The code-behind files are nested under the XAML files in Solution Explorer). For more information about the "Acropolis" runtime, shell and "Acropolis" designer support, see The Acropolis Runtime and Shell and Acropolis Designer Support, respectively. In addition, because you are creating a document-style application, the wizard creates an application that uses a DocumentManager.This manager provides some of the navigation infrastructure required for a document-centric application.

In the first two procedures, you will create the "Acropolis" document-style application and document part and in the next procedure you will modify the files for the Notepad application.

Note:
To ensure the best results when completing this walkthrough, you should clear the "Acropolis" Toolbox cache before starting Visual Studio. To clear the cache, delete the contents of the C:\Users\YourUserName\AppData\Local\Microsoft\VisualStudio\9.0\AcropolisToolbox folder. Restart Visual Studio, if necessary.

To create the project

In Visual Studio, select the File | New | Project menu option.
The New Project dialog box appears.
In the Project types pane, expand Visual Basic or Visual C# and select the Acropolis node.
In the Templates pane, select the WPF Document-Style Application template.
Name the project Notepad and click OK.
The Acropolis Application Wizard appears. The wizard displays the current project settings: Microsoft Acropolis Theme (Default), Single Item Navigation Manager(Default) and Default Layout. You will use the default project settings for the Notepad project.
Click Finish.
The Notepad project opens in Visual Studio.

Adding the Notepad Part and View

"Acropolis" parts contain the business logic that a user will interact with. For more information about parts, see Acropolis Parts and Forms. Typically, parts, which contain business logic, are separated from their user interface. The user interface portion for a part is called a view. For more information about part views, see Acropolis Part Views.

The majority of the business logic for the Notepad application is contained in a single part. You will add the Notepad part and view as described in the following procedure. Similar to Window1, the Notepad part and view include a XAML file and a code-behind file nested underneath it in Solution Explorer. The Notepad part extends DocumentPartBase, which provides command handlers and other infrastructure required for a document-centric part. When you add the part to the project and compile it, the part is made available to the application as a template on the Toolbox. The template provides the application with the association between the file extension and part used to open the file. You will add two part templates to Application.xaml; one for text files and one for C# or Visual Basic files.

To add the notepad part and view

In Solution Explorer, right-click the Notepad project and select Add | New Item.
The Add New Item dialog box appears.
Select the Acropolis Document Part and View template, change the name to NotepadPart.xaml and then click Add.
The Notepad part appears in the "Acropolis" designer.
Build the project. This will add a Notepad part template to the Toolbox.
Note:
The Toolbox will be empty if XAML view has the focus. To restore the Toolbox contents in this case, click in Design view.
The following illustration shows the "Acropolis" Toolbox tabs that are present at this point of building the application.
Select the Application.xaml tab to display Application.xaml in the designer.
From the Toolbox in the UserDocument Templates (Notepad) tab, double-click NotepadPart Template to add a Notepad part template to the Templates section of the design surface.
In the designer, make sure the Notepad Document Template is selected and in the Properties window, set the FileExtension property to .txt.
Add a second NotepadPart template.
Set its FileExtension property to .cs or .vb depending on the language you are using for this walkthrough.

Note:
The Toolbox will be empty if XAML view has the focus. To restore the Toolbox contents in this case, click in Design view.

Testing the Application

The Notepad application is now partially complete. You have added the Notepad part and view. You can now run the application and interact with the File menu in a very limited way. The following procedure describes how to test the part.

To test the application

In Visual Studio, press F5 to see the Notepad application shell displaying the Notepad part.
On the File menu, select Open and open a text file.
You can use the File menu to open a file, but you will notice the application is not updated with the contents of the file. You will add an implementation for file loading and saving later in the walkthrough.
When finished, close the application.

Modifying the Notepad Part and View

You will make some modifications to the Notepad part and view for the Notepad application. Initially you will add a connection point for the file contents and customize the view for the Notepad part.

In this section, you perform the following tasks:

Add connection points to the Notepad part.
Customize the Notepad part view.

Connection Points

"Acropolis" parts are designed to be loosely coupled with their views and external entities. To enable this loose coupling, "Acropolis" parts define their external interactions through connection points. The part developer determines the connection points required for a particular part and provides the business logic event handlers and methods. For more information about connection points, see Acropolis Connection Points. In the following procedure, you add one connection point to the Notepad part.

To add the connection point

Make sure that NotepadPart.xaml is open in the designer.
In the Toolbox, expand the Acropolis Framework tab.
Double-click ComponentProperty to add a property connection point to the design surface.
Using the Properties window, set the Name property for the connection point to NotepadText.
On the File menu, select Save All.

The Notepad Part View

This section demonstrates how to implement the NotepadPartView class that provides the WPF user interface for the NotepadPart class.

The NotepadPartView.xaml file initially contains the following XAML generated by the AcropolisPartView template.

<Awx:PartView x:Class="Notepad.NotepadPartView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Awx="clr-namespace:Microsoft.Acropolis.Windows;assembly=Microsoft.Acropolis.Windows" 
    Title="{Binding Part.Title}"
    Width="Auto" Height="Auto" >

  <Grid>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
        Text="{Binding Part.Title}"/>
  </Grid>
</Awx:PartView>

This XAML defines the root Awx:PartView element and includes several XML namespace declarations that define various prefixes. The following procedure describes how to modify the XAML in the NotepadPartView.xaml file generated by the AcropolisPartView template.

To define the user interface layout

In Solution Explorer, double-click NotepadPartView.xaml to open it in the designer.

In XAML view, replace the existing Grid element with the following user interface XAML. This XAML declares a TextBox and sets various properties for the text box, such as the font style, scrolling style and the tooltip.

<TextBox Name="NotepadTextbox" Text="{Binding Path=NotepadText.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
          FontFamily="Consolas" FontSize="16" FontWeight="Normal" Width="Auto" Height="Auto" 
          AcceptsReturn="True" AcceptsTab="True" Margin="5" ToolTip="{Binding Path=Name}" />

Build the project.

Modifying the Project for Notepad

The Notepad part and requires a few implementation details to support a document-centric "Acropolis" application. Since the part inherits from the DocumentPartBase, implementations for abstract methods OnLoad and OnSave must be provided. In addition, you will add a handler for the PropertyChanged event of NotepadText.

To modify the Notepad Part

Open NotepadPart.xaml.vb or NotepadPart.xaml.cs in the designer.

Add the following code into the OnLoad method, replacing the // Add code to load document here. comment. This code reads the specified stream and sets the NotepadText property to the results of the read operation.

Visual Basic

Using sr As StreamReader = New StreamReader(input)
    Me.NotepadText.Value = sr.ReadToEnd()
End Using

using (StreamReader sr = new StreamReader(input))
{
    string text = sr.ReadToEnd();
    NotepadText.Value = text;
}

Add the following code into the OnSave method, replacing the // Add code to save document here. comment. This code writes the value of the NotepadText property to the specified stream.

Visual Basic

Using sw As StreamWriter = New StreamWriter(output)
    sw.Write(Me.NotepadText.Value)
End Using

using (StreamWriter sw = new StreamWriter(output))
{
    sw.Write(NotepadText.Value.ToString());
}

Add the following code after the OnSave method. This code handles the PropertyChanged event for the NotepadText property.

Visual Basic

Private Sub NotepadText_PropertyChanged(ByVal sender As Object, ByVal e As PropertyChangedEventArgs)

 ' Set the modified flag so that the base class
 ' can prompt for save, etc, when appropriate.
   MyBase.Modified.Value = True

End Sub

void NotepadText_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    base.Modified.Value = true;
}

Open NotepadPart.xaml.
In XAML view, associate an event handler with the PropertyChanged event of the NotepadText by adding the following XAML fragment to the NotepadText declaration, after the Name attribute:
```
PropertyChanged="NotepadText_PropertyChanged"
```
When finished the NotepadTextComponentProperty declaration should look like the following:
```
<ComponentProperty Name="NotepadText" PropertyChanged="NotepadText_PropertyChanged" />
```
Build the project.

Testing the Application

You can now run the Notepad application. When you run the application, you will see a File and Edit menu. The following procedure describes how to test the part. The following illustration shows the running sample.

To test the NotepadPart

In Visual Studio, press F5 to see the Notepad application.
Click File | Open to open a file.
The Open dialog box appears.
Change the Files of type drop-down list in the Open dialog box from .txt to .cs or .vb.
Find a sample file and open it in the application.
Click File | New to start a new Notepad part.
When finished, close the application.

Adding Multi-Part Navigation

The "Acropolis" infrastructure makes it very easy to change from single-part navigation to multi-part navigation. The following procedure contains the steps to do this.

To change to multi-part navigation

Open Application.xaml in the designer.
Change the navigation manager from single-part to multi-part.
There are two ways that you can do this. The first way is to double-click the MultiPartNavigationManager component in the Toolbox.
The second way is to find the <AcropolisApplication.NavigationManager> section in XAML view and locate the SinglePartNavigationManagerdeclaration.
```
<Afx:SinglePartNavigationManager x:Name="SinglePartNavigationManager"/>
```
Replace the single-part navigation manager with a multi-part navigation manager.
```
<Afx:MultiPartNavigationManager x:Name="MultiPartNavigationManager"/>
```
Open Window1.xaml in the designer.
In XAML view, find the part pane declaration <Awx:PartPane....> and replace it with the following XAML. This XAML declares a TabLayoutPane, which can support multiple parts.
```
<Awx:TabLayoutPane Grid.Row="2" ShowTabCloseButton="False" ShowTabIcon="True" ShowNewTabButton="False"
  Parts="{Binding Part.NavigationManager.ActiveParts}" />
```

Testing the Application

The Notepad application now has multi-part navigation. When you run the application, you will see a tab appear for each open document. The following procedure describes how to test the part.

To test the NotepadPart

In Visual Studio, press F5 to see the Notepad application.
Use File | Open or File | New to open a document or create a new document. You will see a tab appear for each new or opened document.
Click the tabs to switch between the documents.
When finished, close the application.

Next Steps

You could expand on the Notepad application by adding a spelling checker service or a printing service.

To create a more complex "Acropolis" sample application, see Walkthrough: Building an Acropolis RSS Reader Application.

Product Families

Resources

About Microsoft

Popular Places

Popular Searches

Popular Downloads

To create the project

To add the notepad part and view

To test the application

Connection Points

To add the connection point

The Notepad Part View

To define the user interface layout

To modify the Notepad Part

To test the NotepadPart

To change to multi-part navigation

To test the NotepadPart