Progetto

Generale

Profilo

MonoMiniBrowser » Cronologia » Versione 5

Amministratore Truelite, 08-03-2006 15:50

1 5 Amministratore Truelite
[[TracNav(TOC)]]
2 2 Amministratore Truelite
= Come costruire un semplice browser con Monodevelop e Glade. =
3 1 Amministratore Truelite
4 4 Amministratore Truelite
Utilizzando gli strumenti che Mono mette a disposizione, è molto semplice creare un semplice browser ed è un ottimo esercizio per imparare a conoscerli. Monodevelop è un IDE (Integrated development Environment) basato su Mono e Gtk#. Glade-2 è un editor visuale di interfacce grafiche Gtk+/Gnome che salva il layout di queste in dei file XML. Utilizzando libglade, il programmatore può includere questi file nella sua applicazione, senza dover perdere tempo scrivendo “a mano” l'interfaccia grafica.
5 1 Amministratore Truelite
6 4 Amministratore Truelite
== Si inizia: Monodevelop ==
7 1 Amministratore Truelite
8
Dopo aver lanciato Monodevelop, si selezioni ''File -> New Solution''. Comparirà una finestra che offrirà diverse scelte per quanto riguarda i template ed i tipi di progetto. Si scelga ''C#'' come template e ''Glade#'' come tipo di progetto. Questo creerà del codice di base: un piccolo programma che visualizza una finestra quando viene lanciato.
9 2 Amministratore Truelite
10
[[Image(minibrowser1.png)]]
11
12 3 Amministratore Truelite
Monodevelop usa la stessa terminologia di "VisualStudio.NET" per la definizione dei progetti: una “soluzione” (chiamata ''solution'') contiene diversi progetti (''projects''); in tal modo viene favorita la migrazione di un programmatore abituato a tale strumento, che ritroverà le convenzioni a cui è abituato.
13 2 Amministratore Truelite
14
C'è un ulteriore passo da eseguire prima di iniziare con il programma vero e proprio: aggiungere “gecko-sharp” alla lista di referenze che si useranno in Monodevelop. In tal modo si avrà l'autocompletamento del codice anche per le classi appartenenti a gecko-sharp. Per farlo è sufficiente eseguire un click destro sul menu “references” e selezionare la voce “edit-references” e successivamente spuntare la voce “gecko-sharp” nel menu che viene presentato.
15
16
[[Image(minibrowser2.png)]]
17
18
A questo punto si può partire!
19
20 4 Amministratore Truelite
== Costruire l'interfaccia grafica ==
21 2 Amministratore Truelite
22
L'interfaccia grafica verrà creata utilizzando glade. Monodevelop avrà gia creato un file XML di base contenente i dati per visualizzare una finestra vuota.
23
24
Tale file sarà disponibile tra i “Resource File” (sopra alle “References” nel menu del progetto di Monodevelop). Un doppio click sul file lancerà glade che ci mostrerà appunto la finestra vuota di default.
25
26
Una volta avviato glade, possiamo modificare ad esempio l'oggetto “window1” cambiandone il titolo in, ad esempio, “Mini Gecko-Browser”.
27
28 3 Amministratore Truelite
[[Image(minibrowser3.png)]]
29 2 Amministratore Truelite
30
A questo punto si può iniziare a creare il layout della finestra, dividendola “strisce” inizialmente verticali (vertical box). In questo caso ne vanno create 4: una per il menu, una per la barra di navigazione, una per la finestra di rendering del browser ed una per la barra di stato.
31
32 3 Amministratore Truelite
[[Image(minibrowser4.png)]]
33 2 Amministratore Truelite
34
Ora è il momento di aggiungere i vari componenti dell'interfaccia grafica, ad iniziare dal menu. Si selezioni “barra dei menu” tra i componenti messi a disposizione da glade e lo si assegni al “box” che sta più in alto. Visto che nel programma useremo dei nomi diversi per i gestori degli eventi generati dal menu, dobbiamo avere la cura di modificare il menu eliminando il campo “Gestore” da ogni elemento di questo.
35
36
Dopo aver aggiunto il menu, selezioniamo il componente “horizontal box”, ed in maniera analoga a come si sono create le “strisce” orizzontali, dividiamo in 7 segmenti la seconda a partire dall'alto, attigua a quella appena modificata.
37
38
A questo punto aggiungiamo un bottone per i primi 5 segmenti, una “TextArea” nel sesto ed un altro bottone nel settimo. Ora andremo a modificare i bottoni, assegnandogli quelli “stock” di gnome, in modo che abbiano sempre lo stesso significato ed un aspetto simile indipendentemente dal tema grafico in uso. Per farlo ci basta clickare sul bottone interessato, e selezionare dal menu a tendina “Pulsante Stock”. Nell'ordine assegneremo: Indietro, Avanti, Aggiorna, Ferma, Home, Vai A.
39
40
Dopo avere eseguito questa operazione, dobbiamo dire al widget che “contiene” i bottoni di occupare in altezza solo lo spazio necessario: dopo un click sinistro su uno dei bottoni, selezioniamo “hbox1”, spostiamoci sul pannello delle proprietà, settiamo a “No” la proprietà “Espandi” e “Riempi”.
41
42
A questo punto la nostra finestra dovrebbe avere un aspetto simile.
43
44
45 3 Amministratore Truelite
[[Image(minibrowser5.png)]]
46 2 Amministratore Truelite
47
Per il sottostante, selezioniamo ed applichiamo un componente “frame” (in italiano cornice). Dopo averlo aggiunto, selezioniamo la sua “label” (etichetta) e cancelliamola, di modo che sia vuota e non etichettata. In seguito la riempiremo con il “rendering widget” di Gecko che non è disponibile in glade.
48
49
È possibile salvare il nostro lavoro e chiudere glade, per iniziare a programmare.
50
51 4 Amministratore Truelite
Iniziamo con l'aggiungere il namespace Gecko al nostro progetto:
52 2 Amministratore Truelite
{{{
53
using Gecko;
54
55
public class GladeApp
56
{
57
...
58
}}}
59
Glade permette di collegare i controlli dell'interfaccia grafica alle referenze nel programma, a patto che siano indicate come Glade.Widget. Aggiungiamo quindi il codice per mettere glade a conoscenza dei widget che vogliamo utilizzare nel nostro programma.
60
61
Siccome glade ci permette di conttrollare solo i widget standard, dichiareremo una variabile chiamata “moz” per avere a disposizione il controller del browser.
62
{{{
63
public class GladeApp
64
{
65
	[Widget] Alignment alignment1;
66
	[Widget] MenuBar menubar1;
67
	[Widget] Statusbar statusbar1;
68
	[Widget] Button button1;
69
	[Widget] Button button2;
70
	[Widget] Button button3;
71
	[Widget] Button button4;
72
	[Widget] Button button5;
73
	[Widget] Button button6;
74
	[Widget] Entry entry1;
75
	// non gestibile direttamente da glade
76
	WebControl moz;
77
	...
78
}}}
79
Ora che abbiamo una variabile a cui farlo puntare, possiamo creare il WebControl ed “attaccarlo” all'interfaccia grafica.
80
81
{{{
82
Glade.XML gxml = new Glade.XML (null, "gui.glade", "window1", null);
83
                gxml.Autoconnect (this);
84
                // Creiamo un webcontrol usando il costruttore di default
85
                moz = new WebControl();
86
                // A causa di un bug di Gecko dobbiamo dirgli esplicitamente
87
                // di visualizzarsi
88
                moz.Show();
89
                // Ora lo agganciamo alla gui
90
                alignment1.Add(moz);
91
		    ...
92
}}}
93
Le cose ora si fanno più interessanti, perchè possiamo iniziare a delegare dei metodi agli eventi che occorrono ai vari widget che abbiamo creato. Se scriviamo “entry1” noteremo che comprarirà un menu che ci suggerirà tutti i possibili compleamenti di quel frammento di codice; selezioniamo “Activated”.
94
Siccome C# supporta l'overloading degli operatori, possiamo letteralmente aggiungere “load_url” alla lista dei “delegate” attivati all'occorrenza di “entry1.Activated”.
95
{{{
96
entry1.Activated += load_url;
97
}}}
98
Bisogna quindi implementare il metodo “load_url”, cosa che faremo nel seguente modo:
99
100
{{{
101
// passiamo il testo di entry1 come parametro a LoadUrl di gecko. 
102
// In tal modo verrà caricato l'indirizzo selezionato.
103
104
void load_url (object source, EventArgs args)
105
        {
106
        	moz.LoadUrl(entry1.Text);
107
        }
108
}}}
109
110
Avendo chiari in mente questi concetti, si può passare all'implementazione degli altri metodi delegati, procedendo in maniera simile a quanto appena fatto:
111
112
{{{
113
//inseriamo la gestione degli eventi
114
entry1.Activated += loadUrl;
115
button1.Clicked += goBack;
116
button2.Clicked += goForward;
117
button3.Clicked += doReload;
118
button4.Clicked += doStop;
119
button5.Clicked += goHome;
120
button6.Clicked += goTo;
121
quit1.Activated += doQuit;
122
}}}
123
124
Implementazione dei vari metodi:
125
{{{
126
// Carica l'url selezionato
127
        void loadUrl (object source, EventArgs args)
128
        {
129
        	moz.LoadUrl(entry1.Text);
130
        	// Scriviamo nella status-bar la locazione corrente.
131
        	statusbar1.Push(1, moz.Location);
132
        }
133
        
134
        // Va indietro nella cronologia
135
        void goBack (object source, EventArgs args)
136
        {
137
        	if (moz.CanGoBack())
138
        		moz.GoBack();
139
        	statusbar1.Push(1, moz.Location);
140
        }
141
        
142
        // Va avanti nella cronologia
143
        void goForward (object source, EventArgs args)
144
        {
145
        	if (moz.CanGoForward())
146
        		moz.GoForward();
147
        	statusbar1.Push(1, moz.Location);
148
        }
149
        
150
        // Ricarica la pagina corrente
151
        void doReload (object source, EventArgs args)
152
        {
153
        	moz.Reload(1);
154
        	statusbar1.Push(1, moz.Location);
155
        }
156
        
157
        // Ferma il caricamento della pagina
158
        void doStop (object source, EventArgs args)
159
        {
160
        	moz.StopLoad();
161
        	statusbar1.Push(1, "Apertura della pagina annullata");
162
        }
163
        
164
        // Carica la homepage
165
        void goHome (object source, EventArgs args)
166
        {
167
        	moz.LoadUrl("http://www.truelite.it/");
168
        	statusbar1.Push(1, moz.Location);
169
        	entry1.Text = moz.Location;
170
        }
171
        
172
        // Va alla locazione presente nella Entry
173
        void goTo (object source, EventArgs args)
174
        {
175
        	moz.LoadUrl(entry1.Text);
176
        	statusbar1.Push(1, moz.Location);
177
        }
178
        
179
        // termina l'applicazione
180
        void doQuit (object source, EventArgs args)
181
        {
182
        	Application.Quit ();
183
        }
184
}}}
185 4 Amministratore Truelite
== Prodotto finito!!! ==
186 2 Amministratore Truelite
187 3 Amministratore Truelite
[[Image(minibrowser6.png)]]