Simpel Gecko-Sharp web browser

-Med Mono, Visual Studio og Glade

Win32 ed. af vejledningen: http://primates.ximian.com/~edasque/projects/Tutorial/glade2.html
men suppleret med kode fra kodeeksemplet: http://forge.novell.com/modules/xfref_library/detail.php?reference_id=1618

(pga. ændringer beskrevet i vejledningen)

Fodnote d. 23/5 - ikke opdateret

Opdateret d. 6/3 2005

Opdateret d. 2/3 2005

Indhold

Værktøjer og installationsrækkefølge (Win32):

(Det antages at man forinden har installeret og opsat Visual Studio)

OBS! Heller ikke her må der være forekomster af specialtegn i installationsstien. Hvis installationsprogrammet foreslår at installere GRE i C:\Programmer\Fælles filer\gtkmozembed-win32, så ændrer dette til fx C:\Programmer\gtkmozembed-win32

Opsætning

Udvikling

Oprette Glade# projektet

I Visual Studio, tast <Ctrl>+<Shift>+<N> og vælg ”Visual C# Projects” -> ”Glade# Project”

NewProject
Fig. 3


I ”Solution Explorer”, højreklik på ”References” -> ”Add Reference...”. Vælg gecko-sharp.

Reference
Fig. 4

Bygge interfacet

I ”Solution Explorer”, dobbeltklik på filen ”gladesharp1.glade”. Sikrer dig at egenskabsredigeringen samt paletten er slået til: I Glade, menuen ”Vis” -> afkryds ”Vis egenskabsredigering” og ”Vis palet”.

Egenskabsredigering
Fig. 5: Hovedvinduet i Glade. Fra menuen ”vis” kan man slå nogle, til tider, ret nyttige værktøjer til eller fra.

Dobbeltklik på ”window1” og ændrer titlen til ”My Browser” i egenskabsredigeringen.

Titel
Fig. 6: Egenskaber for window1 i egenskabsredigeringen. Læg også mærke til punkterne ”Navn” og ”Klasse”. -Disse refereres til fra vores kode med ”[Widget]”.

Fra kontroltræet (menuen ”Vis” -> ”Vis kontroltræ”) kan man se, hvordan den autogenererede GUI hierarkisk er bygget op.

Kontroltrae
Fig. 7:


De GUI-elementer som ikke skal bruge, fjernes. Det drejer sig om tegnearealet ”drawingarea1” samt alle elementerne på værktøjslinjen ”toolbar1”; ”toolbutton1”, ”toolbutton2”, ”seperatortoolitem1” og ”toolbutton3”. Du står nu tilbage med sådan et vindue:

TomUI
Fig. 8: window1 efter at de overflødige elementer er fjernet

Næste skridt er at udvide værktøjslinjen ”toolbar1” til at rumme et passende antal knapper og et tekstindtastningsfelt til URL'en. Det gøres ved at markere ”toolbar1” og i egenskabsredigeringen; fanebladet ”Kontrol”. -Hvis man vælger at der skal være knapperne ”Frem”, ”Tilbage”, ”Stop”, ”Opdater”, ”Hjem” og ”Gå til” udover et tekstindtastningsfelt, får værktøjslinjen en størrelse på 7.

De ønskede knapper af typen ”Toolbar Button” (toolbarbutton) samt et tekstindtastningsfelt (textentry), droppes fra paletten over på menulinjen. Giv dem også et navn der er sigende, til når der senere refereres fra koden.

(I dette eksempel er valgt: ”toolbuttonBack”, ”toolbuttonForward”, ”toolbuttonStop”, ”toolbuttonReload”, ”toolbuttonHome”, ”entryURL” og ”toolbuttonGo”).

De nyoprettede knapper kan enten tildeles ikoner og etiketter, eller standardknapper, i egenskabsredigeringen.

KnapRedigering
Fig. 9: Tilføjelse af ikoner og etiketter

For hver af knapperne skal der tildeles hændelser. Dette gøres i fanebladet ”Signaler”.

tildele hændelser
Fig. 10: Tildeling af hændelse til knap

I kontroltræet markeres det item, som tekstindtastningsfeltet blev placeret i. Slå ”udvid” til i egenskabsredigeringen -> fanebladet ”pakning”.

I det tomme felt kan man fx placere en enkelt lodret boks (Gtk.VBox) (GtkVBox).

Hierarkiet er nu således:

hieraki
Fig. 11: Det endelige hierarki.

Nu skulle grænsefladen gerne se nogetlunde således ud:

