Ricerca in FOLBlog

Feb 102009
 
closeQuesto articolo è stato pubblicato 8 anni 10 mesi 5 giorni giorni fa quindi alcuni contenuti o informazioni presenti in esso potrebbero non essere più validi. Questo sito non è responsabile per eventuali errori causati da questo problema.

image

Dopo aver accennato alla nascita di un nuovo rivoluzionario framework, WDF, nel precedente articolo sull’argomento ho pubblicato un’intervista rilasciata a FOLBlog dall’ideatore del framework, Davide Gaibotti di Evoluzione Sistemi, che ha spiegato a grandi linee le motivazioni alla base dell’idea e le peculiarità di questo strumento.

Volendo riassumere sintetizzando al massimo, la rivoluzione del framework WDF consiste nel modo in cui è possibile creare applicazioni web complesse (WeD Applications):

  • Si utilizza un unico linguaggio object-oriented come C# e non l’ensamble di altri vari linguaggi di scripting sia per gestire la parte grafica dell’applicazione che per gestire le componenti di business;
  • Si utilizza l’ambiente di sviluppo preferito (Visual Studio, ad esempio);
  • Si utilizza il medesimo paradigma di programmazione utilizzato per la creazione di applicazioni desktop (stand alone), cosa che consente di realizzare un’applicazione web a tutti quegli sviluppatori che non hanno mai visto PHP, Flash o altri strumenti utilizzati attualmente per sviluppare applicazioni web.

In questo articolo vedremo il codice di una semplice applicazione di esempio, realizzata sfruttando la versione Java di WDF basata su J2EE.

Qualsiasi applicazione desktop parte dal presupposto di poter essere avviata dal sistema operativo attraverso una particolare funzione o metodo (es.: main) che rappresenta l’entry point dell’applicazione stessa.

Dal momento che un’applicazione weD deve poter essere eseguita da remoto, il server WDF fornisce un servizio web che consente di avviare l’applicazione tramite un web browser.
Si tratta della servlet RunWedApplication, che riceve, attraverso il parametro Name, il nome della classe principale dell’applicazione wed in cui è dichiarato il metodo Main.

La chiamata dell’utente alla servlet dovrà quindi essere così impostata:

http://[ServerName]/[VirtualDirectory]/RunWedApplication?Name=[WedMainClass]

La classe di avvio di un’ipotetica applicazione weD sarà poi implementata nel seguente modo:

public class WedClient
{

public void Main(St.UI.Web.WebGUI parWebGUI)
{


}

}

Attraverso il puntatore parWebGUI sarà poi possibile per l’applicazione weD operare sull’interfaccia grafica come se fosse una normale applicazione desktop.

Supponiamo che lo sviluppatore desideri aprire una o più finestre contenenti una o più componenti grafiche interattive (Button, TextBox, InputBox, DropDown, ListView, TreeView, Grid, ecc.)  all’interno di una applicazione weD :

Ogni finestra di un’applicazione weD erediterà tutte le funzionalità tipiche di una finestra desktop a partire da una componente base del framework WDF di nome St.UI.Web.Form.
Questa componente nasconde allo sviluppatore tutta la complessità necessaria alla gestione di finestre ridimensionabili all’interno di un web browser e consente, tramite l’override di un metodo denominato InitializeComponents(), di personalizzare la finestra con l’aggiunta di controlli grafici specifici.

La definizione di una finestra personalizzata all’interno di un’applicazione weD che contenga per esempio un pulsante, sarà impostata nel seguente modo:

public class MyForm extends St.UI.Web.Form
{

private St.UI.Web.Controls.Buttons.Button MyButton;

protected void InitializeComponents()
{

MyButton = new St.UI.Web.Controls.Buttons.Button();
MyButton.TextSet(“Click this button!”);
this.Controls().Add(MyButton);

}

}

Come si vede dal codice, ogni form espone un metodo pubblico di nome Controls() che permette di manipolare tutti i controlli presenti nel form stesso consentendo operazioni di aggiunta, rimozione e modifica.

Altrettanto semplicemente questa finestra può essere aperta, all’interno del metodo Main di una applicazione weD o in una delle sue eventuali librerie, tramite una sequenza di istruzioni del tipo:

MyForm tMyForm;
tMyForm = new MyForm();
tMyForm.Show(parWebGUI);

La gestione degli eventi è altrettanto lineare, e chi è abituato a sviluppare applicazioni desktop la troverà molto familiare.

WDF implementa dei meccanismi che rendono trasparente la comunicazione di un evento grafico (come il click di un pulsante avvenuto all’interno di un web browser) al server e che consentono quindi l’avvio automatico delle porzioni di codice associate all’evento stesso.

Riprendendo la porzione di codice precedente, in cui veniva dichiarato un nuovo pulsante all’interno di una nuova finestra, l’associazione di una porzione di codice all’evento di un controllo, come ad esempio il Click su un Button, avviene come di seguito mostrato:

