Przeglądarka internetowa (TWebBrowser) dla początkujących

Witam.

Na początku zaznaczam że art będzie raczej dla osób początkujących w delphi, dlatego że nie umiem jeszcze pisać bardziej skomlikowanych artów. Jest to spowodowane tym, że sam nie jestem jeszcze wspaniałym programistą, a wprowadzanie nowych osób w wspaniały świat delphi jest przyjemne i w miarę prostę ;). Artykuł był pisany w notatniku, natomiast źródła programu w Delphi 6 Enterprise. W delphi 6 Enterprise komponent TwebBrowser na którym bedzie oparta nasza przeglądarka jest zainstalowany. Jeśli go jednak nie masz musisz go zainstalować, pod koniec tego arta napiszę jak to zrobić (o ile nie zapomnę).

Po uruchomieniu naszego delphiego, naszym oczą powinien ukazać się nowy projekt (jeśli tego nie zrobił poproś go o to - kliknij na nowy i wybierz application). Teraz możesz sobie pozmieniać w obiect insp. "ustawnienia" formy(...captiony, kolory itp ...), o ile oczywiście chcesz i potrafisz to zrobić.

Teraz umieść na formie kilka komponentów:

• TWebBrowser - nazwa: WebBrowser1
• Panel - nazwa: Panel1 - Algin: AllTop
• SpeedButton - nazwa SpeedButton 1-4 - Ilość: 4 - Wstaw je na Panel1
• Panel - nazwa: Panel2 - Algin: AllTop
• Edit - nazwa: Edit1 - Wstaw go na Panel2
• SpeedButton - nazwa: SpeedButton5 - wstaw na Panel2

Właściwości komponentu WebBrowser Algin ustaw na: alClient. Teraz będziemy pisali kilka procedur które będą podstawą naszej przeglądarki, dzięki nim bedzie ona już funkcjonalna, aczkolwiek postaram się dodać jeszcze kilka ciekawych opcji które ją podrasują.

Najpierw, kliknij 2 razy na SpeddButtonie numer 5, pokaże ci się edytor kodu wpisz (lub skopiuj) następujący kod:

WebBrowser1.Navigate(Edit1.Text);

Kod ten mówi komponentowi WebBrowser że ma otworzyć stronę z adresu który bedzie wpisany w pole Edit1.

Teraz podepniemy kilka procedur które będą potrzebne do nawigacji (odśwież, wstecz, dalej, stop). Najpierw wstecz i dalej. Właściwości caption dwóch przez nas wybranych speedbuttonów (np. dwa pierwsze) ustawiamy na Wstecz i naprzód (lub inne byle by oznaczały funkcję jaką wykonują te buttony - oczywiście po wpisaniu bedziecie musieli zmienić ich rozmiar bo się texty nie zmieszczą). Klikamy dwa razy na pierwszy button (wstecz) i wstawiamy następującą procedurkę:

WebBrowser1.GoBack;

Teraz pod przycisk dalej możemy podłożyć taką procedurę:

WebBrowser1.GoForward;

Dwa kolejne przyciski będą nam służyły do stopowania :) i do odświeżania. Wbrew pozorą nie jest to trudne. Pod speedbutton Stop podpinamy taką procedurkę:

WebBrowser1.Stop;

Natomiast pod speedbutton odśwież następującą:

WebBrowser1.Refresh;

To tyle jeśli chodzi o całkowite podstawy pracy z tym komponentem, wasza przeglądarka powinna działać i bez zarzutów spełniać swoje podstawowe funkcje, tylko pamiętajcie że to wszystko działa na mechaniźmie internet explorera i jemu też się czasem zdaża zawieśić :P. W dalszej cześci tego artykułu opiszę jak zrobić w przegladarce kilka dodatków, nie będą one skomplikowane, a więc możesz spokojnie czytać dalej.

Pierwszą rzeczą jaką możesz dodać do swojej przeglądarki jest wejście na strone startową (niestety tylko na stronę startową internet explorera ale jeśli byś się pobawił to nie jest takie trudne zrobienie opcji strony startowej osobno w twojej przeglądrace). Kod za pomocą którego nasza aplikacja wyświetli aktualną stronę startową jest taki:

WebBrowser1.GoHome;

Kod ten wywołuje stronę startową, ale nie wyswietla sie ona po starcie naszej aplikacji, najlepiej zrobic to wpisując w OnCreate formy kod wywołujący stronę startową czyli ten który podałem wyżej.

Jest jeszcze kod którym możemy wywołać wyszukiwarkę (WebBrowser1.GoSearch;) ale ja proponuję zastosować zamiast tej procedurki przejście do jakiejś innej (najlepiej polskiej) wyszukiwarki. Kod ten wygląda tak:

WebBrowser1.Navigate('http://www.google.pl/');

Oczywiście zamiast google.pl możesz wpisać jaką chcesz wyszukiwarkę bo przecież to twoja przeglądarka :).

