Online Seminer Doküman ve Örnekleri

February 10, 2008 — 2 Comments

Seminerin ilk bölümünü iyi bir şekilde tamamladık, katılımcılara ve MMistanbul’a teşekkürler. Seminer için hazırladığım çoğu çalışmayı vakit darlığından dan dolayı açamadım, seminerin iki saat olarak ayarlamamız bile buna yetmedi. Tabii verilecek olan konu sayısını fazla olduğunda dolayı, ama bu her halükarda bilgiyi bir şekilde paylaşmamıza engel değil tabi ki. Seminerin kaydını izlemek için aşağıdaki link e tıklamanız yeterli;

https://admin.adobe.acrobat.com/_a200985228/p35047306/

Gerek seminere katılmış olanlar gerekse sonradan izleyecekler ya da sadece dokümanlar ve örneklerden yararlanmak isteyenler için seminerdeki açıklamaları ve örnekleri burada yayınlayacağım. Açıklamaların altında örnek kodlar yer alacak ve kodların çalışır halleri ile ilgili örnekleri ise sayfanın sonundaki kaynak dosyalar bölümünde bulabilirisiniz.

08 Şubat 2008 Günü Yapılan Seminerin İçeriği

1 – ADOBE AIR

1.1.1 – İnternetin Gelişimi

Bildiğiniz gibi web uygulamalarının temeli html ve javascript ile yapılanmaya başladı. Tabii internetin hızlı gelişimi, büyük bir bilgi kaynağı haline gelmesi ile beraber web uygulamaları karmaşık bir hal almaya ve internet tarayıcılarının sınırını zorlamaya başladı. Bu durum hem programcı ve tasarımcıyı hem de son kullanıcı için sorun haline gelmeye başladı.

İnternet tarayıcıları temel olarak HTML tabanlı sayfaları görüntülemek için tasarlandı. Tasarlandığından bu yana da bu çizgisinin dışına maalesef pek çıkamadı.

Varmak istediğim nokta şu son kullanıcıya vermek istediğimiz işlevsellikte internet tarayıcılarının güvenlik nedenlerinden dolayı bir kısıtlama yaşıyoruz bu da temel bir sorun teşkil ediyor. Yapmış olduğunuz bir uygulamayı kullanıcı internet tarayıcısı ve işletim sistemi ile beraber kullanamıyor. Mesela masa üzerinde duran bir dosyayı sürükleyip internet tarayıcınızdaki bir uygulamanın üzerine bırakamazsınız. Aynı şekilde bu internet uygulamaları için de geçerli, yaptığınız internet uygulamaları işletim sisteminin ile herhangi bir etkileşime geçemiyor.

Bildiğim kadarıyla RIA ile bu aradaki bağı güçlendirmeye çalıştılar ama yine de sınırlı kaldılar.

1.1.2 – ADOBE AIR nedir?

AIR cross platform çalışan yani Mac OS, Windows, gibi farklı işletim sistemlerinde çalışan bir platform. Bu platformda da web ortamında kullanılan HTML, Javascript Flash gibi web teknolojilerini kullanarak masaüstü uygulamaları geliştirebilirsiniz.

Bu masaüstü uygulamalarını herhangi bir web tasarımcısı ya da programcısı hali hazırda sahip olduğu programlar ve programlama dilleri ile gerçekleştirebilir.

Kısacası yeni bir dili veya programı öğrenmenizi gerek kalmadan masaüstü yazılımları geliştirebilirsiniz.

1.1.3 – ADOBE AIR in amacı?

AIR cross platform çalışan yani Mac OS, Windows, gibi farklı işletim sistemlerinde çalışan bir platform. Bu platformda da web ortamında kullanılan HTML, Javascript Flash gibi web teknolojilerini kullanarak masaüstü uygulamaları geliştirebilirsiniz.

Bu masaüstü uygulamalarını herhangi bir web tasarımcısı ya da programcısı hali hazırda sahip olduğu programlar ve programlama dilleri ile gerçekleştirebilir.

Kısacası yeni bir dili veya programı öğrenmenizi gerek kalmadan masaüstü yazılımları geliştirebilirsiniz.

1.2 - AIR uygulamalarını nasıl geliştirebilirsiniz?

AIR uygulamalarını nasıl geliştirebilirsiniz?

Peki, bir AIR uygulamasını nasıl geliştirebilirsiniz?

Aslında biraz önce değindiğim gibi belli bir sınır yok. Flash, Flex veya Html ile AIR uygulamalarını geliştirebilirisiniz. Burada bir platform özgürlüğü söz konusu, tabii bu platform özgürlüğü ile gelen bir takım sorunlarda yer alıyor. Çünkü AIR projeleri için belli bir standart yer almıyor. Yani eğer bir arkadaşınız size yaptığı air projesini yollayacağını söylediğinde bu projenin flex dosyası olabilir, html ve java script ile olabilir ya da flash ile yapılmış olabilir. Yani bu platform özgürlüğü ilk başta kafanızı biraz karıştırabilir.

Ben Flash kullanıcısı olarak doğal tercihim tabi ki Flash. Şu anda flash ve flex i karşılaştırmayacağım, bana göre  her ikisi de ayrı platformlar ama flash tasarım yönünden flex den daha kuvvetli, ve flex kodlamada flash dan daha iyi. Ama bu süreçte flex i de dahil etmeyi tercih ediyorum.Çünkü kodlama bölümünde flex flash dan kat kat daha iyi.

1.3 – Kullanılan teknolojiler

Kullanılan teknolojiler

AIR içerisinde kullanılan 3 adet teknoloji var, ama ADOBE bunları iki başlık altında topluyor, birincisi “Uygulama Teknolojileri” ikincisi ise “Doküman Teknolojileri”.

