筆跡部落格 Web 範例

發行項
06/13/2023

Ink Blog 範例應用程式示範如何建立受控 UserControl 類別，該類別具有筆跡功能，並在 Microsoft Internet Explorer 中裝載該控制項。此範例也會示範使用 HTTP 在網路上傳送筆跡資料，以及在伺服器上保存筆跡的技術。

注意

您必須安裝 ASP.NET Microsoft Internet Information Services (IIS) ，才能執行此範例。請確定您的電腦符合 ASP.NET 應用程式在電腦上執行所需的需求。

注意

如果您在具有 Microsoft Windows XP Tablet PC Edition Development Kit 1.7 的非平板電腦電腦上執行此範例，則筆跡標題的文字辨識功能將無法運作。這是因為已安裝平板電腦 SDK 1.7 的非平板電腦電腦缺少辨識器。應用程式的其餘部分會如所述執行。

概觀

筆跡部落格範例會建立已啟用筆跡的 Weblog。 InkBlogWeb 是 ASP.NET 應用程式。筆跡專案是透過從 ASP.NET 網頁參考的使用者控制項來完成。

使用者控制項會偵測用戶端電腦上是否已安裝平板電腦平臺元件。如果是，使用者控制項會在網頁上顯示兩個已啟用筆跡的區域：一個用於筆跡部落格專案的標題，另一個用於輸入本文。如果未安裝平板電腦平臺元件，則會為使用者提供專案標題和本文的標準文字方塊控制項。

當使用者完成建立專案時，她按一下按鈕 [新增部落格]，並將文章傳送至網頁伺服器以供儲存。在伺服器上，應用程式會儲存標題文字和張貼日期，以及圖形交換格式 (GIF) 檔案的參考。 GIF 檔案也會儲存至伺服器，其中包含來自內文的筆跡資料，位於強化的 GIF 檔案中。如需強化 GIF 格式的詳細資訊，請參閱以 HTML 儲存筆跡。

InkBlog 方案中有兩個專案： InkBlogControls 專案和 InkBlogWeb 專案。

InkBlogControls 專案

InkBlogControls專案是UserControl專案，其中包含可在網頁上啟用筆跡的使用者控制項程式碼。此控制項的程式碼 InkArea 控制項位於 InkArea.cs 檔案中。

類別 InkArea 繼承自 UserControl 類別。控制項的 InkArea 建構函式會呼叫協助程式方法 CreateInkCollectionSurface 。

public InkArea()
{
    // Standard template code

    try
    {
        inputArea = CreateInkCollectionSurface();
    }
    catch (FileNotFoundException)
    { 
        inputArea = new TextBox();
        ((TextBox)inputArea).Multiline = true;
    }

    inputArea.Size = this.Size;

    // Add the control used for collecting blog input
    this.Controls.Add(inputArea);
}

CreateInkCollectionSurface方法會嘗試建立InkCollector類別的實例，以判斷用戶端上是否可使用平板電腦筆跡元件。如果方法的 CreateInkCollectionSurface 呼叫成功，此方法會傳回 Panel 物件做為控制項。

protected Control CreateInkCollectionSurface()
{
    try
    {
        Panel inkPanel = new Panel();
        inkPanel.BorderStyle = BorderStyle.Fixed3D;
        inkCollector = new InkCollector(inkPanel);
        ((InkCollector)inkCollector).Enabled = true;
        return inkPanel;
    }
    catch
    {
        throw;
    }
}

如果建構函式因為找不到手寫筆跡平臺檔案而失敗，則 InputArea 控制項會具現化為 TextBox 控制項，而不是 InkCollector 控制項。建構函式接著會將控制項大小調整為父使用者控制項的大小，並將它新增至父系的 Controls 集合。

InkArea 控制項類別會實作三個有趣的公用屬性：InkData、TextData 和 WebEnabled。

如果用戶端支援筆跡，InkData 屬性是唯讀的，而且會提供序列化筆跡資料的存取權。如果用戶端不支援筆跡，InkData 屬性會取得空字串。 InkData 屬性會呼叫 Helper 方法 SerializeInkData，以判斷用戶端是否支援筆跡。

protected String SerializeInkData()
{
    Debug.Assert(InkEnabled, null, "Client must be ink-enabled");

    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    // Serialize the ink
    if (ink.Strokes.Count > 0) 
    {
        byte[] inkDataBytes = ink.Save(PersistenceFormat.Gif);
        return Convert.ToBase64String(inkDataBytes);
    }

    // Default to returning the empty string.
    return String.Empty;
}

