為Visual Studio 2010創(chuàng)建和發(fā)布擴(kuò)展
Visual Studio 2010暴露了用來(lái)創(chuàng)建你的擴(kuò)展的新API，并提供一個(gè)用來(lái)發(fā)布，共享，和找新擴(kuò)展的生態(tài)環(huán)境。那么讓我們來(lái)看看創(chuàng)建一個(gè)新編輯器擴(kuò)展究竟有多簡(jiǎn)單。
在我們的方案里，我們嘗試創(chuàng)建一個(gè)簡(jiǎn)單的WPF效果呈現(xiàn)在編輯器，當(dāng)有人在行首鍵入一個(gè)問(wèn)號(hào)時(shí)。我們把這個(gè)WPF效果稱作裝飾品，它帶來(lái)一個(gè)你可以用來(lái)在Bing搜索的輸入框。
步驟1：創(chuàng)建一個(gè)編輯器擴(kuò)展
如果你已經(jīng)安裝過(guò)Visual Studio SDK，導(dǎo)航到Visual Basic\Extensibility(或C#\Extensibility)節(jié)點(diǎn)。你會(huì)注意到一些項(xiàng)目模板隨著SDK被安裝。
我們提供添加編輯器效果或分類，工具欄控件，和一個(gè)模板，打包成你的擴(kuò)展放入VSIX。同樣的模板也對(duì)C#有效。對(duì)于這個(gè)示例，我將要?jiǎng)?chuàng)建一個(gè)編輯器文本裝飾品。編輯器文本裝飾品的默認(rèn)代碼會(huì)在任何顯示在編輯器里的字母“a”后面放一個(gè)盒子。
當(dāng)我點(diǎn)擊OK，模板便被創(chuàng)建。當(dāng)我按下F5來(lái)調(diào)試此擴(kuò)展時(shí)，一個(gè)Visual Studio的實(shí)驗(yàn)實(shí)例出現(xiàn)。這允許我在一個(gè)VS的隔離實(shí)例里試驗(yàn)我的擴(kuò)展，不用擔(dān)心打擾我當(dāng)前的VS實(shí)例。你可以看見(jiàn)，所有字母“a”背后有一個(gè)盒子。是不是很酷？沒(méi)有鍵入任何代碼，你便擁有一個(gè)編輯器擴(kuò)展！
#p#
步驟2：創(chuàng)建一個(gè)裝飾器
接下來(lái)，在解決方案管理器右擊你的項(xiàng)目名稱，選擇Add，選擇New Item。
在Add New Item對(duì)話框，選擇WPF，選User Control，輸入名稱SearchBox.xaml。
復(fù)制下面的xaml代碼粘貼到xaml設(shè)計(jì)器(譯注：刪除SearchBox.xaml.cs文件)。它將創(chuàng)建一個(gè)簡(jiǎn)單的搜索框帶有一個(gè)輸入框和一個(gè)按鈕。
- <UserControl x:Class="SearchBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
- <Grid> <Border Height="77" Width="295" CornerRadius="30" BorderBrush="DarkBlue" BorderThickness="2" Background="LightBlue">
- <Canvas> <Button Canvas.Left="197" Canvas.Top="35" Content="Go" Height="23" Name="Button1" Width="75" />
- <TextBox Canvas.Left="18" Canvas.Top="35" Height="23" Name="TextBox1" Width="173" SelectionOpacity="0" Opacity="1" />
- <Label Canvas.Left="15" Canvas.Top="9" Content="Enter your search query" Height="26" Name="Label1" Width="193" />
- </Canvas> </Border> </Grid></UserControl>
#p#
步驟3：將裝飾品添加到你的擴(kuò)展
接下來(lái)，打開(kāi)TextAdorment.vb文件(譯注：我使用VS2010RC的C#，沒(méi)有看到這個(gè)文件，但有文件BingSearch.cs)。轉(zhuǎn)到CreateVisuals函數(shù)。這里就是在字母“a”后面畫(huà)一個(gè)盒子的代碼。我們要改變它，讓它在有人在編輯器鍵入“？”時(shí)顯示我們的搜索框。刪除所有CreateVisuals函數(shù)里的代碼。然后在函數(shù)中添加下面的代碼：
- If line.Extent.GetText.Contains("?") Then Dim s As New SearchBox If (line.Extent.GetText.Length > 1)
- Then s.TextBox1.Text = line.Extent.GetText.Trim.Substring(1) End If Canvas.SetTop(s, line.TextTop)
- Canvas.SetLeft(s, line.TextRight) _layer.AddAdornment(AdornmentPositioningBehavior.TextRelative,
- line.Extent, Nothing, s, Nothing)End IfSub
正如你所看到的，代碼非常簡(jiǎn)單。首先，我們檢查當(dāng)前行是否有問(wèn)號(hào)。如果有，創(chuàng)建一個(gè)SearchBox實(shí)例。我們將刪除“？”之后的所有東西。我這里簡(jiǎn)化了事情假設(shè)問(wèn)號(hào)是此行的第一個(gè)字符。代碼然后將文本顯示到搜索框。接下來(lái)，設(shè)置搜索框的top和left位置，并使用編輯器API將搜索框添加到裝飾品列表中。僅僅用了很少幾行代碼，你已創(chuàng)建了你的第一個(gè)編輯器擴(kuò)展！現(xiàn)在，試試它，按下F5。
一旦VS的實(shí)驗(yàn)實(shí)例運(yùn)行起來(lái)，請(qǐng)繼續(xù)并創(chuàng)建一個(gè)控制臺(tái)程序（或加載任何文件到編輯器）。然后鍵入問(wèn)號(hào)。你將看到編輯器加載了你的擴(kuò)展。我還要說(shuō)一件事。默認(rèn)模板在編輯器里將裝飾品放置在文本后面。下面的圖片展示了這個(gè)問(wèn)題。
要修正這一點(diǎn)，你可以通過(guò)編輯AdornmentFactory.vb文件來(lái)指定裝飾品位置的Z序。改變下面的代碼行：
- <Order(After:="Selection", Before:="Text")>
- <Order(After:="Text", Before:="Caret")>
這將使你的裝飾品放置在文本前，脫字符后。繼續(xù)并生成看看結(jié)果。
#p#
步驟4：編輯你的擴(kuò)展的元數(shù)據(jù)
現(xiàn)在你創(chuàng)建了你的擴(kuò)展，你可以向大家共享它。第一件要做的事是更新此擴(kuò)展的元數(shù)據(jù)。你可以打開(kāi)source.extension.vsixmanifest來(lái)修改。一個(gè)基本的編輯器展現(xiàn)出來(lái)，你可以更新ID，Name，Author，Version，和任何VS可編輯的，擴(kuò)展可以繼續(xù)工作。
注意：擴(kuò)展將只在Integration Shell, Pro, Premium, 和Ultimate工作。擴(kuò)展不能在Express版工作。如果你要給Express版創(chuàng)建擴(kuò)展，你被限制成工具箱控件，項(xiàng)模板，項(xiàng)目模板，和自定義起始頁(yè)。清單設(shè)計(jì)器也允許你指定引用，如果你引用了另一個(gè)VSIX文件。我們保留這里為空，因?yàn)槟壳拔覀兊臄U(kuò)展沒(méi)有任何依賴項(xiàng)。一旦你更新完元數(shù)據(jù)，重新生成項(xiàng)目。
步驟5：共享你的擴(kuò)展
重新生成后，看看你的輸出文件夾（bin\debug或bin\release）。你可以在解決方案管理器里的項(xiàng)目目錄右擊選擇“Open Folder in Windows Explorer”。然后打開(kāi)bin\[output]。文件夾會(huì)包含一個(gè).VSIX文件。你可以用這個(gè)文件上傳到VS Gallery，而其他人會(huì)在擴(kuò)展管理器看到這個(gè)文件。要上傳你的擴(kuò)展，在VS Gallery里跟著下面的向?qū)ё觥?/p>
1.用瀏覽器打開(kāi)www.visualstudiogallery.com
2.選擇Upload
3.用你的live id登陸
4.為擴(kuò)展類型選擇Tool，因?yàn)槲覀兪巧蟼饕粋€(gè)編輯器擴(kuò)展，而不是控件或項(xiàng)目/項(xiàng)模板。點(diǎn)擊Next
5.選擇“I would like to upload my tool”
6.在上傳控件選擇VSIX文件，點(diǎn)擊next。你的VSIX現(xiàn)在將上傳，且元數(shù)據(jù)被解析且插入到步驟3的左邊。
7.核實(shí)左邊元數(shù)據(jù)的正確性。在右邊，為你的擴(kuò)展選擇類別，添加任何標(biāo)簽，選擇一個(gè)價(jià)格類別。
8.你同樣可以在你的擴(kuò)展頁(yè)面添加富HTML。我們創(chuàng)建了4個(gè)很酷的模板，你可以復(fù)制/粘貼到你的HTML控件來(lái)讓你的頁(yè)面非常突出。這些模板在：
http://visualstudiogallery.msdn.microsoft.com/templates/template1.html
http://visualstudiogallery.msdn.microsoft.com/templates/template2.html
http://visualstudiogallery.msdn.microsoft.com/templates/template3.html
http://visualstudiogallery.msdn.microsoft.com/templates/template4.html
9.一旦你對(duì)你的價(jià)錢(qián)已經(jīng)滿意，點(diǎn)擊I agree，然后點(diǎn)擊Create Contribution。發(fā)布擴(kuò)展的最后一步是在預(yù)覽頁(yè)點(diǎn)擊publish。一旦你點(diǎn)擊publish，此擴(kuò)展便可以被任何人下載安裝。
#p#
步驟6：消費(fèi)你的擴(kuò)展
要核實(shí)你的擴(kuò)展是有效的，啟動(dòng)Visual Studio，打開(kāi)Tools/Extension Manager。然后去網(wǎng)上用你的擴(kuò)展的名稱搜索。
【編輯推薦】
