Przykład bloga internetowego Ink

Przykładowa aplikacja bloga pisma odręcznego pokazuje, jak utworzyć zarządzaną klasę UserControl, która ma możliwość tworzenia pisma odręcznego i hostuje tę kontrolkę w programie Microsoft Internet Explorer. W przykładzie pokazano również jedną technikę wysyłania danych atramentowych przez sieć przy użyciu protokołu HTTP oraz utrwalania danych atramentowych na serwerze.

Przegląd

Przykładowy blog z obsługą pisma tworzy blog internetowy. InkBlogWeb to aplikacja ASP.NET. Wpis tuszu odbywa się za pomocą kontrolki użytkownika, do której odnosi się strona ASP.NET.

Kontrolka użytkownika wykrywa, czy składniki platformy Tablet PC są zainstalowane na komputerze klienckim. Jeśli tak, kontrolka użytkownika przedstawia użytkownikowi dwa obszary umożliwiające pisanie odręczne na stronie internetowej: jeden do pisania odręcznego tytułu wpisu na blogu i jeden do treści wpisu. Jeśli składniki platformy Tablet PC nie są zainstalowane, użytkownik otrzymuje standardową kontrolkę pola tekstowego dla tytułu i treści wpisu.

Po zakończeniu tworzenia wpisu użytkownik klika przycisk "Dodaj wpis", a wpis zostaje wysłany na serwer do przechowywania. Na serwerze aplikacja zapisuje tekst tytułu i datę publikowania, a także odwołanie do pliku GIF (Graphics Interchange Format). Plik GIF, również zapisany na serwerze, który zawiera dane atramentu z ciała w wzbogaconym pliku GIF. Aby uzyskać więcej informacji na temat wzmocnionego formatu GIF, zobacz Storing Ink in HTML.

Istnieją dwa projekty w rozwiązaniu InkBlog: projekt InkBlogControls oraz projekt InkBlogWeb.

Projekt InkBlogControls

Projekt InkBlogControls jest projektem UserControl zawierającym kod kontrolki użytkownika, który umożliwia tworzenie pisma odręcznego na stronie sieci Web. Kod dla tej kontrolki, kontrolki InkArea, znajduje się w pliku InkArea.cs.

Klasa InkArea dziedziczy z klasy UserControl. Konstruktor kontrolki InkArea wywołuje metodę pomocniczą 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);
}

Metoda CreateInkCollectionSurface określa, czy składniki pisma odręcznego na tablecie są dostępne na kliencie, próbując utworzyć wystąpienie klasy InkCollector. Jeśli wywołanie metody CreateInkCollectionSurface powiedzie się, metoda zwróci obiekt Panel jako kontrolkę.

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

Jeśli konstruktor nie powiedzie się, ponieważ nie znaleziono plików platformy pisma odręcznego, kontrolka InputArea jest tworzona jako kontrolka TextBox, zamiast kontrolki InkCollector. Konstruktor następnie dopasowuje rozmiar kontrolki do rozmiaru nadrzędnej kontrolki użytkownika i dodaje ją do kolekcji Kontrolki elementu nadrzędnego.

Klasa kontrolki InkArea implementuje trzy interesujące właściwości publiczne: InkData, TextData i WebEnabled.

Właściwość InkData jest tylko do odczytu i zapewnia dostęp do serializowanych danych pisma odręcznego, jeśli klient obsługuje pisma odręcznego. Jeśli klient nie obsługuje pisma odręcznego, właściwość InkData przyjmuje pusty ciąg. Właściwość InkData wywołuje metodę pomocniczą SerializeInkData, aby ustalić, czy klient obsługuje funkcję pisania odręcznego.

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

W metodzie SerializeInkData rzutowanie do InkCollector jest konieczne przy uzyskiwaniu obiektu atramentu, ponieważ inputArea jest zadeklarowana jako Control. Jeśli obiekt atramentu zawiera jakiekolwiek kreski, dane atramentu są zapisywane w tablicy bajtów inkDataBytes w formacie GIF (określanego przez wartość wyliczenia PersistenceFormat). Następnie metoda konwertuje tablicę bajtów na ciąg zakodowany w formacie Base64 i zwraca ten ciąg.

