Пример веб-сайта блога, посвященного рукописному вводу

Статья
06/13/2023

В примере приложения Ink Blog показано, как создать управляемый класс UserControl с возможностью рукописного ввода и разместить этот элемент управления в Microsoft Internet Обозреватель. В этом примере также демонстрируется один из способов отправки данных рукописного ввода по сети с помощью ПРОТОКОЛА HTTP и для сохранения рукописного ввода на сервере.

Примечание

Для запуска этого примера необходимо установить Microsoft IIS (IIS) с ASP.NET. Убедитесь, что компьютер соответствует требованиям, необходимым для запуска приложений ASP.NET на компьютере.

Примечание

Если вы запускаете этот пример на компьютере, отличном от планшета, на котором установлен пакет средств разработки Microsoft Windows XP Tablet PC Edition 1.7, функция распознавания текста для названия рукописного ввода не будет работать. Это происходит потому, что на компьютере, отличном от планшета, на котором установлен пакет SDK 1.7 для планшетного компьютера, отсутствуют распознаватели. Остальная часть приложения выполняется так, как описано.

Общие сведения

В примере блога по рукописным фрагментам создается веб-журнал с поддержкой рукописного ввода. 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 . Затем конструктор масштабирует элемент управления до размера родительского пользовательского элемента управления и добавляет его в коллекцию Элементов управления родительского элемента управления.

Класс элементов управления InkArea реализует три интересных открытых свойства: InkData, TextData и WebEnabled.

Свойство InkData доступно только для чтения и предоставляет доступ к сериализованным данным рукописного ввода, если клиент поддерживает рукописный ввод. Если клиент не поддерживает рукописный ввод, свойство InkData получает пустую строку. Свойство InkData вызывает вспомогательный метод 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 приведение к InkCollector необходимо при получении объекта Ink , так как inputArea объявляется как control. Если объект Ink содержит какие-либо росчерки, данные рукописного ввода сохраняются в inkDataBytes массиве байтов в формате GIF (задается с помощью значения перечисления PersistenceFormat ). Затем метод преобразует массив байтов в строку в кодировке Base64 и возвращает эту строку.

При условии, что клиент может выполнять распознавание, TextData свойство возвращает объект RecognitionResult от передачи данных рукописного ввода в распознаватель рукописного ввода. Если клиент не поддерживает рукописный ввод, содержимое текстового поля возвращается, как показано в следующем коде.

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

Свойство TextData вызывает вспомогательный метод , RecognizeInkDataпоказанный в следующем коде, для выполнения распознавания. Если подсистемы распознавания присутствуют в системе, метод возвращает строку, RecognizeInkData содержащую свойство TopString объекта RecognitionResult. В противном случае возвращает пустую строку.

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 — это проект развертывания веб-установки, который ссылается на InkArea элемент управления для предоставления функциональности блогов. Дополнительные сведения о проектах развертывания веб-установки см. в разделе Развертывание проекта веб-установки.

Есть два ASPX-файла, которые реализуют пример блога: Default.aspx и AddBlog.aspx. Default.aspx — это страница по умолчанию для приложения InkBlogWeb. Файл кода программной части для этой страницы — Default.aspx.cs. Эта страница содержит ссылку на страницу, содержащую новую форму записи блога, и отображает все существующие записи блога. Этот процесс описан позже, после следующего изучения новой страницы формы записи блога AddBlog.aspx.

AddBlog.aspx и файл кода программной части AddBlog.aspx.cs содержат код логики и пользовательского интерфейса для создания записей блога. AddBlox.aspx ссылается на два экземпляра класса элемента управления InkArea, созданного в проекте InkBlogControls с помощью элемента HTML OBJECT, как показано в следующем примере. Один экземпляр имеет id атрибут inkBlogTitle, а другой — атрибут id inkBlogBody.

Сборка InkBlogControls.dll должна находиться в том же каталоге, что и страница ASPX, ссылающаяся на нее. Проект развертывания веб-установки гарантирует, что это так, о чем свидетельствует наличие элемента "Primary output from InkBlogControls" в проекте развертывания.

