Nis 16 2010

Asp.Net'de Ext JS kullanımı

Category: Ext JS | Asp.Net | JavascriptOğuz Durmuş @ 18:08

Bu makalede Ext JS javascript kütüphanesinin asp.net'de kullanımıyla ilgili küçük bir örnek anlatmaya çalışacağım. Bu örnekte geliştireceğim temel sınıfları, arayüzleri ve yardımcı sınıfları, daha sonraki makalelelerde de kullanacağız.

Ext JS'in gereksinimleri

Ext JS'in asp.net projemizdeki herhangibir sayfada çalışabilmesi için gereksinim duyduğu 3 adet dosya vardır. Bunlar:

  • ext-all.css
  • ext-base.js
  • ext-all.js

dosyalarıdır. Bu dosyaların sayfamızda referarnslarının olması yeterlidir.

Bu 3 dosyanın yanısıra Ext JS kütüphanesiyle birlikte gelen dil seçeneklerinden sizin için uygun olan dil dosyasının referansını da vermeniz gerekir. Dil referansını eklemezseniz Ext JS ingilizce olarak çalışacaktır.

İşe Visual Studio'da yeni bir solution açıp ismini "BlogSample" koymakla başlıyalım. Daha sonra solution'a temel sınıflarımızı barındıracak bir Class Library ekleyelim ve adını da "Sample.Core" koyalım. Bu class library web ile ilgili işlemler yapacağından referanslarına "System.Web" kütüphanesini de ekleyelim. Öncelikle "Sample.Core" class library'sine temel sınıflarımızı yazalım;

"Sample.Core" class library'sinin içerisine "Common" isimli bir folder ekleyip, Bu folder'a "HtmlUtils.cs" isimli bir class ekleyelim. Bu sınıfın amacı içne yazacağımız yardımcı method'larla HTML işlemlerinde bize yardımcı olmasını sağlamaktır.

HtmlUtils.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.HtmlControls;
using System.Web.UI;

namespace Sample.Core.Common
{
    /// <summary>
    /// Html yardımcı sınıfı
    /// </summary>
    public static class HtmlUtils
    {
        /// <summary>
        /// Kendisine parametre olarak verilen style sheet path'inden System.Web.UI.HtmlControls.HTMLLink üretilmesini sağlar
        /// </summary>
        /// <param name="cssUrl">HTMLLink üretilecek css file'ının absolute path'i</param>
        /// <param name="urlResolutionService">url sonucunu resolve edecek servis</param>
        /// <returns>System.Web.UI.HtmlControls.HTMLLink</returns>
        public static HtmlLink BuildCssLinkByUrl(string cssUrl, IUrlResolutionService urlResolutionService)
        {
            HtmlLink link = new HtmlLink();
            link.Attributes.Add("href", urlResolutionService.ResolveClientUrl(cssUrl));
            link.Attributes.Add("type", "text/css");
            link.Attributes.Add("rel", "stylesheet");
            return link;
        }

        /// <summary>
        /// Kendisine parametre olarak verilen javascript path'inden script tag'ı üretilmesini sağlar
        /// </summary>
        /// <param name="src"></param>
        /// <returns></returns>
        public static string BuildJsSrc(string src)
        {
            return string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", src);
        }

    }
}


Yine "Common" folder'ına "ExtFileManager.cs" isimli bir class ekleyelim. Bu sınıfın amacı da Ext JS'in ve 3. parti ext js component geliştiricilerinin geliştirdiği componet'lerin çalışabilmesi için ihtiyaç duydukları dosyaları yönetmek olacaktır.

