Exemplo da Web do Blog da Impressão
O aplicativo de exemplo Blog do Ink demonstra como criar uma classe UserControl gerenciada que tenha capacidade de escrita à tinta e hospede esse controle no Microsoft Internet Explorer. O exemplo também demonstra uma técnica para enviar dados de tinta em uma rede usando HTTP e para manter a tinta em um servidor.
Observação
Você deve ter Serviços de Informações da Internet da Microsoft (IIS) com ASP.NET instalados para executar este exemplo. Verifique se o computador atende aos requisitos necessários para que ASP.NET aplicativos sejam executados no computador.
Observação
Se você executar este exemplo em um computador que não seja tablet com o Microsoft Windows XP Tablet PC Edition Development Kit 1.7 instalado, o recurso de reconhecimento de texto para o título de tinta não funcionará. Isso ocorre porque um computador que não seja tablet com o SDK do Tablet 1.7 instalado não tem reconhecedores. O restante do aplicativo é executado conforme descrito.
Visão geral
O exemplo do Blog do Ink cria um weblog habilitado para tinta. InkBlogWeb é um aplicativo ASP.NET. A entrada à tinta é realizada por meio de um controle de usuário referenciado de uma página ASP.NET.
O controle de usuário detecta se os componentes da plataforma tablet pc estão instalados no computador cliente. Nesse caso, o controle de usuário apresenta ao usuário duas áreas habilitadas para tinta na página da Web: uma para escrita à tinta de um título para a entrada de blog e outra para o corpo da entrada. Se os componentes do Tablet PC Platform não estiverem instalados, o usuário recebe 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, ela clica em um botão, Adicionar Blog e a postagem é enviada ao 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 (Formato de Intercâmbio Gráfico). 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 projeto InkBlogControls é um projeto UserControl que contém o código para o controle de usuário que habilita a escrita à tinta na página da Web. O código para esse controle, o controle InkArea, está no arquivo InkArea.cs.
A InkArea Classe herda da classe UserControl . O construtor do InkArea controle chama um 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 CreateInkCollectionSurface método determina se os componentes de escrita à tinta do tablet estão disponíveis no cliente ao tentar criar uma instância da classe InkCollector . Se a chamada para o CreateInkCollectionSurface método for bem-sucedida, o método retornará um objeto Panel como o 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 escrita à tinta não foram encontrados, o InputArea controle será instanciado como um controle TextBox em vez de um controle InkCollector . Em seguida, o construtor dimensiona o controle para o tamanho do controle de usuário pai e o adiciona à coleção Controls 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 der suporte à escrita à tinta. Se o cliente não der suporte à escrita à tinta, a propriedade InkData obterá uma cadeia de caracteres vazia. A propriedade InkData chama um método auxiliar, SerializeInkData, para determinar se o cliente dá suporte à escrita à tinta.
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 No método , a conversão para InkCollector é necessária ao obter o objeto Ink, pois inputArea é declarada como um Controle. Se o objeto Ink contiver traços, os dados de tinta serão salvos na inkDataBytes matriz de bytes como um GIF (especificado usando o 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 TextData propriedade retorna o objeto RecognitionResult passando 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 TextData propriedade 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 RecognizeInkData método retorna uma cadeia de caracteres que contém a propriedade TopString do objeto RecognitionResult. 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 InkEnabled propriedade é um valor booliano somente leitura que indica se há suporte para escrita à tinta no computador cliente.
Outro membro público importante da InkArea classe de controle é o DisposeResources método . Esse método chama internamente o Dispose método para garantir que todos os recursos aproveitados pelo controle de usuário sejam limpos. Qualquer aplicativo que usa o InkArea controle deve chamar o DisposeResources método quando terminar de usar o controle .
Projeto InkBlogWeb
O projeto InkBlogWeb é um projeto de implantação de Instalação da Web que faz referência ao InkArea controle para fornecer a funcionalidade de blog. Para obter mais informações sobre projetos de implantação da Instalação da Web, consulte Implantação de um projeto de instalação da Web.
Há dois arquivos .aspx que implementam o exemplo de blogging: Default.aspx e AddBlog.aspx. Default.aspx é a página padrão do aplicativo InkBlogWeb. O arquivo code-behind desta 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 posteriormente, após o exame a seguir da nova página de formulário de entrada do 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 id atributo 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>
O assembly InkBlogControls.dll deve estar presente no mesmo diretório que a página .aspx que está fazendo referência a ele. O projeto de implantação de Instalação da Web garante que esse seja o caso, conforme evidenciado pela presença do item "Saída primária do 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 controle do corpo tem 296 pixels de altura para abrir espaço para entradas de blog maiores de várias linhas ou talvez desenhos.
Os controles InkArea estão conectados a uma função de script do lado do cliente, AddBlog, por meio do manipulador de eventos onclick de um elemento HTML BUTTON padrão.
<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>
Também há um formulário HTML na página que contém três elementos INPUT ocultos: BlogTitleText, BlogBodyText e BlogBodyInkData. Esse formulário é usado para postar os dados de entrada do blog de volta no servidor. AddBlog.aspx é o manipulador pós-back definido para o formulário.
A função AddBlog escrita na entidade Microsoft JScript<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 em AddBlog.aspx.cs verifica o manipulador de eventos Page_Load para ver se a propriedade Form do objeto HttpRequest contém dados. Nesse caso, 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 que contém os dados de tinta, se estiverem 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 do Blog do Ink por padrão. Para executar o exemplo, em Explorer da Internet, navegue atéhttps://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Se você estiver executando o Windows Server 2003, substitua o nome do computador por "localhost".
Observação
Os exemplos da Web compilados não são instalados pela opção de instalação padrão para o SDK. Você deve concluir uma instalação personalizada e selecionar a subopção "Exemplos da Web pré-compilados" para instalá-los.
Você também pode executar o exemplo abrindo e criando o projeto na entidade do Microsoft Visual Studio<type="reg"/> .NET e, em seguida, implantando-o em um computador separado executando o IIS.
Solucionando 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 fornecida no Tablet PC SDK 1.7 tem as permissões corretas definidas para atender a esse requisito.
Se você compilar e implantar o exemplo usando o projeto de implantação de Instalação da Web fornecido, deverá conceder ao grupo %MACHINENAME%\Users acesso de gravação à pasta do sistema de arquivos apontada pela raiz 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 manuscrito 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ê poderá escrever em tinta nos controles InkArea, mas os mecanismos de reconhecimento não estarão presentes e nenhum título será exibido para suas entradas de blog. No entanto, o conteúdo de tinta no corpo ainda aparece.
Configuração de Máquina
Se você tiver instalado ASP.NET e o .NET Framework em um computador e desinstalar e reinstalar o IIS, os mapas de script serão interrompidos e ASP.NET não funcionará. Se isso acontecer, você poderá reparar os mapas de script de ASP.NET com a ferramenta ASP.NET Registro do IIS (Aspnet_regiis.exe -i).
Tópicos relacionados