HtmlDocument ve Web Sayfası Bileşenlerinin Windows Formlardan Kontrolü

Makale
HtmlDocument ve Web Sayfası Bileşenlerinin Windows Formlardan Kontrolü Bu makalede Visual Studio 2005 içerisindeki HtmlDocument nesnesini ayrıntılarıyla göreceğiz. HtmlDocument, Windows formlardan webbrowser sayesinde html içeriğini dinamik olarak kontrol etmemize yardımcı olacak. HtmlDocument HtmlDocument, Windows uygulamalarında kullandığımız webbrowser’in sayfayı yükledikten sonra oluşturduğu html dokümanını formumuzdan dinamik olarak kontrol etmemizi sağlayan class yapısıdır. Kısaca Windows formumuzdan (Document Object Model) DOM içerisinde bulunan nesnelere erişimimizi sağlar. HtmlDocument, WebBrowser.Document nesnesi içerisindeki html sayfasının html tagları arasındaki datayı kullanır.Bu taglar arasındaki kodlar doküman sayfamızı oluşturur. <html> *<head>* *<title>HtmlDocument </title>* *</head>* *<body>* *<input id="Button1" type="button" value="button" />* <iframe id="Frame1"></iframe> *</body>* </html> Böyle bir örnek html kodu içerisinde HtmlDocument ve onun nesnelerini tanımaya başlayalım. İlk olarak bahsedilmesi gereken tabi ki Html taglarıdır. Yukarıda da bahsedildiği gibi bu taglar html dokümanımızın içeriğini almamızı sağlar. Daha sonra gelen Head ve Body bölümleri ise HtmlDocument içerisindeki HtmlElement’ lerdir. Html Elementler gerçekte bizim iş üretmemizi sağlayacak sayfa içindeki kontroller ve bloklardır. Aynı şekilde Input olarak tanımladığımız butonumuzda bir HtmlElement’ tir ve bu makale süresince asıl kullanacağımız kontrollerdendir. HtmlElement daha sonraki bölümlerde daha ayrıntılı anlatılacaktır. HtmlDocument içerisindeki All, Body ve Forms koleksiyonları a) All All, bir HtmlElementCollection(HtmlElement nesnelerini tutan dizi yapısı) nesnesidir. Bu nesne, sayfada bulunan head, body kısımlarını ve diğer tüm kontrolleri içerisinde barındırır.Kısaca “Html” tagları arasındaki tüm nesneleri içerisinde barındırır. b) Body Bu koleksiyon ise sadece “Body” tagı içerisindeki nesneleri içerisinde barındırır. webBrowser1.Document.Body.TagName; Örnek kodumuz bize yine “BODY” string’ini döndürecektir. c) Forms Forms, koleksiyonu sayfa içerisindeki formlara erişimimizi sağlar. Sadece “Form” tagı altında bulunan nesnelere erişebiliriz. webBrowser1.Document.Forms[0].InnerHtml; Örnek kodumuzda dokumandaki ilk formun HTML kodunu elde ederiz. Buradan sonra IFRAME ‘i anlatmak gerekirki bu diğer bahsettiğimiz iki yapıdan biraz farklı olan HtmlWindow’ u işaret eder. HtmlWindow’ da HtmlDocument nesnelerini barındıran yapıdır. Bu örnekte IFRAME ile oluşturduğumuz ikinci bir HtmlDocument penceremiz olacak ki Framelere nasıl ulaşabileceğimiz görülebilsin. Şu durum itibariyle makalemiz üç kısma ayrılmış olur. HtmlWindow > HtmlDocument > HtmlElement O halde diğer iki nesnemizi de tanıyalım. HtmlWindow HtmlWindow bir yada birkaç tane HtmlDocument nesnesini bünyesinde barındırabilen class yapısıdır. Örneğimizde kullandığımız IFRAME gibi frame yapısına dayanır. Burada karıştırılmaması gereken WebBrowser kontrolümüzün bir HtmlWindow olmayışıdır. HtmlWindow form içerisindeki herhangi bir pencerede değildir. Tümüyle ayrı bir yapıda dokümanımızın yerleşimi ve kontrolünü sağlayan bir niteliktedir. Bunun dışında sayfamızda mesaj, uyarı ve onay kutularını görüntüleyebilmek için HtmlWindow nesnesini kullanırız. Örnek vermek gerekirse webBrowser1 adı altında yarattığımız WebBrowser nesnemizin Navigate() metodunu çağırarak yukarıda yazdığımız html kodunu içeren sayfamıza yönlendirelim(Main.htm). webBrowser1.Navigate("C:\\Main.htm"); webBrowser1.Document.Window.Alert("HtmlWindow!!!"); Aynı şekilde Prompt() ve Confirm() metodlarıyla değişik mesaj kutuları elde edebiliriz. HtmlWindow çoklu framelerden oluşuyorsa istenen frame’in içeriğine ulaşabilmek için şu örnektekine benzer bir kod yazmamız gerekir.. webBrowser1.Document.Window.Frames[0].Document.Title = “HtmlDocument”; Bu dinamik olarak form üzerinden yaratacağımız html sayfalarında işimizi görebilecek metodlardandır. HtmlWindow’u kısaca inceledikten sonra HtmlElement ile yolumuza devam edelim. HtmlElement HtmlElement’ler sayfamızın asıl bileşenleri,gerçekte sayfamızın görünümü ve iş yapan kısımlarıdır.HTML kontrolü olarak sayfamıza eklediğimiz metin kutuları,butonlar ve diğer tüm kontroller(FORM,INPUT vs…) birer HtmlElement’tir. HtmlDocument içerisindeki HtmlElement’leri tutmak HtmlDocument öncedende belirttiğim gibi HtmlElement nesnelerinden oluşmaktadır.Öyleyse biz bu nesneleri nasıl yakalayıp işlem yapabileceğiz? Bu sorunun cevabı da bundan sonraki konumuzu oluştursun. a) GetElementById webBrowser1.Document.GetElementById(“txtUsername”); GetElementById fonksiyonu ile sayfa içerisindeki herhangi bir nesneyi Id’si ile yakalarız.Bu örnekte id’si txtUsername olan bir metin kutusu tutularak işlem yapılır. b) GetElementsByTagName Bu fonksiyon ile html tagı parametre olarak verilen nesneler bir HtmlElemenCollection dizisi içerisine atılır ve bu nesneler ile işlemler yapılır. webBrowser1.Document.GetElementsByTagName(“TABLE”); Bu örnekte Html tagı “TABLE” olan nesneler tutulur. c) ActiveElement ActiveElement özelliği ile o anda farenin fokuslandığı kontrol tutulur. webBrowser1.Document.ActiveElement.Id; Bunun dışında GetElementFromPoint() fonksiyonu ile sayfanın herhangi bir noktasındaki kontroller tutulabilir. HtmlElement’in önemli özellikleri ve metodları a) GetAttribute Sayfa içerisindeki bir kontrolün herhangi bir özelliğini yakalamamızı sağlar. webBrowser1.Document.GetElementById(“Button1”).GetAttribute(“value”); Örnek kodumuzda Button1 adındaki kontrolün üstündeki metni alırız. b) SetAttribute GetAttribute fonksiyonunda aldığımız özellik bilgilerini SetAttribute komutu ile kendimiz gireriz. webBrowser1.Document.GetElementById(“Button1”).SetAttribute(“value”) = “HtmlDocument!!!”; c) InvokeMember InvokeMember tutmuş olduğumuz kontrolümüzün herhang bir olayını(event) tetiklememize yarar. webBrowser1.Document.GetElementById(“Button1”).InvokeMember(“click”); Bu kodu yazarak Button1 nesnesini click olayını tetiklemiş oluruz. HtmlElement ve HtmlDocument ile İlişkileri HtmlElement bahsettiğimiz diğer yapılar arasında en küçük(alt) birimimizdir. Şimdi HtmlElement’i HtmlDocument ile nerelerde ve nasıl kullanacağımızı görelim. Bu örnek formumda iki metin kutusu, bir buton ve bir web browser öğesi kullandım. Senaryomuz şu: —Kullanıcı metin kutularından birisine kullanıcı adını, diğerine şifresini girecek ve butona tıkladığında kullanıcı Yahoo! mailine giriş yapabilecek. —Kullanıcı adı ve şifremiz doğruysa bir mesaj kutusu çıkacak ve “Giriş Başarılı” diyecek. Herhangi bir yanlış bilgi girilmesi durumunda ise “Kullanıcı Adı veya Parolası Hatalı!” uyarısı verecek. *Form Görüntüsü* a) Formumuzun açılışında webbrowserimizin yahoo.com’ a bağlanmasını sağlayalım. private void Form1_Load(object sender, EventArgs e) { webBrowser1.Navigate("http://www.yahoo.com"); } b) Sayfamız web browser’ a yüklendikten sonra Giriş butonumuzun click olayına şunları yazalım. private void btnGiris_Click(object sender, EventArgs e) { webBrowser1.Document.GetElementById("username").InnerText = txtKullaniciAdi.Text.Trim(); webBrowser1.Document.GetElementById("password").InnerText = txtParola.Text.Trim(); } Bu bölümdeki kodları incelersek, browser’ a yüklenen sayfa içindeki bir takım elementlerin “id” lerinden yakalanarak o elementlerin InnerText özelliklerine metin kutularımızdaki değerlerimizi atadığımızı görüyoruz. Burdaki idler Yahoo! Mail sayfasındaki kullanıcı adı metin kutusu(username) ve parola metin kutusu(passwd) idleridir.Kısacası kendi formumuzdan bu metin kutularına değer atayabiliyoruz. Değerlerimizi girebiliyoruz, silebiliyoruz, görebiliyoruz.Peki sayfa içindeki olayları,butonları nasıl kontrolumuz altına alacağız.Özetle sorun şu kullanıcı adı ve parola değerleri girildikten sonra sayfamızdaki butonumuzu formumuzdaki giriş butonundan nasıl yönlendireceğiz? İşte bu aşamada işin içine yine HtmlElement giriyor ve Giriş butonumuzun click olayına yazdığımız kodu biraz daha genişletiyoruz. private void btnGiris_Click(object sender, EventArgs e) { webBrowser1.Document.GetElementById("username").InnerText = txtKullaniciAdi.Text.Trim(); webBrowser1.Document.GetElementById("passwd").InnerText = txtParola.Text.Trim(); foreach (HtmlElement HtmlElement1 in webBrowser.Document.Body.All) { if (HtmlElement1.GetAttribute("value") == "Sign In") { HtmlElement1.InvokeMember("click"); } } } Görüldüğü üzere “Sign In” butonunun id si de olmayınca sayfa üzerinde bu butonun üzerinde yazan etiketten htmlelementimizi yakaladık.Daha sonra bu elementin click olayını tetikledik.Böylece kullanıcı adımız ve parolamız Yahoo sunucularına ulaşmış oldu… Dolayısıyla bize geri dönecek değerler gerekiyorki biz yanlışmı doğrumu şifre girdiğmizi anlayabilelim.Bunun için web browserımızın Navigated olayına şunları yazıyoruz. private void webBrowser_Navigated( object sender, WebBrowserNavigatedEventArgs e) { if (webBrowser1.Document.Body.InnerHtml.IndexOf("Invalid ID or password") < 0) { MessageBox.Show("Giriş Başarılı"); } else MessageBox.Show("Kullanıcı Adı veya Parolası Hatalı!"); } En baştaki if cümlesinde geçen “Invalid ID or password” bölümü Yahoo’nun hatalı şifre sayfası üretmesi sonucu kullanıcıya gönderdiği mesajdır.Bunu algılayan program şifre hatası verecektir.Bu cümle geçmiyorsa sisteme giriş yapılır. Tabiiki bu örnekte herhangi bir hata kontrolü yapılmadı herhangi bir problem olmazsa daha sonrasında mailinizi açıp oradaki verileri yine HtmlElement kullanarak formunuza aktarabilirsiniz. Ejder KUVEMLİ MCP ejder.kuvemli@bilgeadam.com ekuvemli@hotmail.com

Makaleyi nasıl buldunuz?
Makaleye puan vermek için üye girişi yapmanız gerekmektedir.

HtmlDocument ve Web Sayfası Bileşenlerinin Windows Formlardan KontrolüPrint Versiyonu

HtmlDocument ve Web Sayfası Bileşenlerinin Windows Formlardan Kontrolü

Print Versiyonu