Staňte se programátorem: napište si webový prohlížeč

Microsoft minulý týden uvolnil Internet Explorer 8 Beta 2, Google experimentuje s prohlížečem Chrome. Pakliže vám nevyhovuje ani jeden, napište si s námi vlastní webový prohlížeč.

Prakticky všechny současné webové prohlížeče využívají jedno ze čtyř nejrozšířenějších vykreslovacích jader, které se stará o to, jakým způsobem se webová stránka zobrazí, kolik k tomu bude potřebovat systémových prostředků a jak dlouho jí to bude trvat. Firefox a většina multiplatformních prohlížečů používají jádro Gecko, které vychází ještě ze stařičkého Netscape Navigatoru, Safari a Konqueror používají WebKit a KHTML, obě jádra jsou si však velmi podobná, Opera používá svůj proprietární systém a Internet Explorer používá už dlouhá léta jádro Trident.

Trident používají desítky programů a prohlížečů, na rozdíl od ostatních řešení se totiž na platformě Windows velmi snadno implementuje díky komponentnímu systému COM/ActiveX. Velmi snadno si tedy můžete postavit svůj vlastní prohlížeč, který se sice bude vnitřně chovat naprosto stejně jako právě nainstalovaná verze Internet Exploreru, z pohledu uživatele to ale bude moci být mnohem robustnější aplikace. Na stejném principu funguje třeba oblíbený Maxthon nebo Avant Browser.

V dnešním článku vám ukážeme, jak si takový prohlížeč napsat během několika minut, přičemž si náš miniaturní prohlížeč poradí také s tiskem a s moderním surfováním v záložkách.

Klepněte pro větší obrázek  Klepněte pro větší obrázekKlepněte pro větší obrázek
Webový prohlížeč s jádrem Trident VI přebere z originálního IE i nainstalované doplňky včetně Adobe Flash aj.

Projekt si budete moci tradičně stáhnout ve formátu pro vývojové prostředí Microsoft Visual C# 2008 Express Edition a můžete jej samozřejmě dále vylepšovat a přidat mu pokročilé funkce. Hotový projekt nám určitě pošlete a my jej zveřejníme v některém z dalších pokračování.

Náš webový prohlížeč bude umět následující funkce:

  • Podpora více záložek
  • Zobrazení vlastností stránky a zdrojového kódu
  • Tisk
  • Režim celé obrazovky

Jádro webového prohlížeče

Webové stránky budeme zobrazovat v komponentě WebBrowser kterou naleznete ve jmenném prostoru System.Windows.Forms. Jak jsem již zmiňoval, tato komponenta běží na jádře Internet Exploreru, takže výkon a podoba prohlížeče bude přímo záviset na aktuálně nainstalované verzi IE ve vašem počítači.

Podpora více záložek

Prohlížení v záložkách bude řešeno tak, že při otevření nového panelu se načte i nový prohlížeč. Jednotlivé prohlížeče pak budou uloženy v komponentě System.Windows.Forms.TabControl, ve které jsou panely představovány instancí třídy TabPage. Na každý z panelů pak umístíme vlastní komponentu WebBrowser.

Klepněte pro větší obrázek
Webový prohlížeč bude podporovat surfování v záložkách

// Vytvoří novou záložku
TabPage list = new TabPage("Nový list");

// Přidá jí do komponenty TabControl
tabControl1.TabPages.Add(list);

// Vytvoří nové okno prohlížeče
WebBrowser wb = new WebBrowser();
wb.Anchor = AnchorStyles.Right & AnchorStyles.Bottom;
wb.Dock = DockStyle.Fill;

// Přidá prohlížeč na záložku
list.Controls.Add(wb);

// Registruje událost oznamující dokončení stahování stránky v daném prohlížeči
wb.Navigated += new WebBrowserNavigatedEventHandler(Navigovano);

Pro navigaci na webovou stránku musíme zjistit, které z oken prohlížeče je aktuálně zobrazeno, a následně navigovat na webovou stránku, k tomu nám poslouží tato metoda:

void NastavTitulek(bool navigovano)
{
  label1.Text = "Načítám...";
  // Vybere záložku s aktuálně zobrazeným prohlížečem
  TabPage vybranyList = tabControl1.SelectedTab;
  // Vybere okno prohlížeče této záložky
  WebBrowser vybranyBrowser = (WebBrowser)vybranyList.Controls[0];
  // Registruje událost oznamující dokončení stahování
  vybranyBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(Hotovo);
  if (!navigovano)
    vybranyBrowser.Navigate(textBox1.Text);
  else
    textBox1.Text = vybranyBrowser.Url.ToString();
  // Nastaví titulek záložky na název webové stránky
  vybranyList.Text = vybranyBrowser.DocumentTitle;
  this.Text = vybranyBrowser.DocumentTitle;
}

Tuto metodu následně použijeme při navigování na webovou stránku:

void TextBox1KeyPress(object sender, KeyPressEventArgs e)
{
  // Pokud byla vybrána webová adresa klávesou Enter...
  if ((int)e.KeyChar == 13)
  {
    // ...bude načtena webová stránka
    NastavTitulek(false);
  }
}

Při přepínání mezi záložkami musíme vždy zobrazit webovou adresu prohlížeče na aktuálním panelu v textovém poli:

