Beispiel für Freihand-Blognetz

Die Beispielanwendung für den Freihandblog veranschaulicht, wie Sie eine verwaltete UserControl-Klasse erstellen, die über Freihandfunktionen verfügt und dieses Steuerelement in Microsoft Internet Explorer hostet. Das Beispiel veranschaulicht auch eine Technik zum Senden von Freihanddaten über ein Netzwerk mithilfe von HTTP und zum Beibehalten von Freihand auf einem Server.

Übersicht

Im Beispiel des Freihandblogs wird ein Freihand-fähiges Weblog erstellt. InkBlogWeb ist eine ASP.NET Anwendung. Die Freihandeingabe erfolgt mithilfe eines Benutzersteuerelements, auf das von einer ASP.NET Seite verwiesen wird.

Das Benutzersteuerelement erkennt, ob die Tablet PC-Plattformkomponenten auf dem Clientcomputer installiert sind. Wenn dies der Grund ist, stellt das Benutzersteuerelement dem Benutzer zwei Freihandbereiche auf der Webseite zur Auswahl: einen für die Freihandeingabe eines Titels für den Blogeintrag und einen für den Textkörper des Eintrags. Wenn die Tablet PC Platform-Komponenten nicht installiert sind, erhält der Benutzer ein Standard-Textfeld-Steuerelement für den Titel und den Textkörper des Eintrags.

Wenn der Benutzer die Erstellung des Eintrags abgeschlossen hat, klickt er auf die Schaltfläche Blog hinzufügen, und der Beitrag wird zur Speicherung an den Webserver gesendet. Auf dem Server speichert die Anwendung den Titeltext und das Buchungsdatum sowie einen Verweis auf eine GIF-Datei (Graphics Interchange Format). Die GIF-Datei, die ebenfalls auf dem Server gespeichert wird, enthält die Freihanddaten aus dem Textkörper in einer angereicherten GIF-Datei. Weitere Informationen zum angereicherten GIF-Format finden Sie unter Speichern von Freihand in HTML.

Es gibt zwei Projekte in der Projektmappe InkBlog: das Projekt InkBlogControls und das Projekt InkBlogWeb .

InkBlogControls-Projekt

Das InkBlogControls-Projekt ist ein UserControl-Projekt , das den Code für das Benutzersteuerelement enthält, das freihandeingaben auf der Webseite aktiviert. Der Code für dieses Steuerelement, das InkArea-Steuerelement, befindet sich in der Datei InkArea.cs.

Die InkArea -Klasse erbt von der UserControl-Klasse . Der Konstruktor für das InkArea Steuerelement ruft die Hilfsmethode auf. 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);
}

Die CreateInkCollectionSurface -Methode bestimmt, ob die Tablet PC-Freihandkomponenten auf dem Client verfügbar sind, indem versucht wird, eine instance der InkCollector-Klasse zu erstellen. Wenn der Aufruf der CreateInkCollectionSurface -Methode erfolgreich ist, gibt die Methode ein Panel-Objekt als Steuerelement zurück.

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

Wenn der Konstruktor fehlschlägt, weil die Freihandplattformdateien nicht gefunden werden, wird das InputArea Steuerelement als TextBox-Steuerelement und nicht als InkCollector-Steuerelement instanziiert. Der Konstruktor vergrößert das Steuerelement dann auf die Größe des übergeordneten Benutzersteuerelements und fügt es der Controls-Auflistung des übergeordneten Elements hinzu.

Die InkArea-Steuerelementklasse implementiert drei interessante öffentliche Eigenschaften: InkData, TextData und WebEnabled.

Die InkData-Eigenschaft ist schreibgeschützt und bietet Zugriff auf die serialisierten Freihanddaten, wenn der Client Freihandeingaben unterstützt. Wenn der Client freihandeingaben nicht unterstützt, ruft die InkData-Eigenschaft eine leere Zeichenfolge ab. Die InkData-Eigenschaft ruft die Hilfsmethode SerializeInkData auf, um zu bestimmen, ob der Client Freihandeingaben unterstützt.

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;
}

In der SerializeInkData -Methode ist die Umwandlung in InkCollector erforderlich, wenn das Ink-Objekt abgerufen wird, da inputArea als Control deklariert wird. Wenn das Ink-Objekt Striche enthält, werden die Freihanddaten im Bytearray als GIF gespeichert inkDataBytes (angegeben mit dem PersistenceFormat-Enumerationswert ). Die -Methode konvertiert dann das Bytearray in eine Base64-codierte Zeichenfolge und gibt diese Zeichenfolge zurück.

Unter der Annahme, dass der Client eine Erkennung durchführen kann, gibt die TextData Eigenschaft das RecognitionResult-Objekt aus der Übergabe der Freihanddaten an eine Handschrifterkennung zurück. Wenn der Client nicht freihandfähig ist, werden die Textfeldinhalte zurückgegeben, wie im folgenden Code gezeigt.

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

Die TextData -Eigenschaft ruft die im folgenden Code gezeigte Hilfsmethode RecognizeInkDataauf, um die Erkennung auszuführen. Wenn Erkennungs-Engines im System vorhanden sind, gibt die RecognizeInkData -Methode eine Zeichenfolge zurück, die die TopString-Eigenschaft des RecognitionResult-Objekts enthält. Andernfalls wird eine leere Zeichenfolge zurückgegeben.

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;
}

Die InkEnabled -Eigenschaft ist ein schreibgeschützter boolescher Wert, der angibt, ob Freihandeingaben auf dem Clientcomputer unterstützt werden.

Ein weiteres wichtiges öffentliches Element der InkArea Steuerelementklasse ist die DisposeResources -Methode. Diese Methode ruft intern die Dispose -Methode auf, um sicherzustellen, dass alle vom Benutzersteuerelement genutzten Ressourcen bereinigt werden. Jede Anwendung, die das InkArea Steuerelement verwendet, muss die DisposeResources -Methode aufrufen, wenn sie mit dem -Steuerelement fertig ist.

InkBlogWeb-Projekt

Das InkBlogWeb-Projekt ist ein Websetup-Bereitstellungsprojekt, das auf das InkArea Steuerelement verweist, um die Bloggingfunktion bereitzustellen. Weitere Informationen zu Web Setup-Bereitstellungsprojekten finden Sie unter Bereitstellung eines Websetupprojekts.

Es gibt zwei ASPX-Dateien, die das Bloggingbeispiel implementieren: Default.aspx und AddBlog.aspx. Default.aspx ist die Standardseite für die InkBlogWeb-Anwendung. Die CodeBehind-Datei für diese Seite ist Default.aspx.cs. Diese Seite enthält einen Link zu der Seite mit dem neuen Blogeintragsformular und zeigt alle vorhandenen Blogeinträge an. Dieser Vorgang wird später nach der folgenden Prüfung der neuen Blogeintragsformularseite AddBlog.aspx beschrieben.

AddBlog.aspx und die zugehörige CodeBehind-Datei AddBlog.aspx.cs enthalten die Logik und den Benutzeroberflächencode zum Erstellen neuer Blogeinträge. AddBlox.aspx verweist auf zwei Instanzen der InkArea-Steuerelementklasse, die im InkBlogControls-Projekt mithilfe des HTML OBJECT-Elements erstellt wurde, wie im folgenden Beispiel gezeigt. Ein instance hat das id Attribut inkBlogTitle und die andere das id-Attribut inkBlogBody.

<OBJECT id="inkBlogTitle" classid="InkBlogControls.dll#InkBlog.InkArea" width="400" height="48" VIEWASTEXT>``</OBJECT>``<br/>``<OBJECT id="inkBlogBody" classid="InkBlogControls.dll#InkBlog.InkArea" width="400" height="296" VIEWASTEXT>``</OBJECT>

Die InkBlogControls.dll Assembly muss sich im selben Verzeichnis wie die ASPX-Seite befinden, die darauf verweist. Das Websetup-Bereitstellungsprojekt stellt sicher, dass dies der Fall ist, wie das Vorhandensein des Elements "Primäre Ausgabe von InkBlogControls" im Bereitstellungsprojekt zeigt.

Das Titelsteuerelement ist nur 48 Pixel hoch, um die Eingabe einer einzelnen Freihandzeile für den Titel zu erleichtern. Das Body-Steuerelement ist 296 Pixel hoch, um Platz für größere Blogeinträge mit mehreren Linien oder vielleicht Zeichnungen zu schaffen.

Die InkArea-Steuerelemente sind mithilfe des onclick-Ereignishandlers eines standardmäßigen HTML BUTTON-Elements mit der clientseitigen Skriptfunktion AddBlog verbunden.

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