Uygulama teknolojileri içerisinde Html ve Flash yer almakta. Adobe AIR kendi içerisinde web kit teknolojisini kullanıyor. Bu teknolojiye daha sonra değineceğim ama kısaca açıklamak gerekirse Webkite teknolojisi tüm css, javascript ve html taglarını tamamen destekleyen ve Safari internet tarayıcısının kullandığı bir teknoloji. Yani Flash ya da flex e ihtiyacınız olmadan tamamen html ve javascript ile uygulama geliştirebilirsiniz.

Doküman teknolojileri arasında ise Pdf ve yine Html. Bildiğiniz gibi Html zaten doküman teknolojisi olarak tasarlandı. Buradaki amaç dijital olarak oluşturulan dokümanların AIR içerisinde desteklenmesi tabiî ki.

AIR içerisinde web kit ve Flash player tamamen dâhil edilmiş durumda. Diğer bir deyişle eğer Flash içerisinde Html Loader sınıfını kullanarak html dosyaları dâhil ederseniz, bu html sayfası flash içerisindeki bir element sayıldığı için normal bir objeye uyguladığınız tüm olayları html objesine de uygulayabilirsiniz. Mesela efekt verebilirsiniz, alphasını ayarlayabilirisiniz gibi.

Bu aynı şekilde Html tarafı içinde geçerli mesela Javascript kodu Actionscript apisine, flash player rahatça erişebiliyor.

Bu sayede hangi dili kullandığınız önemli olmadan AIR uygulamaları geliştirebileceksiniz. Ama ihtiyacınız olduğu zaman diğer API lerede rahatça ulaşabileceksiniz.

PDF e gerlisek eğer, pdf her iki taraftada çalışıyor.

1.4 – AIR İşlevselliği ve Fonksiyonları (API)

  • Dosya Sitemine Erişim
  • Offline Çalışabilme Özelliği
  • Ağ Denetimi (online / offline)
  • Sürükle, Bırak, Kopyala, Yapıştır
  • Arka Planda Çalışabilme Özelliği
  • System Pencereleri
  • Sql Lite
  • Birden Çok Pencere
  • System Menüleri
  • Uygulama İkonları
    • Http Desteği
    • XML-Rpc-Soap Desteği
    • Binary ve Xml Socket Desteği Uygulama

AIR in masaüstüne taşınması ile bazı işlevselliklerin eklenmesi kaçınılmaz bir hal alıyor tabiî ki.AIR in webkit ve Flash playerin tüm özelliklerini aldığını biliyoruz, bunlar harici işlevsellikleri ise;

Dosya sistemine erişim; yeni dizin, dosya oluşturma, kopyalama, silme, okuma, yazma gibi klasik işlemleri yapabiliyorsunuz.

Offline çalışabilme özelliği ; diyelim ki internet ile bağlantınız kesildi, bu durumda herhangi bir web sayfasını görüntüleyemezsiniz, ama bu özelliği kullanarak, yaptığınız uygulamadaki veri alışverişini devam ettirebilirsiniz.

Ağ denetimi; Burada kullanıcı bilgisayarının internete bağlı olup olmadığı kontrol ediliyor.

Sürükle ve bırak kopyala yapıştır; bu işlemlerin tamamını her gün kullanıyoruz zaten.

Arka planda çalışabilme özelliği; AIR uygulamaları genel olarak işletim sistemini yoran uygulamalar değil zaten, ama gene de bunu biraz daha hafifletmek için böyle bir özellik eklenmiş.

System Pencereleri; işletim sistemlerinin system pencereleri özelliğini kullanıyor amam isterseniz kendi sistem pencerenizi de yapma şansınız var.

Sql lite; AIR içerisinde sql lite desteği var, duyduğuma göre 1 terabyte kadar destekliyormuş, harddisk boyutum o kadar olmadığı için deneyemedim,  deneyip sonucu bana bildiricek biri varsa çok sevinirim.

Birden çok pencere; Bunu pop up pencereler gibi düşünebilirsiniz. Bu sayede ayrı işlemler için birden fazla pencere açabilirsiniz.

System Menüleri; İşletim sistemi menüleri desteği.

Uygulam ikonları, ve Ağ desteği.

Buraya kadar olanlar neleri desteklediği idi, şimsi ise neleri desteklemediği;

  • USB ve Seri Port API desteği Yok
  • İşletim Sistemi Alt Seviye API lerine Erişimi Yok
  • İşletim Sistemi Kütüphanelerine Erişim Yok
  • İşletim Sistemindeki Programlara Erişim Yok

Tabii burada bir şeyi açığa kavuşturmak gerek, bunları desteklememesini sebebi ADOBE nin AIR in  sınırlarını iyi bir şekilde belli etmesi olarak görüyorum.Ama bu demek değildir ki bu işlemler yapılamaz, aksine eğer hafifte olsa C# ve benzeri bir bilginiz varsa işletim sistemleri ile etkileşimi arttırabilirsiniz.

1.5- Desteklenen işletim sistemleri

AIR 1.0 sürümden sadece Windows ve Mac işletim sistemlerini destekleyecek, linux için ise kesin bir tarih belirtmemekle beraber 2008 yılı içerisinde destekleneceği söyleniyor. Tabii buradaki Linux e adapte olma süreci biraz daha yavaş işleyecek gibime geliyor.

Bu kadar açıklamadan sonra uygulamaya geçebiliriz. Buradaki kullanacağım örneklerde Flash Cs3, Actionscript 3.0  ve AIR  beta 3  kullanılacak. Şimdiden bilgilerinize.

2 -Flash Cs3 İle Adobe AIR Uygulaması

2.1Flash Cs3 ile AIR kullanımı

Flash CS3 ile AIR uygulamaları geliştirebilmeniz için AIR Eklentisini indirmeniz gerekiyor. bu eklenti ile AIR uygulamalarını Flash içerisinde rahatça yapabilirisiniz. Tabii unutmamak gerekir AIR Player’ında bilgisayarınızda yüklü olması gerekir. Size vereceğim adreslerden bu dosyaları indirip bilgisayarınıza kurabilirsiniz.