Kolejne ulepszenie to przystosowanie Edita do pracy z webbrowserem. Mianowicie powinniśmy dodać coś takiego: kiedy zmienia się strona w webbrowserze, do edita "wpsiuje się" jej adres. Jest to przydatne prawda? Oto procedura:

Edit1.Text:= WebBrowser1.LocationURL;

Należy ją podpiąć w OnDocumentComplete komponentu WebBrowser. Adres strony wyświetli sie lub poprawi (np. jeśli wpiszemy bez http://) zaraz po załadowaniu strony. Jeśli już jesteśmy przy OnDocumentComplete to pod procedurą wyświetlajacą w edicie adres aktualnej strony możesz dodać taki kod:

Label1.Caption:= 'Gotowe';

Nie zapomnij przed kompilacją gdzieś na formę wstawić komponentu Label (nazwa: label1).

Kolejny punkt naszej przeglądarki to pasek postępu ładowania strony. Tutaj kod bedzie troszkę dłużyszy ale nie straszny. Wstaw na formę Progress bara, następnie przejdź w procedurze onprogrsschange WebBrowsera wpisz ten kod:

ProgressBar1.Max := ProgressMax; ProgressBar1.Position := Progress;

Kolejną opcją która może się wam przydac jest Reakcja na enter. Czyli wpisujesz adres i naciskasz enter, w tym momencie nasza przeglądarka nic nie robi. Aby to rozwiązać wystarczy w procedurze onKeyPress Edit1 wpisac następujący kodzik:

if Key = #13 then 
 Key := #0;

Kolejny kodzik również może się wam przydać. Nie jest długi i skomplikowany, przydaje się wtedy gdy nasza przeglądarka musi obsłużyć nowe okna. Najpierw spróbuj otworzyć nowe okno bez poniżeszego kodu, lub uwierz mi na słowo, że nowe okno obsłuży standardowy internet explorer, a nie nasza przeglądarka. Aby to zmienić w procedurze WebBrowsera OnNewWindow2 wstaw taki kod:

var 
  NewWindow: TForm1; 
begin 
  NewWindow := TForm1.Create(self); 
  NewWindow.Show; 
  ppDisp := NewWindow.Webbrowser1.DefaultDispatch;

Teraz spróbuj otworzyć nowe okno. I co? Teraz nasza przeglądarka obsługuje także nowe okna. Co prawda nie bardzo profesjonalnie (na taskbarze nie pojawaia się nowa aplikacja tylko tworzy się jakby nowa forma identyczna do Form1), ale zawsze to lepsze niż to co było.

Jeśli chcesz ulepszyć swoją przeglądarkę to zapraszam na www.torry.net a dokładnie na tą podstronę: http://www.swissdelphicenter.ch/torry/internet.php . Tyle kodzików, powodzenia w ulepszaniu przeglądarki.

Na tym kończę ten krótki wywód :P dla początkujących. Jeśli macie pytania do mnie to pytajcie na gg, tlenie, lub ircu. I proszę wszystkich oceniających mój artykulik, o to żeby nie oceniali go według tego jaki poziom zaawansowaności programistycznej pokazuje, gdyż był on pisany dla osób początkujących, a ocenić go możecie według długości lub pożyteczności po wczuciu się w rolę początkującego. Pozdrawiam

forumowiczów i ircowniców :),A w szczególności najlepszych internetowych kolegów: Lofixa, Adama, Sheitara, Drajwera, Azgona, Dryobatesa, Detoxa i wszystkich o których zapomniałem.

W źródłach powinieneś znaleźć źródła mojej przeglądraki napisanej wraz z tym artykułem, jeśli jej tam nie ma to znaczy że mi usuneli albo jeszcze nie wgrałem :).

---

A i oto kod przeglądarki którą znajdziesz w źródłach:

