Progetto

Generale

Profilo

MonoMiniBrowser » Cronologia » Versione 2

Amministratore Truelite, 26-01-2006 17:52

1 2 Amministratore Truelite
= Come costruire un semplice browser con Monodevelop e Glade. =
2 1 Amministratore Truelite
3
== 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. ==
4
5 2 Amministratore Truelite
= Si inizia: Monodevelop =
6 1 Amministratore Truelite
7
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.
8 2 Amministratore Truelite
9
[[Image(minibrowser1.png)]]
10
11
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.
12
13
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.
14
15
[[Image(minibrowser2.png)]]
16
17
A questo punto si può partire!
18
19
= Costruire l'interfaccia grafica =
20
21
L'interfaccia grafica verrà creata utilizzando glade. Monodevelop avrà gia creato un file XML di base contenente i dati per visualizzare una finestra vuota.
22
23
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.
24
25
Una volta avviato glade, possiamo modificare ad esempio l'oggetto “window1” cambiandone il titolo in, ad esempio, “Mini Gecko-Browser”.
26
27
[[Image(minibrowser2.png)]]
28
29
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.
30
31
[[Image(minibrowser3.png)]]
32
33
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.
34
35
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.
36
37
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.
38
39
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”.
40
41
A questo punto la nostra finestra dovrebbe avere un aspetto simile.
42
43
44
[[Image(minibrowser4.png)]]
45
46
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.
47
48
È possibile salvare il nostro lavoro e chiudere glade, per iniziare a programmare.
49
50
Iiniziamo con l'aggiungere il namespace Gecko al nostro progetto:
51
{{{
52
using Gecko;
53
54
public class GladeApp
55
{
56
...
57
}}}
58
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.
59
60
Siccome glade ci permette di conttrollare solo i widget standard, dichiareremo una variabile chiamata “moz” per avere a disposizione il controller del browser.
61
{{{
62
public class GladeApp
63
{
64
	[Widget] Alignment alignment1;
65
	[Widget] MenuBar menubar1;
66
	[Widget] Statusbar statusbar1;
67
	[Widget] Button button1;
68
	[Widget] Button button2;
69
	[Widget] Button button3;
70
	[Widget] Button button4;
71
	[Widget] Button button5;
72
	[Widget] Button button6;
73
	[Widget] Entry entry1;
74
	// non gestibile direttamente da glade
75
	WebControl moz;
76
	...
77
}}}
78
Ora che abbiamo una variabile a cui farlo puntare, possiamo creare il WebControl ed “attaccarlo” all'interfaccia grafica.
79
80
{{{
81
Glade.XML gxml = new Glade.XML (null, "gui.glade", "window1", null);
82
                gxml.Autoconnect (this);
83
                // Creiamo un webcontrol usando il costruttore di default
84
                moz = new WebControl();
85
                // A causa di un bug di Gecko dobbiamo dirgli esplicitamente
86
                // di visualizzarsi
87
                moz.Show();
88
                // Ora lo agganciamo alla gui
89
                alignment1.Add(moz);
90
		    ...
91
}}}
92
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”.
93
Siccome C# supporta l'overloading degli operatori, possiamo letteralmente aggiungere “load_url” alla lista dei “delegate” attivati all'occorrenza di “entry1.Activated”.
94
{{{
95
entry1.Activated += load_url;
96
}}}
97
Bisogna quindi implementare il metodo “load_url”, cosa che faremo nel seguente modo:
98
99
{{{
100
// passiamo il testo di entry1 come parametro a LoadUrl di gecko. 
101
// In tal modo verrà caricato l'indirizzo selezionato.
102
103
void load_url (object source, EventArgs args)
104
        {
105
        	moz.LoadUrl(entry1.Text);
106
        }
107
}}}
108
109
Avendo chiari in mente questi concetti, si può passare all'implementazione degli altri metodi delegati, procedendo in maniera simile a quanto appena fatto:
110
111
{{{
112
//inseriamo la gestione degli eventi
113
entry1.Activated += loadUrl;
114
button1.Clicked += goBack;
115
button2.Clicked += goForward;
116
button3.Clicked += doReload;
117
button4.Clicked += doStop;
118
button5.Clicked += goHome;
119
button6.Clicked += goTo;
120
quit1.Activated += doQuit;
121
}}}
122
123
Implementazione dei vari metodi:
124
{{{
125
// Carica l'url selezionato
126
        void loadUrl (object source, EventArgs args)
127
        {
128
        	moz.LoadUrl(entry1.Text);
129
        	// Scriviamo nella status-bar la locazione corrente.
130
        	statusbar1.Push(1, moz.Location);
131
        }
132
        
133
        // Va indietro nella cronologia
134
        void goBack (object source, EventArgs args)
135
        {
136
        	if (moz.CanGoBack())
137
        		moz.GoBack();
138
        	statusbar1.Push(1, moz.Location);
139
        }
140
        
141
        // Va avanti nella cronologia
142
        void goForward (object source, EventArgs args)
143
        {
144
        	if (moz.CanGoForward())
145
        		moz.GoForward();
146
        	statusbar1.Push(1, moz.Location);
147
        }
148
        
149
        // Ricarica la pagina corrente
150
        void doReload (object source, EventArgs args)
151
        {
152
        	moz.Reload(1);
153
        	statusbar1.Push(1, moz.Location);
154
        }
155
        
156
        // Ferma il caricamento della pagina
157
        void doStop (object source, EventArgs args)
158
        {
159
        	moz.StopLoad();
160
        	statusbar1.Push(1, "Apertura della pagina annullata");
161
        }
162
        
163
        // Carica la homepage
164
        void goHome (object source, EventArgs args)
165
        {
166
        	moz.LoadUrl("http://www.truelite.it/");
167
        	statusbar1.Push(1, moz.Location);
168
        	entry1.Text = moz.Location;
169
        }
170
        
171
        // Va alla locazione presente nella Entry
172
        void goTo (object source, EventArgs args)
173
        {
174
        	moz.LoadUrl(entry1.Text);
175
        	statusbar1.Push(1, moz.Location);
176
        }
177
        
178
        // termina l'applicazione
179
        void doQuit (object source, EventArgs args)
180
        {
181
        	Application.Quit ();
182
        }
183
}}}
184
= Prodotto finito!!! = 
185
186
[[Image(minibrowser5.png)]]