ExtFileManager.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Sample.Core.Common
{
    /// <summary>
    /// Ext JS'in ve 3. parti ext js component geliştiricilerin geliştirdiği component'lerin çalışabilmesi için ihtiyaç duydukları 
    /// dosyaları yöneten sınıf.
    /// </summary>
    public class ExtFileManager
    {
        private IList<string> cssFiles;
        private IList<string> jsFiles;

        public ExtFileManager(IList<string> cssFiles, IList<string> jsFiles)
        {
            this.cssFiles = cssFiles;
            this.jsFiles = jsFiles;
        }

        /// <summary>
        /// Ext js'in application'da bulunduğu dizin.
        /// </summary>
        /// <returns>default olarak "/JSLib/ext-3.2.0" döndürür.</returns>
        protected virtual string GetExtLibPath()
        {
            return "/JSLib/ext-3.2.0";
        }
        
        /// <summary>
        /// Ext js'in core dosyalarının eklendiği method'dur
        /// </summary>
        /// <param name="cultureName">İki karakterli dil adı. Örneğin Türkçe için 'tr', almnca için 'de'. 
        /// Null bırakılırsa default ingilizce olur</param>
        /// <returns>ExtFileManager</returns>
        public ExtFileManager AddExtCore(string cultureName)
        {
            cssFiles.Add(string.Format("~/{0}/resources/css/ext-all.css", this.GetExtLibPath()));

            jsFiles.Add(HtmlUtils.BuildJsSrc(string.Format("{0}/adapter/ext/ext-base.js", this.GetExtLibPath())));
            jsFiles.Add(HtmlUtils.BuildJsSrc(string.Format("{0}/ext-all.js", this.GetExtLibPath())));
            if (cultureName != null)
                jsFiles.Add(HtmlUtils.BuildJsSrc(string.Format("{0}/src/locale/ext-lang-{1}.js", this.GetExtLibPath(), cultureName)));
            return this;
        }

        /// <summary>
        /// Ext js'in example olarak verdiği 'spotlight' compenent'inin eklendiği method'dur.
        /// </summary>
        /// <returns>ExtFileManager</returns>
        public ExtFileManager AddSpotLight()
        {
            jsFiles.Add(HtmlUtils.BuildJsSrc(string.Format("{0}/examples/ux/Spotlight.js", this.GetExtLibPath())));
            return this;
        }
    }
}

"Sample.Core" class library'sinin içerisine "Base.Presenter" isimli bir folder ekleyip, Bu folder'a "BasePage.cs" isimli bir class ekleyelim. Bu sınıfımız System.Web.UI.Page sınıfından türüyecek ve bizim temel web page'imiz olacak.

BasePage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.HtmlControls;
using Sample.Core.Common;

namespace Sample.Core.Base.Presenter
{
    /// <summary>
    /// Temel web sayfası sınıfı
    /// </summary>
    public class BasePage : System.Web.UI.Page
    {
        private IList<string> cssFiles;
        private IList<string> jsFiles;

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            this.cssFiles = new List<string>();
            this.jsFiles = new List<string>();

            this.Initiliaze();
            this.AddItemsToPage();
        }

        /// <summary>
        /// Sayfa değişkenlerinin hazırlandığı method. Bu method'da header control, 
        /// style sheet'ler ve javascript kodları sayfa'ya eklenir
        /// </summary>
        protected virtual void Initiliaze()
        {
            this.InitiliazeHeaderControl(this.Page.Header);
            this.InitiliazeCssAndJSFiles(this.cssFiles, this.jsFiles);
        }

        /// <summary>
        /// Sayfa dilinin ayarlandığı method'dur
        /// </summary>
        /// <returns>sayfa dilini döndürür. Default "tr" döner.</returns>
        protected virtual string GetCultureName()
        {
            //return System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName;
            return "tr";
        }

        /// <summary>
        /// Sayfa header'ının hazırlandığı method'dur
        /// </summary>
        /// <param name="head">Sayfa header'ı</param>
        protected virtual void InitiliazeHeaderControl(HtmlHead head)
        {
            head.Controls.Add(new HtmlMeta()
            {
                Name = "http-equiv",
                Content = "content-type: text/html; charset=UTF-8"
            });
        }

        /// <summary>
        /// Style sheet ve javascript dosyalarının path bilgilerinin toplandığı method'dur
        /// </summary>
        /// <param name="cssFiles">Style sheet dosya listesi</param>
        /// <param name="jsFiles">Javascript dosya listesi</param>
        protected virtual void InitiliazeCssAndJSFiles(IList<string> cssFiles, IList<string> jsFiles)
        {
        }