http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update

http://labs.adobe.com/downloads/air.html

Ben bu eklentilerin bilgisayarınızda kurulu olduğunu varsayıp “yeni bir AIR uygulaması” nasıl geliştirebileceğinize geçiyorum.

Flash Cs 3 ilk açtığınızda karşınıza çıkan hoş geldiniz penceresinde “FLASH File – ADOBE AIR ” seçeneğini seçip yeni bir AIR dokümanı oluşturuyoruz.

Şimdi hiç kod yazmadan basit bir flv player uygulaması yapacağım.

İlk olarak oluşturduğumuz AIR dokümanımızı kayıt ediyoruz.

Daha sonra components panelinden FLVPlayBack componentini sürükleyip sahneye bırakıyorum.

Componenti seçerek “Component Inspector” panelinde ki source bölümüne flv dosyasının ismini yazıyorum (Dokümanı kayıt ettiğiniz dosyada herhangi bir flv dosyası bulunması gerekiyor.) Şu anda flv playerin çalışıyor olması gerekiyor.

Sırada ise Publish ayarları var. Publish ayarları için  Commands > AIR-Application and Installer Settings  butonuna tıklıyoruz.Ben buradaki bölümleri sırayla size açıklayacağım.

File Name  – Çalışmanıza vermek istediğiniz ad- Bu ad AIR dosyanızın adı ve yüklemeden sonra masa üzerinde dosyanın alacağı ad, tabii her masaüstü programı gibi buda değişebilir.

Name  – Buraya yazacağınız isim bir nevi tanım, yani buradaki dosyanızın gerçek ismi diyebiliriz. Programı yüklerken açılacak klasörler bu isim adı altında açılıp toplanacak.

ID – Dosya verdiğiniz tekil ID. Bu ID yardımıyla daha önce buna benzer bir dosya olup olmadığını kontrol ediyor. İstediğiniz takdirde bu default olarak yaratılan ID yi değiştirebilirisiniz. Dikkat etmeniz gerek nokta ise sadece latin karakterler, sayı, nokta ve kısa çizgi kullanabilirsiniz.

Version – Yaptığınız uygulamanın versiyonu. Dikkat etmeniz gereken nokta ise yaptığınız bir uygulamanın yeni versiyonunda geliştirdiğinizde kesinlikle buradaki versiyon numarasını da değiştirmeniz gerekecek.

Description – Burası program hakkındaki açıklamalar için.

Copyrigth –Telif hakkı bilgisi.

Window Style – Burada programınızın hangi pencerede açılmak istediğini belirliyorsunuz.

3 Seçeneğiniz var.

1-System – Normal Windows penceresi

2- Custom Chromo (opaque)- Burada programınız bir pencere içinde değil de kendi boyutlarıyla, penceresiz geliyor.

3- Custom Chromo (Transparent)-Yaptığınız uygulama için herhangi bir sistem penceresi belirlemiyor ve şeffaf olarak geliyor.

İcon: bu kısımda uygulamanız için ikon seçiyorsunuz,  ikonlar gördüğünüz gibi dört ayrı boyda olması gerekiyor.

Advanced kısmının üst tarafından yaptığınız uygulama ile ilgili dosya çeşitleri ve pencere ayarları yapılıyor. En altta ise Program menu folder – Programınız içinde bulunduğu dosya adı.Yani Başlat>Programlar da gözükecek dosya adı.Program ise bu dosyanın altında olacaktır.

Use custom application descriptor file –Yaptığınız ayarlar bir xml dosyasına kaydediliyor.Eğer daha önceden yaptığınız ayarları kullanmak istiyorsanız bu şıkkı işaretleyip xml adresini belirtebilirisiniz. Bu sayede ayarları tekrar tekrar yapmış zorunda kalmazsınız.

Dijital Signature – Tüm Adobe AIR uygulamaları başka bilgisayarlara yüklenmesi için dijital olarak imzalanması gerekmektedir.

Yeni bir Dijital İmza yapmak için  Change > Create butonlarına basınız. Karşınıza gelen penceredeki tüm seçenekleri doldurunuz(Publisher name, Organizational unit, Organizational name, Email, Country, Password, and Confirm Password.)Type kısmında ise 1024 –RSA  ve 2048 – RSA diye iki seçenek var.Bu seçenekler güvenlik seçenekleri. 1024 –RSA  1024 bit-key kullanıyor 2048 RSA ise 2048 bit-key kullanıyor, 2048  daha güvenli yani.

Daha sonra Dijital imzanızı herhangi bir dosyaya kaydedin.Bir önceki pencereden Browse tuşuna basarak sertifikayı kayıt ettiğiniz dosyayı açın “mycert.pfx” adlı dosyayı seçin.

Alt kısmındaki Password bölümü sertifikaya girdiğiniz şifreyi giriniz.ve Ok tuşuna basın.

Eğer sertfikayı daha sonra yüklemek isteyorsanız  “Prepare an AIR Intermediare (AIRI) file that will be signed later” seçeneğini işaretleyebilirsiniz.

Ama her halükarda bir sertifika yüklemek zorundasınız.

Dijital imza hakkında daha fazli bilgi almak için;

http://tr.wikipedia.org/wiki/Say%C4%B1sal_imza

Destination – Yaptığınız uygulamayı kaydetmek istediğiniz hedef dosyayı buradan belirtebilirisiniz.

Included Files/Folders–Burada çalışmaya dahil edilen dosyaların listesi yer almakta. Mesela bir uygulamada xml kullandınız, kullandığınız xml i dâhil etmeniz gerekiyor.

Biz bu uygulama için flv dosyası ve flv player arabirimini dahil edeceğiz.

2.2 AIR Dosyası

