Toolbar Tasarımı


Bu Ders 10 Haziran itibariyle güncellendi.

Güncellemede yapılanlar:

1- Toolbar görünüm olarak daha profesyonel hale getirildi.
2- Toolbar’a saat kodu yerleştirildi.
3- Ders daha sadece, anlaşılır ve ayrıntılı hale getirildi.
4- Windows Xp ile Windows Klasik Temalardaki uyumsuzluk Tema.dll ile giderildi. (Bu özelliği ile Dünyada ilk ve tek)
5- 11 Tane İcon dosyası eklendi.

Ayrıca mdx.dll ve rebar.dll ile toolbar işlemlerini anlatan görüntülü ders şu linkte mevcuttur:

Toolbar Nedir? Ve nasıl Yapılır ?

Toolbar aslında bir diyalogtur. Toolbar yapımının mantığı ise şudur; Öncelikle normal bir diyalog oluşturuyoruz, daha sonra bu diyalogumuzun üzerine mdx, rebar.dll , bar.dll ile bazı şeyler ekleriz. Yani Biz ona, bu dll dosyalarıyla şekil veriyoruz. Bu şekil vermede diyaloga icon ve yazı ekliyoruz, diyaloga renk veriyoruz. Yani diyalogumuzu ister mavi, ister gri, ister siyah, ister beyaz yapıyoruz.

Toolbar oluşturmak için 4 dll dosyasından faydalanıyoruz. Bunlar MDX, rebar.dll, bar.dll ve Tema.dll dosyalarıdır.

1.Aşama- Dll Dosyalarının İndirilmesi

Burada MDX.dll, rebar.dll, bars.dll ve Tema.dll dll klasörünün içindedir. Bu dll dosyalarını aşağıdaki linkten indirebilirsiniz. ( Yani Toolbarı yapabilmemiz için bize lazım olan dll dosyaları diyelim buna. )

 

2.Aşama-İcon dosyalarının indirilmesi ve hazırlanması

Toolbarı oluşturmak için elimizde bazı iconların olması gerekir. Vereceğim linkteki iconlar toolbar kodunda kullanılan 11 icon’dur. Kod buna göre hazırlanmıştır. İsimlerde ona göre belirlenmiştir.

 

Eğer farklı icon kullanmak istiyorsanız, şu adresten bedava icon indirebilirsiniz.

 

veya .adresine girip, Aranacak kelimeye icon yazıyoruz ve arattırıyoruz ve göreceksiniz ki internette bir sürü icon dosyaları mevcuttur.

3.Aşama – Toolbar Kodununun hazırlanması

Bu Kodu alt+r ye basılıp açılan Remote penceresinde boş bir sayfaya yerleştiriyorsunuz.

Not: Bu toolbar Windows 1024/768 Ekran çözünürlüğüne göre ayarlanmıştır.

Kod:
on *:start: { dialog -m toolbar toolbar }

alias Temadene { echo -a Temam: $iif($temabul,XP Teması,Klasik Windows Teması)  }
alias Temabul { .comreg dll/Tema.dll | .comopen toolbar Tema.buL | var %komut = $com(toolbar,TemaBul,1) | var %komut = $com(toolbar).result  | .comclose toolbar | .comreg -u dll/Tema.dll | return %komut }
alias mdx { return $dll(DLLmdx.dll,$1,$2-) }
alias rebar { dll DLLrebar.dll $$1- }
alias bars { return DLLbars.mdx }

on *:connect: {
  update.toolbar
}

on *:disconnect: {
  update.toolbar
}

on *:close:*: {
  update.toolbar
}

alias saat { if ($dialog(toolbar)) { did -a toolbar $1 $time } }

alias update.toolbar {
  if (!$dialog(toolbar)) { halt }
  else {
    scid $activecid
    if ( $scid($activecid).status = connecting || $scid($activecid).status = connected ) {
      did -o toolbar 1 3 +a 2 $chr(32) Bağlantıyı Kes $chr(9) $+ IRC Serverle Bağlantınızı Koparır.
    }
    else {
      did -o toolbar 1 3 +a 1 $chr(32) Servere Bağlan $chr(9) $+ IRC Servere Bağlantı Kurar.
    }
  }
}