Zakładając, że klient może przeprowadzić rozpoznawanie, właściwość TextData zwraca obiekt RecognitionResult po przekazaniu danych pisma odręcznego do rozpoznawarki pisma ręcznego. Jeśli klient nie jest świadomy atramentu, zwracana jest zawartość pola tekstowego, jak pokazano w poniższym kodzie.

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

Właściwość TextData wywołuje metodę pomocnika, RecognizeInkData, pokazaną w poniższym kodzie, aby przeprowadzić rozpoznawanie. Gdy aparaty rozpoznawania są obecne w systemie, metoda RecognizeInkData zwraca ciąg zawierający właściwość RecognitionResult obiektu TopString. W przeciwnym razie zwraca pusty ciąg.

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

Właściwość InkEnabled jest wartością logiczną tylko do odczytu, która wskazuje, czy pisanie odręczne jest obsługiwane na maszynie klienckiej.

Innym ważnym publicznym członkiem klasy kontrolnej InkArea jest metoda DisposeResources. Ta metoda wewnętrznie wywołuje metodę Dispose, aby upewnić się, że wszystkie zasoby używane przez kontrolę użytkownika są czyszczone. Każda aplikacja używająca kontrolki InkArea musi wywołać metodę DisposeResources po zakończeniu korzystania z kontrolki.

Projekt InkBlogWeb

Projekt InkBlogWeb to projekt wdrażania konfiguracji sieci Web, który odwołuje się do kontrolki InkArea w celu zapewnienia funkcjonalności blogowania. Aby uzyskać więcej informacji na temat projektów wdrażania instalatora sieci Web, zobacz Wdrażanie projektu instalatora sieci Web.

Istnieją dwa pliki .aspx, które implementują przykład blogging: Default.aspx i AddBlog.aspx. Default.aspx to domyślna strona aplikacji InkBlogWeb. Kod pliku dla tej strony jest Default.aspx.cs. Ta strona zawiera link do strony zawierającej nowy formularz wpisu w blogu i wyświetla wszystkie istniejące wpisy w blogu. Proces ten zostanie opisany później, po przeanalizowaniu poniższej strony formularza nowego wpisu na blogu, AddBlog.aspx.

AddBlog.aspx i jego plik związany z kodem, AddBlog.aspx.cs, zawierają kod logiki i interfejsu użytkownika do tworzenia nowych wpisów w blogu. AddBlox.aspx odwołuje się do dwóch wystąpień klasy kontrolki InkArea utworzonej w projekcie InkBlogControls przy użyciu elementu OBJECT HTML, jak pokazano w poniższym przykładzie. Jedno wystąpienie ma atrybut id inkBlogTitle, a drugi ma atrybut id 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>

Zestaw InkBlogControls.dll musi znajdować się w tym samym katalogu co strona .aspx odwołująca się do niego. Projekt wdrażania sieci Web gwarantuje, że tak się dzieje, co potwierdza obecność elementu "Podstawowe dane wyjściowe z InkBlogControls" w projekcie wdrażania.

Kontrolka tytułu ma tylko 48 pikseli wysokości, aby ułatwić wprowadzanie pojedynczej linii tuszu dla tytułu. Panel główny ma wysokość 296 pikseli, aby zrobić miejsce dla większych, wieloliniowych wpisów na blogu lub być może rysunków.

Kontrolki InkArea są połączone z funkcją skryptu po stronie klienta, AddBlog, za pomocą obsługi zdarzenia onclick standardowego elementu BUTTON HTML.

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