AIR dosyası; uygulama dosyalarının dağıtımının yapılması için zip tabanlı oluşturulmuş bir taşıyıcı diyebiliriz. AIR dosyası yapılan uygulama için gerekli tüm dosyaları taşıyan bir dosya sistemidir yani. Bu dosyayı kullanıcı bilgisayarına yüklemek için ise AIR Player ın kullanıcı bilgisayarında yüklenmiş olması gerekiyor.

AIR dosyası minimum iki adet dosya taşıyor. Bunların ilki yapmış olduğunuz uygulama ikincisi ise uygulama tanımlama dosyası. Tabii buradaki dosya sayısı gerektiği şekilde arttırılabiliyor. Yani eğer uygulama dosyası harici resim, icon, xml, swf gibi dosyalara ihtiyacınız varsa bunları da pakete dahil edebiliyorsunuz.

AIR uygulamasını kullanıcı bilgisayarında yüklediğinizde bu uygulama Windows işletim sistemi üzerinde;

C:Documents and SettingsengApplication Data

Mac OS üzerinde ise;

/Users/babbage/Library/Preferences/

klasörlerine uygulamanın ID si + uygulamayı yayınlayanın ID si isimlendirmesi şeklinde bir isimlendirme ile kayıt ediliyor.

3 – Pencere ve Menüler

3.1 – Sistem Penceresi

Bu bölümde sistem penceresi ve sistem menülerinin nasıl çalıştığına göz atacağız. İlk olarak sistem penceresini ele alacağım. AIR uygulamaları masaüstü uygulamaları olduğu için işletim sisteminin belli özelliklerini taşıyorlar. Bunlardan biri de sistem pencereleri, AIR içerisinde iki adet sistem pencere seçimi bulunmakta. Bunlardan biri işletim sisteminin sistem penceresini kullanmak. Eğer Windows işletim sistemi kullanıyorsanız karşınıza çıkacak olan sistem penceresi bu şekilde olacaktır

Sistem Penceresi

Tabii eğer Macintosh işletim sistemi kullanıyorsanız. Karşınıza çıkacak olan Macintosh un sistem penceresidir. Bu sistem pencereleri işletim sisteminin belirlediği pencerelerdir. Görünüm açısından çok yaratıcı olmadığını söyleyebilirim. Diğer bir seçenek ise kendi sistem pencerenizi oluşturmak. Kendi sistem pencerenize oluşturmanız için Publish ayarlarındaki Windows style daki transparan seçeneğini seçmeniz gerekiyor. Şimdi kendi sistem pencerenizi oluşturduğunuzda işinize yarayacak bir metoda değineceğim.

3.1.1 – Slice 9 Grid

Bu metod belirlediğiniz bir movie clibi 9 parçaya bölerek sadece ortadaki kısmın büyüyüp küçülmesini sağlıyor, bu da pencerenizin şeklinin bozulmasını önlüyor .

Tabii bunu görsel olarak hazırlayabiliyorsunuz.Burada gördüğünüz çizgileri görsel olarak Mouse ile kontrol edebilirsiniz. Bu metot ile kenarları bozulmayan sistem pencereleri yapabilirsiniz.

slice 9 grid

Bu konu hakkında detaylı bilgi almak isterseniz bu blogdaki Scale 9 grid adlıya göz atabilirsiniz.

3.2 – Sistem pencere kontrolleri(Minimize, Restore, Close)

Eğer kendi sistem pencerenizi yapmaya karar verirseniz ki bence görsellik acısından haklı bir karar daha fazla kod ile başa çıkmış olacaksınız. Bunlardan bir kaçı da minimize, maksimize, kapat butonları ve uygulamayı sürüklemek gibi fonksiyonlar, tabi o kadar büyütmeye gerek yok çok basit bir kaç kod.

//Kapat butonu olay dinleyicisi
closeBtn.addEventListener(MouseEvent.MOUSE_DOWN, kapat);
//kucult butunu olay dinleyicisi
minimizeBtn.addEventListener(MouseEvent.MOUSE_DOWN, kucult);
//pencereyi sürüklemek için gerekli olan kod
dragBtn.addEventListener(MouseEvent.MOUSE_DOWN, surukle);
function kapat(e:MouseEvent) {
      this.stage.nativeWindow.close();
}

function kucult(e:MouseEvent) {
   this.stage.nativeWindow.minimize();
}

function surukle(e:MouseEvent):void {
    this.stage.nativeWindow.startMove();
}

3.3- Pencere Byutlandırmaları

Pencere boyutlandırmaları sistem penceresiniz transparan yapmak istediğinizde karşınıza çıkan baksa bir sorun. Geliştirici olarak unutmamanız gereken, kullanıcının masaüstü programlarında alışageldiği tüm işlevselliği sağlamanız. Ekran boyutlandırmasını ekranın her bir köşesinden yapabilirsiniz, şu anda sadece sağ köşe için boyutlandırma olayını gerçekleştireceğim.

//pencere boyutlandırma olay dinleyicisi
bottomRightBtn.addEventListener(MouseEvent.MOUSE_DOWN, boyutlandir);
//pencere boyutlandırma fonksiyonu
function boyutlandir(e:MouseEvent) {
   this.stage.nativeWindow.startResize(NativeWindowResize.BOTTOM_RIGHT);
}

3.4 – Yeni pencereler oluşturmak

Diyelimki farklı bilgileri görüntülemek için yeni bir pencereye ihtiyacınız var, buna pop-up pencere gözü ile bakabilirsiniz. Bu gibi durumlar için AIR size kullandığınız pencere harici yeni pencereler açmanıza olanak sunuyor.

import flash.display.NativeWindow;
import flash.display.NativeWindowInitOptions;
//İlk olarak yapmanız gereken pencere için yerni ayarlar oluşturmak;
var windowOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
//yeni bir pencere oluşuturyoruz.
var newWindow:NativeWindow = new NativeWindow(windowOptions);

//oluşturduğumuz pencerenin ölçeklendirilmemesi için NO_SCALE metodunu kullanıyoruz.

newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

//pencerenin içerisine gelecek olan içeriğin sol üst köşede gelmesini sağlıyoruz.