Размер элемента управления заголовком составляет всего 48 пикселей, что упрощает ввод одной строки рукописного ввода для заголовка. Размер элемента управления текстом составляет 296 пикселей, чтобы освободить место для больших записей блога с несколькими линиями или, возможно, рисунками.

Элементы управления InkArea подключены к клиентской функции скрипта AddBlog с помощью обработчика событий onclick стандартного html-элемента BUTTON.

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

На странице также есть HTML-форма, содержащая три скрытых элемента INPUT: BlogTitleText, BlogBodyText и BlogBodyInkData. Эта форма используется для отправки данных записи блога обратно на сервер. AddBlog.aspx — это обработчик обратной передачи, определенный для формы.

Функция AddBlog, написанная в Microsoft JScript<entity type="reg"/>-, извлекает данные блога из элементов управления InkArea и публикует результаты на сервере.

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, чтобы проверить, содержит ли свойство Form объекта HttpRequest какие-либо данные. Если это так, он создает имя файла на основе текущего системного времени, помещает данные формы в три строковые переменные и записывает данные в 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 Blog Web. Чтобы запустить пример, в Обозреватель Интернета перейдите по адресуhttps://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Если вы используете Windows Server 2003, замените имя компьютера на localhost.

Примечание

Скомпилированные веб-примеры не устанавливаются по умолчанию для пакета SDK. Необходимо завершить пользовательскую установку и выбрать дополнительный параметр "Предварительно скомпилированные веб-примеры", чтобы установить их.

Вы также можете запустить пример, открыв и создав проект в Microsoft Visual Studio<entity type="reg"/> .NET, а затем развернув его на отдельном компьютере с IIS.

Диагностика образца

Три области, которые могут вызвать трудности при выполнении или размещении примера, это разрешения и распознавание.

Разрешения

Для этого примера требуются разрешения на запись в виртуальной корневой папке для учетной записи, которая пытается создать новую запись блога. По умолчанию скомпилированная версия примера, предоставленного в пакете SDK 1.7 для планшетного компьютера, имеет правильные разрешения, заданные в соответствии с этим требованием.

При сборке и развертывании примера с помощью предоставленного проекта развертывания веб-установки необходимо предоставить группе %MACHINENAME%\Users доступ на запись к папке файловой системы, на которую указывает виртуальный корень InkBlogWeb (например, C:\InetPub\WWWRoot\InkBlogWeb). Группа Пользователи включает в себя учетную запись Anonymous, используемую СЛУЖБАми IIS, что позволяет приложению ASP.NET записывать новые записи блога в файловую систему. Альтернативой является удаление анонимного доступа к виртуальному корню и принудительная проверка подлинности.

Распознавание

Чтобы распознать рукописный ввод в заголовке блога, необходимо установить распознаватели рукописного ввода. Если вы обращаетесь к приложению InkBlog с компьютера с операционной системой, отличной от Windows XP Tablet PC Edition, но с установленным пакетом SDK 1.7 для планшетного компьютера, вы можете писать рукописные фрагменты в элементах управления InkArea, но обработчики распознавания не будут присутствовать и заголовки не будут отображаться для записей блога. Содержимое рукописного ввода в теле по-прежнему отображается.

Конфигурация машины

Если вы установили ASP.NET и платформа .NET Framework на компьютере, а затем удалите и переустановите СЛУЖБЫ IIS, карты сценариев прервутся и ASP.NET не будут работать. В этом случае можно восстановить сопоставления скриптов ASP.NET с помощью средства регистрации ASP.NET IIS (Aspnet_regiis.exe -i).

InkCollector
Рукописный ввод в Интернете
Форматы данных рукописного ввода
Класс System.Windows.Forms.UserControl

Поделиться через

Пример веб-сайта блога, посвященного рукописному вводу

Общие сведения

Проект InkBlogControls

Проект InkBlogWeb

Запуск примера

Диагностика образца

Разрешения

Распознавание

Конфигурация машины

Обратная связь

Дополнительные ресурсы

Поделиться через

Пример веб-сайта блога, посвященного рукописному вводу

Общие сведения

Проект InkBlogControls

Проект InkBlogWeb

Запуск примера

Диагностика образца

Разрешения

Распознавание

Конфигурация машины

Связанные темы

Обратная связь

Дополнительные ресурсы