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í, Avant, Blue, Green, Kody, SF, Trident, Záložka, Webová stránka, Vývojový režim, Slíbená podpora, Prohlížeč

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

Vrcholí bitcoinová občanská válka. Populární kryptoměně hrozí krize nebývalých rozměrů

Vrcholí bitcoinová občanská válka. Populární kryptoměně hrozí krize nebývalých rozměrů

** Všichni chtějí rychlejší a lepší Bitcoin ** Jenže každý má trošku jiné zájmy ** Spor může už za pár dnů skončit velkou krizí

16.  7.  2017 | Jakub Čížek | 73

Atomová bomba: 15 nejpozoruhodnějších a nejničivějších explozí historie

Atomová bomba: 15 nejpozoruhodnějších a nejničivějších explozí historie

** 16. 7. 1945 v Novém Mexiku proběhl historicky první jaderný test ** Krátce poté byly svrženy atomové bomby na japonská města Hirošimu a Nagasaki ** Netrvalo dlouho a tyto ničivé zbraně začaly vyvíjet i další země

16.  7.  2017 | Jiří Černý


Aktuální číslo časopisu Computer

Test 11 telefonů do 6 000 Kč

Postavte si a přetaktujte počítač

Srovnali jsme 7 sportovních kamer

Která zaměstnání nahradí roboti?