newWindow.stage.align = StageAlign.TOP_LEFT;

//şimdi burada yeni bir dikdörtgen oluşturup bunun bilgilerinini new window nesnesine atıyoruz,Bunu teker teker width, height x v y gibi yapabilirdik ama bu yöntem daha kolay,

newWindow.bounds = new Rectangle(250,250,500,350);

//activate metodunu kullanmayana kadar pencereniz görünmeyecektir.

newWindow.activate();

//pencereye içerik ekliyoruz.

//yeni bir loader oluşuruyrouz.

var loader:Loader = new Loader();

//loader metodu ile yeni bir URL isteginde bulunuyoruz.

loader.load(new URLRequest("http://enginyoyen.com/blog/tr/wp-content/uploads/2007/11/airnewlogo.jpg"));

//loader objesini newWindowa ekliyoruz.

newWindow.stage.addChild(loader);

3.5 – Sistem Menüleri

Ve sistem menüleri, AIR API si içerisinde beğenmediğim tek sınıfı yapısı diyebilirim, sebebi ise programlama aşamasında hem Windows için hem mac için ayrı ayrı programlamanız gerekiyor. Aşağıdaki tabloda gördüğünüz gibi Application ve Window aslında aynı menüler fakat farklı işletim sistemlerinde çalışıyorlar, aynı şekilde dock application icon menüsü ile system tray icon menüsü de sistematik olarak aynı. Bana kalırsa bu kısım tamamen değiştirilmeli, cross platfrom çalışan bir sistemde işletim sistemine göre kodlamanın doğru olmadığı kanısındayım, bilmiyorum siz ne düşünüyorsunuz.

Sistem Menüleri

Şu an gördüğünüz listedeki menülere dönecek olursak;

Apllication menu; mac için geçerli olan ve bütün uygulamalara eklenen bir menü.

Window Menü; Program isminin altında geçen Windows kullananların alışık olduğu, dosya düzen diye devam eden menü, bu menü sadece Windows tarafından destekleniyor tabiî ki.

Dock application icon ve system tray icon; ise sistem çubuğunda yer alan menü, Windows tarafından system tray icon diye gecen menü mac tarafından Dock Application Icon olarak geçiyor.

Contect menu; kısaca sağ click menüsü her iki işletim sistemi de destekliyor.

Bu bölümde de yine örneklerle devam edeceğiz kullandığım işletim sistemi Windows xp olduğu için sadece Windows a ait olan menüleri deneyeceğim ki mac a ait bir menüyü yapsam bile çalışıp çalışmadığını bilemeyeceğim için pek bir anlam ifade etmeyecek. Ama gene de size mac için olan çalışma mantığını da anlatmaya çalışacağım.

Window Menü


//Gerekli sınıfları yüklüyoruz.

import flash.display.NativeMenu;

import flash.display.NativeMenuItem;

import flash.display.NativeWindow;

import flash.filesystem.*;

import flash.desktop.*;

//yeni menü nesneleri oluşturuyrouz.

var fileMenu:NativeMenuItem;

var editMenu:NativeMenuItem;

//window menusunu desdekleyip desteklemedıgını kontrol ediyrouz

//Yen işletim sistemi windows mu değilmi, eğer windows ise kodlar çalışıyor

if (NativeWindow.supportsMenu) {

//sahnedeki menüleri burdan ayarlıyoruz.

stage.nativeWindow.menu = new NativeMenu();

//yeni menu ekliyoruz

fileMenu = stage.nativeWindow.menu.addItem(new NativeMenuItem("Dosya"));

editMenu = stage.nativeWindow.menu.addItem(new NativeMenuItem("Düzen"));

//alt menu için çağırılacak fonskiyonu yazıyoruz.

fileMenu.submenu = createFileMenu();

}

//Alt menü fonksiyonu

function createFileMenu():NativeMenu {

//yeni bir menu objesı olusturuyoruz

var subMenu:NativeMenu = new NativeMenu();

//alt menu altına gelecek butunalrı olusturuyoruz.

var newCommand:NativeMenuItem = subMenu.addItem(new NativeMenuItem("Yeni"));

newCommand.addEventListener(Event.SELECT, newFile);

var openCommand:NativeMenuItem = subMenu.addItem(new NativeMenuItem("Aç"));

openCommand.addEventListener(Event.SELECT, openFile);

var browseCommand:NativeMenuItem = subMenu.addItem(new NativeMenuItem("Gözat"));

browseCommand.addEventListener(Event.SELECT, browseFile);

//Retrun metoduylu oluşturulan menulerı geriye donduruyoruz

return subMenu;

}

//Menüye tıklandıgındsa calısacak fonksiyonlar

function newFile(event:Event):void {

//yeni butununa basıldıgında calısacak olan kodlar buraya gelecek

}

function openFile(event:Event):void {

//Aç butununa basıldıgında calısacak olan kodlar buraya gelecek

}

function browseFile(event:Event):void {

//Gözat butununa basıldıgında calısacak olan kodlar buraya gelecek

}

System  Tray Icon

//Gerekli sınıfları yüklüyoruz.

import flash.display.NativeMenu;

import flash.display.NativeMenuItem;

import flash.display.NativeWindow;

import flash.filesystem.*;

import flash.desktop.*;

//yeni bir bitmap oluşturuyoruz burdaki bitmap system tray menudekı cıkacak olan bıtmap

var iconBitmap:BitmapData = new BitmapData(16,16,true,0);

var icon_mc:MovieClip = new MovieClip();

iconBitmap.draw(icon_mc);

//system tray icon oluşturup menu fonksiyonunu ayarlıyoruz.

SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = createTrayMenu();

// menü fonksiyonu

