Realizzare la GUI in html per un'applicazione Winform
HTML GUI in Windows Forms Applications
Come "modernizzare" le nostre winform apps dando un look diverso da quello predefinito ?
Naturalmente possiamo acquistare i tools di terze parti oppure creare da soli un nuovo look&feel per le nostre "datate" winforms; tuttavia dato che oramai tutti sanno utilizzare il browser internet, possiamo facilmente creare delle GUI in html
che non si discostino dal funzionamento di un qualunque sito web. Gli users delle nostre applicazioni avranno meno diffidenza e potranno godere della miglior "user experience" possibile.
-
Prima di tutto:
- creiamo un progetto Windows Forms Application
- drag&drop di un controllo WebBrowser (proprietà Doc:Fill)
- creiamo quindi uno o più file html che inseriremo come "embedded resource". Questi file, caricati a runtime, saranno la nostra GUI.
Load html resources at runtime
In .Net questo è facilmente realizzabile utilizzando la funzione:
Assembly.GetManifestResourceStream(resourceName))
che troviamo nel namespace:
using System.Reflection
Si tratta in pratica di caricare dalle risorse tutto il file ed assegnarlo ad una variabile stringa, la quale sarà a sua volta assegnata alla proprietà DocumentText del controllo webbrowser. Il file html verrà così interpretato dal controllo.Possiamo creare una funzione che carica il file dalle risorse del nostro eseguibile a runtime e lo assegna ad una stringa:
private string LoadMainMenu(string resource) {
string tmpresult="" ;
var assembly = Assembly.GetExecutingAssembly();
var resourcename = resource;
using (stream stream = assembly.GetManifestResourceStream(resourceName))
using (streamreader reader = new streamreader(stream))
{
string result=reader.ReadToEnd();
if (result !=String.Empty)
tmpresult=result;
}
return tmpresult;
}
Come conoscere il nome dei file una volta che sono stati inseriti come risorsa
Il nome di un file embedded resource è composto da : namespace.nomefile.estensionefile.
Per esempio se il namespace è
TutorialHTMLGUI ed il nome del file è main_menu.html, allora il nome completo della risorsa sarà :
TutorialHTMLGUI.main_menu.html.
Ora che abbiamo l'intero file assegnato ad una stringa possiamo assegnare quest'ultima alla proprietà DocumentText del controllo webbrowser:
webBrowser1.DocumentText = LoadMainMenu(embeddedResource[0]);
dove embeddedResource è una array di stringhe che contiene i nomi dei nostri file html embedded.
private string[] embeddedResource = null;
this.embeddedResource = new string[3];
embeddedResource[0] = "TutorialHTMLGUI.main_menu.html";
embeddedResource[1] = "TutorialHTMLGUI.info.html";
embeddedResource[2] = "TutorialHTMLGUI.guide.html";
Comunicazione tra risorsa html e winform
Per consentire all'applicazione di catturare gli eventi generati dagli scripts del file html contenuto nel controllo webbrowser, dobbiamo assegnare la proprietà ObjectForScripting dello stesso:
this.webBrowser1.ObjectForScripting = this;
Questo attiva la funzionalità :
window.external
Attenzione, è necessario inoltre che la nostra applicazione sia visibile a COM.
Ora è possibile intercettare dalla nostra winform gli eventi generati dagli elementi del file html.
<a href="#" onclick="window.external.GetHTMLIndex(-2)"> Home </a>
Dove la funzione GetHTMLIndex(...) è una funzione creata da noi nel sorgente C#
public void GetHTMLIndex(int index)
{
switch (index)
{
case -1: Exit(); break;
case -2: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[0]); break;
case -3: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[1]); break;
case -4: webBrowser1.DocumentText = LoadMainMenu(embeddedResource[2]); break;
case 0:
case 1:
case 2: LoadForm(index); break;
default: MessageBox.Show("This form is not implemented yet !"); break;
}
}
Giuseppe Pischedda Aprile 2015.
