reklama

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, Dialog, SF, Avant

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...
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 104

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 85


reklama