Exemple web de blog manuscrit
L’exemple d’application Ink Blog montre comment créer une classe UserControl managée qui a une fonctionnalité d’entrée manuscrite et un hôte qui contrôle dans Microsoft Internet Explorer. L’exemple illustre également une technique d’envoi de données manuscrites sur un réseau à l’aide de HTTP et de persistance de l’entrée manuscrite sur un serveur.
Notes
Vous devez avoir Microsoft Internet Information Services (IIS) avec ASP.NET installé pour exécuter cet exemple. Assurez-vous que votre ordinateur répond à la configuration requise pour que ASP.NET applications s’exécutent sur votre ordinateur.
Notes
Si vous exécutez cet exemple sur un ordinateur non-Tablet PC sur lequel le Kit de développement Microsoft Windows XP Édition Tablet PC 1.7 installé, la fonctionnalité de reconnaissance de texte pour le titre manuscrit ne fonctionnera pas. Cela se produit parce qu’un ordinateur non-Tablet PC sur lequel le Kit de développement logiciel (SDK) Tablet PC 1.7 est installé ne dispose pas de modules de reconnaissance. Le reste de l’application fonctionne comme décrit.
Vue d’ensemble
L’exemple Ink Blog crée un weblog avec entrée manuscrite. InkBlogWeb est une application ASP.NET. L’entrée manuscrite s’effectue au moyen d’un contrôle utilisateur référencé à partir d’une page ASP.NET.
Le contrôle utilisateur détecte si les composants de la plateforme Tablet PC sont installés sur l’ordinateur client. Si c’est le cas, le contrôle utilisateur présente à l’utilisateur deux zones d’entrée manuscrite sur la page Web : l’une pour l’entrée manuscrite d’un titre pour l’entrée de blog et l’autre pour le corps de l’entrée. Si les composants tablet PC Platform ne sont pas installés, l’utilisateur dispose d’un contrôle de zone de texte standard pour le titre et le corps de l’entrée.
Lorsque l’utilisateur a fini de créer l’entrée, il clique sur un bouton, Ajouter un blog, et le billet est envoyé au serveur Web pour stockage. Sur le serveur, l’application enregistre le texte de titre et la date de publication, ainsi qu’une référence à un fichier GIF (Graphics Interchange Format). Le fichier GIF, également enregistré sur le serveur, contient les données manuscrites du corps dans un fichier GIF fortifié. Pour plus d’informations sur le format GIF renforcé, consultez Stockage de l’encre dans HTML.
Il existe deux projets dans la solution InkBlog : le projet InkBlogControls et le projet InkBlogWeb .
Projet InkBlogControls
Le projet InkBlogControls est un projet UserControl qui contient le code du contrôle utilisateur qui active l’entrée manuscrite sur la page Web. Le code de ce contrôle, le contrôle InkArea, se trouve dans le fichier InkArea.cs.
La InkArea classe hérite de la classe UserControl . Le constructeur du InkArea contrôle appelle une méthode d’assistance, 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);
}
La CreateInkCollectionSurface méthode détermine si les composants d’entrée manuscrite Tablet PC sont disponibles sur le client en essayant de créer une instance de la classe InkCollector. Si l’appel à la CreateInkCollectionSurface méthode réussit, la méthode retourne un objet Panel en tant que contrôle.
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 le constructeur échoue parce que les fichiers de plateforme d’entrée manuscrite sont introuvables, le InputArea contrôle est instancié en tant que contrôle TextBox plutôt qu’en tant que contrôle InkCollector . Le constructeur dimensionne ensuite le contrôle à la taille du contrôle utilisateur parent et l’ajoute à la collection Controls du parent.
La classe de contrôle InkArea implémente trois propriétés publiques intéressantes : InkData, TextData et WebEnabled.
La propriété InkData est en lecture seule et permet d’accéder aux données manuscrites sérialisées, si le client prend en charge l’entrée manuscrite. Si le client ne prend pas en charge l’entrée manuscrite, la propriété InkData obtient une chaîne vide. La propriété InkData appelle une méthode d’assistance, SerializeInkData, pour déterminer si le client prend en charge l’entrée manuscrite.
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;
}
Dans la SerializeInkData méthode , le cast en InkCollector est nécessaire lors de l’obtention de l’objet Ink , car inputArea est déclaré en tant que Control. Si l’objet Ink contient des traits, les données manuscrites sont enregistrées dans le inkDataBytes tableau d’octets en tant que GIF (spécifié à l’aide de la valeur d’énumération PersistenceFormat ). La méthode convertit ensuite le tableau d’octets en chaîne encodée en Base64 et retourne cette chaîne.
En supposant que le client peut effectuer la reconnaissance, la TextData propriété renvoie l’objet RecognitionResult en passant les données manuscrites à un module de reconnaissance d’écriture manuscrite. Si le client ne prend pas en compte l’entrée manuscrite, le contenu de la zone de texte est retourné, comme indiqué dans le code suivant.
public string TextData
{
get
{
if (this.WebEnabled)
{
return RecognizeInkData();
}
else
{
return ((TextBox)inputArea).Text;
}
}
}
La TextData propriété appelle une méthode d’assistance, RecognizeInkData, illustrée dans le code suivant, pour effectuer la reconnaissance. Lorsque des moteurs de reconnaissance sont présents sur le système, la RecognizeInkData méthode retourne une chaîne contenant la propriété TopString de l’objet RecognitionResult. Sinon, la fonction retourne une chaîne vide.
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 propriété est une valeur booléenne en lecture seule qui indique si l’entrée manuscrite est prise en charge sur l’ordinateur client.
La méthode est un autre membre public important de la InkArea classe de DisposeResources contrôle. Cette méthode appelle la Dispose méthode en interne pour s’assurer que toutes les ressources exploitées par le contrôle utilisateur sont nettoyées. Toute application qui utilise le InkArea contrôle doit appeler la DisposeResources méthode lorsqu’elle a terminé d’utiliser le contrôle.
Projet InkBlogWeb
Le projet InkBlogWeb est un projet de déploiement d’installation web qui référence le InkArea contrôle pour fournir la fonctionnalité de création de blogs. Pour plus d’informations sur les projets de déploiement du programme d’installation web, consultez Déploiement d’un projet de configuration web.
Deux fichiers .aspx implémentent l’exemple de blogs : Default.aspx et AddBlog.aspx. Default.aspx est la page par défaut de l’application InkBlogWeb. Le fichier code-behind de cette page est Default.aspx.cs. Cette page fournit un lien vers la page contenant le nouveau formulaire d’entrée de blog et affiche toutes les entrées de blog existantes. Ce processus est décrit plus loin, après l’examen suivant de la nouvelle page de formulaire d’entrée de blog, AddBlog.aspx.
AddBlog.aspx et son fichier code-behind, AddBlog.aspx.cs, contiennent la logique et le code de l’interface utilisateur pour la création d’entrées de blog. AddBlox.aspx référence deux instances de la classe de contrôle InkArea créée dans le projet InkBlogControls à l’aide de l’élément HTML OBJECT, comme illustré dans l’exemple suivant. Un instance a un id attribut inkBlogTitle et l’autre un attribut id 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>
L’assembly InkBlogControls.dll doit être présent dans le même répertoire que la page .aspx qui le référence. Le projet de déploiement de l’installation web garantit que c’est le cas, comme en témoigne la présence de l’élément « Sortie principale d’InkBlogControls » dans le projet de déploiement.
Le contrôle de titre ne fait que 48 pixels de haut pour faciliter l’entrée d’une seule ligne d’entrée manuscrite pour le titre. Le contrôle du corps est de 296 pixels de haut pour faire de la place pour des entrées de blog plus grandes de plusieurs lignes ou peut-être des dessins.
Les contrôles InkArea sont connectés à une fonction de script côté client, AddBlog, au moyen du gestionnaire d’événements onclick d’un élément HTML BUTTON standard.
<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>
Il existe également un formulaire HTML sur la page qui contient trois éléments INPUT masqués : BlogTitleText, BlogBodyText et BlogBodyInkData. Ce formulaire est utilisé pour publier les données d’entrée de blog sur le serveur. AddBlog.aspx est le gestionnaire de post-retour défini pour le formulaire.
La fonction AddBlog écrite dans Microsoft JScript<entity type="reg"/>-extrait les données de blog des contrôles InkArea et publie les résultats sur le serveur.
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();
}
Lorsque les données arrivent sur le serveur, le code dans AddBlog.aspx.cs vérifie le gestionnaire d’événements Page_Load pour voir si la propriété Form de l’objet HttpRequest contient des données. Dans ce cas, il crée un nom de fichier basé sur l’heure système actuelle, place les données de formulaire dans trois variables de chaîne et écrit les données dans un fichier HTML et un fichier GIF contenant les données manuscrites, le cas échéant, comme indiqué dans le code suivant.
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);
Pour plus d’informations sur les méthodes d’assistance, reportez-vous à l’exemple de code source.
Exécution de l'exemple
Le Kit de développement logiciel (SDK) Tablet PC 1.7 installe l’exemple web de blog Ink par défaut. Pour exécuter l’exemple, dans Internet Explorer, accédez àhttps://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Si vous exécutez Windows Server 2003, remplacez « localhost » par le nom de votre ordinateur.
Notes
Les exemples web compilés ne sont pas installés par l’option d’installation par défaut pour le SDK. Vous devez effectuer une installation personnalisée et sélectionner la sous-option « Exemples web précompilés » pour les installer.
Vous pouvez également exécuter l’exemple en ouvrant et en créant le projet dans Microsoft Visual Studio<entity type="reg"/> .NET, puis en le déployant sur un ordinateur distinct exécutant IIS.
Résolution des problèmes liés à l'exemple
Les autorisations et la reconnaissance peuvent poser des problèmes lors de l’exécution ou de l’hébergement de l’exemple.
Autorisations
L’exemple nécessite des autorisations d’écriture dans le dossier racine virtuel pour le compte qui tente de créer une entrée de blog. Par défaut, la version compilée de l’exemple fourni dans le Kit de développement logiciel (SDK) Tablet PC 1.7 a les autorisations appropriées définies pour répondre à cette exigence.
Si vous générez et déployez l’exemple à l’aide du projet de déploiement d’installation web fourni, vous devez accorder au groupe %MACHINENAME%\Users un accès en écriture au dossier du système de fichiers pointé par la racine virtuelle InkBlogWeb (par exemple, C:\InetPub\WWWRoot\InkBlogWeb). Le groupe Utilisateurs inclut le compte anonyme utilisé par IIS, ce qui permet à l’application ASP.NET d’écrire les nouvelles entrées de blog dans le système de fichiers. Une alternative consiste à supprimer l’accès anonyme à la racine virtuelle et à forcer l’authentification.
Reconnaissance
Les modules de reconnaissance d’écriture manuscrite doivent être installés pour reconnaître l’entrée manuscrite dans le titre du blog. Si vous accédez à l’application InkBlog à partir d’un ordinateur disposant d’un système d’exploitation autre que Windows XP Édition Tablet PC, mais sur lequel le Kit de développement logiciel (SDK) Tablet PC 1.7 est installé, vous pouvez écrire en entrée manuscrite dans les contrôles InkArea, mais les moteurs de reconnaissance ne seront pas présents et aucun titre n’apparaîtra pour vos entrées de blog. Le contenu de l’entrée manuscrite dans le corps s’affiche toujours.
Configuration de la machine
Si vous avez installé ASP.NET et le .NET Framework sur un ordinateur, puis désinstallez et réinstallez IIS, les mappages de script s’interrompent et ASP.NET ne fonctionneront pas. Dans ce cas, vous pouvez réparer les mappages de script ASP.NET avec l’outil d’inscription IIS ASP.NET (Aspnet_regiis.exe -i).
Rubriques connexes