        /// <summary>
        /// Style sheet'ların page header'a, javascript dosyalarının page'in sonuna eklenmesini sağlayan 
        /// method'dur
        /// </summary>
        protected virtual void AddItemsToPage()
        {
            this.AddCssToPageHeader(this.Page.Header, this.cssFiles);
            this.AddJsToPageFooter(this.jsFiles);

        }

        private void AddCssToPageHeader(HtmlHead head, IList<string> cssFiles)
        {
            foreach (string css in cssFiles)
                head.Controls.Add(HtmlUtils.BuildCssLinkByUrl(css, this));
        }

        private void AddJsToPageFooter(IList<string> jsFiles)
        {
            foreach (string js in jsFiles)
                ClientScript.RegisterStartupScript(GetType(), js.GetHashCode().ToString(), js);
        }

    }
}

Yine "Base.Presenter" folder'ına "ExtBasePage.cs" isimli bir class ekleyelim ve sınıfımızı "BasePage"den türetelim. Bu sınıfın amacı da Ext JS'in ve 3. parti ext js component geliştiricilerinin çalışabilmesi için ihtiyaç duydukları dosyaları page'e referans olarak eklemek olacak.

ExtBasePage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Sample.Core.Common;

namespace Sample.Core.Base.Presenter
{
    /// <summary>
    /// Ext js kullanacağımız sayfalar için temel page sınıfı
    /// </summary>
    public class ExtBasePage : BasePage
    {
        private ExtFileManager extFiles;

        /// <summary>
        /// Lazy ExtFileManager döndüren method
        /// </summary>
        /// <param name="cssFiles">Style sheet file listesi</param>
        /// <param name="jsFiles">Js file listesi</param>
        /// <returns>ExtFileManager</returns>
        protected ExtFileManager GetExtFileManager(IList<string> cssFiles, IList<string> jsFiles)
        {
            if (this.extFiles == null)
                this.extFiles = new ExtFileManager(cssFiles, jsFiles);
            return this.extFiles;
        }

        /// <summary>
        /// Ext JS in core style sheet ve javascript dosyalarının path bilgilerinin toplandığı method'dur
        /// </summary>
        /// <param name="cssFiles">Style sheet dosya listesi</param>
        /// <param name="jsFiles">Javascript dosya listesi</param>
        protected override void InitiliazeCssAndJSFiles(IList<string> cssFiles, IList<string> jsFiles)
        {
            base.InitiliazeCssAndJSFiles(cssFiles, jsFiles);
            this.GetExtFileManager(cssFiles, jsFiles).AddExtCore(this.GetCultureName());
        }
    }
}

Base sınıflarımızı yazdığımıza göre artık web sitemize geçebiliriz. Bunun için solution'ımıza yeni bir "Web Application" ekleyelim ve adınıda "Sample" koyalım. Ardından "Sample.Core" class library'sinin referansını web application'a ekleyelim. Ext JS'in sitesinden download ettiğimiz Ext JS kütüphanesini web projemizin kök dizininin içerisine "JSLib\ext-3.2.0" (Bu makale yazılırken Ext Js'in son versiyonu 3.2.0'dı) isimli folder'a kopyalayıp, projeye dahil edelim. Artık Ext JS çalışmalarımıza başlıyabiliriz.

İlk çalışmamız Ext JS'in doğru olarak yüklenip yüklenmediğini test etmek olsun. Bunun için web projemizin kök dizininde "Samples\ExtJSLoad" isimli bir folder açalım. Bu folder'a "ExtJSLoadTest.js" isimli bir javascipt ekleyelim.

ExtJSLoadTest.js

Ext.onReady(function() {
    
    Ext.Msg.show({
        title: 'Bilgilendirme',
        msg: 'Ext JS başarıyla yüklendi',
        buttons: Ext.Msg.OK,
        icon: Ext.MessageBox.INFO
    });
});

