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

Sebek

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: [email protected] 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 :].

39 komentarzy

Postępuje zgodnie z krokami tego artykułu a kiedy próbuje skompilować ( tą podstawową wersję przeglądarki) to wyświetla mi błędy :
Error: identifier idents no member "GoForward"
Error: identifier idents no member "Navigate"
Error: identifier idents no member "GoBack"
Error: identifier idents no member "Stop"
Error: identifier idents no member "Refresh"
Wie ktoś jak to naprawić ? ( Używam Lazarusa).

Gdzie znajde TWebBrowser ?

A da sie dodac text jak do memo Linia po lini zeby byl sformatowany?

Ja mam taki problem otóż przestał działać mi Enter...

A jak zrobić żeby w status barze wyświetlało np. Nie znaleziono strony jeśli podamy zły adres?

Ciekawe czy jest przeglądarka internetowa MDI? :>

Dumexis zazwyczaj exe masz tam gdzie zapisany projekt

jak zapisać programik na exe??

Już wiem na czym polega problem skapnołem się!! :-)

Linijka:
WebBrowser1.Navigate(Edit1.Text);
Świeci się naczerwono gdy naciska F9!!

historie.... ja zrobiłem tak:
na forme wstawiłem lisbox'a z visible=false, i w WebBrowser OnDocumentComplete coś takiego:
Listbox1.Items.Add(edit1.text);
Listbox1.Items.SaveToFile(ścieżka pliku do zapisywania histori, w moim przypadku 'history\history.yzd');

a ulubione... jeszcze nad tym pracuje, ale pewnie będzie działało na podobnej zasadzie ;)

Art. super ale jak zrobic ulubione i historie? jak by co apiszcie tutaj lub na gg: 5944869

Fajne, fajne. Wszystko bardzo ładnie chodzi, dodałem sobie kilka rzeczy... Ale, nigdzie nie umiem znaleść odpowiedzi na moje pytania: 1. Jak zrobić wyświetlanie w kartach, 2.Jak zrobić sprawdzanie czy strona "wstecz"i strona "dalej" istnieją, 3.Jak zrobić, żeby moja przeglądarka była zawsze po uruchomieniu w pełnym oknie ? Z góry dziękuję za odpowiedzi. Pozdrawiam Mimek

nie DARMOWAĆ tylko DAROWAĆ << nie?

dzieki przyda sie na informe, bo musze zrobić przeglądarke :D jeszcze raz wielkie dzieki za ten art D

thx wielkie za ten art bardzo sie mi przydał jeszcze raz THX :D

Wie ktoś jak zrobić aby w status bar w panelu[1] wyświetlić pasek postępu taki jak w internet explorerze, w panelu[0] jest tekst "StatusBar.Panels[0].Text:= Text;" e-mail: [email protected]

a jak dodac do takiej przegladarki obsluge proxy? mail: [email protected], gg: 3427077

Wiesz... Mamy tutaj taki tag <.delphi> który nie gryzie w użyciu. Poprawiłem arta...
#edit
Apropo przcisków Back i Foward - Nie lepiej dać:

try
WebBrowser1.GoBack;
except
exit;
end;

W debugerze będzie wywalało błąd ale w praktyce nie będzie go widać.
Myślę że lepsze rozwiązanie niż ciągłe wyświetlanie: "Nieokreślony błąd".

Wszystko chodzi swietnie.
Mam jeszcze mala prose moze ktos mi napisac jak zapisac strone offline.

FCUK
MI TO NIE DZIAŁA PISZA JAKIEŚ ERROR!!!!!!!!!!!!!! Co mam robić :>:>:>?????????????

dzięki za artykuł przyda mi się bardzo
jeszcze raz dzięki

wejdz na moje strone(jak bedziesz chciał)
www.programymoje.prv.pl
gg: 4432398

Jeśli zmienisz w kodzie co trzeba to tak :)

Mam pytanie czy zamian Progress bara moze być komponent TGauge ??

Wielkie dzięki!! Art jest super!!! Zawsze chciałem napisac jakiś programik w Delphi, a ten artykuł bardzo mi w tym pomógł. Przynajmniej mniej wiecje wiem o co w tym chodzi przeczytałem kurs i napisałem przeglądarkę z towjego art. i jest coś:):):) Jeszcze raz dziex:)

Coolerski art

ta strona ulegnie auto destrukcji za
5...(sec)
4...(sec)
3...(sec)
2...(sec)
1...(sec)
0...(sec)
BOOM!!!!!!!!!!!!!!!!!!

:)

Dziękuję Ci bardzo za ten artykół. Przyda się naprawde.
Podziwiam takich ludzi dla których przyjemnością jest "wprowadzanie w swiat delphi" takich pczątkującyj jak ja.
Jeszcze raz dzięki.

W porządku ten artykuł! Opis instalacji WebBrowser jest gdzieś na tym serwerze, ale tu też by się przydał.
Warto dodać, że na przykład w Delphi 3 wywołanie WebBrowser.Nawigate takie jak w artykule wywali błąd (nie podano parametrów). Należy najpierw zadeklarować:

var
par: OleVariant;

a następnie wywoływać:

begin
WebBrowser.Navigate(Edit1.Text, par, par, par, par);
end;

Sproboje...

Dzięki drajwer dopisze to do gotowca znaczniki bold... się pomyśli...

Jak coś zrobisz możesz conntact me ;)

A i kurde rzeczywiście zapomniałem dodać opisu instalacji, ale przynajmniej widać kto przeczytał cały art :PPP

Bardzo logiczny art ...
Podoba mi się ...

żeby odczytać title z webbrowsera w ontitlechange daj form1.caption:=text;
tylko pracuje nad statusem:-/

spoko Sebek good luck na drodze do artow w stylu kapustki (sic!) :)

moglbys kod wrzucic w znaczniki bold

fajnie że jestem tfoim qmplem:)

PS. Napisze micro$oft internet explodera:-)

Jednak zapomniałeś opisu instalacji :P (albo ja jestem ślepy)

Przyda sie (bardzo...)!!!

Witam.
Jestem tu nowy(i zielony) a ten art byl pierwszy , który przeczytałem. Bardzo mi sie spodobał.
Szkoda tylko, ze zapomnial ktos napisac o tym "WebBrowser"-jak sie instaluje:]

Pozdrawiam

Dziękuję za opinie i za chwilkę opiszę instalację komponentu WebBrowser.