Custom Info Bileşeni Oluşturma

Aşağıda Visual Studio 2005 ve MapXtreme 2005 6.7.1 kullanarak özel bir info aracının nasıl oluşturulabileceğini adım adım anlatmaya çalıştım.

Not: Burada 6. adıma kadar anlatılanlar sıfırdan bir MapXtreme web projesi oluşturmayı içermektedir. Eğer hali hazırda bir MapXtreme web projeniz varsa ve bu Info aracını projenize eklemek isterseniz 6. adımdan devam edebilirsiniz.

1) Özel ihtiyacımızı karşılayacak bir custom web tool (burada info tool) yazmak için işe yeni bir blank solution ekleyerek başlayacağız.

Bunun için Visual Studio’da File > New Project… menüsünü seçerek New Project penceresini açın.

Project types listesindeki Other Project Types altında bulunan Visual Studio Solutions tipini seçin. Templates listesinde Blank Solution seçeneği görülecektir. Bunu seçin ve alt taraftaki Name ve Location bilgilerini uygun şekilde girin. OK butonuna tıklayarak boş bir solution oluşturun.

2) MapXtreme projemizi bu solution a eklemeden önce gerekli proje dizinini oluşturun. Bunun için *.sln dosyasının bulunduğu dizinde önce “MapXtremeCustomToolsWebApp” adlı bir dizin oluşturun, daha sonra IIS te bu dizini gösteren yeni bir sanal dizin (virtual directory) oluşturun.

3) Solution Explorer’da solution üzerine sağ tıklayarak Add > New Web Site… tıklayın. Aşağıdaki Add New Web Site penceresi açılır:

Templates listesinden MapXtreme X.X.X Web Application şablonunu seçin. Browse… butonuna tıklayarak Local IIS  bölümünden MapXtremeCustomToolsWebApp sanal dizinini (2. adımda oluşturmuştuk) seçin ve Open butonuna tıklayın. Yukarıdaki Add New Web Site penceresinde görüldüğü gibi MapXtreme projesinin http adresi Location alanında gösterilir. OK butonuna tıklayarak MapXtreme projesini (web site) oluşturun.

4) MapForm.aspx sayfasına sağ tıklayarak Set As Start Page seçeneğini işaretleyin.

5) Projeyi çalıştırın. Eğer Unable to make the session state request to the session state server sunucu hatası alıyorsanız web.config dosyasındaki

sessionState mode="StateServer"

değerini

sessionState mode="InProc"

ile değiştirin. Bu şekilde MapXtreme projemizi çalışır vaziyete getirmiş olduk.

6) Şimdi sıra solution a bir custom component projesi eklemeye geldi. Bunun için Solution Explorer’da solution a sağ tıklayın, Add > New Project… seçin.

Açılan Add New Project penceresinde Visual C# altındaki Windows seçeneğine tıklayarak sağdaki şablonlardan Web Control Library seçeneğini seçin, Name ve Location alanlarını gerekli şekilde doldurun ve OK butonuna tıklayın. Yeni web control library projemiz solution a eklenecektir.

7) Yeni oluşturduğumuz projemizde otomatik olarak oluşturulan WebCustomControl1.cs sınıfına sağ tıklayın ve Delete menüsü ile silin.

8 ) Şimdi kendi web bileşenimizi oluşturmadan önce ilk olarak Info aracımızın bulunacağı paketi (dizini) oluşturalım. (İleride Custom.WebControls projemize yeni araçlar eklemek istersek onları da kendi paketlerinde oluşturup kargaşaya mahal vermemiş oluyoruz.) Web control projenize sağ tıklayarak Add > New Folder seçin. Yeni dizinin adını Info yapın.

9) Bundan sonra Info aracımızla ilgili sınıfları ve gerekli resource ları bu Info paketi altında oluşturacağız. Info aracımızı oluşturmak için Info paketine (8. adımda oluşturduğumuz Info dizini) sağ tıklayarak Add > New Item… seçin.

Açılan Add New Item penceresindeki şablonlardan Web Custom Control seçeneğini seçin. Name alanına info aracı için uygun bir ad verin ve Add butonuna tıklayın. Yeni bileşenimiz InfoTool.cs adıyla Info paketine eklenecektir. Bu sınıfta Info aracımızda kullanılacak imaj, javascript vb. resource ları tanımlayıp, aracın davranışları ile ilgili kodları yazacağız. Bu sınıfı WebTool sınıfından extend edeceğimiz için sınıf tanımını