dialog toolbar {
  title "x"
  size 0 0 550 $iif($temabul,14,17)
  option dbu
  list 4, 0 -2 550 17, size
  list 1, 0 4 550 17, size
  text "", 2, 464 6 45 16, center
  text "", 3, 467 10 39 11, center

}

on *:dialog:toolbar:init:0: {
  mdx MarkDialog $dname
  mdx SetDialog $dname style
  mdx SetFont $dname 1 Turkish 14 800 Cyrillic
  mdx SetColor $dname 1,2,3,4 background $rgb(113,188,255)
  mdx SetColor $dname 3 text $rgb(0,0,0)
  mdx SetFont $dname 3 +a 20 600 arial
  mdx SetColor $dname 2,3 textbg $rgb(113,188,255)
  .timersaat 0 1 saat 3

  rebar HideToolbar .
  rebar Dock $dialog(toolbar).hwnd > top

  mdx SetControlMDX $dname 1,3,4 Progressbar smooth > $ctl
  mdx SetControlMDX $dname 1,4 ToolBar flat wrap arrows nodivider > $bars
  mdx SetBorderStyle 1

  did -i $dname 1 1 setscheme $rgb(163,163,163) $rgb(163,163,163)
  did -i $dname 1 1 bmpsize 27 27
  did -i $dname 1 1 setimage icon large iconbaglan.ico
  did -i $dname 1 1 setimage icon large iconkes.ico
  did -i $dname 1 1 setimage icon large iconAyarlar.ico
  did -i $dname 1 1 setimage icon large iconkanal.ico
  did -i $dname 1 1 setimage icon large iconkorumalar.ico
  did -i $dname 1 1 setimage icon large iconkontrolpanel.ico
  did -i $dname 1 1 setimage icon large icongorunum.ico
  did -i $dname 1 1 setimage icon large iconliste.ico
  did -i $dname 1 1 setimage icon large iconoyunlar.ico
  did -i $dname 1 1 setimage icon large iconinternet.ico
  did -i $dname 1 1 setimage icon large iconyardım.ico
  did -a $dname 1 +a -
  did -a $dname 1 +a 1  $chr(32) Server Bağlan $chr(9) $+ IRC Servere Bağlantı Kurar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 3  $chr(32) Bağlantı $chr(9) $+ Bağlantı Ayarlarını Yapar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 4  $chr(32) Kanallar $chr(9) $+ Kanallara Giriş Penceresini Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 5 $chr(32) Korumalar $chr(9) $+ Kanal ve Kişisel Korumaları Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 6 $chr(32) Kontrol Panel $chr(9) $+ Scriptinizle İlgili Tüm Ayarları Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 7 $chr(32) Görünümler $chr(9) $+ Scriptinizin Görünümüyle İlgili Ayarları Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 8 $chr(32) Listeler $chr(9) $+ Scriptinizdeki Notify, Düşman Listesi Gibi Ayarları Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 9 $chr(32) Oyunlar $chr(9) $+ Scriptinizin Oyunlarıyla İlgili Diyalogu Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 10 $chr(32) Internet $chr(9) $+ Internet Adreslerinin Olduğu Diyalogu Açar.
  did -a $dname 1 +a -
  did -a $dname 1 +a 11 $chr(32) Yardım $chr(9) $+ Scriptinizin Yardım Dosyasını Açar.
  did -a $dname 1 +a -
}

