Skip to content
This repository was archived by the owner on Jun 21, 2023. It is now read-only.

Commit 5372cad

Browse files
committed
Added docs for implementing a pane page.
1 parent c1c58c5 commit 5372cad

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Implementing a GitHub Pane Page
2+
3+
The GitHub pane displays GitHub-specific functionality in a dockable pane. To add a new page to the GitHub pane, you need to do the following:
4+
5+
## Create a View Model and Interface
6+
7+
- Create an interface for the view model that implements `IPanePageViewModel` in `GitHub.Exports.Reactive\ViewModels\GitHubPane`
8+
- Create a view model that inherits from `PanePageViewModelBase` and implements the interface in `GitHub.App\ViewModels\GitHubPane`
9+
- Export the view model with the interface as the contract and add a `[PartCreationPolicy(CreationPolicy.NonShared)]` attribute
10+
11+
A minimal example that just exposes a command that will navigate to the pull request list:
12+
13+
```csharp
14+
using System;
15+
using ReactiveUI;
16+
17+
namespace GitHub.ViewModels.GitHubPane
18+
{
19+
public interface IExamplePaneViewModel : IPanePageViewModel
20+
{
21+
ReactiveCommand<object> GoToPullRequests { get; }
22+
}
23+
}
24+
```
25+
26+
```csharp
27+
using System;
28+
using System.ComponentModel.Composition;
29+
using ReactiveUI;
30+
31+
namespace GitHub.ViewModels.GitHubPane
32+
{
33+
[Export(typeof(IExamplePaneViewModel))]
34+
[PartCreationPolicy(CreationPolicy.NonShared)]
35+
public class ExamplePaneViewModel : PanePageViewModelBase, IExamplePaneViewModel
36+
{
37+
[ImportingConstructor]
38+
public ExamplePaneViewModel()
39+
{
40+
GoToPullRequests = ReactiveCommand.Create();
41+
GoToPullRequests.Subscribe(_ => NavigateTo("/pulls"));
42+
}
43+
44+
public ReactiveCommand<object> GoToPullRequests { get; }
45+
}
46+
}
47+
```
48+
49+
## Create a View
50+
51+
- Create a WPF `UserControl` under `GitHub.VisualStudio\ViewsGitHubPane`
52+
- Add an `ExportViewFor` attribute with the type of the view model interface
53+
- Add a `PartCreationPolicy(CreationPolicy.NonShared)]` attribute
54+
55+
Continuing the example above:
56+
57+
```xml
58+
<UserControl x:Class="GitHub.VisualStudio.Views.GitHubPane.ExamplePaneView"
59+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
60+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
61+
<Button Command="{Binding GoToPullRequests}"
62+
HorizontalAlignment="Center"
63+
VerticalAlignment="Center">
64+
Go to Pull Requests
65+
</Button>
66+
</UserControl>
67+
68+
```
69+
70+
```csharp
71+
using System.ComponentModel.Composition;
72+
using System.Windows.Controls;
73+
using GitHub.Exports;
74+
using GitHub.ViewModels.Dialog;
75+
76+
namespace GitHub.VisualStudio.Views.Dialog
77+
{
78+
[ExportViewFor(typeof(IExampleDialogViewModel))]
79+
[PartCreationPolicy(CreationPolicy.NonShared)]
80+
public partial class ExampleDialogView : UserControl
81+
{
82+
public ExampleDialogView()
83+
{
84+
InitializeComponent();
85+
}
86+
}
87+
}
88+
```
89+
90+
## Add a Route to GitHubPaneViewModel
91+
92+
Now you need to add a route to the `GitHubPaneViewModel`. To add a route, you must do two things:
93+
94+
- Add a method to `GitHubPaneViewModel`
95+
- Add a URL handler to `GitHubPaneViewModel.NavigateTo`
96+
97+
So lets add the `ShowExample` method to `GitHubPaneViewModel`:
98+
99+
```csharp
100+
public Task ShowExample()
101+
{
102+
return NavigateTo<IExamplePaneViewModel>(x => Task.CompletedTask);
103+
}
104+
```
105+
Here we call `NavigateTo` with the type of the interface of our view model. We're passing a lambda that simply returns `Task.CompletedTask` as the parameter: usually here you'd call an async initialization method on the view model, but since we don't have one in our simple example we just return a completed task.
106+
107+
Next we add a URL handler: our URL is going to be `github://pane/example` so we need to add a route that checks that the URL's `AbsolutePath` is `/example` and if so call the method we added above. This code is added to `GitHubPaneViewModel.NavigateTo`:
108+
109+
```csharp
110+
else if (uri.AbsolutePath == "/example")
111+
{
112+
await ShowExample();
113+
}
114+
```
115+
116+
For the sake of the example, we're going to show our new page as soon as the GitHub Pane is shown and the user is logged-in with an open repository. To do this, simply change `GitHubPaneViewModel.ShowDefaultPage` to the following:
117+
118+
```csharp
119+
public Task ShowDefaultPage() => ShowExample();
120+
```
121+
122+
When you run the extension and show the GitHub pane, our new example page should be shown. Clicking on the button in the page will navigate to the pull request list.

0 commit comments

Comments
 (0)