當一個新的功能出來時，小喵不免會去開始想，這個功能小喵的系統應該怎麼應用上去。IE8裡面，除了加強了搜尋的功能，提供視覺化搜尋外，在IE8中還新增加了好東西，這東西叫做【加速器(Accelerator)】。這篇就來介紹如何開發自己網站，並且支援【預覽功能】的加速器...
緣起
當一個新的功能出來時，小喵不免會去開始想，這個功能小喵的系統應該怎麼應用上去。IE8裡面，除了加強了搜尋的功能，提供視覺化搜尋外，在IE8中還新增加了好東西，這東西叫做【加速器(Accelerator)】。這篇就來介紹如何開發自己網站，並且支援【預覽功能】的加速器...
預期結果
預期我們希望能夠讓使用者瀏覽任何網頁時，可以透過加速器來搜尋我們提供的相關資料，並且已使覺化的方式預覽。用描素的不如用看的，請看以下的影片。
什麼是加速器
加速器，看到名稱，小喵的第一印象，以為是開跑車時的，按下液態氮，然後車子就會衝出去一樣，或許是讓網頁可以更快的顯示的一個工具。但是測試了一下，好像不是想像中那樣，可以讓一般的瀏覽加快。不過如果把瀏覽網頁過程中，有個關鍵字，需要去查詢他的相關資料，在以往的方式，有以下這些步驟
- 選取關鍵字
- 複製
- 點搜尋列
- 貼上關鍵字
- 按下Enter
- 查看列出的相關訊息
再這樣個過程，需要這麼些步驟才能夠看到想要的資訊。而使用加速器的話，過程就會變成：
- 選取關鍵字
- 點選加速器開關
- 選擇要的加速器
- 直接看到相關的訊息
仔細看一下這個過程，如果把這些步驟比擬做開跑車在高速公路上，那麼使用加速器，確實會讓你在一瞬間，就衝出去(看到相關資訊)的感覺
準備工作
要測試使用加速器(Accelerator)在自己的網站，同樣的也是準備一個資料庫來當作資料查詢的來源。小喵利用上次測試【視覺化搜尋】相同的資料庫，這次用來撰寫看【視覺化預覽的加速器】要怎麼來開發。因此我們就用上次的專案，上次的資料庫來當作例子
開始撰寫
我們參考在點部落裡面【Dotjum】的【IE 8 Accelerator 加速器開發介紹 get 篇 (Activities)】，所以我們知道，要做出一個Preview的網頁，而且這個網頁，他的大小要限制在【320*240】的大小範圍裡面。撰寫這個東西比起寫視覺化搜尋簡單多了，上一次的視覺化搜尋，必須產生特定的xml內容。但是這次的加速器只需要撰寫一般的網頁就可以。小喵就用一個DIV,一個GridView來處理即可。相關的程式碼如下：
tAcceleratorPreview.aspx
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="MODEL" HeaderText="MODEL" SortExpression="MODEL" />
<asp:TemplateField HeaderText="Img" SortExpression="Img">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Img") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/" & Eval("Img") %>' Width="50px" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Dsc" HeaderText="Dsc" ReadOnly="True"
SortExpression="Dsc" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
SelectCommand="SELECT [MODEL], [Img], [Url], Left([Description],10) + '...' AS Dsc FROM [T1] WHERE ([MODEL] LIKE '%' + @MODEL + '%')">
<SelectParameters>
<asp:QueryStringParameter Name="MODEL" QueryStringField="q" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
這個寫法沒有什麼特別的，就是一般的ASP.NET的寫法，拉個GridView來顯示資料，不過由於畫面會限制在【320*240】這樣的大小。因此圖型的部分，小喵特別設定他的寬度，讓圖不要太大。另外使用DIV來限制展現的範圍，而且設定當超過這個範圍的話，DIV會自動使用Scroll來處理。讓使用者可以拉ScrollBar來處理。看不見的部分。不過您仔細看會發現，小喵寫的div比320*240還要小一些，那是因為一般網頁在上下左右都會有一點點的留白，所以為了讓Scroll能夠順利的出現，再多保留40px的空間。如果要去除上下左右保留的留白，可以在<BODY>上，增加如下的Style設定
加入視覺化加速器
接著，跟視覺化的搜尋一樣，要加入這個加速器，要有個xml檔案讓使用者來加入。該xml的檔案內容如下：
tAcceleratorPreview.aspx
<openServiceDescription
xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://[your server_ip or server_name]/tVisualSearch/</homepageUrl>
<display>
<name>Topcat 示範 加速器</name>
<icon>http://[your server_ip or server_name]/tVisualSearch/TOPCAT.ico</icon>
<description>Topcat示範的加速器(含預覽)</description>
</display>
<activity category="share">
<activityAction context="selection">
<preview action="http://[your server_ip or server_name]/tVisualSearch/tAcceleratorPreview.aspx">
<parameter name="q" value="{selection}" />
</preview>
<execute method="get" action="http://[your server_ip or server_name]/tVisualSearch/results.aspx" >
<parameter name="q" value="{selection}" type="text" />
</execute>
</activityAction>
</activity>
</openServiceDescription>
這邊重複【Dotjum】大大所說的，這個xml的結構中，【homepageUrl】這個設定了您的加速器所在的Domain，因此【activity】以下的【preview action】、【execute action】的網址都必須與【homepageUrl】相互呼應，這樣才能夠正確的運作。其他的部分從xml的Tag名稱大概都很容易猜出來該放哪些資料。而關鍵的【{selection}】代表您在往頁中，反白後想要透過加速器處理的部分。
最後一樣，加上一個超連結(或者按鈕)，透過JavaScript來註冊這個xml。目前用到的視覺化搜尋與加速器，分別是
視覺化搜尋：window.external.AddSearchProvider('[YourXMLFile]')
加速器：window.external.addService('tAccelerator.xml')
後記
【加速器】的功能，操作上感覺起來比【視覺化搜尋】操作簡單。而且開發上，也更簡單(只需要一般的網頁，注意顯示大小)。所以大家可以構思，要為您自己的網站，增加哪些的【加速器】。
參考資料：
IE 8 Accelerator 加速器開發介紹 get 篇 (Activities)
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