void TabControl1SelectedIndexChanged(object sender, EventArgs e)
{
  // Vybere aktuální záložku
  TabPage vybranyList = tabControl1.SelectedTab;
  // Vybere okno prohlížeče na této záložce
  WebBrowser vybranyBrowser = (WebBrowser)vybranyList.Controls[0];
  // Pokud není adresa prázdná, zobrazí se webová adresa v textboxu
  // a nadpis stránky v hlavičce okna
  if (vybranyBrowser.Url != null)
  {
    textBox1.Text = vybranyBrowser.Url.ToString();
    this.Text = vybranyBrowser.DocumentTitle;
  }
}

Zobrazení vlastností stránky a zdrojového kódu

Komponenta WebBrowser obsahuje několik implicitně vytvořených dialogů pro zobrazení vlastností stránky a tisk. Pro zobrazení dialogu pro tisk stránky nám poslouží metoda ShowPrintDialog.

Klepněte pro větší obrázek  Klepněte pro větší obrázek
Standardní dialog IE s vlastnostmi webové stránky a jednoduché zobrazení HTML kódu

WebBrowser vybranyBrowser = (WebBrowser)vybranyList.Controls[0];
// Zobrazí dialog pro tisk dané stránky
vybranyBrowser.ShowPrintDialog();

Pro zobrazení vlastností stránky je nutné zavolat metodu ShowPropertiesDialog:

// Zobrazí dialog s informacemi o stránce
vybranyBrowser.ShowPropertiesDialog();

Pro zobrazení zdrojového kódu použijeme vlastnost DocumentText:

TabPage vybranyList = tabControl1.SelectedTab;
WebBrowser vybranyBrowser = (WebBrowser)vybranyList.Controls[0];
// Zobrazí dialog pro uložení
SaveFileDialog sf = new SaveFileDialog();
// pokud si uživatel vybere místo kam chce zdrojový
// kód uložit...
if (sf.ShowDialog() == DialogResult.OK)
{
  // bude uložen metodou WriteAllText třídy System.IO.File
  System.IO.File.WriteAllText(sf.FileName, vybranyBrowser.DocumentText);
}

Režim celé obrazovky

Nakonec nesmí chybět ani slíbené přepnutí na celou obrazovku. S tím si poradí drobná změna vlastnosti okna a okraje a nastavení velikoosti formuláře do maximalizovaného stavu.

if (celaObrMenuItem.Checked)
{
  // Odstraní titulkovou lištu
  this.FormBorderStyle = FormBorderStyle.None;
  // Maximalizuje okno
  this.WindowState = FormWindowState.Maximized;
}
else
{
  this.FormBorderStyle = FormBorderStyle.Sizable;
  this.WindowState = FormWindowState.Normal;
}

Trident je všudypřítomný

Dnes jsme se obešli bez složitých algoritmů, téměř vše za nás totiž zpracovala komponenta webového prohlížeče. Nad oknem s webovou stránkou funguje klasická kontextová nabídka jak ji znáte z Internet Exploreru a náš prohlížeč přebírá také veškeré nastavení, nainstalované pluginy pro Adobe Flash, Silverlight aj. S trochou píle ale můžete tyto standardní výstupy přepsat a uzpůsobit podle svého gusta.

Zdrojový kód můžete upravit, vylepšit a rozšířit. Pak nám ho určitě pošlete na tento e-mail a my vaše úpravy zveřejníme v některém z příštích článků.

Komponentu WebBrowser nakonec nemusíte vůbec použít k prohlížení internetu, ale naopak jako prohlížeč libovolných HTML a XML dokumentů na počítači. Na Windows tak Trident používá většina RSS čteček, různé editory a prohlížeče a také komponenta IEView pro Mirandu.

Nakonec nesmí chybět ani slíbený spustitelný program a projekt. K prvnímu budete potřebovat nainstalovaný novější Microsoft .NET Framework, pakliže si budete chtít projekt upravit a sestavit, budete potřebovat bezplatné vývojové prostředí Microsoft Visual C# 2008 Express Edition.

Témata článku: Programování, Green, Blue, Trident, SF, Avant, Kody

13 komentářů

Nejnovější komentáře

  • Mila Kuba 10. 1. 2010 10:40:28
    Jak ho mám zkusit,když není žádný odkaz ..............
  • Keff 7. 9. 2008 19:26:05
    LOL - opensource v kostce: internetovy porvavac: "IE sux, use FF"...
  • sasab 5. 9. 2008 14:40:57
    fakticky jsou oboje zalozky, protoze jsou zalozeny na myslence, ze si do...
Určitě si přečtěte

Původní Starcraft: Brood War je nyní zdarma. Konec práce! Jde se pařit

Původní Starcraft: Brood War je nyní zdarma. Konec práce! Jde se pařit

** Legendární hra Starcraft je nyní k dispozici zdarma ** Chystá se i nová remasterovaná verze s hezčí grafikou

19.  4.  2017 | Jakub Čížek | 25

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

** Máte nápad, ale chybí vám stroje a pořádná dílna? ** Chcete postavit ptačí budku, nebo krabičku pro Arduino? ** Brno otevřelo svůj FabLab – laboratoř pro bastlíře

19.  4.  2017 | Jakub Čížek | 31

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

Včera | Pavel Tronner | 19


Aktuální číslo časopisu Computer

První test AMD Ryzen

Velké testy: 22 powerbank a 8 bezdrátových setů

Radíme s koupí Wi-Fi routeru

Co dokáží inteligentní domy?