uygulamamız bittiğinde böyle olacak
Uzun zamandır yazmak istiyordum böyle bir bildiriyi,haftasonuna bağlayan cuma gecesi ilaç gibi geldi… Lafı fazla uzatmiyim,buyrunuz …Başlamadan önce sisteminizde adobe air‘ın yüklü olması şart buradan indirebilirsiniz.Daha sonra adobe air SDK(açılımı:software developer’s kit) dosyasını şuradan indiriyoruz.SDK’i herhangi bir sürücünün ana dizinine air klasörüne yüklerseniz işiniz kolaylaşır.air SDK’inin yüklü olduğu klasörü açıyoruz,ben bu yolu c:/air olarak kullandım.
Daha sonra c:/air/bin/ klasörünü açıyoruz,bildirgec diye bir klasör yaratıyoruz.Artık c:/air/bin/bildirgec/ klasöründe at koşturacağız.
Bölüm 1:Uygulamamızın temeli olan xml dosyasını hazırlıyoruz.Notepad veya bir başka editör kullanarak application.xml adında bir dosya yaratıyoruz.
xml dosyamıza şöyle başlıyoruz:
Aşağıdaki satırları arzuladığınız gibi değiştirebilirsiniz,
Aşağıda vereceğim satırlar çok önemli,tek tek izah edeceğim.
content:uygulamamızın giriş sayfası budur,xml dosyalarıyla aynı dizinde olması işinizi kolaylaştırır.
width&height:Buraya piksel ölçüsüyle uygulama ekranınızın genişlik&uzunluk değerlerini giriyorsunuz.
Visible:Görünürlük,uygulamanızda birden fazla pencere kullandığınız takdirde işinize yarayacaktır,şu an kullanmanıza lüzum yoktur.AIR bilginizi daha ilerlettikten sonra kullanacaksınız.
Minimizable,maximizable,resizeable:Pencerenin simge durumuna indirilmesi,tam ekran yapılması,boyutlandırılması işlevleri.Bu değerleri izin veriyorsanız true yoksa false olarak ayarlıyorsunuz..
Ayrıca görsellik olarak uygulamanızın file iconlarını da gene bu xml dosyasından tanımlamanız gerekmektedir.Ben bildirgeç logosundan dönüştürdüğüm png formatındaki ikonları kullandım.Yazımın sonunda vereceğim bağlantıdaki zip dosyasında bu konuda ihtiyacınız olan herşeyi bulabilirsiniz.Şimdi ikonları uygulamamızın dizininde açtığımız icons klasörüne yerleştiriyoruz.
16 x 16 , 32 x 32 , 48 x 48 , 128×128 (Ben 128 lik kullanmadım)
iconlarımız da hazırsa şu kodu da application.xml dosyamıza ekliyoruz.
Sonra xml dosyamızı tagıyla kapatıp kaydetmeyi unutmuyoruz!
Buraya kadar herşey tamamsa,bir sonraki aşamaya geçiyoruz.indirdiğimiz bildirgeç logosuna Fireworks’te transparanlık veriyoruz ve altındaki çizgiyi siliyoruz.Gif formatında(html’in desteklediği bütün formatlar olur)kaydediyoruz.Şimdi uygulamamızın dizininde bildirgec.html adıyla bir html dosyası yaratıyoruz. Kodlamaya başlamadan önce bir javascript dosyasına ihtiyacımız olacak! AIR SDK’nın ana dizinine gidiyoruz, c:/air/frameworks bu dizindeki AIRAliases.JS dosyasını uygulamamızın klasörüne kopyalıyoruz.
Uygulamamıza normal html yazar gibi başlıyoruz,lakin javascript kısımlarında konuya müdahil olmam gerekiyor.Örneğinde gördüğünüz gibi,uygulamamızda javascript kullanmak istiyorsak;http://arsiv.pilli.com/AIRAliases.js dosyasını kodumuza dahil etmek zorundayız.Bilmenizi istediğim bir husus var,html dosyalarınızdan normal link veremiyorsunuz.Linki şöyle kullanmanız gerekiyor. bildirgec.org anasayfasına git
HTML ve CSS konusunda eksper olanlar bu aşamayı atlayarak,yazdıkları bir uygulamayı nasıl çalıştırabileceklerini anlatan en son aşamaya geçebilirler. Sonra da direk paylaştığım örnek dosyaları indirip,inceleyip mevzuya dalarsanız ; kaparsınız ...
HTML ve CSS'nin nimetlerinden faydalanıyoruz bu aşamada.CSS:
Uygulamamızın klasik bir windows uygulaması gibi gri ekranlı görünmesini istediğim için,alengirli cartlı curtlu bir css hazırlamadım.body {font-family: sans-serif;font-size: 100%;background-color:#ebebeb;padding:20px;}
öncelikle body tagında uygulamada kullanacağımız font boyutunu,karakterini ve en önemliside sağ sol boşluklarını ayarladım;bu estetik bakımdan çok önemli bir husus.a {color:#666666;font-weight:bold;}a:hover {color:#FF2A66;font-weight:bold;}
tagında uygulamızdaki linklerin renklerini ayarladım.
input.textbox {border:1px solid #CCCCCC;padding:3px;margin:1px;}
Burada da arayacağımız kelimeyi yazacağımız metin kutusunu şekillendirdim kendi çapımda.HTML:
Logoya tıklayınca anasayfaya gitmesi için link verildi,yalnız yukarıda da bahsettiğim gibi,linkleri href tagının içinde değil onclick tagında ve birazcık yukarıda yazdığım gibi javascript kodu içinde tanımlamanız şart.
Bu div arama kutusunu ve ara butonunu içerir,arama kutusuna kelime id'sini atadım bu kutunun içeriğini javascriptle alabilmemiz için önemlidir.Ayrıca ara butonunda onclick ile javascript içindeki ara fonksiyonuna bağlantı verilmiştir.
Bu da uyarı kutucuğudur,içeriği boş bırakılmıştır ve görünmez yapılmıştır.Son iki kodun css özelliklerini niye html içinde verdin lonelycavalry?
Sonuncusunda javascriptle kolayca editleyebilmek için verdim,öbüründe tamamen saçma bir acele etme fantezisi icabı.JAVASCRIPT:Bildirinin uzamaması ve salahiyeti açısından javascript kodlarını , uygulamanın içinde eş zamanlı olarak bazılarının üstüne bazılarının altına yazdığım açıklamalarla anlattım.
UYGULAMAMIZI NASIL ÇALIŞTIRIRIZ?
Başlat > Çalıştır > açılan kutuya cmd yazarak ms-dos'u çalıştırınız.
çalıştır ekranı
daha sonra c: sürücüsüne geçiyoruz, cd komutuyla air/bin klasörüne atlıyoruz.
Niye bildirgeç değil de bin klasörüne atlıyoruz lonelycavalry ?
Çünkü orada uygulamamızı test etmemize yarayacak adl adında bir dosya var,adobe debug launcher diyorlar kendisine.bin klasörüne atladıktan sonra komut sisteminden şöyle bir komut veriyoruz,adl bildirgec/application.xml
eğer uygulamanız bildirgec klasorunde degilse o zaman adl oklasorunadi/application.xml
aynen böyle çalışır
Evet,uzun bir bildiri oldu,aslında daha uzun olabilirdi fakat;baymak istemediğim için böyle kısa kestim.Javascript açıklamalarını indireceğiniz kaynak kodumda bulabilirsiniz.
sonuç
Bu uygulamanın kaynak kodunu kimse rapidsharedir odur budur uğraşmasın,hem dosya kalıcı olsun bi ara silinmesin diye googlepagesa yükledim şu sayfaya giderek indirebilirsinizSevgili moderasyon,şu dosyayı bir virüs taramasından geçirdikten sonra bildirgeç serverına yüklese hiç fena olmazdı hani,daha kalıcı olurdu - bildiri durdukça dosya da dururdu ...
KAPANIŞ:
Adobe AIR ile prototype javascript kütüphanesini de kullanabiliyorsunuz,onu da umarım zaman bulabilirsem başka bir bildiride yazmaya çalışacağım,ancak prototype ile beraber scriptaculo.us'ı yani o güzelim efektleri çalıştırmak zor(muş) galiba 🙁
Adobe AIR dağarcığınızı geliştirmek isterseniz tavsiye edebileceğim en değerli kaynak adobe'nin sitesindeki livedocs sayfalarıdır,şuradan gidebilirsiniz.