public class MyForm extends St.UI.Web.Form
{

private St.UI.Web.Controls.Buttons.Button MyButton;

protected void InitializeComponents()
{

MyButton = new St.UI.Web.Controls.Buttons.Button();
MyButton.TextSet(“Click this button!”);
MyButton.Click = new St.UI.Web.ClickEventHandler(MyButton.Click, this, “MyButton_Click”);
this.Controls().Add(MyButton);

}

public void MyButton_Click(Object parSender, St.UI.Web.ClickEventArgs parEventArgs)
{
// Codice da eseguire su Click del pulsante MyButton


}

}

In pratica, ogni evento esposto da un particolare controllo consente l’aggancio di una o più porzioni di codice alle quali verranno inviate, tramite dei parametri di ingresso, tutte quelle informazioni inerenti l’evento stesso.
In particolare ogni porzione di codice ha due parametri ingresso:
– Il primo parametro denominato parSender rappresenta un puntatore al controllo che ha scatenato l’evento (nel nostro esempio il pulsante MyButton);
– il secondo parametro denominato parEventArgs contiene tutte quelle informazioni aggiuntive correlate all’evento, che nel caso del Click potrebbero essere la pressione contemporanea di uno dei pulsanti della tastiera come lo Shift, il Ctrl o l’Alt.

Passiamo ora ad un esempio che mostra come è possibile aprire nuove finestre, aggiungere nuovi controlli alle finestre stesse e intercettare eventi in arrivo dal client.

L’applicazione, all’avvio, aprirà una finestra nella quale verranno visualizzati due pulsanti.
Il primo pulsante permetterà di aprire una copia della stessa finestra nidificata nella prima, mentre il secondo pulsante permetterà di aprire una copia della stessa finestra allo stesso livello grafico della prima.
Le finestre che verranno ad aprirsi, essendo copie della prima, ma istanze diverse, potranno a loro volta consentire le stesse operazioni della prima finestra aperta.

Un ipotetico main di questa applicazione weD potrebbe essere implementato come in questo esempio:

package St;

public class WebClient
{

// WebClient Entry point
public void Main(St.UI.Web.WebGUI parWebGUI)
{

St.FormTest tFormTest;
// Creazione della prima Main Form
tFormTest = new St.FormTest();
tFormTest.NameSet(“FormTest”);
tFormTest.TextSet(“Main Form”);
tFormTest.LocationSet(new St.UI.Web.Location(50,50));
tFormTest.SizeSet(new St.UI.Web.Size(900, 600));
tFormTest.AnchorSet(St.UI.Web.BaseControl.AnchorStyles.None.Value());
tFormTest.Show(parWebGUI);

}

}

All’interno del metodo main, si può vedere l’inizializzazione di una form, di cui successivamente vedremo l’implementazione, con tutte le sue caratteristiche grafiche come il titolo, il posizionamento e le dimensioni. L’ultima istruzione permette alla form di essere visualizzata, producendo questo risultato all’interno del browser web:
Figura 1

Quando un progettista di applicazioni weD vuole creare una form specializzata, non deve far altro che ereditare il componente grafico St.UI.Web.Form presente nelle librerie grafiche di WDF.
Questo componente è alla base di tutte le form di qualsiasi applicazione weD ed al suo interno nasconde tutte le problematiche di renderizzazione e comunicazione con il web browser specifiche per una form.

L’implementazione di una form di test può essere realizzata attraverso questo codice:

package St;
public class FormTest extends St.UI.Web.Form
{
}

All’interno di questa classe si procede con la dichiarazione e l’inizializzazione dei due pulsanti.
Per fare questo si utilizza il componente grafico base St.UI.Web.Controls.Buttons.Button.
Questo componente rappresenta un pulsante in grado di intercettare gli eventi di Click e DoubleClick in arrivo dall’interfaccia grafica. Si dovrà quindi implementare la seguente porzione di codice:

// Dichiarazione pulsanti
private St.UI.Web.Controls.Buttons. Button cmdCreateChildForm;

private St.UI.Web.Controls.Buttons. Button cmdCreateForm;

protected void InitializeComponents()
{

super.InitializeComponents();

// Aggiunge il pulsante cmdCreateChildForm
cmdCreateChildForm = new St.UI.Web.Controls.Buttons. Button();
cmdCreateChildForm.LocationSet(new St.UI.Web.Location(10,10));
cmdCreateChildForm.BorderColorSet(St.UI.Web.Color.Black);
cmdCreateChildForm.TextSet(“Create Child Form”);
cmdCreateChildForm.Click = new St.UI.Web.ClickEventHandler(cmdCreateChildForm.Click, this, “cmdCreateChildForm_Click”);
this.Controls().Add(cmdCreateChildForm);

// Aggiunge pulsante cmdCreateForm
cmdCreateForm = new St.UI.Web.Controls.Buttons.SmoothButton();
cmdCreateForm.LocationSet(new St.UI.Web.Location(cmdCreateChildForm.Right()+2,10));
cmdCreateForm.BorderColorSet(St.UI.Web.Color.Black);
cmdCreateForm.TextSet(“Create New Main Form”);
cmdCreateForm.Click = new St.UI.Web.ClickEventHandler(cmdCreateForm.Click, this, “cmdCreateForm_Click”);
this.Controls().Add(cmdCreateForm);

}