Es gibt auch ein HTML-Formular auf der Seite, das drei ausgeblendete INPUT-Elemente enthält: BlogTitleText, BlogBodyText und BlogBodyInkData. Dieses Formular wird verwendet, um die Blogeintragsdaten wieder auf dem Server zu veröffentlichen. AddBlog.aspx ist der post-back-Handler, der für das Formular definiert ist.

Die AddBlog-Funktion, die in Microsoft JScript<entity type="reg"/>-geschrieben wurde, extrahiert die Blogdaten aus den InkArea-Steuerelementen und stellt die Ergebnisse an den Server.

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();
}

Wenn die Daten auf dem Server eingehen, überprüft der Code in AddBlog.aspx.cs den Page_Load-Ereignishandler, um festzustellen, ob die Form-Eigenschaft des HttpRequest-Objekts Daten enthält. Wenn ja, erstellt es einen Dateinamen basierend auf der aktuellen Systemzeit, fügt die Formulardaten in drei Zeichenfolgenvariablen ein und schreibt die Daten in eine HTML-Datei und eine GIF-Datei, die die Freihanddaten enthält, sofern vorhanden, wie im folgenden Code gezeigt.

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);

Weitere Informationen zu den Hilfsmethoden finden Sie im Beispielquellcode.

Ausführen des Beispiels

Das Tablet PC SDK 1.7 installiert standardmäßig das Ink-Blog-Webbeispiel. Navigieren Sie zum Ausführen des Beispiels im Internet Explorer zuhttps://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Wenn Sie Windows Server 2003 ausführen, ersetzen Sie den Computernamen durch "localhost".

Sie können das Beispiel auch ausführen, indem Sie das Projekt in Microsoft Visual Studio<entity type="reg"/> .NET öffnen und erstellen und dann auf einem separaten Computer mit IIS bereitstellen.

Problembehandlung bei diesem Beispiel

Drei Bereiche, die beim Ausführen oder Hosten des Beispiels zu Schwierigkeiten führen können, sind Berechtigungen und Erkennung.

Berechtigungen

Für das Beispiel sind Schreibberechtigungen im virtuellen Stammordner für das Konto erforderlich, das versucht, einen neuen Blogeintrag zu erstellen. Standardmäßig verfügt die kompilierte Version des Beispiels im Tablet PC SDK 1.7 über die richtigen Berechtigungen, um diese Anforderung zu erfüllen.

Wenn Sie das Beispiel mithilfe des bereitgestellten Websetup-Bereitstellungsprojekts erstellen und bereitstellen, müssen Sie der Gruppe %MACHINENAME%\Users Schreibzugriff auf den Dateisystemordner gewähren, auf den der virtuelle Stamm InkBlogWeb verweist (z. B. C:\InetPub\WWWRoot\InkBlogWeb). Die Gruppe Benutzer enthält das anonyme Konto, das von IIS verwendet wird, sodass die ASP.NET Anwendung die neuen Blogeinträge in das Dateisystem schreiben kann. Eine Alternative besteht darin, den anonymen Zugriff auf den virtuellen Stamm zu entfernen und die Authentifizierung zu erzwingen.

Erkennung

Die Handschrifterkennung muss installiert sein, um die Freihand im Titel des Blogs zu erkennen. Wenn Sie von einem Computer mit einem anderen Betriebssystem als Windows XP Tablet PC Edition, aber mit installiertem Tablet PC SDK 1.7 auf die InkBlog-Anwendung zugreifen, können Sie in den InkArea-Steuerelementen in Freihand schreiben, aber die Erkennungs-Engines sind nicht vorhanden, und für Ihre Blogeinträge werden keine Titel angezeigt. Der Freihandinhalt im Textkörper wird jedoch weiterhin angezeigt.

Computerkonfiguration

Wenn Sie ASP.NET und die .NET Framework auf einem Computer installiert haben und IIS dann deinstallieren und erneut installieren, werden die Skriptzuordnungen unterbrochen, und ASP.NET funktioniert nicht. In diesem Fall können Sie die ASP.NET-Skriptzuordnungen mit dem ASP.NET IIS-Registrierungstool (Aspnet_regiis.exe -i) reparieren.

Zugehörige Themen

Inkcollector

Freihand im Web

Freihanddatenformate

System.Windows.Forms.UserControl-Klasse