public class InfoTool : WebTool {

olarak değiştirin.

10) Sunucu tarafındaki coğrafi işlemleri yapabilmek için (mesela burada tıklanan yerdeki nesnelerin bilgilerini alma) Web Control projesine gerekli MapXtreme referans kütüphanelerini eklememiz gerekiyor. Bunun için proje referanslarına sağ tıklayın ve Add Reference… seçin. Aşağıdaki Add Reference penceresi açılır:

Burada yukarıdaki şekilde gösterilen MapXtreme referanslarını seçin ve OK butonuna tıklayın. Gerekli referanslar projeye eklenecektir.

11) Şimdi de tıklama işleminde sunucu tarafında asıl işi yapacak kodları yazmak için bir sınıf eklememiz gerekecek. Bunun için yine Info paketine sağ tıklayarak Add > New Item… seçeneğini seçin.

Açılan Add New Item penceresinde listelenen şablonlardan Class seçeneğini seçin ve Name alanına uygun bir sınıf ismi verin. Add butonuna tıkladığınızda yeni InfoClass.cs sınıfı projeye eklenecektir. Bu sınıfı MapBaseCommand sınıfından extend edeceğimiz için sınıf tanımını

public class InfoClass : MapBaseCommand {

şeklinde değiştirin.

12) Gerekli sunucu sınıflarını bu şekilde ekledikten sonra sıra geldi gerekli imaj ve javascriptleri eklemeye. Yaptığımız iş bağımsız bir component yazmak olduğu için gerekli resource ların tümünü bu componentin içine gömmemiz gerekiyor. Yoksa deploy ederken componenti kullanacak geliştiriciye “Filanca imajları şu dizine, falanca javasciptleri de bu dizine kopyalayın” gibi kullanışsız bir çözüm sunmak zorunda kalırız. Bu duruma düşmemek için client resource larının tamamını componentimizin yani DLL dosyasının içine gömeceğiz.

Bunun için öncelikle Info paketimize gerekli resource dosyalarını tutacak yeni bir dizin ekleyelim. Info paketine sağ tıklayın ve Add > New Folder seçin. Yeni dizinin adını “Resources” yapın. Şimdi Info butonumuzda kullanacağımız imaj, javascript ve imleçleri bu dizinde oluşturacağız. Gerekli dosyalar ve açıklamaları aşağıdaki gibidir:

Cross.cur: Info butonuna tıklandığında gösterilecek imleç dosyası (Artı şeklinde).
info-active.gif: Info butonuna tıklandığında gösterilecek imaj.
info.bmp: Visual Studio Toolbox ında Info butonu için gösterilecek ikon.
info.gif: Info butonu kullanılmadığında, yani başka bir tool aktifken gösterilecek imaj.
InfoScript.js: Info butonu için gerekli AJAX vb. kodları içeren JavaScript dosyası.

13) Resource dosyalarını Info componenti içinde kullanabilmek için dikkat etmemiz gereken nokta şudur: Visual Studio’nun Properties panelinde bu dosyaların tümünün Build Action özelliğinin Embedded Resource olarak seçilmesi gerekir:

14) Bu resource lardan info.bmp hariç diğerlerini web control projemizin AssemblyInfo.cs sınıfında tanımlamamız gerekiyor. Bunun için AssemblyInfo.cs sınıfına aşağıdaki kodları ekleyelim:

[assembly: WebResource(Custom.WebControls.Info.InfoTool.CLIENT_SCRIPT, "text/javascript")]
[assembly: WebResource(Custom.WebControls.Info.InfoTool.INACTIVE_IMAGE_URL, "img/gif")]
[assembly: WebResource(Custom.WebControls.Info.InfoTool.ACTIVE_IMAGE_URL, "img/gif")]
[assembly: WebResource(Custom.WebControls.Info.InfoTool.CURSOR_IMAGE_URL, "img/gif")]

15) Solution Explorer’da solution a sağ tıklayıp Rebuild Solution seçin.

16) Projemiz bir web control projesi olduğu için InfoTool aracı Visual Studio Toolbox ına otomatik olarak eklenir. Bunu görmek için harita sayfasını design modunda açın. Toolbox ta Custom.WebControls Components adlı bir grup göreceksiniz. Bu grupta bulunan InfoTool componenti artık sürükle-bırak ile kullanılmaya hazırdır.

17) InfoTool aracını harita sayfasında uygun bir yere sürükleyip bırakın. Sonra harita sayfasının HTML kodlarını (Source modu) açarak şu satırı bulun:

<mx:InfoTool ID="InfoTool1" runat="server" InfoDiv="divInfo" MapControlID="MapControl1" />

Info aracını çalıştırabilmek için yapmamız gereken tek şey sayfaya “divInfo” ID li bir div elemanı eklemektir. Bu div elemanını mesela bir tablo hücresinin içine aşağıdaki kodla ekleyebiliriz:

<div id="divInfo"></div>

Burada div ID sinin “divInfo” olması zorunlu değildir, bunu değiştirebilirsiniz. Önemli olan div e verilen ID nin InfoDiv=”…” değeri ile aynı olmasıdır.

Not: Eğer MapControl nesnenizin ID si  MapControl1 den farklı ise MapControlID="MapControl1" değerini bununla değiştirmelisiniz.

18) Projenizi çalıştırıp InfoTool aracınızı test edin. Oluşturduğumuz info butonunu aşağıdaki haritanın araç çubuğunda görebilirsiniz:

NOTLAR:

Bizim burada yazdığımız gibi custom bir web control içeren ASP.NET projelerinde bazen aşağıdaki hata random olarak alınabilir:

Error creating control – ‘ControlInstanceName [text]’ could not be set on property ‘PropertyName'”

Böyle bir hata alırsanız çok da önemsemenize gerek yok çünkü genel olarak Visual Studio’yu kapayıp açtığınızda veya hata veren bileşeni designer dan kaldırıp tekrar koyduğunuzda düzeliyor. Hatta designer da bu hatayı aldığınızda projeniz hala çalışmaya devam edecektir. Bu bir Microsoft hatasıdır (bug) ve eğer sizi rahatsız ederse aşağıdaki bağlantıdan detaylı bilgi alabilirsiniz:

http://support.microsoft.com/kb/961847

Örnek MapXtreme projesini aşağıdaki adresten indirebilirsiniz:

https://dl.dropbox.com/u/54151940/GIS/MapInfo/MapXtreme/Net/MapXtremeCustomToolsWebAppSln.rar

Advertisements
  1. burak
    19/01/2011 at 01:15

    teşekkürler

  2. Hasan ÇOR
    10/05/2011 at 00:03

    Hocam merhaba..
    bilgisayar muh son sinif ogrencisiyim.

    yukardaki makaledeki ornek GIS dersi projem olup, boyle bir ornege ihtiyacim var.
    ornegi inceledim. elinize saglik.. super olmus. ama kaynak kodlarini goremedim.

    ilgili ornegin kaynak kodlarini gondermeniz mumkun olursa acaip makbule gecer.
    10 larca proje icinden en azindan biri hemen cikmis olacak : )

    saygilarimla
    Hasan ÇOR

  3. 17/08/2014 at 23:17

    var olan bir proje üzerinde çalışıyorum ona yeni bi katman eklemeliyim daha sora bu projeyi çalıştırınca haritada bi yere tıklayınca eklediğim katmanla ilgili bilgi almalıyım .katmanı mapextreme den ekledim ancak haritaya tıkladığımda gerekili bilgiyi alamıyorum o yere ait . gerekli kodları yazdım ancak o eklediğim katmanın özelliklerine ulaşamadım yardımcı olursanız çok sevinirim…
    iyi çalışmalar

    • 21/08/2014 at 11:01

      Daha detaylı bilgiler vermeniz gerekir. Projeniz desktop mı yoksa web mi? “Bilgi alamıyorum” derken kastınız nedir? Hata mesajı mı alıyorsunuz? MapXtreme ile gelen sample projeleri incelemeniz faydalı olabilir.

      • 21/08/2014 at 15:05

        Webde .haritalarin tablolarida var mesela ankaraya tiklayinca ankarayla ilgili tabloda hangi ozellikler varsa onun gorunmesi gerekiyo

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: