Ejemplo web de blog de entrada de lápiz
La aplicación de ejemplo Ink Blog muestra cómo crear una clase UserControl administrada que tenga funcionalidad de entrada manuscrita y host que controle en Microsoft Internet Explorer. En el ejemplo también se muestra una técnica para enviar datos de entrada de lápiz a través de una red mediante HTTP y para conservar la entrada de lápiz en un servidor.
Nota
Debe tener Microsoft Internet Information Services (IIS) con ASP.NET instalado para ejecutar este ejemplo. Asegúrese de que el equipo cumple los requisitos necesarios para que las aplicaciones de ASP.NET se ejecuten en el equipo.
Nota
Si ejecuta este ejemplo en un equipo que no es tableta con el Kit de desarrollo 1.7 de Microsoft Windows XP Tablet PC Edition, la característica de reconocimiento de texto para el título de lápiz no funcionará. Esto ocurre porque un equipo que no es tablet pc con el SDK de Tablet PC 1.7 instalado carece de reconocedores. El resto de la aplicación se realiza como se describe.
Información general
El ejemplo de blog de entrada de lápiz crea un weblog habilitado para entrada de lápiz. InkBlogWeb es una aplicación ASP.NET. La entrada de lápiz se realiza mediante un control de usuario al que se hace referencia desde una página de ASP.NET.
El control de usuario detecta si los componentes de la plataforma tablet PC están instalados en el equipo cliente. Si es así, el control de usuario presenta al usuario dos áreas habilitadas para entrada de lápiz en la página web: una para escribir un título para la entrada de blog y otra para el cuerpo de la entrada. Si los componentes de la plataforma tablet PC no están instalados, el usuario recibe un control de cuadro de texto estándar para el título y el cuerpo de la entrada.
Cuando el usuario termine de crear la entrada, hace clic en un botón, Agregar blog y la publicación se envía al servidor web para el almacenamiento. En el servidor, la aplicación guarda el texto del título y la fecha de publicación, así como una referencia a un archivo de formato de intercambio de gráficos (GIF). El archivo GIF, que también se guarda en el servidor, contiene los datos de entrada de lápiz del cuerpo en un archivo GIF fortificado. Para obtener más información sobre el formato GIF fortificado, consulte Almacenamiento de entrada de lápiz en HTML.
Hay dos proyectos en la solución InkBlog: el proyecto InkBlogControls y el proyecto InkBlogWeb .
Proyecto InkBlogControls
El proyecto InkBlogControls es un proyecto UserControl que contiene el código del control de usuario que habilita la entrada manuscrita en la página web. El código de este control, el control InkArea, se encuentra en el archivo InkArea.cs.
La InkArea clase hereda de la clase UserControl . El constructor del InkArea control llama a un 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);
}
El CreateInkCollectionSurface método determina si los componentes de entrada manuscrita de Tablet PC están disponibles en el cliente intentando crear una instancia de la clase InkCollector . Si la llamada al CreateInkCollectionSurface método se realiza correctamente, el método devuelve un objeto Panel como control .
protected Control CreateInkCollectionSurface()
{
try
{
Panel inkPanel = new Panel();
inkPanel.BorderStyle = BorderStyle.Fixed3D;
inkCollector = new InkCollector(inkPanel);
((InkCollector)inkCollector).Enabled = true;
return inkPanel;
}
catch
{
throw;
}
}
Si se produce un error en el constructor porque no se encuentran los archivos de plataforma de entrada manuscrita, se crea una instancia del InputArea control como un control TextBox en lugar de un control InkCollector . A continuación, el constructor cambia el tamaño del control de usuario primario y lo agrega a la colección Controls del elemento primario.
La clase de control InkArea implementa tres propiedades públicas interesantes: InkData, TextData y WebEnabled.
La propiedad InkData es de solo lectura y proporciona acceso a los datos de entrada de lápiz serializados, si el cliente admite la entrada manuscrita. Si el cliente no admite la entrada manuscrita, la propiedad InkData obtiene una cadena vacía. La propiedad InkData llama a un método auxiliar, SerializeInkData, para determinar si el cliente admite la entrada manuscrita.
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;
}
En el SerializeInkData método , la conversión a InkCollector es necesaria al obtener el objeto Ink, porque inputArea se declara como control. Si el objeto Ink contiene trazos, los datos de entrada de lápiz se guardan en la inkDataBytes matriz de bytes como un GIF (especificado mediante el valor de enumeración PersistenceFormat ). A continuación, el método convierte la matriz de bytes en una cadena codificada en Base64 y devuelve esta cadena.
Suponiendo que el cliente puede realizar el reconocimiento, la TextData propiedad devuelve el objeto RecognitionResult de pasar los datos de entrada de lápiz a un reconocedor de escritura a mano. Si el cliente no es compatible con la entrada de lápiz, se devuelve el contenido del cuadro de texto, como se muestra en el código siguiente.
public string TextData
{
get
{
if (this.WebEnabled)
{
return RecognizeInkData();
}
else
{
return ((TextBox)inputArea).Text;
}
}
}
La TextData propiedad llama a un método auxiliar, RecognizeInkData, que se muestra en el código siguiente, para llevar a cabo el reconocimiento. Cuando los motores de reconocimiento están presentes en el sistema, el RecognizeInkData método devuelve una cadena que contiene la propiedad TopString del objeto RecognitionResult. En cualquier otro caso, devuelve una cadena vacía.
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;
}
La InkEnabled propiedad es un valor booleano de solo lectura que indica si se admite la entrada manuscrita en el equipo cliente.
Otro miembro público importante de la InkArea clase de control es el DisposeResources método . Este método llama internamente al Dispose método para asegurarse de que se limpian todos los recursos que aprovecha el control de usuario. Cualquier aplicación que use el InkArea control debe llamar al DisposeResources método cuando termine de usar el control .
InkBlogWeb Project
El proyecto InkBlogWeb es un proyecto de implementación de instalación web que hace referencia al InkArea control para proporcionar la funcionalidad de registro. Para obtener más información sobre los proyectos de implementación de instalación web, vea Implementación de un proyecto de instalación web.
Hay dos archivos .aspx que implementan el ejemplo de registro: Default.aspx y AddBlog.aspx. Default.aspx es la página predeterminada de la aplicación InkBlogWeb. El archivo de código subyacente de esta página es Default.aspx.cs. Esta página proporciona un vínculo a la página que contiene el nuevo formulario de entrada de blog y muestra las entradas de blog existentes. Este proceso se describe más adelante, después del siguiente examen de la nueva página de formulario de entrada de blog, AddBlog.aspx.
AddBlog.aspx y su archivo de código subyacente, AddBlog.aspx.cs, contienen la lógica y el código de la interfaz de usuario para crear nuevas entradas de blog. AddBlox.aspx hace referencia a dos instancias de la clase de control InkArea creada en el proyecto InkBlogControls mediante el elemento HTML OBJECT, como se muestra en el ejemplo siguiente. Una instancia tiene un id atributo de inkBlogTitle y el otro tiene un 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>
El ensamblado InkBlogControls.dll debe estar presente en el mismo directorio que la página .aspx que hace referencia a él. El proyecto de implementación del programa de instalación web garantiza que este es el caso, como se evidencia en la presencia del elemento "Salida principal de InkBlogControls" en el proyecto de implementación.
El control de título tiene solo 48 píxeles de altura para facilitar la entrada de una sola línea de entrada de lápiz para el título. El control de cuerpo es de 296 píxeles de altura para hacer espacio para entradas de blog más grandes de varias líneas o quizás dibujos.
Los controles InkArea están conectados a una función de script del lado cliente, AddBlog, mediante un controlador de eventos onclick del elemento HTML BUTTON estándar.
<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>
También hay un formulario HTML en la página que contiene tres elementos INPUT ocultos: BlogTitleText, BlogBodyText y BlogBodyInkData. Este formulario se usa para volver a publicar los datos de entrada de blog en el servidor. AddBlog.aspx es el controlador posterior definido para el formulario.
La función AddBlog escrita en Microsoft JScript<entity type="reg"/>-extrae los datos del blog de los controles InkArea y publica los resultados en el 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();
}
Cuando llegan los datos al servidor, el código de AddBlog.aspx.cs comprueba el controlador de eventos Page_Load para ver si la propiedad Form del objeto HttpRequest contiene datos. Si es así, crea un nombre de archivo basado en la hora actual del sistema, coloca los datos del formulario en tres variables de cadena y escribe los datos en un archivo HTML y en un archivo GIF que contiene los datos de entrada de lápiz, si están presentes, como se muestra en el código siguiente.
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 obtener más información sobre los métodos auxiliares, consulte el código fuente de ejemplo.
Ejecutar el ejemplo
El SDK de PC para tabletas 1.7 instala el ejemplo web del blog de lápiz de forma predeterminada. Para ejecutar el ejemplo, en Internet Explorer, vaya a https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Si ejecuta Windows Server 2003, sustituya el nombre del equipo por "localhost".
Nota
Los ejemplos web compilados no se instalan con la opción de instalación predeterminada para el SDK. Debe completar una instalación personalizada y seleccionar la subconsulta "Ejemplos web precompilados" para instalarlas.
También puede ejecutar el ejemplo abriendo y compilando el proyecto en Microsoft Visual Studio<entity type="reg"/> .NET y, a continuación, implementándolo en un equipo independiente que ejecuta IIS.
Solución de problemas de los ejemplos
Tres áreas que pueden causar dificultades al ejecutar o hospedar el ejemplo son permisos y reconocimiento.
Permisos
El ejemplo requiere permisos de escritura dentro de la carpeta raíz virtual para la cuenta que intenta crear una nueva entrada de blog. De forma predeterminada, la versión compilada del ejemplo que se proporciona en el SDK 1.7 de Tablet PC tiene los permisos correctos establecidos para cumplir este requisito.
Si compila e implementa el ejemplo mediante el proyecto de implementación de instalación web proporcionado, debe conceder al grupo %MACHINENAME%\Users acceso de escritura a la carpeta del sistema de archivos a la que apunta la raíz virtual InkBlogWeb (por ejemplo, C:\InetPub\WWWRoot\InkBlogWeb). El grupo Usuarios incluye la cuenta anónima usada por IIS, lo que permite que la aplicación de ASP.NET escriba las nuevas entradas de blog en el sistema de archivos. Una alternativa es quitar el acceso anónimo a la raíz virtual y forzar la autenticación.
Reconocimiento
Los reconocedores de escritura a mano deben instalarse para reconocer la entrada de lápiz en el título del blog. Si accedes a la aplicación InkBlog desde un equipo con un sistema operativo distinto de Windows XP Tablet PC Edition, pero con el SDK 1.7 de Tablet PC instalado, puedes escribir en la entrada de lápiz en los controles InkArea, pero los motores de reconocimiento no estarán presentes y no aparecerán títulos para tus entradas de blog. Sin embargo, el contenido de la entrada de lápiz en el cuerpo sigue apareciendo.
Configuración de la máquina
Si ha instalado ASP.NET y .NET Framework en un equipo y después desinstala y vuelve a instalar IIS, los mapas de script se interrumpirán y ASP.NET no funcionarán. Si esto sucede, puede reparar los mapas de script de ASP.NET con la herramienta de registro de IIS de ASP.NET (Aspnet_regiis.exe -i).
Temas relacionados