Esempio Web blog input penna
L'applicazione di esempio Blog input penna illustra come creare una classe UserControl gestita con funzionalità di input penna e ospitare tale controllo in Microsoft Internet Explorer. L'esempio illustra anche una tecnica per l'invio di dati input penna in una rete tramite HTTP e per rendere persistente l'input penna in un server.
Nota
Per eseguire questo esempio, è necessario avere Microsoft Internet Information Services (IIS) con ASP.NET installato. Assicurarsi che il computer soddisfi i requisiti necessari per ASP.NET applicazioni da eseguire nel computer.
Nota
Se si esegue questo esempio in un computer non Tablet PC con Microsoft Windows XP Tablet PC Edition Development Kit 1.7 installato la funzionalità di riconoscimento del testo per il titolo dell'input penna non funzionerà. Ciò si verifica perché un computer non Tablet PC con Tablet PC SDK 1.7 installato non dispone di riconoscitori. Il resto dell'applicazione viene eseguito come descritto.
Panoramica
L'esempio blog input penna crea un weblog abilitato per l'input penna. InkBlogWeb è un'applicazione ASP.NET. La voce input penna viene eseguita tramite un controllo utente a cui viene fatto riferimento da una pagina di ASP.NET.
Il controllo utente rileva se i componenti della piattaforma Tablet PC sono installati nel computer client. In tal caso, il controllo utente presenta all'utente due aree abilitate per l'input penna nella pagina Web: una per l'input penna di un titolo per il post di blog e una per il corpo della voce. Se i componenti tablet PC Platform non sono installati, all'utente viene assegnato un controllo casella di testo standard per il titolo e il corpo della voce.
Al termine della creazione della voce, l'utente fa clic su un pulsante, aggiungi blog e il post viene inviato al server Web per l'archiviazione. Nel server l'applicazione salva il testo del titolo e la data di pubblicazione, nonché un riferimento a un file GIF (Graphics Interchange Format). Il file GIF, salvato anche nel server, contiene i dati dell'input penna dal corpo in un file GIF fortificato. Per altre informazioni sul formato GIF fortificato, vedere Archiviazione dell'input penna in HTML.
Esistono due progetti nella soluzione InkBlog: il progetto InkBlogControls e il progetto InkBlogWeb .
Progetto InkBlogControls
Il progetto InkBlogControls è un progetto UserControl che contiene il codice per il controllo utente che consente l'input penna nella pagina Web. Il codice per questo controllo, il controllo InkArea, si trova nel file InkArea.cs.
La InkArea classe eredita dalla classe UserControl . Il costruttore per il InkArea controllo chiama un metodo helper, 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);
}
Il CreateInkCollectionSurface metodo determina se i componenti di input penna per Tablet PC sono disponibili nel client tentando di creare un'istanza della classe InkCollector . Se la chiamata al CreateInkCollectionSurface metodo ha esito positivo, il metodo restituisce un oggetto Panel come controllo .
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 il costruttore ha esito negativo perché i file della piattaforma di input penna non vengono trovati, il InputArea controllo viene creato come controllo TextBox anziché come controllo InkCollector . Il costruttore ridimensiona quindi il controllo alla dimensione del controllo utente padre e lo aggiunge all'insieme Controls dell'elemento padre.
La classe di controllo InkArea implementa tre proprietà pubbliche interessanti: InkData, TextData e WebEnabled.
La proprietà InkData è di sola lettura e fornisce l'accesso ai dati dell'input penna serializzati, se il client supporta l'input penna. Se il client non supporta l'input penna, la proprietà InkData ottiene una stringa vuota. La proprietà InkData chiama un metodo helper, SerializeInkData, per determinare se il client supporta l'input penna.
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 Nel metodo il cast a InkCollector è necessario quando si ottiene l'oggetto Ink, perché inputArea viene dichiarato come control. Se l'oggetto Ink contiene tratti, i dati dell'input penna vengono salvati nella inkDataBytes matrice di byte come GIF (specificato usando il valore di enumerazione PersistenceFormat ). Il metodo converte quindi la matrice di byte in una stringa con codifica Base64 e restituisce questa stringa.
Supponendo che il client possa eseguire il riconoscimento, la TextData proprietà restituisce l'oggetto RecognitionResult passando i dati dell'input penna a un riconoscitore di grafia. Se il client non è compatibile con l'input penna, viene restituito il contenuto della casella di testo, come illustrato nel codice seguente.
public string TextData
{
get
{
if (this.WebEnabled)
{
return RecognizeInkData();
}
else
{
return ((TextBox)inputArea).Text;
}
}
}
La TextData proprietà chiama un metodo helper, RecognizeInkData, illustrato nel codice seguente, per eseguire il riconoscimento. Quando i motori di riconoscimento sono presenti nel sistema, il RecognizeInkData metodo restituisce una stringa contenente la proprietà TopString dell'oggetto RecognitionResult. Altrimenti restituisce una stringa vuota.
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 proprietà è un valore booleano di sola lettura che indica se l'input penna è supportato nel computer client.
Un altro importante membro pubblico della classe di InkArea controllo è il DisposeResources metodo . Questo metodo chiama internamente il Dispose metodo per assicurarsi che tutte le risorse sfruttate dal controllo utente vengano pulite. Qualsiasi applicazione che usa il InkArea controllo deve chiamare il DisposeResources metodo al termine dell'utilizzo del controllo .
Progetto InkBlogWeb
Il progetto InkBlogWeb è un progetto di distribuzione di installazione Web che fa riferimento al InkArea controllo per fornire la funzionalità di blogging. Per altre informazioni sui progetti di distribuzione di installazione Web, vedere Distribuzione di un progetto di installazione Web.
Esistono due file aspx che implementano l'esempio di blogging: Default.aspx e AddBlog.aspx. Default.aspx è la pagina predefinita per l'applicazione InkBlogWeb. Il file code-behind per questa pagina è Default.aspx.cs. Questa pagina fornisce un collegamento alla pagina contenente il nuovo modulo di immissione del blog e visualizza eventuali voci di blog esistenti. Questo processo viene descritto più avanti, dopo l'esame seguente della pagina del modulo della nuova voce di blog, AddBlog.aspx.
AddBlog.aspx e il relativo file code-behind, AddBlog.aspx.cs, contengono la logica e il codice dell'interfaccia utente per la creazione di nuove voci di blog. AddBlox.aspx fa riferimento a due istanze della classe di controllo InkArea creata nel progetto InkBlogControls usando l'elemento OBJECT HTML, come illustrato nell'esempio seguente. Un'istanza ha un id attributo inkBlogTitle e l'altro ha un attributo ID di 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 deve essere presente nella stessa directory della pagina aspx a cui fa riferimento. Il progetto di distribuzione installazione Web garantisce che questo sia il caso, come evidenziato dalla presenza dell'elemento "Output primario da InkBlogControls" nel progetto di distribuzione.
Il controllo titolo è alto solo 48 pixel per facilitare la voce di una singola riga di input penna per il titolo. Il controllo corpo è alto 296 pixel per creare spazio per voci di blog più grandi di più linee o disegni.
I controlli InkArea sono connessi a una funzione script lato client, AddBlog, tramite un gestore eventi onclick dell'elemento HTML BUTTON standard.
<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>
Nella pagina è presente anche un modulo HTML che contiene tre elementi INPUT nascosti: BlogTitleText, BlogBodyText e BlogBodyInkData. Questo modulo viene usato per pubblicare i dati dei post di blog nel server. AddBlog.aspx è il gestore post-back definito per il modulo.
La funzione AddBlog scritta nel tipo di entità Microsoft JScript<="reg"/>-estrae i dati del blog dai controlli InkArea e invia i risultati al server.
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 i dati arrivano al server, il codice in AddBlog.aspx.cs controlla il gestore eventi Page_Load per verificare se la proprietà Form dell'oggetto HttpRequest contiene dati. In tal caso, crea un nome di file basato sull'ora di sistema corrente, inserisce i dati del modulo in tre variabili stringa e scrive i dati in un file HTML e in un file GIF contenente i dati dell'input penna, se presenti, come illustrato nel codice seguente.
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);
Per altre informazioni sui metodi helper, vedere il codice sorgente di esempio.
Esecuzione dell'esempio
Per impostazione predefinita, Tablet PC SDK 1.7 installa l'esempio Web blog di Input penna. Per eseguire l'esempio, in Internet Explorer passare a https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. Se si esegue Windows Server 2003, sostituire il nome del computer con "localhost".
Nota
Gli esempi Web compilati non vengono installati dall'opzione di installazione predefinita per l'SDK. È necessario completare un'installazione personalizzata e selezionare l'opzione secondaria "Esempi Web precompilato" per installarli.
È anche possibile eseguire l'esempio aprendo e compilando il progetto in Microsoft Visual Studio<entity type="reg"/> .NET e quindi distribuendolo in un computer separato che esegue IIS.
Risoluzione dei problemi relativi all'esempio
Tre aree che possono causare difficoltà durante l'esecuzione o l'hosting dell'esempio sono autorizzazioni e riconoscimento.
Autorizzazioni
L'esempio richiede autorizzazioni di scrittura all'interno della cartella radice virtuale per l'account che tenta di creare una nuova voce di blog. Per impostazione predefinita, la versione compilata dell'esempio fornito in Tablet PC SDK 1.7 ha le autorizzazioni corrette impostate per soddisfare questo requisito.
Se si compila e si distribuisce l'esempio usando il progetto di distribuzione installazione Web fornito, è necessario concedere all'utente l'accesso in scrittura al gruppo %MACHINENAME%\Users alla cartella del file system a cui punta la radice virtuale InkBlogWeb, ad esempio C:\InetPub\WWWRoot\InkBlogWeb. Il gruppo Users include l'account Anonimo usato da IIS, consentendo quindi all'applicazione di ASP.NET di scrivere le nuove voci di blog nel file system. Un'alternativa consiste nel rimuovere l'accesso anonimo alla radice virtuale e forzare l'autenticazione.
Riconoscimento
I riconoscitori di grafia devono essere installati per riconoscere l'input penna nel titolo del blog. Se si accede all'applicazione InkBlog da un computer con un sistema operativo diverso da Windows XP Tablet PC Edition ma con Tablet PC SDK 1.7 installato, è possibile scrivere input penna nei controlli InkArea, ma i motori di riconoscimento non saranno presenti e non verranno visualizzati titoli per le voci di blog. Il contenuto dell'input penna nel corpo viene comunque visualizzato.
Configurazione del computer
Se è stato installato ASP.NET e .NET Framework in un computer e quindi si disinstalla e reinstalla IIS, le mappe di script verranno interrotte e ASP.NET non funzioneranno. In questo caso, è possibile ripristinare le mappe script ASP.NET con lo strumento di registrazione IIS ASP.NET (Aspnet_regiis.exe -i).
Argomenti correlati