在方法中 SerializeInkData ，取得Ink物件時，必須轉換成InkCollector，因為 inputArea 會宣告為Control。如果 Ink 物件包含任何筆劃，則筆跡資料會以 GIF 格式儲存到 inkDataBytes 位元組陣列中， (使用 PersistenceFormat 列舉值) 所指定。方法接著會將位元組陣列轉換成 Base64 編碼字串，並傳回此字串。

假設用戶端可以執行辨識， TextData 屬性會傳回 RecognitionResult 物件，將筆跡資料傳遞至手寫辨識器。如果用戶端無法感知筆跡，則會傳回文字方塊內容，如下列程式碼所示。

public string TextData
{
    get
    {
        if (this.WebEnabled) 
        {
            return RecognizeInkData();
        }
        else
        {
            return ((TextBox)inputArea).Text;
        }
    }
}

屬性 TextData 會呼叫協助程式方法 RecognizeInkData ，如下列程式碼所示，以執行辨識。當系統上有辨識引擎時， RecognizeInkData 此方法會傳回包含 RecognitionResult 物件的 TopString 屬性的字串。否則將傳回空字串。

protected String RecognizeInkData()
{
    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    if (ink.Strokes.Count > 0) 
    {

        // Attempt to create a recognition context and use it to
        // retrieve the top alternate.
        try 
        {
            RecognizerContext recognizerContext = new RecognizerContext();
            RecognitionStatus recognitionStatus;
            recognizerContext.Strokes = ink.Strokes;
            RecognitionResult recognitionResult = recognizerContext.Recognize(out recognitionStatus);
            if (recognitionStatus == RecognitionStatus.NoError) && ( null != recognitionResult) )
            {
                return recognitionResult.TopString;
            }
        }
        catch (Exception)
        {
            // An exception will occur if the client does not have
            // any handwriting recognizers installed on their system.
            // In this case, we default to returning an empty string. 
        }
    }

    return String.Empty;
}

屬性 InkEnabled 是唯讀布林值，指出用戶端電腦是否支援手寫筆跡。

控制項類別的另一個重要公用成員 InkArea 是 DisposeResources 方法。此方法會在內部呼叫 Dispose 方法，以確保已清除使用者控制項所運用的所有資源。使用控制項的任何應用程式 InkArea 都必須在使用控制項完成時呼叫 DisposeResources 方法。

InkBlogWeb 專案

InkBlogWeb 專案是 Web 安裝程式部署專案，參考 InkArea 控制項以提供部落格功能。如需 Web 安裝程式部署專案的詳細資訊，請參閱 Web 安裝程式專案的部署。

有兩個 .aspx 檔案會實作部落格範例：Default.aspx 和 AddBlog.aspx。 Default.aspx 是 InkBlogWeb 應用程式的預設頁面。此頁面的程式碼後置檔案為 Default.aspx.cs。此頁面提供頁面的連結，其中包含新的部落格專案表單，並顯示任何現有的部落格專案。稍後會在檢查新的部落格專案表單頁面 AddBlog.aspx 之後描述此程式。

AddBlog.aspx 及其程式碼後置檔案 AddBlog.aspx.cs 包含用來建立新部落格專案的邏輯和使用者介面程式碼。 AddBlox.aspx 會參考 InkBlogControls 專案中建立的 InkArea 控制項類別的兩個實例，如下列範例所示。一個實例具有 inkBlogTitle 的屬性，另一個 id 實例則具有 inkBlogBody 的識別碼屬性。

InkBlogControls.dll元件必須存在於與參考元件的 .aspx 頁面相同的目錄中。 Web 安裝程式部署專案可確保這是這種情況，如部署專案中的「Primary output from InkBlogControls」專案所證明。

標題控制項只有 48 圖元高，可協助輸入標題的單行筆跡。本文控制項高度為 296 圖元，可供多行或繪圖的較大部落格專案空間。

InkArea 控制項會透過標準 HTML BUTTON 元素的 onclick 事件處理常式連接到用戶端腳本函式 AddBlog。

<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>

頁面上也有一個 HTML 表單，其中包含三個隱藏的 INPUT 元素：BlogTitleText、BlogBodyText 和 BlogBodyInkData。此表單用來將部落格專案資料張貼回伺服器。 AddBlog.aspx 是針對表單定義的後置處理常式。