on *:dialog:toolbar:*:*: {
  if $devent == sclick {
    if $did == 1 {
      if ($did($dname,1).sel = 3) {
        if ($scid($activecid).status = connecting || $scid($activecid).status = connected ) { scid $activecid disconnect }
        else {
          scid $activecid server
        }
        update.toolbar
        did -f $dname 1
        scid $activecid window -a "status window"
      }
      if ($did($dname,1).sel = 5) {
        Ayarlar
      }
      if ($did($dname,1).sel = 7) {
        Kanallar
      }
      if ($did($dname,1).sel = 9) {
        Korumalar
      }
      if ($did($dname,1).sel = 11) {
        kontrolpanel
      }
      if ($did($dname,1).sel = 13) {
        gorunumler
      }
      if ($did($dname,1).sel = 15) {
        listeler
      }
      if ($did($dname,1).sel = 17) {
        oyunlar
      }
      if ($did($dname,1).sel = 19) {
        internet
      }
      if ($did($dname,1).sel = 21) {
        yardim

      }
    }
  }
}

Kod sonucu oluşan, Toolbar’ın Resimi ise işte karşınızda :

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×98 26KB.

Bu işlemleri tamamlayınca toolbarınız artık hazır! Şimdi gelelim Kodun sırayla açıklanmasına…

4 – a – Aşama – Kodun Açıklanması – 1.Bölüm – Diyalogun (Toolbarın ) Oluşturulması ve diyalogun ayarları

on *:start: { dialog -m toolbar toolbar }

Bu Komut ; Script açıldığı zaman toolbar diyalogumuzun açık olmasını sağlar. Yani bu komutla biz toolbarımızı scriptimize yükleriz. Eğer bu komut olmassa toolbar’ımızı oluşturamayız. Yan scriptimiz açıldığı zaman, yaptığımız toolbarımız açılmaz, Başka bir deyişle çalışmaz.

Scriptimiz için oluşturduğumuz toolbar; bu diyalog’tur . O yüzden bu diyalog açılmassa toolbarda kesin kez çalışmaz.

on *:connect: {
update.toolbar
}

Bu Komut ; Scriptiniz bir servere bağlandığı zaman ( yani connect olduğu zaman ) Toolbarınızın yüklenmesini sağlar. Bunu update komutu ile yapar. Yani servere bağlandığınız zaman toolbarınız aktifleşir.

on *:disconnect: {
update.toolbar
}

Bu Komut ; Scriptiniz bağlı olduğunuz serverden düştüğü zaman ( yani disconnect olduğu zaman ) toolbarın aktif kalmasını sağlar. Yani serverden düşseniz bile toolbarınız hala çalışıyor olacaktır. Bunuda update komutu ile yapar.

on *:close:*: {
update.toolbar
}

Bu Komut ; Scriptinizde herhangi bir kanal , özel penceresinin kapanması durumunda, toolbarın aktif olarak kalmasını sağlar.

alias saat { if ($dialog(toolbar)) { did -a toolbar $1 $time } }

Bu Kod ; scriptinizin köşesinde saatin aktif olmasını sağlayan koddur. Bilgisayarınızda ayarlı olan saat Toolbarın sağ köşesinde gösterilir.

alias update.toolbar {
if (!$dialog(toolbar)) { halt }
else {
scid $activecid
if ( $scid($activecid).status = connecting || $scid($activecid).status = connected ) {
did -o toolbar 1 3 +a 2 $chr(32) Bağlantıyı Kes $chr(9) $+ IRC Serverle Bağlantınızı Koparır.
}
else {
did -o toolbar 1 3 +a 1 $chr(32) Servere Bağlan $chr(9) $+ IRC Servere Bağlantı Kurar.
}
}
}

Bu Komut Toolbar dosyamızın ilk kısım kodudur. İlk iconumuz olan Server bağlanma yerinin/iconun çalışmasını sağlayan bölümdür. Burada 2 icon kullanıyoruz. Servere bağlan dediğimizde yeşil icon, Bağlantıyı kes dediğimizde ise Kırmızı icon o an aktifdir. Yani tek menüde 2 icon vardır. Fakat İconlar yapılan işleme göre aktifleşir. Bağlan dediğinde farklı icon aktifleşir. Bağlantıyı kes dediğin zaman farklı icon aynı yerde aktifleşir.