function createTrayMenu():NativeMenu {

//yeni bir menu oluşturuyoruz

var menu:NativeMenu = new NativeMenu();

//menu öğesini ekliyoruz

menu.addItem(new NativeMenuItem("Çık"));

//olay dinleyicisi atıryouz

menu.addEventListener(Event.SELECT, cikis);

//Retrun metoduylu oluşturulan menulerı geriye donduruyoruz

return menu;

}

//cıkıs fonksiyonunu

function cikis(e:Event) {

this.stage.nativeWindow.close();

}

//systm tray ıcon bölümünde uygulamanın alıcagı ıkonu berlirliyoruz.

NativeApplication.nativeApplication.icon.bitmaps = [iconBitmap];

Context Menu


//Gerekli sınıfları yüklüyoruz.

import flash.display.NativeMenu;

import flash.display.NativeMenuItem;

import flash.display.NativeWindow;

import flash.filesystem.*;

import flash.desktop.*;

//yeni bir context menu oluşturuyoruz

var cm:ContextMenu = new ContextMenu();

cm.hideBuiltInItems();

//menu öğelerini oluşturuyrouz

var item:ContextMenuItem = new ContextMenuItem("Kaydet");

var item2:ContextMenuItem = new ContextMenuItem("Çık");

//menu ogelerini context menuye eklıyoruz

cm.customItems.push(item);

cm.customItems.push(item2);

//menu ogelerıne olay dınleyıcılerı eklıyoruz

item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, kaydet);

item2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cik);

function kaydet(e:Event):void {

//kaydet butununa basıldıgında calısacak olan kodlar buraya gelecek

}

function cik(e:Event):void {

//cik butununa basıldıgında calısacak olan kodlar buraya gelecek

}

//context menuyu sahnedekı bır movieclibe atıyoruz.

//movie clibe her sag tıklandıgında context menu acılacak

movieClip_.contextMenu = cm;

4 – Dosya Sistemi

4.1 – İşletim Sistemlerindeki Dosya Yolları

Web geliştiricileri olarak genelde kullanıcının bilgilerini hep veritabanında tutmaya alıştık. Gerçi pek fazla da seçeneğimizde yoktu. AIR ile birlikte bu durum biraz daha değişecek, AIR klasik dosya işlemlerinin tamamını destekliyor. Bu da kullanıcı bilgilerini ya da yaptığı işlemlerin bazılarını kullanıcı bilgisayarında tutmamıza izin veriyor. Bunun size diğer bir artısı yaptığınız uygulama offline olarak çalıştığında geçici dosyaları kullanıcı bilgisayarına atabilmeniz tekrar online olduğunda ise dosyaları ya da bilgileri aktarabilmeniz.

Dosya sistemlerinde ilk olarak işletim sistemlerindeki yollardan bahsetmek istiyorum.

İşletim sistemlerindeki dosya yolları

  • NativePath
  • url

AIR içerisinde işletim sistemindeki dosyalara erişebilmeniz için gerekli adreslemeleri sağlayan iki yöntem var. Bunlardan biri NativePath diğeri URL metodu,  bu iki metodu da dosya adreslemelerinde kullanabilirisiniz, ama sorunsuz bir şekilde tüm işletim sistemlerinde işlem yapmak istiyorsanız eğer kesinlikle nativePath metodunu kullanmanızı tavsiye ederim.

4.2 – Sistem Klasörleri

Bildiğiniz gibi AIR cross platform çalışıyor yani hem Windows hem Mac OS daha sonra linux de çalışacak. Kullanıcı bilgisayarında dosya kaydetmek istediğinizde bunu nereye kayıt edeceksiniz peki? Windows kullananlar “Belgelerime” diye bilir, ama Mac işletim sisteminde nereye kayıt edilecek? İlk başta biraz karmaşık gibi geliyor, çünkü Windows’ta

C:Documents and SettingsengMy Documents

olan klasörün yapısı Mac OS da tamamen farklı. Peki, bu sorunu nasıl çözebiliriz?

AIR içerisinde Windows ve Mac Os için iki işletim sisteminde de sağlıklı çalışacak dosya yolları ve dizinler bulunmaktadır. Bu dizinler ve dosyalara File sınıfının “nativePath” özelliği ile ulaşabilirisiniz.

Her iki sistemde de sorunsuz bir şekilde çalışan klasörler,  aşağıdaki resim dosyasında gördüğünüz klasörlerdir.

File System

Bu bölüme örnekle devam edeceğim, bu örnekte kullanıcı bilgisayarı üzerinde;

  • yeni bir klasör oluşturma
  • yeni bir xml dokümanı oluşturma
  • berlirlenen bir klasörün sistem üzerinde olup olmadığı
  • sistem üzerinde dosya okuma

vb gibi özeliklerin nasıl kullanıldığına göz atacağız. Bu uygulama da;

  • Kullanıcı bilgisayarına ilk yüklendiğinde kullanıcının doküman dizininde(Belgelerim) Uygulama adlı bir klasörün olup olmadığını kontrol edecek eğer yoksa yeni bir klasör oluşturacak.
  • Daha sonra klasörün içerisinde XML dosyasının bulunup bulunmadığını kontrol edecek. Yoksa eğer klasörde yeni bir XML dosyası oluşturacak.Xml dokumanı içerisinde kitap isimleri bulunacak.
  • Sonra Bu xml in bilgilerini kullanıcı bilgisayarından okuyup, bir listeye aktaracağız.
  • Xml içerisine yeni bilgiler ekleyip silerek XMl i kayıt edeceğiz.

Componenet panelinden yeni bir List nesnesini sahneye sürekleyip bırakıyoruz. Instance Name olarak “list” olarak ayarlıyoruz , sonra bir text input ve iki butunu sahneye sürüklüyoruz. Text input “bookName_txt” butonlara ise addBook_btn ve deleteBook_btn instance namelerini veriyoruz.


//gerekli olan sınıflar

import flash.filesystem.*;

import fl.controls.List;

import fl.events.ListEvent;/*------------< DOSYA KONTROLU >------------------*/

