Exemplo da Web do Ink Blog

O aplicativo de exemplo Ink Blog demonstra como criar um gerenciado UserControl classe que tem capacidade de tinta digital e host que controle no Microsoft Internet Explorer. O exemplo também demonstra uma técnica para enviar dados de tinta através de uma rede usando HTTP e para persistir tinta em um servidor.

Visão geral

O exemplo de Ink Blog cria um Weblog habilitado para tinta. InkBlogWeb é uma aplicação ASP.NET. A entrada de tinta é realizada por meio de um controle de usuário que é referenciado a partir de uma página de ASP.NET.

O controle de usuário deteta se os componentes da plataforma Tablet PC estão instalados no computador cliente. Em caso afirmativo, o controle de usuário apresenta ao usuário duas áreas habilitadas para tinta na página da Web: uma para escrever um título para a entrada de blog e outra para o corpo da entrada. Se os componentes da plataforma Tablet PC não estiverem instalados, o usuário receberá um controle de caixa de texto padrão para o título e o corpo da entrada.

Quando o usuário termina de criar a entrada, ele clica em um botão, Adicionar blog, e a postagem é enviada para o servidor Web para armazenamento. No servidor, o aplicativo salva o texto do título e a data de postagem, bem como uma referência a um arquivo GIF (Graphics Interchange Format). O arquivo GIF, também salvo no servidor, contém os dados de tinta do corpo em um arquivo GIF fortificado. Para obter mais informações sobre o formato GIF fortificado, consulte Armazenando tinta em HTML.

Há dois projetos na solução InkBlog: o projeto InkBlogControls e o projeto InkBlogWeb.

Projeto InkBlogControls

O InkBlogControls projeto é um projeto UserControl que contém o código para o controle de usuário que permite a escrita à tinta na página da Web. O código para esse controle, o controle InkArea, está no arquivo InkArea.cs.

A classe InkArea herda da classe UserControl. O construtor do controle InkArea chama o método auxiliar, 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);
}

O método CreateInkCollectionSurface determina se os componentes de escrita do Tablet PC estão disponíveis no cliente ao tentar criar uma instância da classe InkCollector. Se a chamada para o método CreateInkCollectionSurface for bem-sucedida, o método retornará um objeto Panel como controle.

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

Se o construtor falhar porque os arquivos da plataforma de tinta digital não são encontrados, o controlo InputArea é instanciado como um controlo TextBox em vez de um controlo InkCollector. Em seguida, o construtor ajusta o tamanho do controlo para corresponder ao do controlo de utilizador pai e adiciona-o à coleção de Controles do pai.

A classe de controle InkArea implementa três propriedades públicas interessantes: InkData, TextData e WebEnabled.

A propriedade InkData é somente leitura e fornece acesso aos dados de tinta serializados, se o cliente oferecer suporte a tinta digital. Se o cliente não oferecer suporte à tinta, a propriedade InkData obterá uma cadeia de caracteres vazia. A propriedade InkData chama um método auxiliar, SerializeInkData, para determinar se o cliente suporta a funcionalidade de escrita à mão.

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

No método SerializeInkData, a conversão para o InkCollector é necessária ao obter o objeto Ink, porque inputArea é declarado como um Control. Se o objeto Ink contiver traçados, os dados de tinta serão salvos na matriz de bytes inkDataBytes como um GIF (especificado pelo valor de enumeração PersistenceFormat). Em seguida, o método converte a matriz de bytes em uma cadeia de caracteres codificada em Base64 e retorna essa cadeia de caracteres.

Supondo que o cliente possa executar o reconhecimento, a propriedade TextData retorna o objeto RecognitionResult ao passar os dados de tinta para um reconhecedor de manuscrito. Se o cliente não estiver ciente da tinta, o conteúdo da caixa de texto será retornado, conforme mostrado no código a seguir.

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

A propriedade TextData chama um método auxiliar, RecognizeInkData, mostrado no código a seguir, para realizar o reconhecimento. Quando os mecanismos de reconhecimento estão presentes no sistema, o método RecognizeInkData retorna uma cadeia de caracteres que contém a propriedade RecognitionResultTopString do objeto. Caso contrário, ele retorna uma cadeia de caracteres vazia.

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

A propriedade InkEnabled é um valor booleano de leitura única que indica se a escrita manual digital é suportada no computador cliente.

Outro membro público importante da classe de controle InkArea é o método DisposeResources. Esse método chama internamente o método Dispose para garantir que todos os recursos utilizados pelo controlo de utilizador sejam limpos. Qualquer aplicativo que usa o controle InkArea deve chamar o método DisposeResources quando ele terminar de usar o controle.

Projeto InkBlogWeb

O projeto InkBlogWeb é um projeto de implantação de configuração da Web que faz referência ao controlo InkArea para oferecer a funcionalidade de blogging. Para obter mais informações sobre projetos de configuração da Web, consulte Implantação de um Projeto de Configuração da Web.