dialog toolbar {
title “x”
size 0 0 550 $iif($temabul,14,17)
option dbu
list 4, 0 -2 550 17, size
list 1, 0 4 550 17, size
text “”, 2, 464 6 45 16, center
text “”, 3, 467 10 39 11, center

}

İşte En önemli yer. Bu Toolbarımızı oluşturan diyalogumuzdur. En baştaki açıklamada dediğim gibi Toolbar aslında bir diyalogtur. İşte diyalogumuz bu Kod’tur.

Bu diyalogun ne olduğunu açıklayalım.
Diyalogumuzda iki tane “list” vardır. Yani iki tane dialog vardır. Bu 2 diyalog birleştirilmiştir.

size 0 0 550 $iif($temabul,14,17)

İlk baştaki 0 rakamı: Diyalogumuzun en solda olmasını sağlar. Yani Mirc’in tam olarak ilk solda olmasını sağlar.
İkinci 0 rakamı: Diyalogumuzun aşağı-yukarı pozisyonudur. Diyalogumuz Toolbar yerinde tam olarak en yukardan başlamasını sağlar.
Üçüncü 550 rakamı: ise Diyalogumuzun uzunluğudur.
Dördüncü sayılar olan 14,17 sayıları : ise Diyalogumuzun genişliğidir.

Burada Neden 2 tane diyalog genişliğini belirten sayı vardır?
Çünkü Windows Xp ve Windows Klasik Temalarında ayrı ayrı uzunluk birimleri oluşur. Cappystarj0e arkadaşımız sağolsun bu sorunu Tema.dll adlı bir dll yazarak çözmüştür. Önceki diyalogumuzda tek genişlik sayısı verebiliyorduk. Windows klasik temada iken sorunsuz olan o sayı Windows Xp Temasında genişlik bakımından sorunlu olmaktadır. İşte orada 2 sayı hem windows klasik tema hem de Windows Xp teması için ayrı ayrı belirlenmiş 2 genişlik birimidir.

14 Sayısı: Windows Xp Teması için belirleyeceğimiz sayı
17 Sayısı: Windows Klasik tema için belirleyeceğimiz sayı

( Bu bakımından dünyada ilk ve tektir. Cappystarj0e sağolsun bu konuda yardım etti. )

Not : Diyalogumuzun genişliğini belirten 14,17 sayılarını aralarında 3 fark olmak koşuluyla değiştirebilirsiniz.

Diyalogumuzun diğer sayılarıyla ilgli ayarlamalar toolbarımızın hoş gözükmemesine neden olur. ;
Mesela Windows Klasik Teması için olan 17 sayısını 8 yaparsak bakın ne görüntü karşımıza çıkıyor. Bu görüntüde gördüğünüz gibi Yazılar gözükmemeye başlıyor.

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×80 23KB.

Siz görüntünün daha nazik gözükmesi adına, toolbarınızın küçük olmasını istiyorsunuz ,bu nedenle 17 sayısını (Windows Klasik Temaya göre olan genişlik sayısı) , 14 yapmak istiyorsunuz. ( yani Diyalogun genişliğini 14 yapmak istiyorsunuz) O zaman başka bir kaç ayarı da değişmek gerekir. Bu ayarlarlar ile sorunun üstesinden gelebiliriz. Bu ayarlar ise şunlardır:

İlk olarak Windows Klasik Temaya göre olan 17 sayısını 14 yapacaksak Windows Xp ye göre olan genişliği hemen 14 den 11’e indirioyuruz.

size 0 0 550 $iif($temabul,14,17) olan satırı
size 0 0 550 $iif($temabul,11,14) satırı ile yer değiştiriyoruz.

Bir sonraki aşamada;
mdx SetFont $dname 1 Turkish 14 800 Cyrillic olan satırı
mdx SetFont $dname 1 Turkish 11 800 arial satırı ile değiştiriyoruz.

daha sonraki aşamada ise;
did -i $dname 1 1 bmpsize 27 27 olan satırı
did -i $dname 1 1 bmpsize 22 22 satırı ile değiştiriyoruz.