{(c) 2002 by Sebek - można skasować}
{kontakt: seboo@o2.pl tlan: seboo gg: 3344299 irc: #4programmers (*.ircnet.pl}
unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, Buttons, ExtCtrls, OleCtrls, SHDocVw, StdCtrls, ComCtrls;

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    Panel1: TPanel;
    SpeedButton1: TSpeedButton;
    SpeedButton2: TSpeedButton;
    SpeedButton3: TSpeedButton;
    SpeedButton4: TSpeedButton;
    Panel2: TPanel;
    Edit1: TEdit;
    SpeedButton5: TSpeedButton;
    StatusBar1: TStatusBar;
    SpeedButton6: TSpeedButton;
    SpeedButton7: TSpeedButton;
    SpeedButton8: TSpeedButton;
    Label1: TLabel;
    ProgressBar1: TProgressBar;
    procedure SpeedButton1Click(Sender: TObject);
    procedure SpeedButton2Click(Sender: TObject);
    procedure SpeedButton3Click(Sender: TObject);
    procedure SpeedButton4Click(Sender: TObject);
    procedure SpeedButton5Click(Sender: TObject);
    procedure SpeedButton6Click(Sender: TObject);
    procedure SpeedButton7Click(Sender: TObject);
    procedure SpeedButton8Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure WebBrowser1DocumentComplete(Sender: TObject;
      const pDisp: IDispatch; var URL: OleVariant);
    procedure WebBrowser1ProgressChange(Sender: TObject; Progress,
      ProgressMax: Integer);
    procedure Edit1KeyPress(Sender: TObject; var Key: Char);
    procedure WebBrowser1NewWindow2(Sender: TObject; var ppDisp: IDispatch;
      var Cancel: WordBool);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
WebBrowser1.GoBack; // wstecz
end;

procedure TForm1.SpeedButton2Click(Sender: TObject);
begin
WebBrowser1.GoForward; //dalej
end;

procedure TForm1.SpeedButton3Click(Sender: TObject);
begin
WebBrowser1.Stop; //stop
end;

procedure TForm1.SpeedButton4Click(Sender: TObject);
begin
WebBrowser1.Refresh; //odśwież
end;

procedure TForm1.SpeedButton5Click(Sender: TObject);
begin
WebBrowser1.Navigate(Edit1.Text); //przejdź do strony podanej w Edit1
end;

procedure TForm1.SpeedButton6Click(Sender: TObject);
begin
close; // :)
end;

procedure TForm1.SpeedButton7Click(Sender: TObject);
begin
WebBrowser1.GoHome;  // idz do strony startowej
end;

procedure TForm1.SpeedButton8Click(Sender: TObject);
begin
WebBrowser1.Navigate('http://www.google.pl/'); // idz do google.pl (wyszukiwarka)
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate('http://www.4programmers.net'); // strona startowa tej przeglądarki :P
end;

procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;
  const pDisp: IDispatch; var URL: OleVariant);
begin
Edit1.Text:= WebBrowser1.LocationURL; // wyświetl adres strony w Edicie
Label1.Caption:= 'Gotowe'; // jak się strona załaduje to pokaż na labelu napis że się załadowała
end;

procedure TForm1.WebBrowser1ProgressChange(Sender: TObject; Progress,
  ProgressMax: Integer);
begin
ProgressBar1.Max := ProgressMax; ProgressBar1.Position := Progress;  // po prostu progress
end;

procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
begin
if Key = #13 then SpeedButton5.Click;  // działa enter w edicie
end;

procedure TForm1.WebBrowser1NewWindow2(Sender: TObject;
  var ppDisp: IDispatch; var Cancel: WordBool);
var 
  NewWindow: TForm1; 
begin
  NewWindow := TForm1.Create(self);                   // napisze tyle że dzięki tej procedurce jeśli strona otworzy sie w nowym oknie to program to przechwyci i pokaże okno takie same jak nasza przeglądarka a nie standardowego ie.
  NewWindow.Show;
  ppDisp := NewWindow.Webbrowser1.DefaultDispatch; 
end;

end.

---

Dodatek pierwszy - instalacja TWebBrowser

Jak obiecałem napiszę jak zainstalować komponent WebBrowser. Wszystko na podstawie Delphi 6 ponieważ tylko na takim pracuje i wydaje mi się, że jest najbardziej rozpowszechnione. Mimo że instalacja opisana jest na delphi 6 to w innych wersjach wszystko powinno przebiegać podobnie. W delphi 6 enterprise komponentu nie trzeba instalować gdyż jest na zakładce Internet (ostatni komponent). Natomiast posiadacze d6 personel edition muszą komponent zainstalować, aby to zrobić klikamy w menu na Commponent tam wybieramy Import ActiveX Control... . Pokazuje się lista kontrolek ActiveX do zainstalowania/zimportowania, mozna tam znaleźć trochę ciekawych komponentów m.in. naszą kontrolkę, wybieramy 'Microsoft Internet Controls' i następnie klikam Install. Jeśli instalacja przebiegnie poprawnie znajdziemy komponent na zakładce ActiveX. To tyle możemy cieszyć się z zainstalowanego komponentu a zapemniam że może się przydać nie tylko do pisania przeglądarki...

---

Dodatek drugi - 1 marca 2004 Tak przy okazji ostatnio miałem okazję uruchomić od dłuższego czasu delphi i zajrzałem tutaj - przypomniałem sobie że miałem kiedyś dodać ten prosty kod:

StatusBar1.SimpleText:= Text;

Należy go wstawić do zdarzenia StatusTextChange. Spowoduje on wyświetlenie na komponencie status bar wszytskich poleceń silnika przeglądarki - czyli np. trwa ładowanie itd. Wtedy ten kod, który podawałem wyżej - Label1.Caption:= 'Gotowe'; można sobie darmować...

---

Jeszcze raz dziękuję za przeczytanie gotowca i za komentarze, które warto przeczytać bo coś w nich na pewno znajdziecie do ulepszania przeglądarki :].