var checkFile:File = File.documentsDirectory.resolvePath("Uygulama");

if (!checkFile.exists) {

checkFile.createDirectory();

}

/*------------< DOSYA KONTROLU / >------------------*/

/*------------< XML KONTROLU >------------------*/

var xmlFile:File = File.documentsDirectory.resolvePath("Uygulama/kitap.xml");

var xml:String = "<!--l version="1.0" encoding="UTF-8"-->nnnnnnnnnnnnnnnnnnnnnnn";

if (!xmlFile.exists) {

var createXMLFile:FileStream = new FileStream();

createXMLFile.open(xmlFile, FileMode.WRITE);

createXMLFile.writeUTFBytes(xml);

createXMLFile.close();

}

/*------------&lt; XML KONTROLU&gt;------------------*/

/*------------&lt; XML OKUMA &gt;------------------*/

var readFile:FileStream = new FileStream();

readFile.open(xmlFile, FileMode.READ);

var bookXML:XML = XML(readFile.readUTFBytes(readFile.bytesAvailable));

readFile.close();

/*------------&lt; XML OKUMA&gt;------------------*/

/*------------&lt; LISTEYE EKLEME &gt;------------------*/

var i:uint;

var whichOneSelected:uint;

for (i = 0; i  list.addItem({label:bookXML.book[i].title});

}

list.addEventListener(ListEvent.ITEM_CLICK, feedListItemSelected);

function feedListItemSelected(e:ListEvent):void {

var item:Object = e.item;

whichOneSelected =new Number(e.rowIndex);

}

/*------------&lt; LISTEYE EKLEME/&gt;------------------*/

/*------------&lt; SILME BUTONU &gt;-----------------*/

deleteBook_btn.addEventListener(MouseEvent.MOUSE_DOWN, deleteBook);

var tempString:String;

function deleteBook(e:MouseEvent) {

tempString = new String("");

for (i=0; i   if (i!=whichOneSelected) {

tempString += bookXML.book[i]+"nn";

}

}

var newXML:String = "<!--l version="1.0" encoding="UTF-8"-->nnn"+tempString+"";

var writeXML:FileStream = new FileStream();

writeXML.open(xmlFile, FileMode.WRITE);

writeXML.writeUTFBytes(newXML);

writeXML.close();

refreshFeedList();

}

/*------------&lt; SILME BUTONU / &gt;-----------------*/

/*------------&lt; LISTEYI YENILIYORUZ &gt;------------------*/

function refreshFeedList() {

list.removeAll();

var fileStream:FileStream = new FileStream();

fileStream.open(xmlFile, FileMode.READ);

bookXML = new XML();

bookXML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));

fileStream.close();

list.addEventListener(ListEvent.ITEM_CLICK, feedListItemSelected);

for (i=0; i   list.addItem({label:bookXML.book[i].title});

}

}

/*------------&lt; LISTEYI YENILIYORUZ / &gt;------------------*/

/*------------&lt; EKLEME BUTONU &gt;-----------------*/

addBook_btn.addEventListener(MouseEvent.MOUSE_DOWN, addBook);

function addBook(e:MouseEvent) {

tempString = new String("");

for (var i:uint=0; i   tempString += bookXML.book[i]+"nn";

}

tempString +="nnnn";

var newXML:String = "<!--l version="1.0" encoding="UTF-8"-->nnn"+tempString+"n";

var fs:FileStream = new FileStream();

fs.open(xmlFile, FileMode.WRITE);

fs.writeUTFBytes(newXML);

fs.close();

refreshFeedList();

bookName_txt.text = "";

}

/*------------&lt; EKLEME BUTONU &gt;-----------------*/

4.3 – Sistem üzerinde geçici dosya oluşturmak

Kullanıcı kendi bilgisayarı üzerinde işlem yaparken bazen geçici olarak bazı dosyaları bilgisayarda saklamanız gerekebilir. Bu gibi durumlarda createTempFile ve cerateTempDirectory metotları işinize yarayabilir.


var temp:File = File.createTempDirectory();

4.4 – Tek ve toplu dosya seçmek

Yapmış olduğunuz uygulama da kullanıcının bilgisayardan dosya seçmesi gibi bir durum söz konusu olabilir, şimdi ufak bir örnekle bunu nasıl yapabileceğimize bakalım; Örnekte tek ve toplu halde dosya seçerek bu dosya adlarını sahnedeki bir metin kutusuna yazdıracağız.

İlk olarak sahneye iki tane buton ekleyelim, instance namelerini select_btn, ve selectMulti_btn yapalım ayrıca bir tanede dinamik text kutusu çizmemiz gerekiyor.instance name ise  file_txt olarak ayarlıyoruz.


//gerekli dosyaları import ediyoruz

import flash.filesystem.*;

import flash.events.FileListEvent;

//tek bir dosya secmek için butuna olay dinleyicisi ekliyrouz

select_btn.addEventListener(MouseEvent.MOUSE_DOWN, select);

//yeni bir file objesi oluşturuyrouz

var selectSingle:File = new File();

//file objesine olay dinleyisici ekliyoruz

selectSingle.addEventListener(Event.SELECT, writeFileName);

//dosya secme fonksiyonu

function select(e:Event):void {

selectSingle.browseForOpen("Dosya Aç");

}

//Seçile dosyayı text kutusuna yazdırıyouz.

function writeFileName(e:Event) {

file_txt.text = e.target.nativePath;

}

//birden çok dosya secmek için butuna olay dinleyicisi ekliyrouz

selectMulti_btn.addEventListener(MouseEvent.MOUSE_DOWN, selectMulti);

//yeni bir file objesi oluşturuyrouz

var selectMultiple:File = new File();

//file objesine olay dinleyisici ekliyoruz

selectMultiple.addEventListener(FileListEvent.SELECT_MULTIPLE, writeFiles);

//dosya secme fonksiyonu

function selectMulti(e:Event):void {

selectMultiple.browseForOpenMultiple("Birden Fazla Dosya Aç");

}