Na stronie znajduje się również formularz HTML zawierający trzy ukryte elementy INPUT: BlogTitleText, BlogBodyText i BlogBodyInkData. Ten formularz służy do wysyłania danych wpisu na blogu z powrotem do serwera. AddBlog.aspx to procedura obsługi zwrotu zdefiniowana dla formularza.

Funkcja AddBlog napisana w języku Microsoft JScript<type="reg"/>-wyodrębnia dane blogu z kontrolek InkArea i publikuje wyniki na serwerze.

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

Gdy dane docierają do serwera, kod w AddBlog.aspx.cs sprawdza procedurę obsługi zdarzeń Page_Load, aby sprawdzić, czy właściwość Formularz obiektu HttpRequest zawiera jakiekolwiek dane. Jeśli tak, tworzy nazwę pliku na podstawie bieżącego czasu systemowego, umieszcza dane formularza w trzech zmiennych typu string i zapisuje te dane do pliku HTML oraz pliku GIF zawierającego dane atramentu, jeśli są obecne, jak pokazano w kodzie poniżej.

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

Aby uzyskać więcej informacji na temat metod pomocnika, zapoznaj się z przykładowym kodem źródłowym.

Uruchamianie przykładu

Zestaw SDK tabletu PC 1.7 domyślnie instaluje przykład `Ink Blog Web'. Aby uruchomić przykład, w programie Internet Explorer przejdź do https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Jeśli korzystasz z systemu Windows Server 2003, zastąp nazwę komputera ciągiem "localhost".

Przykład można również uruchomić, otwierając i tworząc projekt w programie Microsoft Visual Studio<entity type="reg"/> .NET, a następnie wdrażając go na osobnym komputerze, na którym działa IIS.

Rozwiązywanie problemów z próbką

Trzy obszary, które mogą powodować trudności podczas uruchamiania lub hostowania przykładu, to uprawnienia i rozpoznawanie.

Uprawnienia

Przykład wymaga uprawnień do zapisu w wirtualnym folderze głównym dla konta, które próbuje utworzyć nowy wpis w blogu. Domyślnie skompilowana wersja przykładu podana w zestawie TABLE PC SDK 1.7 ma odpowiednie uprawnienia ustawione, aby spełnić to wymaganie.

Jeśli skompilujesz i wdrożysz przykład przy użyciu udostępnionego projektu wdrażania Instalatora sieci Web, musisz nadać %MACHINENAME%\Users dostęp do zapisu w folderze systemu plików wskazywanym przez katalog główny wirtualny InkBlogWeb (na przykład C:\InetPub\WWWRoot\InkBlogWeb). Grupa Użytkownicy, zawiera konto anonimowe używane przez IIS, dzięki czemu aplikacja ASP.NET może zapisywać nowe wpisy blogowe w systemie plików. Alternatywą jest usunięcie anonimowego dostępu do wirtualnego katalogu głównego i wymuszanie uwierzytelniania.

Uznanie

Aby rozpoznać tusz w tytule bloga, należy zainstalować moduły rozpoznawania pisma ręcznego. Jeśli uzyskujesz dostęp do aplikacji InkBlog z komputera z systemem operacyjnym innym niż Windows XP Tablet PC Edition, ale z zainstalowanym zestawem Tablet PC SDK 1.7, możesz pisać odręcznie w kontrolkach InkArea, ale silniki rozpoznawania nie będą dostępne i żadne tytuły nie będą wyświetlane dla wpisów na blogu. Zawartość atramentu w ciele nadal się jednak pojawia.

Konfiguracja maszyny

Jeśli zainstalowano ASP.NET i program .NET Framework na komputerze, a następnie odinstalujesz i ponownie zainstalujesz usługi IIS, mapowania skryptów przestaną działać i ASP.NET nie będzie działać. W takim przypadku można naprawić mapy skryptów ASP.NET za pomocą narzędzia rejestracji ASP.NET IIS (Aspnet_regiis.exe -i).

Tematy pokrewne

InkCollector

pisma odkowego w sieci Web

Format danych tuszu

Klasa System.Windows.Forms.UserControl