"ExtJSLoadTest.js" dosyasında "Ext.onReady" event'ı sayfadaki herşey yüklenip, sayfanın DOM (Document Object Model)'ı hazır olduğu zaman tetiklenir. Yani bizim testimiz için uygundur. Biz yukarıdaki javascript kodu vasıtasıyla bu event tetiklendiğinde ekrana Ext kütüphanesini kullanarak "Ext JS başarıyla yüklendi" mesajı çıkartıyoruz. Eğer sayfa yüklendikten sonra bu mesajı görüyorsak Ext'i doğru olarak yüklemişiz demektir. "ExtJSLoadTest.js" isimli javascript dosyasını çalıştırmak için "Samples\ExtJSLoad" isimli folder'a "ExtJSLoadTest.aspx" isimli bir page ekleyim ve "aspx" tarafında hiç bir değişiklik yapmadan code behind'a geçelim.

ExtJSLoadTest.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sample.Core.Common;

namespace Sample.Samples.ExtJSLoad
{
    public partial class ExtJSLoadTest : Sample.Core.Base.Presenter.ExtBasePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void InitiliazeCssAndJSFiles(IList cssFiles, IList jsFiles)
        {
            base.InitiliazeCssAndJSFiles(cssFiles, jsFiles);
            jsFiles.Add(HtmlUtils.BuildJsSrc("/Samples/ExtJSLoad/ExtJSLoadTest.js"));
        }
    }
}

Aspx file'ımızın code behind'ında dikkat edeceğimiz nokta, sayfamızı "System.Web.UI.Page"den değil, "Sample.Core.Base.Presenter.ExtBasePage" den türetmek olacaktır. Daha sonra "InitiliazeCssAndJSFiles" methodunu override ederek istediğimiz javascript ve css dosyalarını sayfamıza ekleyebiliriz.

Sonunda solution'ımız aşağıdaki gibi olacaktır.

Benzer yapıyı daha sonraki örneklerimizde de kullanacağız. Sayfayı test etmek için web application'ı çalıştırmanız yeterli olacaktır.

Tags: , ,

Nis 6 2010

Ext JS Javascript Kütüphanesi

Category: Javascript | Ext JSOğuz Durmuş @ 12:11

Bu makalede bir framework ve uygulama geliştirici takımı olarak neden EXT JS'i web uygulamalarında çekirdek teknoloji olarak tercih ettiğimizi anlatmaya çalışacağım.

Neden Javascript'e ihtiyacımız var?

Her şey "Web uygulamalarının da masa üstü uygulamalar gibi zengin ve kullanıcıyla yüksek etkileşimli olmalı" gereksiniminin karşılanma ihtiyacından başladı. Bu ihtiyaçların çoğunu asp.net programlama teknikleriyle çözebilmenin pek mümkün olmadığı hemen anlaşılmakta. Klasik asp.net programlamada arayüzler server'da oluşturulur ve kullanıcının tarayıcısına gönderilir. Bu noktadan sonra kullanıcının her etkileşimi sunucuya istek olarak gönderilir ve isteğe karşılık gelen cevap yeniden kullanıcı tarayıcısına gönderilir. Bu gidiş gelişler uygulamanın kabul edilebilir yavaşlık sınırını kısa sürede aşmasına sebep olur. Bu problem aslında sadece asp.net dünyasının problemi değil, web uygulaması geliştiricilerinin tamamının ortak sorunudur.

Bu noktada tüm geliştiricilerin kurtarıcısı ajax (Asynchron javascript and XML) olmuştur. Ajax temelde kullanıcının interaktif taleplerini javascript ile XML modeline çevirip, bu talebi asenkron olarak sunucuya bildirip, gelen XML cevabı alıp yine javascript yardımıyla DOM ve DHTML teknikleri kullanarak tarayıcıda işlenmesini sağlanmasına olanak tanımaktadır. Bu sayede tüm sayfa verisinin her seferde server'a gönderilip, gelen sayfanın yeniden render edilmesi zamanından tasarruf edilir. Ayrıca istek ve cevapların asenkron olması, işlem tamamlanana kadar tarayıcı üzerinde kullanıcının başka işler yapabilmesine de olanak sağlar.