Interfacet
Fig. 12: Interfacet

Husk at gemme!

Start på kodning

Det autogenererede kode ser nogetlunde således ud:

AutogenereretKode
Fig. 13: Den autogenererede kode

Nu skal der tilføjes noget kode for at få browseren til at virke.

Til at starte med kan hele regionen ”Button Click Event handlers” tømmes (linje 44-71), fordi vi jo fjernede alle knapperne, da vi slettede værktøjslinjen.

Tilføjelser fra vejledningen er fremhævet med gult. Tilføjelser fra kodeeksemplet er fremhævet med grøn. Andre tilføjelser er fremhævet med lys turkis. Linjenumrene følger sidste opdatering.

  1. using System;
  2. using Gtk;
  3. using Glade;
  4. using Gecko;
  5.  
  6. namespace MyBrowser
  7. {
  8.  /// <summary>
  9.  /// Summary description for Driver.
  10.  /// </summary>
  11. class Driver
  12. {
  13.  #region Glade Widgets
  14.  
  15.  [Widget] Gtk.Window window1;
  16.  [Widget] Gtk.VBox vbox3;
  17.  [Widget] Gtk.Entry entryURL;
  18.  WebControl web;
  19.  
  20.  #endregion
  21.  
  22.  
  23.  /// <summary>
  24.  /// The main entry point for the application.
  25.  /// </summary>
  26.  [STAThread]
  27.  static void Main(string[] args)
  28.  {
  29.  new Driver(args);
  30.  }
  31.  
  32.  public Driver(string[] args)
  33.  { 
  34.  string MozEnvVar = "";
  35.  Application.Init();
  36.  
  37.  Glade.XML gxml = new Glade.XML (null, "gladesharp1.glade", "window1", null);
  38.  gxml.Autoconnect(this);
  39.  
  40.  MozEnvVar = Environment.GetEnvironmentVariable("GECKOSHILLA_BASEPATH");
  41.  if(MozEnvVar != null && MozEnvVar.Length != 0)
  42.  {
  43.  WebControl.CompPath = MozEnvVar;
  44.  }
  45.  
  46.  web = new WebControl();
  47.  vbox3.PackStart(web, true, true, 2);
  48.  web.Show();
  49.  entryURL.Activated += new EventHandler(load_url);
  50.  
  51.  Application.Run();
  52.  }
  53.  
  54.  //Connect the Signals defined in Glade
  55.  public void on_window1_delete_event (object o, DeleteEventArgs args)
  56.  {
  57.  Application.Quit();
  58.  args.RetVal = true;
  59.  }
  60.  
  61.  void load_url( object source, EventArgs args)
  62.  {
  63.  web.LoadUrl(entryURL.Text);
  64.  }
  65.  
  66.  #region Button Click Event handlers
  67.  
  68.  protected void on_toolbuttonGo_clicked(object o, EventArgs args)
  69.  {
  70.  this.load_url(o, args);
  71.  }
...
Fig. 14

For også at få opdateret grænsefladen, skal projektet rebuildes i Visual Studio.

Kører man browseren nu, vil den se nogetlunde således ud:

MyBrowser
Fig. 15: En grundlæggende browser

Browseren har den grundlæggende funktion, at den kan vise de hjemmesider man indtaster. Der er selvfølgelig meget der kan tilføjes. Men det giver en introduktion.

Videre

For det første er knapperne ikke implementerede endnu og linje 40 (fig. 13) er måske heller ikke særlig køn?

Man kunne fx tænke sig følgende tilføjelser:

Ressourcer

Mono's hjemmeside: http://mono-project.com/

Project: Gtk# Win32 Installer for Microsoft .NET Framework 1.1 SDK: http://forge.novell.com/modules/xfcontent/downloads.php/gtks-inst4win/

Project: Mono Windows Integration: http://forge.novell.com/modules/xfcontent/downloads.php/monowin32

(Af-og-til holder Martin Willemoes foredrag om Mono for Prosa eller Århus Unix Users Group)

Dokumentation

Mono Documentation: http://www.go-mono.com/docs/

C# Language Specification (ECMA-334): http://www.ecma-international.org/publications/standards/Ecma-334.htm

Lignende eksempler

A google search application using Gtk#: http://www.codeproject.com/cpnet/googleSearch.asp

(Der følger også en del eksempler med i Mono)

Eksempler på Mono programmer

OSNews har en ret stor liste: http://www.osnews.com/story.php?news_id=9780

Andre .Net implementationer

DotGNU: http://dotgnu.org/