var a:String = new String();

//Seçile dosyaları text kutusuna yazdırıyouz.

function writeFiles(event:FileListEvent):void {

//dosya sayısı bırden cok oldugu ıcın dongu ıle ısımlerı alıyoruz

for (var i:uint = 0; i < event.files.length; i++) {

a += event.files[i].name + "n";

}

file_txt.text = a;

}

4.5 – Dizin Seçmek

Aslında dizin seçme olayı, dosya seçmekten pek farklı sayılmaz, aynı işlem üzerinden devam edersek eğer;


//gerekli dosyaları import ediyoruz

import flash.filesystem.File;

import flash.events.Event;

import flash.net.*;//yeni bir file objesi oluşturuyrouz

var directory:File = File.documentsDirectory;

//dizin secmek için butuna olay dinleyicisi ekliyrouz

selectDir_btn.addEventListener(MouseEvent.MOUSE_DOWN, selectDir);

//dosya secme fonksiyonu

function selectDir(e:MouseEvent) {

directory.browseForDirectory("Select Directory");

directory.addEventListener(Event.SELECT, directorySelected);

}

//Seçile dizin deki dosyaları text kutusuna yazdırıyouz.

function directorySelected(event:Event):void {

directory = event.target as File;

var files:Array = directory.getDirectoryListing();

var tempStr:String= new String();

for (var i:uint = 0; i &lt; files.length; i++) {

tempStr += files[i].name +"n";

file_txt.text = tempStr;

}

<strong>4.6 - Dosya Kopyalama ve Silme</strong>

Sırada dosya kopyalama ve silme var. Kullanıcı bilgisayarında ne kadar kullanırsınız bilmem ama, arada sırada işinize yarayabilir.Bu bölümde ki örneğimiz ise biraz daha eğlenceli bir örnek.

Bu örneğimizde hem drag and drop sistemin hem, dosya silmeyi hem de dosyayı bir yerden başka bir yere kesip yapıştırmayı göz atacağız.

Ben daha önceden dosyaları hazırlamıştım, bura da yapacağımız işlem basit bir işlem aslında, her hangi bir klasördeki bir png dosyasını sürükleyip bırakarak başka bir dosyaya aktaracağız, ayrıca gene sürükleyip bırakarak dosya ile  silme işlemi yapacağız.


import flash.filesystem.File;

import flash.filesystem.*;

import flash.events.Event;

import flash.net.*;

import flash.desktop.NativeDragManager;

import flash.desktop.ClipboardFormats;

import flash.desktop.Clipboard;
/*-----------< SELECT DIRECTORY >-----------*/

file_btn.addEventListener(MouseEvent.MOUSE_DOWN,getDir);

var directory:File = File.documentsDirectory;

function getDir(e:MouseEvent) {

directory.browseForDirectory("Dizin Seç");

directory.addEventListener(Event.SELECT, directorySelected);

}

var temporaryDir:File = new File();

function directorySelected(e:Event):void {

temporaryDir.nativePath = e.target.nativePath;

}

/*-----------< SELECT DIRECTORY>-----------*/

/*-----------< TRASH OR COPY >-----------*/

trash_mc.addEventListener(MouseEvent.MOUSE_DOWN, trash);

image_mc.addEventListener(MouseEvent.MOUSE_DOWN, image);

var whereToGo:uint;

function trash(e:MouseEvent) {

whereToGo = 2;

}

function image(e:MouseEvent) {

whereToGo = 1;

}

image_mc.buttonMode= true;

trash_mc.buttonMode= true;

/*-----------< TRASH OR COPY>-----------*/

/*-----------< DRAG AND DROP >-----------*/

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, startToDrag);

this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dropDrag);

var file:Object = new Object;

function startToDrag(event:NativeDragEvent) {

file = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);

if (file[0].extension=="png") {

NativeDragManager.acceptDragDrop(this);

}

}

function dropDrag(event:NativeDragEvent) {

if (whereToGo ==1) {

file = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);

var sourceFile:File = new File();

sourceFile.nativePath = file[0].nativePath;

var destination:File = new File();

destination.nativePath = temporaryDir.nativePath+"/"+ file[0].name;

sourceFile.moveTo(destination);

image_mc.gotoAndPlay(2);

} else if (whereToGo == 2) {

var deleteFile:File = new File();

deleteFile.nativePath = file[0].nativePath;

deleteFile.deleteFile();

trash_mc.gotoAndPlay(2);

}

}

/*-----------< DRAG AND DROP>-----------*/

4.7 – Copy And Paste – Kopyala ve Yapıştır

Ve son..Bu bölümde clipboard dan herhangi bir bilgiyi nasıl kopyalacağınız ve yapıştıracağınıza dair bir örnek yapacağız.


import flash.desktop.Clipboard;

import flash.desktop.ClipboardFormats;

paste_btn.addEventListener(MouseEvent.MOUSE_DOWN, paste);

copy_btn.addEventListener(MouseEvent.MOUSE_DOWN, copy);
function paste(e:MouseEvent) {

if (Clipboard.generalClipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) {

paste_txt.text="" + Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT);

}

}

function copy(e:MouseEvent) {

Clipboard.generalClipboard.clear();

Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT,copy_txt.text);

}

<a href="http://enginyoyen.com/blog/tr/wp-content/uploads/2008/02/Examples.rar">Kaynak dosyaları burdan indirebilirsiniz.Kaynak dosyalar örnekler ile aynı sıralamadadır.</a>

Kolay Gelsin

Engin!

2 responses to Online Seminer Doküman ve Örnekleri

  1. Merhaba hocam .. pbilgi paylaşımın icin cok teşekür ederiz. gercekten cok yararlı bilgiler veriyorsun. sağolasın. herzaman devamını bekliyoruz..

  2. sunumu yeni izliyorum cok gec kalmisim:) tesekkuderim.

Leave a Reply

*

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>