Ajax'la beraber uygulama kodlarının önemli bölümü ajax istek ve cevaplarına ve gelen cevapların DOM ve DHTML javascript kodlarıyla işlenmesine dönüşmektedir. Ajax temelde iki adet javascript fonksiyonundan oluşmakla birlikte, tüm bu süreci otomatize eden, tekrar kullanılabilir, tarayıcı uyum problemi olmayan, denenmiş bir kütüphaneyi kullanmak, oturup kendi ajax kütüphanemizi yazmaktan (Yazamıyacağımızdan değil, asıl işimiz bu olmadığından) daha kolay olacaktır. Bununla birlikte kullanmayı düşündüğümüz javascript kütüphanesi gelişmiş kullanıcı arayüzü kontrolleri de sunuyorsa, bizim gibi CSS ile, style, tema ile fazla uğraşmak istemeyen geliştiriciler için tercih sebebi olacaktır.

Bu aşamada ekip olarak dünya genelinde kullanılan ve büyük kabul görmüş tüm javascript kütüphanelerini inceledik. Bunların büyük çoğunluğu çok başarılı kütüphaneler olmakla birlikte, Ext JS kütüphanesi sağladığı javascript sınıf hiyerarşisi, AJAX, DOM ve DHTML yetenekleri, gelişmiş kullanıcı arayüzü kontrolleri, arkasında kurumsal kimlikle birlikte gönüllü geliştiricilerden oluşan bir topluluğun olması ve tüm kütüphanenin kolayca genişletilmeye açık olması sabebiyle tarafımızdan tercih edildi.

Ext JS Kütüphanesi

Ext JS interaktif web uygulamaları geliştirmek için yazılmış bir javascript kütüpanesidir. Kütüphane, temelinde AJAX, DOM ve DHTML tekniklerini yoğun olarak kullanmaktadır. İlk çıkış noktası YUI (Yahoo User Interface)'e eklenti olmakla birlikte geçen zaman içerisinde YUI'den bağılımlılığını 1.1 versiyonundan itibaren koparmıştır. Şu an itibariyle hiçbir dış kütüphane içermemektedir. Bununla birlikte JQuery ve Prototype javascript kütüphaneleriyle birlikte çalışabilmektedir.

Ext JS GUI kontrolleri

  • Checkbox,CheckboxGroup kontolleri
  • Combobox kontrolü
  • CompositeField kontrolü
  • DateField kontrolü (Pop up gün seçimli)
  • DisplayField kontrolü
  • Fieldset kontrolü
  • Hidden field kontrolü
  • HtmlEditor kontrolü
  • Label kontrolü
  • NumberField kontrolü
  • Radio, RadioGroup kontrolleri
  • SliderField kontrolü
  • TextField ve TextArea kontrolleri
  • TimeField kontrolü
  • TriggerField kontrolü
  • TwinTrigerField kontrolü
  • Grid kontrolü (Sadece okunur veya yazılabilir modlarda, sort edilebilir, kilitlenebilir ve taşınabilir kolonlu, ve daha bir çok özellikleri olan)
  • Tree kontrolü
  • Tab panels kontrolü
  • Toolbars kontrolü
  • Masa üstü uygulama stili menu kontrolü
  • Region panels kontrolü
  • Sliders kontrolü
  • Flash charts kontrolleri

Tüm bu kontroller Ajax ile sunucu tarafıyla haberleşebilmektedir.

Uygulama Desteği

Model dialog windowları
Etkileşimli kullanıcı giriş kontrolleri sunumu
State yönetimi

Diğer özellikler

Sayfaki elementler üzerinde işlem yapmanızı sağlayan DOM selector sınıfı,
Data yönetimini sağlayan store ve store'dan türemiş sınıflar,
JSON ve XML formatındaki sınıfları yönetmek için sınıflar



Web site : www.extjs.com
Dökümantasyon : http://www.extjs.com/deploy/dev/docs/
Lisans : Dual Lisans (Open Source Licence ve Commercial License)
Support : Lisansa bağlı ticket sistemi veya Forum desteği (Ücretsiz)
Demo ve Örnekler : www.extjs.com/deploy/dev/examples/

 

Tags: ,