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:<application xmlns="http://ns.adobe.com/air/application/1.0">
Aşağıdaki satırları arzuladığınız gibi değiştirebilirsiniz,
<id>com.bildirgec.app</id>
<version>1.0</version>
<filename>Bildirgec</filename>
<description>This program helps to search in bildirgec.org</description>
<copyright>No copyrighted,Copyleft (c) 2008 users of Bildirgec</copyright>
Aşağıda vereceğim satırlar çok önemli,tek tek izah edeceğim.
<initialWindow>
<content>bildirgec.html</content>
<visible>true</visible>
<width>480</width>
<height>300</height>
<minimizable>true</minimizable>
<maximizable>false</maximizable>
<resizable>false</resizable>
</initialWindow>
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 , 128x128 (Ben 128 lik kullanmadım)
iconlarımız da hazırsa şu kodu da application.xml dosyamıza ekliyoruz.
<icon>
<image16x16>icons/bildirgec_16.png</image16x16>
<image32x32>icons/bildirgec_32.png</image32x32> <image48x48>icons/bildirgec_48.png</image48x48></icon>
Sonra xml dosyamızı </application> 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="AIRAliases.js"/>
Örneğinde gördüğünüz gibi,uygulamamızda javascript kullanmak istiyorsak;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.
<a href="#" onclick="air.navigateToURL(new air.URLRequest('http://www.bildirgec.org'))"> bildirgec.org anasayfasına git </a>
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;}
<a> 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:
<a href="#" onclick="air.navigateToURL(new air.URLRequest('http://www.bildirgec.org'))"> <img src="logo_bildirgec.gif" style="display:block;"> </a>
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.
<div style="width:100%;border:1 px solid #FF2A66;text-align:center;background-color:#FF7198;display:block;"><input type="text" id="kelime" name="kelime" style="width:300px;"> <input type="button" id="submit" name="submit" value="Ara" onclick='ara()'></div>
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.
<div id="uyari" style="border:1px solid #F4B800;padding:5px;text-align:center;height:15px;background-color:#FFFF99;font-size:90%;margin-top:5px;visibility:hidden;"></div>
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 indirebilirsiniz
Sevgili 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.
« önceki yazı online photoshop express beta |
sonraki yazı » Youtube'dan video istatistikleri |
Yorumlar
dostum sanırım sdk linki ile air linki aynı.burdan sdk'yı çekebilirsiniz.
| nucro | |
|
|
(0 puan) |
|
| 29 Mart 2008 11:09 |
şurdan da nasıl AIR yükleme dosyası(.air) oluşturabiliriz ona bakıyoruz. (:
| nucro | |
|
|
(0 puan) |
|
| 29 Mart 2008 13:40 |
dreamweaver cs3 için air
eklentisi var... bu dosyaları sizin için oluşturuyor ve güzel bir arayüz sağlıyor.. vs..
| Kaplumb Aga | |
|
|
(0 puan) |
|
| 29 Mart 2008 14:28 |
air'in gelecek sürümünde usb ve diğer seri portları destekleyeceğine dair ağır basan söylentiler dolaşıyor,
yani air'in gücü şu an sadece bir başlangıç desem doğru bir tabir olur ...
| lonelycavalry | |
|
|
(0 puan) |
|
| 29 Mart 2008 14:58 |
@kablumb dediğin eklenti ile çalışıyorum ben hiç kasmadan 2 tıkla hallediyoruz işleri
| nucro | |
|
|
(0 puan) |
|
| 29 Mart 2008 15:32 |
wauw bildiriyi yazanın da yorumlayanların da ellerine sağlık.. süpersiniz..
| durum | |
|
|
(0 puan) |
|
| 30 Mart 2008 05:57 |
çalıştırılabilir bir hali yok mu ? (executable)
| mnc | |
|
|
(0 puan) |
|
| 30 Mart 2008 13:08 |
@mnc uygulamayı SDK daki adl tooluyla değil de adt tool'uyla paketleyerek executable hale getirebilirsin...
| lonelycavalry | |
|
|
(0 puan) |
|
| 30 Mart 2008 15:47 |
dreamweaverdan air dosyası yapmaya çalıştığımda şöyle bir hata vererek açılmıyor.
This application requires a version of Adobe AIR which is no longer supported. Please contact the application author for an updated version.
denediğim diğer scriptlerdede sorun çıktı. log
dosyasında şu hatadan oluştuğu yazıyor.
error 102: Invalid namespace http://ns.adobe.com/air/application/1.0
| juni | |
|
|
(0 puan) |
|
| 30 Mart 2008 18:17 |
@juni , ben hiç dreamweaver ile denemedim.
Dreamweaver kullanarak air geliştiriyor olsaydım belki sana daha iyi bir çözüm önerebilirdim.Ancak yazdığın hata iletilerine bakacak olursak,
sendeki Adobe AIR sürümüde hata var,buradan adobe air'in üst sürümünü yüklemen gerekiyor.
http://ns.adobe.com/air/application/1.0
bu tanım sadece son sürümde kullanılabiliyor ...| lonelycavalry | |
|
|
(0 puan) |
|
| 30 Mart 2008 22:44 |
ben eklemeler yaptığım dosya budur. bir kaç ekleme yaptım. air oluştururken kullandığım komutları txt'ye yazdım. air'i güncelledikten sonra, adt kullanrakta air dosyası oluşturdum ama yükleme sırasında daha önce söylediğim hatayı verdi. oluşturduğum air dosyasıda şudur.
sizlerde çalışacakmı, kontrol edebilirmisiniz.
| juni | |
|
|
(0 puan) |
|
| 31 Mart 2008 01:41 |
air dosyası çalışmıyor,bu application xml'in içinde belirtilen sürüm numarasından dolayı olabilir.
Eski runtime sürümlerinde( BETA olanlarda ) xml tagını şu şekillerde kullanmışlar:
-
<application xmlns="http://ns.adobe.com/air/application/1.0.M6" minimumPatchLevel="4">
<application appId="HelloWorld" version="1" xmlns="http://ns.adobe.com/air/application/1.0.M4">
<application appId="HelloWorld" version="1" xmlns="http://ns.adobe.com/air/application/1.0.M5">
Şu sayfadaki,
Defining properties in the application descriptor file
başlığına git.
Orda xmlns=""
tagı için
xmlns The AIR namespace, which you must define as the default XML namespace. The namespace changes with each major release of AIR (but not with minor patches). The last segment of the namespace, such as "1.0" indicates the runtime version required by the application.
şöyle söylemiş.Sürüm değişiklikleri sırasında xml namespace'inin de farklı olacağını,ancak o sürümün updatelerinde bu değişikliğe gerek olmadığını söylemiş.
minimumpatchlevel de en az hangi yamanın yüklü olması gerektiğini gösteriyormuş,kullanmaya gerek yok;pek kullananı görmüyorum ben şahsen.
Sana tavsiye edebileceğim bir diğer şey , en son ADOBE AIR Runtime sürümünü yüklemen ( SDK Değil ) ... eğer yüklediysen olmadıysa runtime'ı sil,sonra bilgisayarı kapat aç tekrar en son sürümü yükle olmaması için bir sebep yok ...
| lonelycavalry | |
|
|
(0 puan) |
|
| 31 Mart 2008 20:18 |
pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.
İlgili Yazılar
Bu Yazıyı Tutanlar
Beğendiğiniz bir yazıya "tuttum" demek için başlığın yanındaki yıldıza tıklayabilirsiniz.