En son aşamada ise görüntü kirliliği olmaması adına saat yazısının boyutunuda küçültmemiz gerekiyor:
mdx SetFont $dname 3 +a 20 600 arial olan satırı
mdx SetFont $dname 3 +a 16 600 arial satırı ile yer değiştiriyoruz

Daha sonra karşımıza çıkan görüntü ise şu olur.

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×90 20KB.

Windows Klasik Temaya göre belirlenen 17 genişlik Sayısını, 14 değilde 21 yaparsak karşımıza çıkan görüntüde aşağıdaki resimdeki gibi olur.. Görüntü de gördüğünüz gibi Diyalog, Toolbarın renginin dışına sıçrıyor.

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×105 25KB.

Diyorsaniz ki İconlarım ve yazılarım daha büyük olsun, Ona göre de bazı değişiklikler yapmak gereklidir. Tıpkı, hemen yukarıdaki 17 sayısını 14 veya 21 yapmak istediğimiz zaman, yaptığımız değişiklikleri bunda da aynen uyguluyoruz ve gene aynı satırlar da değişikleri yapıyoruz. Bu Ayarlar ise şunlardır :

İlk olarak Windows Klasik Temaya göre olan 17 sayısını 21 yapacaksak Windows Xp ye göre olan genişliği hemen 14 den 18’e çıkarıyoruz.

size 0 0 550 $iif($temabul,14,17) olan satırı
size 0 0 550 $iif($temabul,18,21) satırı ile yer değiştiriyoruz.

Bir sonraki aşamada;
mdx SetFont $dname 1 Turkish 14 800 Cyrillic olan satırı
mdx SetFont $dname 1 Turkish 15 800 arial satırı ile değiştiriyoruz.

Daha sonraki aşamada ise:
did -i $dname 1 1 bmpsize 27 27 olan satırı
did -i $dname 1 1 bmpsize 35 35 satırı ile değiştiriyoruz.

En son aşamada ise görüntü kirliliği olmaması adına saat yazısının boyutunuda küçültmemiz gerekiyor:

mdx SetFont $dname 3 +a 20 600 arial olan satırı
mdx SetFont $dname 3 +a 22 700 arial satırı ile yer değiştiriyoruz

Daha sonra karşımıza çıkan görüntü ise şu olur.

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×105 31KB.

Bizim Toolbarımızda (Diyalogumuda) Artık 2 diyalog vardır. Birbirine geçmiştir. Neden böyle bir yöntem kullandık? Çünkü öncesinde toolbarımızın üstmenübarla birleşmesi için yükseklik satırında (2.ci sayıdır bu, kırmızı olan ) -2 veya -3 ile belirtmiştik. Bu seferde iconlar üstmenubara biraz yapışık gözükür olmuştu. Görsellik adına daha güzel bir toolbar için 2 diyalog kullanarak bunun üstesinden gelebiliriz. 2 diyalog kullanarak iconlarımızda üstmenubarla birleşik ve çok yakın durumda olmaz. Bahsettiğim satırlar şunlardır:

list 4, 0 -2 550 17, size
list 1, 0 4 550 17, size

Bu satırlardan birini kaldırıp eski dersimde göstermiş olduğum toolbar tarzındaki gibi tek diyalog kullanırsak karşımıza şu tablo çıkar :

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×100 31KB.

ve diğer asıl kodumuzdaki resimle beraber karşılaştırılalım bunu..

Bu resim yeniden boyutlandırılmıştır.Orjinal boyutunda görmek için tıklayın. Resmin Orjinal Boyutu 1024×98 26KB.

text “”, 2, 464 6 45 16, center
text “”, 3, 467 10 39 11, center
satırları ise saatimiz ile ilgili kod satırlarıdır.

Ağustos 16, 2010 tarihinde Genel içinde yayınlandı ve , , , , , , , olarak etiketlendi. Kalıcı bağlantıyı yer imlerinize ekleyin. Yorum yapın.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: