Exemple de blog manuscrit
L’exemple d’application de blog Ink montre comment créer une classe UserControl managée qui dispose de la fonctionnalité d’encrage et héberger ce contrôle dans Microsoft Internet Explorer. L’exemple illustre également une technique permettant d’envoyer des données d’encre sur un réseau à l’aide du protocole HTTP et de conserver l’encre sur un serveur.
Notes
vous devez disposer d’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 les applications ASP.NET s’exécutent sur votre ordinateur.
Notes
si vous exécutez cet exemple sur un ordinateur qui n’est pas un Tablet pc avec Microsoft Windows XP Tablet pc Edition Kit de développement 1,7 installé, la fonctionnalité de reconnaissance de texte pour le titre de l’encre ne fonctionnera pas. Cela est dû au fait qu’un ordinateur non Tablet PC avec le kit de développement logiciel (SDK) Tablet PC 1,7 installé ne contient pas de module de reconnaissance. Le reste de l’application fonctionne comme décrit.
Vue d’ensemble
L’exemple de blog Ink crée un weblog avec écriture manuscrite. InkBlogWeb est une application ASP.NET. l’entrée manuscrite est effectuée au moyen d’un contrôle utilisateur référencé à partir d’une page de 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 compatibles avec l’écriture manuscrite sur la page Web : une pour l’entrée manuscrite d’un titre pour l’entrée de blog et une pour le corps de l’entrée. Si les composants de plateforme Tablet PC ne sont pas installés, l’utilisateur reçoit un contrôle de zone de texte standard pour le titre et le corps de l’entrée.
Lorsque l’utilisateur a terminé de créer l’entrée, il clique sur un bouton, ajouter un blog, et la publication est envoyée au serveur Web pour le stockage. Sur le serveur, l’application enregistre le texte du 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 d’encre du corps d’un fichier GIF viné. Pour plus d’informations sur le format GIF viné, consultez stockage de l’encre en HTML.
Il existe deux projets dans la solution InkBlog : le projet InkBlogControls et le projet InkBlogWeb .
InkBlogControls Project
Le projet InkBlogControls est un projet UserControl qui contient le code pour le contrôle utilisateur qui active l’écriture manuscrite sur la page Web. Le code pour 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 pour le 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’encrage du Tablet PC sont disponibles sur le client en tentant de créer une instance de la classe InkCollector . Si l’appel à la CreateInkCollectionSurface méthode s’effectue correctement, la méthode retourne un objet panneau comme 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’écriture 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 de contrôles du parent.
La classe de contrôle InkArea implémente trois propriétés publiques intéressantes : InkData, TextData et webactived.
La propriété InkData est en lecture seule et fournit l’accès aux données sérialisées de l’encre, si le client prend en charge l’écriture 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’écriture 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 contrôle. Si l’objet Ink contient des traits, les données d’entrée manuscrite sont enregistrées dans le inkDataBytes tableau d’octets sous la forme d’un fichier GIF (spécifié à l’aide de la valeur d’énumération PersistenceFormat ). La méthode convertit ensuite le tableau d’octets en une chaîne encodée en base64 et retourne cette chaîne.
En supposant que le client puisse effectuer la reconnaissance, la TextData propriété retourne l’objet RecognitionResult à partir du passage des données de l’encre à un module de reconnaissance de l’écriture manuscrite. Si le client ne prend pas en charge l’écriture 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 les moteurs de reconnaissance sont présents sur le système, la RecognizeInkData méthode retourne une chaîne contenant la propriété de la chaîne 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.
Un autre membre public important de la InkArea classe de contrôle est la DisposeResources méthode. Cette méthode appelle en interne la Dispose méthode 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 fini d’utiliser le contrôle.
InkBlogWeb Project
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 blog. Pour plus d’informations sur les projets de déploiement de l’installation Web, consultez déploiement d’un Project d’installation Web.
Il existe deux fichiers. aspx qui implémentent l’exemple de blog : 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 de saisie de blog et affiche les entrées de blog existantes. Ce processus est décrit ultérieurement, après l’examen suivant de la page du nouveau formulaire de saisie de blog, AddBlog. aspx.
AddBlog. aspx et son fichier code-behind, AddBlog. aspx. cs, contiennent la logique et le code de l’interface utilisateur permettant de créer des entrées de blog. AddBlox. aspx fait référence à deux instances de la classe de contrôle InkArea créée dans le projet InkBlogControls à l’aide de l’élément objet HTML, comme indiqué dans l’exemple suivant. Une instance a un id attribut de inkBlogTitle et l’autre a un attribut d’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>
L’assembly de InkBlogControls.dll doit être présent dans le même répertoire que la page. aspx qui y fait référence. Le projet de déploiement de l’installation Web garantit que c’est le cas, tel qu’il est prouvé par la présence de l’élément « sortie principale de InkBlogControls » dans le Project de déploiement.
Le contrôle titre est uniquement de 48 pixels de haut pour faciliter l’entrée d’une seule ligne d’encre pour le titre. Le contrôle du corps est de 296 pixels de haut pour faire de la place pour les entrées de blog plus grandes de plusieurs lignes ou 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 BUTTON HTML 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 d’entrée masqués : BlogTitleText, BlogBodyText et BlogBodyInkData. Ce formulaire est utilisé pour replacer les données de l’entrée de blog sur le serveur. AddBlog. aspx est le gestionnaire de publication défini pour le formulaire.
la fonction AddBlog, écrite dans Microsoft JScript , extrait les données de blog à partir 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 de chargement de page pour voir si la propriété Form de l’objet HttpRequest contient des données. Si c’est le cas, il crée un nom de fichier basé sur l’heure système actuelle, place les données du formulaire dans trois variables de chaîne et écrit les données dans un fichier HTML et un fichier GIF contenant les données d’encre, 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 kit de développement logiciel (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 générant le projet dans Microsoft Visual Studio .net, puis en le déployant sur un ordinateur distinct qui exécute IIS.
Résolution des problèmes liés à l'exemple
Trois zones qui peuvent engendrer des difficultés lors de l’exécution ou de l’hébergement de l’exemple sont les autorisations et la reconnaissance.
Autorisations
L’exemple requiert 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 dispose des autorisations appropriées pour répondre à cette exigence.
Si vous générez et déployez l’exemple à l’aide du projet de déploiement de l’installation Web fourni, vous devez accorder au groupe% MACHINENAME% \ Users l’accès en écriture au dossier du système de fichiers désigné par la racine virtuelle InkBlogWeb (par exemple, C : \ Inetpub \ wwwroot \ InkBlogWeb). le groupe utilisateurs comprend 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 détecteurs d’écriture manuscrite doivent être installés afin de reconnaître l’encre dans le titre du blog. si vous accédez à l’application InkBlog à partir d’un ordinateur équipé d’un système d’exploitation autre que Windows XP édition Tablet pc, mais avec le kit de développement logiciel (SDK) tablet pc 1,7 installé, vous pouvez écrire dans les contrôles InkArea, mais les moteurs de reconnaissance ne sont pas présents et aucun titre ne s’affiche pour vos entrées de blog. Toutefois, le contenu de l’encre dans le corps apparaît toujours.
Configuration de l’ordinateur
si vous avez installé ASP.NET et le .NET Framework sur un ordinateur et que vous désinstallez puis réinstallez IIS, les mappages de script s’interrompent et ASP.NET ne fonctionneront pas. dans ce cas, vous pouvez réparer le ASP.NET les mappages de scripts avec l’outil d’inscription ASP.NET IIS (Aspnet _regiis.exe-i).