Há dois arquivos .aspx que implementam o exemplo de blog: Default.aspx e AddBlog.aspx. Default.aspx é a página padrão para o aplicativo InkBlogWeb. O arquivo code-behind para esta página é Default.aspx.cs. Esta página fornece um link para a página que contém o novo formulário de entrada de blog e exibe todas as entradas de blog existentes. Esse processo é descrito mais tarde, após o seguinte exame da nova página de formulário de entrada de blog, AddBlog.aspx.

AddBlog.aspx e seu arquivo code-behind, AddBlog.aspx.cs, contêm a lógica e o código da interface do usuário para criar novas entradas de blog. AddBlox.aspx faz referência a duas instâncias da classe de controle InkArea criada no projeto InkBlogControls usando o elemento HTML OBJECT, conforme mostrado no exemplo a seguir. Uma instância tem um atributo id de inkBlogTitle e a outra tem um atributo id de 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>

A montagem InkBlogControls.dll deve estar presente no mesmo diretório que a página .aspx que a referencia. O projeto de implantação da Configuração Web garante que esse seja o caso, como evidenciado pela presença do item "Saída primária de InkBlogControls" no Projeto de Implantação.

O controle de título tem apenas 48 pixels de altura para facilitar a entrada de uma única linha de tinta para o título. O corpo principal tem 296 pixels de altura para criar espaço para publicações de blog maiores, que podem ter várias linhas ou incluir desenhos.

Os controles InkArea são conectados a uma função de script do lado do cliente, AddBlog, por meio de um manipulador de eventos onclick do elemento HTML BUTTON padrão.

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

Há também um formulário HTML na página que contém três elementos INPUT ocultos: BlogTitleText, BlogBodyText e BlogBodyInkData. Este formulário é usado para postar os dados de entrada do blog de volta para o servidor. AddBlog.aspx é o manipulador post-back definido para o formulário.

A função AddBlog escrita no Microsoft JScript<entity type="reg"/>-extrai os dados do blog dos controles InkArea e posta os resultados no servidor.

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

Quando os dados chegam ao servidor, o código no AddBlog.aspx.cs verifica o manipulador de eventos Page_Load para ver se a propriedade Form do objeto HttpRequest contém dados. Em caso afirmativo, ele cria um nome de arquivo com base na hora atual do sistema, coloca os dados do formulário em três variáveis de cadeia de caracteres e grava os dados em um arquivo HTML e um arquivo GIF contendo os dados de tinta, se presentes, conforme mostrado no código a seguir.

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

Para obter mais detalhes sobre os métodos auxiliares, consulte o código-fonte de exemplo.

Executando o exemplo

O Tablet PC SDK 1.7 instala o exemplo da Web Ink Blog por padrão. Para executar o exemplo, no Internet Explorer, navegue até https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Se você estiver executando o Windows Server 2003, substitua o nome do computador por "localhost".

Você também pode executar o exemplo abrindo e criando o projeto no Microsoft Visual Studio<entity type="reg"/> .NET e, em seguida, implantando-o em um computador separado executando o IIS.

Solução de problemas do exemplo

Três áreas que podem causar dificuldade ao executar ou hospedar o exemplo são permissões e reconhecimento.

Permissões

O exemplo requer permissões de gravação dentro da pasta raiz virtual para a conta que está tentando criar uma nova entrada de blog. Por padrão, a versão compilada do exemplo fornecido no Tablet PC SDK 1.7 tem as permissões corretas definidas para atender a esse requisito.

Se compilar e implementar o exemplo usando o projeto de implementação de configuração Web fornecido, deverá conceder ao grupo %MACHINENAME%\Users permissões de escrita para a pasta do sistema de arquivos indicada pelo diretório virtual InkBlogWeb (por exemplo, C:\InetPub\WWWRoot\InkBlogWeb). O grupo Usuários inclui a conta anônima usada pelo IIS, permitindo que o aplicativo ASP.NET escreva as novas entradas de blog no sistema de arquivos. Uma alternativa é remover o acesso anônimo à raiz virtual e forçar a autenticação.

Reconhecimento

Os reconhecedores de caligrafia devem ser instalados para reconhecer a tinta no título do blog. Se você acessar o aplicativo InkBlog de um computador com um sistema operacional diferente do Windows XP Tablet PC Edition, mas com o Tablet PC SDK 1.7 instalado, você pode escrever a tinta nos controles InkArea, mas os mecanismos de reconhecimento não estarão presentes e nenhum título aparecerá para suas entradas de blog. Ainda assim, a tinta no corpo ainda é visível.

Configuração da máquina

Se você tiver instalado o ASP.NET e o .NET Framework em um computador e, em seguida, desinstalar e reinstalar o IIS, os mapas de script serão quebrados e ASP.NET não funcionará. Se isso acontecer, você pode reparar os mapas de script ASP.NET com a ferramenta de registro do IIS ASP.NET (Aspnet_regiis.exe -i).

Tópicos relacionados

InkCollector

Tinta na Web

Formatos de dados de tinta

System.Windows.Forms.UserControl Classe