Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flex

1,346 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Flex

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

×