Your SlideShare is downloading. ×
Flex
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex

1,105

Published on

flex in resmi sitesindeki ingizlice beginning guide bolumunun kısa sunumu (turkce)

flex in resmi sitesindeki ingizlice beginning guide bolumunun kısa sunumu (turkce)

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Gökhan Tanışık [email_address] 28.06.2008
  • 2. Amaç
    • Adobe flex 3 hakkında giriş bilgisi edinmek.
    • Uygulama ortamını görmek
    • Basit uygulama örneğiyle temel bilgi edinmek
    26.06.2008 Gökhan Tanışık
  • 3. Içerik
    • Flex nedir?
    • Diğer teknolojilere karşı flex
    • Basit bir RIA(rich internet application) uygulaması
    26.06.2008 Gökhan Tanışık
  • 4. Flex nedir?
    • Flex tüm işletim sistemlerinde, browser’lar da yapılandırlıp çalıştırılabilen açık kaynak kodlu bir framework’dür.
    • Mxml ve actionscript teknolojilerini içerir.
    • Flex uygulamaları, Flash gibi ,swf dosyalarına derlenirler
    26.06.2008 Gökhan Tanışık
  • 5. 26.06.2008 Gökhan Tanışık
  • 6.
    • An animeted overview of flex
    26.06.2008 Gökhan Tanışık
  • 7. Flex ve diğer teknolojiler
    • Flex ile diğer teknolojileri bir araya getirirken bilinmesi gereken en önemli durumlar:
      • Flex, istemci taraflı (client-side) çalışır ve Flash Player (9+) veya Adobe Air tarafından çalıştırılır.
      • Flex, istemci tarafında javascript kullanabilir.
      • Flex, gerçek zamanlı veri desteğini sağlamak için, sunucu taraflı (server-side) bir teknoloji gerektirir
    26.06.2008 Gökhan Tanışık
  • 8. Flex ve Java
    • Java hem sunucu hem de istemci taraflı uygulamalar oluşturabilmek için kullanılabilir. İstemci taraflı uygulamalar ın indirilmesi ve açılması dosya boyutları sebebiyle çok fazla zaman alır, bu yüzden sunucu taraflı uygulamalar daha çok tercih edilir. Flex, java geliştiricileri için kolay ifade edilebilen ve etkileşimli bir arayüzler yaratırken, java sunucularına da etkin bağlanma gücü sunar.
    26.06.2008 Gökhan Tanışık
  • 9. 26.06.2008 Gökhan Tanışık
  • 10. Basit bir RIA örneği
    • Bu modülle, kullanıcın aradığı anahtar kelimeleri içeren resimleri flickr API’den alan ve gösteren basit bir RIA(rich internet application) uygulamasının oluşturulması örneklenmektedir.
    • Uygulamanın amacı flex programcılarına MXML ve ActionScript söz dizimi ve flex geliştirme işlemine giriş bilgisi edindirmektir.
    26.06.2008 Gökhan Tanışık
  • 11. RIA örneği için flex ön bilgileri
    • Flex uygulamaları flash uygulamalarıdır
    • Flex frameworku ön tanımlı sınıf kütüphanelerini içerir ve flex uygulamaları yaratmak için uygulama servisleri gerektirir.
    • Flex uygulamaları MXML ve ActionScript kullanılırak yazılır.
      • MXML, uygulamanın kullanıcı ara yüzünün oluşturulmasını sağlayan xml tabanlı biçimleme dilidir(markup language)
    26.06.2008 Gökhan Tanışık
  • 12. RIA örneğinde neler öğrenilecek?
    • MXML ile kullanıcı arayüzünün oluşturulması ( arama terimlerinin girilmesi ve dönen resimlerin gösterilmesi)
    • ActionScript ile bir method ve event handler yazılması
    • Flex HTTPService kullanarak Flickr dan RSS verinin istenilmesi ve işlenmesi.
    • Tile bileşenine yerleştirmek için bağlanabilir XML değişkeni oluşturmak.
    • Veriyi XML olarak kullanmak (cast).
    • XML thumbnail ve veri açıklamak için namespace yaratmak.
    • Tile bileşenindeki photo thumbnail ve açıklamasını göstermek için item renderer yaratmak.
    • Özel bir component oluşturak.
    • Uyguama görünümünü özelleştirmek.
    26.06.2008 Gökhan Tanışık
  • 13.
    • RIA örneğinin video versiyonu için tıklayın…
    26.06.2008 Gökhan Tanışık
  • 14. RIA uygulaması(flickrRIA.mxml)
    • <? xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?>
    • <mx:Application xmlns:mx =&quot;http://www.adobe.com/2006/mxml&quot; backgroundGradientColors =&quot;[0xFFFFFF, 0xAAAAAA]&quot; horizontalAlign =&quot;left&quot; verticalGap =&quot;15&quot; horizontalGap =&quot;15&quot; >
    • <mx:Script> <![CDATA[
    • import mx.collections.ArrayCollection ;
    • import mx.rpc.events.ResultEven t;
    • [Bindable] private var photoFeed: ArrayCollection ;
    • private function requestPhotos() :void {
    • photoService. cancel ();
    • var params: Object = new Object ();
    • params. format = ' rss_200_enc ';
    • params. tags = searchTerms. text ;
    • photoService. send (params);
    • }
    • private function photoHandler(event: ResultEvent ): void {
    • photoFeed = event. result.rss.channel.item as ArrayCollection ;
    • }
    • ]]> </mx:Script>
    26.06.2008 Gökhan Tanışık
  • 15.
    • <mx:HTTPService id =&quot;photoService&quot; url =&quot;http://api.flickr.com/services/feeds/photos_public.gn&quot; result =&quot;photoHandler(event)&quot; />
    • <mx:HBox>
    • <mx:Label text =&quot;Flickr tags or search terms:&quot; />
    • <mx:TextInput id =&quot;searchTerms&quot; />
    • <mx:Button label =&quot;Search&quot; click =&quot;requestPhotos()&quot; />
    • </mx:HBox>
    • <mx:TileList width =&quot;100%&quot; height =&quot;100%“
    • dataProvider =&quot;{photoFeed}&quot;
    • itemRenderer =&quot;FlickrThumbnail&quot; >
    • </mx:TileList>
    • </mx:Application>
    26.06.2008 Gökhan Tanışık flickrRIA.mxml(2)
  • 16. FlickrThumbnail.mxml
    • <?xml version =&quot;1.0&quot; encoding =&quot;utf-8&quot; ?>
    • <mx:VBox xmlns:mx =&quot;http://www.adobe.com/2006/mxml&quot; width =&quot;125&quot; height =&quot;125&quot; horizontalAlign =&quot;center&quot;
    • paddingBottom =&quot;5&quot; paddingLeft =&quot;5&quot; paddingRight =&quot;5&quot; paddingTop =&quot;5“ >
    • <mx:Image width =&quot;75&quot; height =&quot;75&quot; source =&quot;{data.thumbnail.url}&quot; />
    • <mx:Text width =&quot;100&quot; text =&quot;{data.credit}&quot; />
    • </mx:VBox>
    26.06.2008 Gökhan Tanışık
  • 17. Uygulamayı yakından inceleyelim 26.06.2008 Gökhan Tanışık
  • 18. Uygulamayı yakından inceleyelim(2)
    • Arayüzü biçimlendirme
    • xmlns:mx : namespace, Flex server da bileşen dosyalarının yerini tanımlar, boylece uygulamanız dosyalar için nereye bakacağını bilir.
    • backgroundGradientColors : Zemin rengini belirler
    • horizontalAlign : yatay sıralama
    • Gap lar ise bileşenler arası aralığı belirler
    26.06.2008 Gökhan Tanışık <mx:Application xmlns:mx =&quot;http://www.adobe.com/2006/mxml&quot; backgroundGradientColors =&quot;[0xFFFFFF,0xAAAAAA]&quot; horizontalAlign =&quot;left&quot; verticalGap =&quot;15&quot; horizontalGap =&quot;15&quot; >
  • 19. Uygulamayı yakından inceleyelim(3)
    • Button ve textInput’ in eklenmesi
    • HBox : label, textInput ve Button için yatay kaplama
    • Label : etiket, text ile içeriği belirlenir.
    • TextInput : Kullanıcıdan girdi alır, id ile kimlik verilir
    • Button : Buton, label ile etiketi verilir
    26.06.2008 Gökhan Tanışık <mx:HBox> <mx:Label text=&quot; Flickr tags or search terms: &quot; /> <mx:TextInput id=&quot; searchTerms &quot; /> <mx:Button label=&quot; Search &quot; click=&quot;requestPhotos()&quot; /> </mx:HBox>
  • 20. Uygulamayı yakından inceleyelim(4)
    • HttpService nesnesi
    • HttpService, flickr servisini çağırmak ve sonuçları döndürmek için kullanılır. İd ve url değerleri verildikten sonra result ile sonuçları işleyecek fonksiyon belirlenir.
    26.06.2008 Gökhan Tanışık <mx:HTTPService id =&quot;photoService“ url =&quot;http://api.flickr.com/services/feeds/photos_public.gne&quot; result =&quot;photoHandler(event)&quot; />
  • 21. Uygulamayı yakından inceleyelim(5)
    • ActionScript ile scriptleri ekleme
    26.06.2008 Gökhan Tanışık <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var photoFeed:ArrayCollection; private function requestPhotos(): void { photoService.cancel(); var params:Object = new Object(); params.format = 'rss_200_enc'; params.tags = searchTerms.text; photoService.send(params); } private function photoHandler(event: ResultEvent ): void { photoFeed = event.result.rss.channel.item as ArrayCollection; } ]]> </mx:Script>
  • 22. Uygulamayı yakından inceleyelim(6)
    • İmport : Paketleri uygulamaya dahil etmek için kullanuılır
    • private : Elemanın erişim alanını belirtir
    • var : değişken tanımlar
    • requestPhotos : “search” butonu tıklandığında flickr servisine arama isteğini gönderir
    • photoHandler : Dönen sonucu alır ve ArrayCollection türüne çevirir
    26.06.2008 Gökhan Tanışık
  • 23. Uygulamayı yakından inceleyelim(7)
    • Listeleme
    • TileList resimleri döşeme sitili ile görüntüleme için kullanılır.
    • dataProvider : Görüntülenecek elemanların nerden geldiğini belirtir
    • itemRenderer : nesneleri ayırmak için kullanılır
    26.06.2008 Gökhan Tanışık <mx:TileList width =&quot;100%&quot; height =&quot;100%&quot; dataProvider =&quot;{photoFeed}&quot; itemRenderer =&quot;FlickrThumbnail&quot;> </mx:TileList>
  • 24. Uygulamayı yakından inceleyelim(7)
    • FlickrThumbnail.mxml
    26.06.2008 Gökhan Tanışık <mx:VBox xmlns:mx =&quot;http://www.adobe.com/2006/mxml&quot; width =&quot;125&quot; height=&quot;125” horizontalAlign=&quot;center&quot; paddingBottom =&quot;5&quot; paddingLeft =&quot;5&quot; paddingRight =&quot;5“ paddingTop =&quot;5&quot;> <mx:Image width =&quot;75&quot; height=&quot;75&quot; source =&quot;{data.thumbnail.url}&quot; /> <mx:Text width =&quot;100&quot; text =&quot;{data.credit}&quot; /> </mx:VBox>
  • 25. 26.06.2008 Gökhan Tanışık
  • 26. Uyarı
    • Flex Builder türkiye için lokalizasyon sorunu çıkartıyor. Sorunu çözmek için
    • -Duser.language=en
    • -Duser.location=us
    • kodunu FlexBuilder.ini dosyasına ekleyin. Flex builder’ı eclipse eklentisi için kullanıyorsanız aynı kodu eclipse.ini’ye ekleyin.
    26.06.2008 Gökhan Tanışık
  • 27. Kaynak
    • Flex’i tam olarak öğrenmek için:
    • http://livedocs.adobe.com/flex/3/html/index.html
    • Flex 3 dökümantasyonu için:
    • http://livedocs.adobe.com/flex/3/flex3_documentation.zip
    26.06.2008 Gökhan Tanışık
  • 28. Sorular? 26.06.2008 Gökhan Tanışık

×