Progetto

Generale

Profilo

MonoMiniBrowser » Cronologia » Versione 8

Simone Piccardi, 24-12-2010 12:47

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