以 Microsoft JScript < 實體類型=「reg」/ > -擷取 InkArea 控制項中的部落格資料，並將結果張貼至伺服器中的 AddBlog 函式。

function AddBlog() 
{
    // Extract the blog's title data as ink and text
    form.BlogTitleText.value  = inkBlogTitle.TextData;
    
    // Extract the blog's body data as ink and text
    form.BlogBodyText.value = inkBlogBody.TextData;
    form.BlogBodyInkData.value = inkBlogBody.InkData;   

    form.submit();
}

當資料抵達伺服器時，AddBlog.aspx.cs 中的程式碼會檢查Page_Load事件處理常式，以查看 HttpRequest 物件的 Form 屬性是否包含任何資料。如果是的話，它會根據目前的系統時間建立檔案名，並將表單資料放入三個字串變數中，並將資料寫出至 HTML 檔案和包含筆跡資料的 GIF 檔案，如下列程式碼所示。

if ( (String.Empty != inkBody) )
{           
    // Use helper method to create a GIF image file from ink data 
    CreateGif(imagePath, fileName, inkBody);
    
    // Create an HTML fragment to reference the image file
    content = "<img src=\"Blogs/Images/" + fileName + ".gif\"></img>";
}                
else 
{
    // If no ink data is available create an HTML fragment that contains
    // the blog's text directly.
    content = "<P>" + textBody + "</P>";
}

// Use helper method to create the blog web page on the server
CreateHtm(blogPath, fileName, blogTitle, content);

如需協助程式方法的詳細資訊，請參閱範例原始程式碼。

執行範例

平板電腦 SDK 1.7 預設會安裝 Ink 部落格 Web 範例。若要執行範例，請在 Internet Explorer 中流覽至 https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. 如果您執行 Windows Server 2003，請將電腦名稱稱取代為「localhost」。

注意

SDK 的預設安裝選項不會安裝已編譯的 Web 範例。您必須完成自訂安裝，然後選取 [預先編譯的 Web 範例] 子選項來安裝它們。

您也可以在 Microsoft Visual Studio < 實體 type=「reg」/ > .NET 中開啟和建置專案，然後將它部署到執行 IIS 的個別電腦來執行範例。

範例疑難排解

執行或裝載範例時，可能會造成困難的三個區域是許可權和辨識。

權限

此範例需要嘗試建立新部落格專案之帳戶虛擬根資料夾內的寫入權限。根據預設，平板電腦 SDK 1.7 中提供的範例編譯版本具有正確的許可權集合，以符合此需求。

如果您使用提供的 Web 安裝程式部署專案來建置和部署範例，您必須提供 %MACHINENAME%\Users 群組寫入權限給 InkBlogWeb 虛擬根目錄 (所指向的檔系統資料夾，例如 C：\InetPub\WWWRoot\InkBlogWeb) 。 Users 群組包含 IIS 所使用的匿名帳戶，因此允許 ASP.NET 應用程式將新的部落格專案寫入檔案系統。替代方法是移除虛擬根目錄的匿名存取，並強制驗證。

辨識

必須安裝手寫辨識器，才能辨識部落格標題中的筆跡。如果您從具有 Windows XP Tablet PC Edition 以外的作業系統的電腦存取 InkBlog 應用程式，但已安裝平板電腦 SDK 1.7，您可以在 InkArea 控制項中寫入筆跡，但辨識引擎不會存在，而且您的部落格專案不會顯示任何標題。不過，本文中的筆跡內容仍會顯示。

機器設定

如果您已在電腦上安裝 ASP.NET 和.NET Framework，然後卸載並重新安裝 IIS，腳本對應將會中斷，ASP.NET 將無法運作。如果發生這種情況，您可以使用 ASP.NET IIS 註冊工具 (Aspnet_regiis.exe -i) 修復 ASP.NET 腳本對應。

InkCollector
網路上的筆跡
筆跡資料格式
System.Windows.Forms.UserControl 類別

共用方式為

筆跡部落格 Web 範例

概觀

InkBlogControls 專案

InkBlogWeb 專案

執行範例

範例疑難排解

權限

辨識

機器設定

意見反應

其他資源

共用方式為

筆跡部落格 Web 範例

概觀

InkBlogControls 專案

InkBlogWeb 專案

執行範例

範例疑難排解

權限

辨識

機器設定

相關主題

意見反應

其他資源