Пример веб-страницы блога Ink

2023-06-13

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

Заметка

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

Заметка

Если вы запускаете этот пример на компьютере, который не является планшетным ПК, с установленным пакетом разработки Microsoft Windows XP Tablet PC Edition Development Kit 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 возвращает строку, содержащую свойство 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 — это проект установки веб-приложения, который ссылается на элемент управления 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<тип сущности="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 для Tablet PC по умолчанию устанавливает веб-пример блога Ink. Чтобы запустить пример, в Internet Explorer перейдите к https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Если вы используете Windows Server 2003, замените имя компьютера на localhost.

Заметка

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

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

Устранение неполадок с образцом

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

Разрешения

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

Если вы создаете и развертываете пример с помощью предоставленного проекта развертывания веб-установки, необходимо предоставить %MACHINENAME%\Users group write-access to the file system folder to the File System Folder, на который указывает виртуальный корневой каталог InkBlogWeb (например, C:\InetPub\WWWRoot\InkBlogWeb). Группа "Пользователи" включает в себя анонимную учетную запись, используемую службами 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

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

Пример веб-страницы блога Ink

Обзор

Проект InkBlogControls

Проект InkBlogWeb

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

Устранение неполадок с образцом

Разрешения

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

Конфигурация компьютера

Связанные разделы

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

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