Flex - Uygulamalar

Flash Builder kullanarak gerçek "HelloWorld" uygulaması oluşturmaya başlamadan önce , bir Flex uygulamasının gerçek parçalarının neler olduğunu görelim -

Bir Flex uygulaması, son bölüm isteğe bağlı ancak ilk üç bölüm zorunlu olan aşağıdaki dört önemli bölümden oluşur.

Flex Framework Kitaplıkları
İstemci tarafı kodu
Kamu Kaynakları (HTML / JS / CSS)
Sunucu tarafı kodu

HelloWord gibi tipik bir Flex uygulamasının farklı bölümlerinin örnek konumları aşağıda gösterildiği gibi olacaktır -

İsim	yer
Proje kökü	Selam Dünya/
Flex Framework Kitaplıkları	Yol Oluştur
Kamu kaynakları	html şablonu
İstemci tarafı kodu	tablo sınırlamalı / com / tutorialspoint / client
Sunucu tarafı kodu	tablo sınırlamalı / com / tutorialspoint / server

Uygulama Oluşturma Süreci

Başlangıç olarak, Flex uygulaması, Flex çerçeve kitaplıkları gerektirir. Daha sonra Flash Builder, yolu oluşturmak için kitaplıkları otomatik olarak ekler.

Kodumuzu Flash oluşturucuyu kullanarak oluşturduğumuzda, Flash oluşturucu aşağıdaki görevleri gerçekleştirecektir -

Kaynak kodunu HelloWorld.swf dosyasına derler.
Html-şablon klasöründe depolanan index.template.html dosyasından bir HelloWorld.html (swf dosyası için bir sarmalayıcı dosyası) derler
HelloWorld.swf ve HelloWorld.html dosyalarını hedef klasör olan bin-debug'a kopyalar.
Swf dosyasını dinamik olarak HelloWorld.html'de hedef klasörde, bin-debug'da yüklemekten sorumlu bir JavaScript kodu olan swfobject.js'yi kopyalar
Çerçeve kitaplıklarını, hedef klasördeki frameworks_xxx.swf adlı swf dosyası biçiminde kopyalar, bin-debug
Hedef klasördeki diğer flex modüllerini (sparkskins_xxx.swf, textLayout_xxx.swf gibi .swf dosyalarını) kopyalar.

Uygulama Başlatma Süreci

\ HelloWorld \ bin-debug klasöründe bulunan HelloWorld.html dosyasını herhangi bir web tarayıcısında açın.
HelloWorld.swf otomatik olarak yüklenecek ve uygulama çalışmaya başlayacaktır.

Flex Framework Kitaplıkları

Birkaç önemli çerçeve kitaplığı hakkında kısa ayrıntı aşağıdadır. Flex kitaplıklarının .swc gösterimi kullanılarak belirtildiğini lütfen unutmayın.

Sr.No	Düğümler ve Açıklama
1	playerglobal.swc Bu kitaplık, makinenizde yüklü FlashPlayer'a özeldir ve flash player tarafından desteklenen yerel yöntemler içerir.
2	textlayout.swc Bu kütüphane, metin düzeni ile ilgili özellikleri destekler.
3	framework.swc Bu flex çerçeve kitaplığı, Flex'in temel özelliklerini içerir.
4	mx.swc Bu kütüphane, mx UI kontrollerinin tanımlarını depolar.
5	charts.swc Bu kütüphane, grafik kontrollerini destekler.
6	spark.swc Bu kitaplık, spark UI denetimlerinin tanımlarını depolar.
7	sparkskins.swc Bu kitaplık, kıvılcım kullanıcı arabirimi kontrollerinin dış görünümünü destekler.

İstemci Tarafı Kodu

Flex uygulama kodu yazılabilir MXML Hem de ActionScript.

Sr.No	Tip ve Açıklama
1	MXML MXML, kullanıcı arayüzü bileşenlerini yerleştirmek için kullanacağımız bir XML biçimlendirme dilidir. MXML, oluşturma işlemi sırasında ActionScript'te derlenir.
2	ActionScript ActionScript, nesne yönelimli yordamsal bir programlama dilidir ve ECMAScript (ECMA-262) sürüm 4 taslak dil belirtimine dayanır.

Flex'te, aşağıdakileri yapmak için ActionScript ve MXML'yi karıştırabiliriz -

MXML etiketlerini kullanarak kullanıcı arayüzü bileşenlerini düzenleyin
Sunucudaki veri kaynaklarına erişim gibi bir uygulamanın görsel olmayan yönlerini bildirimli olarak tanımlamak için MXML'yi kullanın
Sunucudaki kullanıcı arabirimi bileşenleri ile veri kaynakları arasında veri bağlantıları oluşturmak için MXML'yi kullanın.
MXML olay nitelikleri içindeki olay dinleyicilerini tanımlamak için ActionScript kullanın.
Kullanarak komut dosyası blokları ekleyin etiket.
Harici ActionScript dosyalarını dahil edin.
ActionScript sınıflarını içe aktarın.
ActionScript bileşenleri oluşturun.

Kamu Kaynakları

Bunlar, Host HTML sayfası, CSS veya html-şablon klasörü altında bulunan resimler gibi Flex uygulaması tarafından referans verilen yardım dosyalarıdır. Aşağıdaki dosyaları içerir -

Sr.No	Dosya Adı ve Tanımı
1	index.template.html Yer tutucularla HTML sayfasını barındırın. Flash Builder, HelloWorld.swf dosyasıyla gerçek sayfa HelloWorld.html oluşturmak için bu şablonu kullanır.
2	playerProductInstall.swf Bu, Flash Player'ı hızlı modda kurmak için bir flash yardımcı programdır.
3	swfobject.js Bu, yüklü flash player sürümünü kontrol etmekten ve HelloWorld.swf'yi HelloWorld.html sayfasına yüklemekten sorumlu olan JavaScript'tir.
4	html-template/history Bu klasör, uygulamanın geçmiş yönetimi için kaynakları içerir.

HelloWorld.mxml

Bu, uygulamanın iş mantığını uygulayan ve Flex derleyicisinin tarayıcıda flash player tarafından yürütülecek SWF dosyasına çevirdiği gerçek MXML / AS (ActionScript) kodudur.

Örnek bir HelloWorld Entry sınıfı aşağıdaki gibi olacaktır -

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

Aşağıdaki tablo, yukarıdaki kod komut dosyasında kullanılan tüm etiketlerin açıklamasını vermektedir.

Sr.No	Düğüm ve Açıklama
1	Application Her zaman bir Flex uygulamasının kök etiketi olan Uygulama kabını tanımlar.
2	Script ActionScript dilinde iş mantığını içerir.
3	VGroup Dikey şekilde Flex UI kontrolleri içerebilen bir Dikey Gruplama Konteyneri tanımlar.
4	Label Metin görüntüleyen çok basit bir kullanıcı arabirimi bileşeni olan bir Etiket denetimini temsil eder.
5	Button Bir eylem yapmak için tıklanabilen bir Düğme denetimini temsil eder.

Sunucu tarafı kodu

Bu, uygulamanızın sunucu tarafı kısmıdır ve çok isteğe bağlıdır. Uygulamanızda herhangi bir arka uç işleme yapmıyorsanız, bu parçaya ihtiyacınız yoktur, ancak arka uçta bazı işlemler gerekiyorsa ve istemci tarafı uygulamanız sunucuyla etkileşime girerse, bu bileşenleri geliştirmeniz gerekecektir.

Bir sonraki bölümde, yukarıda belirtilen tüm kavramları kullanarak bir HelloWorld Flash Builder kullanarak uygulama.