Come si vede dal codice, le prime due istruzioni dichiarano semplicemente la presenza nel form di due istanze del pulsante di tipo St.UI.Web.Controls.Buttons.Button.
La loro inizializzazione deve avvenire sempre all’interno del metodo InitializeComponents.
Questo metodo, di cui si è fatto override, è un metodo che viene chiamato automaticamente da WDF durante l’inizializzazione e la visualizzazione della form sulla GUI.

I due blocchi di istruzioni che si vedono, inizializzano i due pulsanti, li posizionano all’interno della form tramite il metodo LocationSet, gli assegnano proprietà di colore e di testo, gli agganciano eventi di risposta ed infine li aggiungono all’insieme dei controlli della finestra usando il metodo Add della proprietà Controls() che rappresenta, appunto, l’insieme dei controlli della form.

Ovviamente, l’aggiunta di componenti figli ad una form, può essere fatta sia in modalità statica come qui presentato, sia in modalità dinamica, ad esempio leggendo le informazioni di layout da un file xml.

L’ultima operazione da fare è quella relativa alla dichiarazione dei metodi cmdCreateChildForm_Click e cmdCreateForm_Click che saranno chiamati da WDF quando l’utente andrà a premere i due pulsanti posizionati sulla form. La loro dichiarazione avrà la seguente forma:

public void cmdCreateChildForm_Click(Object parSender, St.UI.Web.ClickEventArgs parEventArgs)
{

St.FormTest tFormTest;
tFormTest = new St.FormTest();
tFormTest.TextSet(“Child Form”);
tFormTest.LocationSet(new St.UI.Web.Location(50,50));
tFormTest.SizeSet(new St.UI.Web.Size(400, 400));
this.Controls().Add(tFormTest);

}

public void cmdCreateForm_Click(Object parSender, St.UI.Web.ClickEventArgs parEventArgs)
{

St.FormTest tFormTest;
tFormTest = new St.FormTest();
tFormTest.TextSet(“New Form Main”);
tFormTest.LocationSet(new St.UI.Web.Location(70,70));
tFormTest.SizeSet(new St.UI.Web.Size(this.Width(), this.Height()));
tFormTest.Show(this.WebGUI());

}

Come si può notare, entrambi i metodi sono dichiarati tramite la tipica firma dei metodi WDF richiamabili da eventi.

Entrambi i metodi inizializzano e visualizzano una nuova form all’interno della GUI, con la differenza che il primo metodo la aggiunge come finestra figlia (child) della finestra a cui appartiene il pulsante premuto, mentre il secondo metodo la aggiunge come finestra “sorella” di quella principale aperta nel Main.
Ogni nuovo pulsante presente in ogni nuova form visualizzata, reagirà in modo analogo aprendo ulteriori form, nidificate o meno, nella GUI.
Il risultato ottenuto è questo:
Figura 2

Nel caso l’applicazione sia scritta utilizzando un linguaggio .NET (esempio C#) la si compila normalmente con Visual Studio e si sposta l’eseguibile ottenuto nelle directory del server WDF.

Non occorre scrivere nessun codice HTML ne’ di altro genere.
L’applicazione la si invoca dal browser inserendo l’URL della pagina aspx RunWedApplication.

In sostanza lo sviluppatore è completamente sollevato dalle problematiche legate al rendering della pagina web: a quello ci pensa WDF.

Le applicazione weD nell’aspetto e nel comportamento ricalcano le tradizionali applicazioni desktop, ma vengono eseguite all’interno di un browser.
In pratica si può pensare al browser come ad un desktop virtuale su cui vengono mostrate le finestre dell’applicazione weD.
All’interno di questo desktop virtuale che è il browser, le finestre possono essere sovrapposte, spostate, ridimensionate, minimizzate o chiuse allo stesso modo con cui queste operazioni sono possibili con finestre di applicazioni desktop.

Nel prossimo articolo si avrà la possibilità di vedere un’applicazione weD in azione, e consultare il codice sorgente con cui l’applicazione weD è realizzata.

Technorati Tag: ,,,,,

Articoli simili:

  • Facebook
  • Twitter
  • Delicious
  • StumbleUpon
  • Wikio
  • Reddit
  • Technorati
  • Segnalo
  • Live
  • Add to favorites
  • Email
  • RSS

 Lascia un commento

Puoi usare questi tag e attributi HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(richiesto)

(richiesto)

Pinterest
EmailEmail
PrintPrint
%d blogger hanno fatto clic su Mi Piace per questo: