Živě.cz o počítačích a internetu

Tipy a triky v Delphi, díl 119. - vylepšujeme posuvníky

Jan Šindelář - 3.12.2003

Používáte-li Internet Explorer, jistě jste si všimli, že od verze 5 je podporována jedna dodatečná vlastnost kaskádových stylů (mnozí to spíše považují za porušení normy ze strany MS), která umožňuje tvůrci webových stránek nadefinovat barevné nastavení vertikálního a horizontálního posuvníku okna prohlížeče. Stačí přidat několik řádků do definice stylů a musím uznat, že u některých stránek to vypadá opravdu dobře, pokud se zvolí ta správná kombinace barev, která dobře ladí s celkovým vzhledem stránky.

Dnes si ukážeme, jak stejného efektu docílit "násilím" v komponentě WebBrowser. I když načtená stránka nebude žádné nastavení barev obsahovat, vnutíme jí naše vlastní. Můžeme tak lépe začlenit samotnou komponentu WebBrowser do celkového vzhledu naší aplikace, pokud používáte nějaké jiné barevné nastavení než to standardní. Už se nemusíte obávat nevzhledných "šedivých" posuvníků a barvy můžete nastavit sami.

Na formulář umístíme tradičně komponentu WebBrowser a dvě tlačítka. První tlačítko zařídí načtení libovolné stránky a druhé tlačítko aplikuje barevné nastavení. Důležité je, aby před pokusem o změnu barev komponenta WebBrowser nějaký HTML dokument obsahovala.

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls, OleCtrls, SHDocVw, WinInet;

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    Button1: TButton;
    Button2: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.Navigate(`http://www.google.com`);
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
with WebBrowser1 do
  begin
    OleObject.document.body.Style.scrollbarArrowColor := `#FFFFFF`;
    OleObject.document.body.Style.scrollbar3DLIGHTCOLOR := `#99ccff`;
    OleObject.document.body.Style.scrollbarDarkShadowColor := `#000000`;
    OleObject.document.body.Style.scrollbarFaceColor := `blue`;
    OleObject.document.body.Style.scrollbarHighlightColor := `black`;
    OleObject.Document.body.Style.scrollbarShadowColor := `#99ccff`;
    OleObject.Document.body.Style.scrollbarTrackColor := `#99ccff`;
  end;
end;

end.

Jak vidíte, názvy parametrů u jednotlivých stylů jsou celkem podle předpokladů stejné jako při psaní stylů v HTML dokumentu, takže pokud používáte tento postup i při tvorbě stránek, nebude pro vás problém rozeznat, který parametr co znamená. Ostatní jistě brzy pochopí podle názvu funkce jednotlivých parametrů. Lze nastavit barvu posuvníku, jeho pozadí, šipky a rovněž stínů. Ve zdrojovém kódu vidíte, že použít se dá jak zápis ve formátu RGB, tak i pomocí názvu barvy, tedy opět stejně jako v běžném HTML dokumentu.