Flex - Hızlı Kılavuz
Flex nedir?
Flex, aynı programlama modelini, aracı ve kod tabanını kullanarak tarayıcı, mobil ve masaüstü için geleneksel uygulamalar oluşturmanıza olanak tanıyan güçlü, açık kaynaklı bir uygulama çerçevesidir.
Flex, etkileyici ve etkileşimli zengin internet uygulamaları (RIA) oluşturmak için Flex sınıf kitaplığı (ActionScript sınıfları), Flex derleyicileri, hata ayıklayıcı, MXML ve ActionScript programlama dilleri ve diğer yardımcı programlardan oluşan FLEX SDK sağlar.
Flex, bir web uygulamasının kullanıcı arabirimi (UI) veya istemci tarafı işlevselliği ile ilgilenir. Sunucu tarafı işlevselliği, geleneksel bir komut dosyası dilinde (Java / PHP vb.) Yazılan sunucu tarafı bileşenlerine bağlıdır.
Flex tabanlı bir uygulama aslında bir SWF dosyası olarak sunulur ve geleneksel bir web uygulamasının HTML / JavaScript kısmına çok benzer.
Flex uygulaması, sunucuya SWF dosyası (dosyaları) artı bir HTML sarmalayıcı, CSS dosyası (dosyaları) ve herhangi bir sunucu tarafı komut dosyası dosyası (yani Java, .CFM, .PHP, vb.) Olarak dağıtılır. Geleneksel web uygulamaları gibi.
Bu kaynaklar, bir sunucudan müşterinin tarayıcısına, geleneksel HTTP istek / yanıt tarzı ve uygulamayı bir tarayıcıda çalıştıran Flash Player kullanılarak teslim edilir.
Flex'in Avantajları
Flex uygulamaları genellikle GPS, kamera, yerel veritabanı, grafik ivme ölçer gibi cihaz özelliklerine erişebilen Flash Player tabanlıdır.
Flex uygulamaları Android, BlackBerry Tablet OS ve iOS cihazlarda çalışabilir.
Flex uygulamaları Tarayıcılarda ve Masaüstünde çalışabilir.
Flex uygulamaları platformdan bağımsızdır. UI, platforma özgü olabilir veya her platformda aynı yapılabilir.
Flex uygulamaları, REST, SOAP, JSON, JMS ve AMF gibi endüstri standartlarını kullanarak Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion ve SAP gibi tüm büyük sunucu tarafı teknolojileriyle sunucuyla etkileşime girebilir.
Flex Applications, uygulamayla sezgisel etkileşim ve bilgileri görsel olarak daha zengin bir arayüzde sunarak zengin kullanıcı deneyimi sağlar.
Flex uygulaması, durumların sunucudan yeni bir sayfa getirmeye veya tarayıcıyı yenilemeye gerek kalmadan bir durumdan diğerine geçebildiği tek sayfalı bir uygulamadır.
Flex uygulaması, kullanıcı görünümleri her değiştirdiğinde yeni bir sayfa yerine uygulamanın yalnızca bir kez döndürülmesi gerektiğinden sunucudaki yükü büyük ölçüde azaltır.
Flex'in dezavantajları
Flex uygulamaları tek iş parçacıklı uygulamalardır ancak Flex, bu endişeyi azaltmak için eşzamansız bir programlama modeli sağlar.
Flex, ActionScript ve XML tabanlıdır. Bu ikisini öğrenmek, Flex'te çalışmak için bir zorunluluktur.
Bu eğitim, Adobe Flex Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız konusunda size rehberlik edecektir. Bu eğitim, Flex Framework'ü kurmadan önce makinenize JDK ve Adobe Flash Builder'ı nasıl kuracağınızı da öğretecektir.
Sistem gereksinimleri
FLEX, JDK 1.4 veya üstünü gerektirir, bu nedenle ilk gereksinim, makinenize JDK'nın kurulu olmasıdır.
| JDK | 1.4 veya üstü. |
|---|---|
| Hafıza | Minimum gereklilik yok. |
| Disk alanı | Minimum gereklilik yok. |
| İşletim sistemi | Minimum gereklilik yok. |
Flex uygulama geliştirmeye başlamak için ortamınızı ayarlamak için verilen adımları izleyin.
Adım 1 - Makinenizde Java kurulumunu doğrulayın
Şimdi konsolu açın ve aşağıdakileri yürütün java komut.
| işletim sistemi | Görev | Komut |
|---|---|---|
| pencereler | Komut Konsolunu Aç | c: \> java sürümü |
| Linux | Komut Terminalini Aç | $ java sürümü |
| Mac | Açık Terminal | makine: ~ joseph $ java -version |
Tüm işletim sistemleri için çıktıyı doğrulayalım -
| işletim sistemi | Üretilen Çıktı |
|---|---|
| pencereler | java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım) |
| Linux | java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım) |
| Mac | java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) 64-Bit Sunucu VM (derleme 17.0-b17, karma mod, paylaşım) |
Adım 2 - Java Geliştirme Kitini (JDK) Kurun
Java kurulu değilse, Java Yazılım Geliştirme Kiti'ni (SDK) Oracle'ın Java sitesi Java SE İndirmelerinden yükleyebilirsiniz . İndirilen dosyalarda JDK kurulumu için talimatlar bulacaksınız, ardından kurulumu kurmak ve yapılandırmak için verilen talimatları izleyin. Son olarak, PATH ve JAVA_HOME ortam değişkenlerini java ve javac içeren dizine başvuracak şekilde ayarlayın, tipik olarak sırasıyla java_install_dir / bin ve java_install_dir.
Yı kur JAVA_HOMEJava'nın makinenizde kurulu olduğu temel dizin konumunu gösteren ortam değişkeni. Örneğin -
| işletim sistemi | Çıktı |
|---|---|
| pencereler | JAVA_HOME ortam değişkenini C: \ Program Files \ Java \ jdk1.6.0_21 olarak ayarlayın |
| Linux | dışa aktar JAVA_HOME = / usr / local / java-current |
| Mac | dışa aktar JAVA_HOME = / Kitaplık / Java / Ana Sayfa |
Java derleyici konumunu Sistem Yoluna ekleyin.
| işletim sistemi | Çıktı |
|---|---|
| pencereler | % JAVA_HOME% \ bin dizesini sistem değişkeninin, Yol'un sonuna ekleyin. |
| Linux | dışa aktarma PATH =$PATH:$JAVA_HOME / bin / |
| Mac | gerekli değil |
Adım 3 - Adobe Flash Builder 4.5'i Kurun
Bu eğitimdeki tüm örnekler, Adobe Flash Builder 4.5 Profession IDE Deneme Sürümü kullanılarak yazılmıştır. Bu nedenle, makinenize Adobe Flash Builder'ın en son sürümünü yüklemenizi öneririz. Ayrıca, işletim sisteminin uyumluluğunu kontrol edin.
Adobe Flash Builder IDE'yi yüklemek için, en son Adobe Flash Builder ikili dosyalarını indirin https://www.adobe.com/in/products/flash-builder.html. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ flash-builder'da veya Linux / Unix'te / usr / local / flash-builder'da ve son olarak PATH değişkenini uygun şekilde ayarlayın.
Flash Builder, Windows makinesinde aşağıdaki komutları yürüttüğünüzde veya FlashBuilder.exe'ye çift tıkladığınızda başlayacaktır.
%C:\flash-builder\FlashBuilder.exeFlash Builder, Unix (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar yürütülerek başlatılabilir -
$/usr/local/flash-builder/FlashBuilderAdobe Flash Builder Deneme Sürümü 60 gün boyunca kullanılabilir. Sadece hüküm ve koşulları kabul edin ve IDE'ye devam etmek için ilk kayıt adımlarını atlayın. Anlayışımız için, deneme sürümünü öğretim amacıyla kullanıyoruz.
Başarılı bir başlangıçtan sonra, her şey yolundaysa, aşağıdaki sonucu göstermelidir -
Adobe Flash Builder, FLEX SDK'larla önceden yapılandırılmış olarak gelir. Adobe Flash Builder 4.5 ile birlikte gelen örneklerimizde FLEX SDK 4.5 kullanıyoruz.
Adım 4 - Apache Tomcat'i Kurun
Tomcat'in son sürümünü şu adresten indirebilirsiniz: https://tomcat.apache.org/. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ apache-tomcat-6.0.33 veya Linux / Unix'te /usr/local/apache-tomcat-6.0.33'te ve kurulum konumlarını işaret eden CATALINA_HOME ortam değişkenini ayarlayın.
Tomcat, Windows makinesinde aşağıdaki komutların çalıştırılmasıyla başlatılabilir veya basitçe startup.bat üzerine çift tıklayabilirsiniz.
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat, UNIX (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak başlatılabilir -
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shBaşarılı bir başlangıçtan sonra, Tomcat ile birlikte gelen varsayılan web uygulamaları şu adrese ziyaret edilerek kullanılabilir olacaktır: http://localhost:8080/. Her şey yolundaysa, aşağıdaki sonucu göstermelidir -
Tomcat'in yapılandırılması ve çalıştırılması hakkında daha fazla bilgi burada bulunan belgelerde ve Tomcat web sitesinde bulunabilir: http://tomcat.apache.org
Tomcat, Windows makinesinde aşağıdaki komutlar çalıştırılarak durdurulabilir -
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcat, UNIX (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak durdurulabilir -
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shFlash 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 kaplaması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 ve 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
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 Giriş 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ı verir.
| 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.
Flex Uygulamaları oluşturmak için Flash Builder 4.5'i kullanacağız. Basit bir şeyle başlayalımHelloWorld uygulama.
Adım 1 - Proje Oluşturun
İlk adım, Flash Builder IDE'yi kullanarak basit bir Flex Projesi oluşturmaktır. Seçeneği kullanarak proje sihirbazını başlatınFile > New > Flex Project. Şimdi sihirbaz penceresini kullanarak projenizi HelloWorld olarak aşağıdaki gibi adlandırın -
Uygulama Türünü Seçin Web (runs in Adobe Flash Player). Ancak, bu seçilmezse, diğer varsayılan değerleri olduğu gibi bırakın ve Bitir Düğmesine tıklayın. Projeniz başarıyla oluşturulduktan sonra, Proje Gezgini'nde aşağıdaki içeriğe sahip olacaksınız -
İşte tüm önemli klasörlerin kısa bir açıklaması -
| Klasör | yer |
|---|---|
| tablo sınırlamalı | Kaynak kodu (mxml / sınıf olarak) dosyaları. İstemci kullanıcı arayüzünün görüntülenmesinden sorumlu, istemci tarafına özgü java sınıflarını içeren com / tutorialspoint / client klasör yapısını oluşturduk. |
| bin-debug | Bu çıktı kısmıdır, gerçek konuşlandırılabilir web uygulamasını temsil eder. Geçmiş klasörü, Flex uygulamasının geçmiş yönetimi için destek dosyalarını içerir. framework_xxx.swf, flex çerçeve dosyaları flex uygulaması tarafından kullanılmalıdır. HelloWorld.html, esnek uygulama için sarmalayıcı / barındırıcı HTML Dosyası. HelloWorld.swf, esnek tabanlı uygulamamız. playerProductInstall.swf, flash player express yükleyici. spark_xxx.swf, spark bileşen desteği kitaplığı. swfobject.js, HelloWorld.swf dosyasını HelloWorld.html'ye yüklemekten sorumlu JavaScript. Flash oynatıcı sürümünü kontrol eder ve başlatma parametresini HelloWorld.swf dosyasına aktarır. textLayout_xxx.swf, metin bileşeni desteği için kitaplık. |
| html şablonu | Bu, yapılandırılabilir web uygulamasını temsil eder. Flash Builder, dosyaları html-şablonundan bin-debug klasörüne derler. Geçmiş klasörü, Flex uygulamasının geçmiş yönetimi için destek dosyalarını içerir. index.template.html, Flash Builder'a özgü konfigürasyon için yer tutuculara sahip esnek uygulama için sarmalayıcı / ana HTML Dosyası. Derleme sırasında bin-debug klasöründe HelloWorld.html'ye derlenmiş alır. playerProductInstall.swf, flash player express yükleyici, derleme sırasında bin-debug klasörüne kopyalanır. swfobject.js, HelloWorld.swf dosyasını HelloWorld.html'ye yüklemekten sorumlu JavaScript. Flash oynatıcı sürümünü kontrol eder ve başlatma parametresini HelloWorld.swf dosyasına aktarır, derleme sırasında bindebug klasörüne kopyalanır. |
Adım 2 - Harici CSS Dosyası Oluşturun
CSS dosyası oluşturun styles.css Sarmalayıcı HTML sayfası için html-template Klasör.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Adım 3 - Sarmalayıcı HTML sayfa şablonunu değiştirin
Sarmalayıcı HTML sayfa şablonunu değiştirin index.template.html içinde htmltemplateKlasör. Flash Builder, HelloWorld.html olarak derlenecek varsayılan bir Sarmalayıcı HTML sayfa şablonu html-template / index.template.html oluşturur.
Bu dosya, Flash Builder'ın derleme işlemi sırasında değiştirdiği yer tutucular içerir. Örneğin, flash oynatıcı sürümü, uygulama adı vb.
Flash eklentisinin kurulu olmaması durumunda özel mesajlar görüntülemek için bu dosyayı değiştirelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>4. Adım - Dahili CSS dosyası oluşturun
CSS dosyası oluşturun Style.css için HelloWorld.mxml içinde table tablebordered/com/tutorialspointKlasör. Flex, HTML UI kontrolleri için css stilleri olduğundan, UI Kontrolleri için benzer css stilleri sağlar.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Adım 5 - Giriş Seviyesi Sınıfını Değiştirin
Flash Builder, uygulama için kök etiketi <application> kabına sahip olan tablebordered / com.tutorialspoint / HelloWorld.mxml varsayılan bir mxml dosyası tablosu oluşturur . Bu dosyayı "Merhaba, Dünya!" -
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yeni uygulamaları tanımlamak veya yardımcı rutinleri tanımlamak için aynı kaynak dizinde daha fazla mxml veya actionscript dosyası oluşturabilirsiniz.
Adım 6 - Uygulama Oluşturun
Flash Builder'ın Build Automaticallyvarsayılan olarak işaretlidir. Sadece kontrol edinProblemsHerhangi bir hata olup olmadığını inceleyin. Değişiklikleri tamamladığınızda herhangi bir hata görmeyeceksiniz.
Adım 7 - Uygulamayı Çalıştırın
Şimdi
Her şey yolundaysa, tarayıcının açıldığını, uygulamanın açık olduğunu ve çalıştığını görmelisiniz. Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Çünkü uygulamanızı flash player'da çalıştırıyorsunuz, ardından tarayıcınız için Flash Player eklentisi yüklemesi gerekecek. Eklentiyi yüklemek için ekrandaki talimatları izleyin. Tarayıcınız için önceden ayarlanmış Flash Player eklentiniz varsa, aşağıdaki çıktıyı görebilmeniz gerekir -
Tebrikler! Kullanarak ilk uygulamanızı uyguladınızFlex.
Bu eğitim size nasıl bir uygulama oluşturacağınızı açıklayacaktır. war dosyası ve bunun Apache Tomcat Web sunucusu kökünde nasıl konuşlandırılacağı.
Bu basit örneği anladıysanız, aynı adımları izleyerek karmaşık bir Flex uygulamasını da dağıtabilirsiniz.
Bir Flex uygulaması oluşturmak için aşağıdaki adımları izleyelim -
| Adım | Açıklama |
|---|---|
| 1 | Bir packagecom altında HelloWorld adıyla bir proje oluşturun. tutorialspoint.client , Flex - Uygulama Oluştur bölümünde açıklandığı gibi . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Bir Flex uygulamasının sürüm yapısını oluşturmak için aşağıdaki adımları izleyin ve ardından bunu tomcat sunucusuna dağıtın -
İlk adım, Flash Builder IDE'yi kullanarak bir sürüm derlemesi oluşturmaktır. Seçeneği kullanarak sürüm oluşturma sihirbazını başlatınFile > Export > Flash Builder > Release Build.
Aşağıdaki gibi sihirbaz penceresini kullanarak projeyi HelloWorld olarak seçin
Diğer varsayılan değerleri olduğu gibi bırakın ve Bitir Düğmesine tıklayın. Şimdi Flash Builder, projenin yayın yapısını içeren bir bin-release klasörü oluşturacaktır.
Artık sürüm yapımız hazır, bir Flex uygulamasını dağıtmak için aşağıdaki adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Uygulamanın bin-release klasörünün içeriğini HelloWorld.war dosyası biçiminde sıkıştırın ve Apache Tomcat Web sunucusunda konuşlandırın. |
| 2 | Son adımda aşağıda açıklanan uygun URL'yi kullanarak web uygulamanızı başlatın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
WAR Dosyası Oluştur
Şimdi uygulamamız iyi çalışıyor ve onu bir savaş dosyası olarak dışa aktarmaya hazırız. Aşağıdaki adımları izleyin -
Projenizin bin-release dizinine gidin C: \ workspace \ HelloWorld \ binrelease
Bin-release dizini içinde bulunan tüm dosya ve klasörleri seçin.
Tüm seçili dosya ve klasörleri HelloWorld.zip adlı bir dosyada sıkıştırın .
HelloWorld.zip'i HelloWorld.war olarak yeniden adlandırın.
WAR dosyasını dağıt
Tomcat sunucusunu durdurun.
HelloWorld.war dosyasını tomcat kurulum dizini> webapps klasörüne kopyalayın.
Tomcat sunucusunu başlatın.
Webapps dizinine bakın, HelloWorld'ün oluşturulmuş olduğu bir klasör olmalıdır.
Şimdi HelloWorld.war, Tomcat Webserver köküne başarıyla yerleştirildi.
Uygulamayı Çalıştır
Web tarayıcısına bir URL girin -
Uygulamayı başlatmak için http: // localhost: 8080 / HelloWorld / HelloWorld.html .
Sunucu adı (localhost) ve bağlantı noktası (8080) tomcat yapılandırmanıza göre değişebilir.
Flex Uygulamasının Yaşam Döngüsü
Bir uygulamanın yaşam döngüsü aşamalarını anlamadan Flex uygulamaları oluşturabilirsiniz, ancak temel mekanizmayı bilmek iyidir; olayların gerçekleştiği sıra. Çalışma zamanında diğer Flex uygulamalarını yükleme gibi özellikleri yapılandırmanıza ve çalışma zamanında sınıf kitaplıklarını ve varlıklarını yükleme ve boşaltma sürecini yönetmenize yardımcı olur.
Flex uygulamasının yaşam döngüsünün iyi anlaşılması, daha iyi uygulamalar oluşturmanıza ve bunları optimize etmenize olanak sağlar çünkü kodu en iyi şekilde nerede çalıştıracağınızı bileceksiniz. Örneğin, bir önyükleyici sırasında bazı kodların çalıştığından emin olmanız gerekiyorsa, o olay için kodu nereye yerleştireceğinizi bilmeniz gerekir.
Flex uygulamasını bir tarayıcıya yüklediğimizde, flex uygulamasının yaşam döngüsü boyunca aşağıdaki olaylar meydana gelir.
Aşağıda, farklı Flex Yaşam döngüsü olayları hakkında kısa ayrıntı verilmiştir.
| Sr.No | Etkinlik Açıklaması |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Olay Türü: mx.events.FlexEvent.PREINITIALIZE Bu olay, bileşen başlatma sırasının başlangıcında gönderilir. Bu olay gönderildiğinde bileşen çok ham bir durumdadır. Düğme denetimi gibi birçok bileşen, işlevselliği uygulamak için dahili alt bileşenler oluşturur. Örneğin, Düğme denetimi, etiket metnini temsil etmek için dahili bir UI TextField bileşeni oluşturur. Flex pre-initialize olayını gönderdiğinde, bir bileşenin tüm dahili alt öğeleri dahil olmak üzere alt öğeleri henüz yaratılmamıştır. |
| 2 | başlat: mx.core.UIComponent.initialize Olay Türü: mx.events.FlexEvent.INITIALIZE Bu olay, ön başlatma aşamasından sonra gönderilir. Flex çerçevesi, bu aşamada bu bileşenin iç yapısını başlatır. Bu olay, bileşen bir üst öğeye eklendiğinde otomatik olarak tetiklenir. Genel olarak initialize () 'yi çağırmanıza gerek yoktur. |
| 3 | createComplete: mx.core.UIComponent.creationComplete Olay Türü: mx.events.FlexEvent.CREATION_COMPLETE Bu olay, bileşen yapımını, özellik işlemesini, ölçümünü, düzenini ve çizimini bitirdiğinde gönderilir. Bu noktada, görünür özelliğine bağlı olarak, bileşen çizildiği halde görünmez. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Olay Türü: mx.events.FlexEvent.APPLICATION_COMPLETE Uygulama başlatıldıktan, LayoutManager tarafından işlendikten ve görüntüleme listesine eklendikten sonra gönderilir. Bu, uygulama oluşturma yaşam döngüsünün son olayıdır ve uygulamanın tamamen yüklendiğini gösterir. |
Esnek Yaşam Döngüsü Örneği
Bir test uygulaması oluşturarak bir Flex uygulamasının test yaşam döngüsünü anlamak için adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Bir packagecom altında HelloWorld adıyla bir proje oluşturun. tutorialspoint.client , Flex - Uygulama Oluştur bölümünde açıklandığı gibi . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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 = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Flex, CSS'den HTML bileşenlerine kadar olduğu gibi, UI kontrollerine uygulanacak CSS söz dizimi ve stillerinin kullanımını destekler.
Yol 1: Harici Stil Sayfası Dosyasını Kullanma
Uygulamanın sınıf yolunda bulunan bir stil sayfasına başvurabilirsiniz. Örneğin, içindeki Style.css dosyasını düşünün.com/tutorialspoint/client folder HelloWorld.mxml dosyası da burada bulunur.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Daha sonra css dosyasına aşağıdaki kod parçacığı ile başvurulabilir
<fx:Style source = "/com/tutorialspoint/client/Style.css" />StyleName özelliğini kullanarak UI bileşenine stil atama
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Yol # 2: Ui Kapsayıcı Bileşeni İçinde Stilleri Kullanma
<Fx: Style> etiketini kullanarak UI kapsayıcı bileşeni içinde stilleri tanımlayabilirsiniz
Sınıf Düzeyi Seçici
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>StyleName özelliğini kullanarak UI bileşenine stiller atayın.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Kimlik Düzeyi Seçici
Kimlik seçiciyi kullanarak UI bileşeninin stilini ayarlayın.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Tip Seviye Seçici
Tek bir GO'da bir UI Bileşeni türünün stilini belirleyin.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />CSS Örneği ile Esnek Stil
Bir test uygulaması oluşturarak bir Flex uygulamasının CSS stilini kontrol etme adımlarını izleyelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | Değiştir style.css, HelloWorld.mxml olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Aşağıda, değiştirilmiş CSS dosyasının içeriği verilmiştir src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<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 = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, bu şu sonucu verecektir: [ Çevrimiçi deneyin ]
Skinning nedir?
Flex'te Dış Görünüm oluşturma, bir UI Bileşeninin görünümünü ve hissini tamamen özelleştirme işlemidir.
Dış Görünüm, bir bileşenin metnini, görüntüsünü, filtrelerini, geçişlerini ve durumlarını tanımlayabilir.
Dış Görünüm, ayrı bir mxml veya ActionScript bileşeni olarak oluşturulabilir.
Dış görünümü kullanarak bir UI bileşeninin tüm görsel yönlerini kontrol edebiliriz.
Dış görünümü tanımlama süreci, tüm UI bileşeni için aynıdır.
Adım 1 - Bir Dış Görünüm Oluşturun
Seçeneği kullanarak MXML Dış Görünümü Oluştur sihirbazını başlatın File > New > MXML Skin.
Paketi Farklı Girin com.tutorialspoint.skin, olarak adlandır GradientBackgroundSkin ve mevcut flex BorderContainer kontrolü olarak ana bilgisayar bileşenini seçinspark.component.BorderContainer.
Artık bir BorderContainer için bir kaplama oluşturdunuz. Mxml dış görünüm dosyasının içeriğini değiştirinsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Doldurma katmanını aşağıdaki gibi güncelleyin -
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Adım 2: Cildi Uygulayın
Bir bileşenin üzerine iki şekilde kaplama uygulayabilirsiniz -
MXML komut dosyasında kaplama uygulayın (statik olarak)
Uygulamak GradientBackgroundSkin kimliğine sahip bir BorderContainer'a mainContainer kullanarak skinClass öznitelik.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">ActionScript'te kaplama uygulama (dinamik olarak)
Uygulamak GradientBackgroundSkin kimliğine sahip bir BorderContainer'a mainContainer kullanarak skinClass Emlak.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Dış Görünüm Örneğiyle Esnek Stil
Bir test uygulaması oluşturarak bir Flex uygulamasında dış görünümü eylem halinde görmek için aşağıdaki adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | Yukarıda açıklandığı gibi com.tutorialspoint.skin paketi altında GradientBackgroundSkin.mxml dış görünümü oluşturun . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 4 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
GradientBackgroundSkin.mxml dosyasının içeriği aşağıdadır src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>Değiştirilen HelloWorld.mxml'nin içeriği aşağıdadır filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Veri Bağlama nedir?
Veri Bağlama, bir nesnenin verilerinin başka bir nesneye bağlandığı bir işlemdir. Bir kaynak özelliği, bir hedef özellik ve verilerin kaynaktan hedefe ne zaman kopyalanacağını belirten bir tetikleyici olay gerektirir.
Flex, aşağıdaki gibi Veri Bağlama yapmanın üç yolunu sağlar
- MXML Komut Dosyasında ({}) kıvrık ayraç sözdizimi
- MXML'de <fx: binding> etiketi
- ActionScript'te BindingUtils
Veri Bağlama - MXML'de Kaşlı Ayraç Kullanma
Aşağıdaki örnek, bir kaynağın hedefe veri bağlamasını belirtmek için süslü parantezlerin nasıl kullanılacağını gösterir.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Veri Bağlama - MXML'de <fx: Binding> etiketini kullanma
Aşağıdaki örnek, nasıl kullanılacağını gösterir
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Veri Bağlama - ActionScript'te BindingUtils Kullanma
Aşağıdaki örnek, bir kaynağın hedefe veri bağlamasını belirtmek için BindingUtils'in nasıl kullanılacağını gösterir.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Flex Veri Bağlama Örneği
Bir test uygulaması oluşturarak bir Flex uygulamasında dış görünümü eylem halinde görmek için aşağıda verilen adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilmiş HelloWorld.mxml dosyasının içeriği aşağıdadırsrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Her kullanıcı arayüzü aşağıdaki üç ana hususu dikkate alır:
UI Elements- Bunlar, kullanıcının sonunda gördüğü ve etkileşim kurduğu temel görsel öğelerdir. Flex, bu eğitimde ele alacağımız, temelden karmaşığa değişen yaygın olarak kullanılan ve yaygın öğelerin geniş bir listesini sağlar.
Layouts- UI öğelerinin ekranda nasıl düzenleneceğini tanımlarlar ve GUI'ye (Grafik Kullanıcı Arayüzü) son bir görünüm ve his sağlarlar. Bu kısım Düzen bölümünde ele alınacaktır.
Behavior- Bu olaylar, kullanıcı UI öğeleriyle etkileşime girdiğinde gerçekleşir. Bu bölüm Olay İşleme bölümünde ele alınacaktır.
Flex UI Öğeleri
Flex UI kitaplığı, karmaşık web tabanlı kullanıcı arabirimleri oluşturmak için iyi tanımlanmış bir sınıf hiyerarşisinde sınıflar sağlar. Bu bileşen hiyerarşisindeki tüm sınıflar,EventDispatcher aşağıda gösterildiği gibi temel sınıf -
Her Temel UI denetimi, özellikleri UI Bileşen sınıfından devralır ve bu da, özellikleri EventDispatcher ve diğer üst düzey sınıflardan devralır.
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Flex EventDispatcher Sınıfı EventDispatcher sınıfı, olayları gönderebilen tüm sınıflar için temel sınıftır. EventDispatcher sınıfı, görüntüleme listesindeki herhangi bir nesnenin bir olay hedefi olmasına ve dolayısıyla IEventDispatcher arabiriminin yöntemlerini kullanmasına izin verir. |
| 2 | Flex UIComponent UIComponent sınıfı, hem etkileşimli hem de etkileşimli olmayan tüm görsel bileşenler için temel sınıftır. |
Temel Kontroller
Aşağıdakiler birkaç önemli Temel Kontroldür -
| Sr.No | Kontroller ve Açıklama |
|---|---|
| 1 | Etiket Etiket, tek tip olarak biçimlendirilmiş metnin bir veya daha fazla satırını işleyebilen düşük seviyeli bir UIComponent'tir. |
| 2 | Metin Metin denetimi, HTML içeriğini ve uygulamanızda normal metni görüntülemenizi sağlar. |
| 3 | Resim Görüntü kontrolü, çalışma zamanında JPEG, PNG, GIF ve SWF dosyalarını içe aktarmanıza izin verir. |
| 4 | LinkButton LinkButton denetimi, bir kullanıcı fareyi üzerine getirdiğinde içeriği vurgulanan kenarlıksız bir Düğme denetimidir. |
Form kontrolleri, kullanıcıların veri girmesine izin verir ve onlara uygulama ile etkileşim yeteneği sağlar. Her Form UI, özellikleri UIComponent sınıfından denetler ve devralır; bu da, özellikleri EventDispatcher ve diğer üst düzey sınıflardan miras alır.
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Flex EventDispatcher Sınıfı EventDispatcher sınıfı, olayları gönderebilen tüm sınıflar için temel sınıftır. EventDispatcher sınıfı, görüntüleme listesindeki herhangi bir nesnenin bir olay hedefi olmasına ve dolayısıyla IEventDispatcher arabiriminin yöntemlerini kullanmasına izin verir. |
| 2 | Flex UIComponent UIComponent sınıfı, hem etkileşimli hem de etkileşimsiz tüm görsel bileşenler için temel sınıftır. |
Form Denetimleri
Aşağıda birkaç önemli Form Denetimi verilmiştir -
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Buton Button bileşeni, yaygın olarak kullanılan dikdörtgen bir düğmedir. |
| 2 | ToggleButton ToggleButton bileşeni, bir aç / kapat düğmesi tanımlar. |
| 3 | CheckBox CheckBox bileşeni, isteğe bağlı bir etiket ve bir onay işareti içeren veya içermeyen küçük bir kutudan oluşur. |
| 4 | Renk seçici ColorPicker denetimi, kullanıcının renk örneği listesinden bir renk seçmesi için bir yol sağlar. |
| 5 | Açılan kutu ComboBox denetimi, DropDownListBase denetiminin alt sınıfıdır. |
| 6 | DateChooser DateChooser denetimi, haftanın günü için etiketlenmiş sütunlarla ayın, yılın ve ayın günlerinin ızgarasını görüntüler. |
| 7 | Radyo düğmesi RadioButton bileşeni, kullanıcının birbirini dışlayan bir dizi seçenek içinde tek bir seçim yapmasına olanak tanır. |
| 8 | TextArea TextArea, kullanıcıların birden çok satır biçimlendirilmiş metin girmesine ve düzenlemesine olanak tanıyan bir metin girişi denetimidir. |
| 9 | TextInput TextInput, kullanıcıların tek satırlık tek tip formatlı metin girmesine ve düzenlemesine olanak tanıyan bir metin girişi denetimidir. |
| 10 | Açılır liste DropDownList denetimi, kullanıcının tek bir değer seçebileceği bir açılır liste içerir. |
| 11 | NumericStepper NumericStepper denetimi, sıralı bir kümeden bir sayı seçmenize olanak tanır. |
Karmaşık kontroller, kullanıcılara büyük miktarda veriyi daha kolay bir şekilde ele almak için gelişmiş yetenekler sağlar ve onlara uygulamayla etkileşim yeteneği sağlar. Her Karmaşık UI denetimi, özellikleri UIComponent sınıfından devralır ve bu da, özellikleri EventDispatcher ve diğer üst düzey sınıflardan miras alır.
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Flex EventDispatcher Sınıfı EventDispatcher sınıfı, olayları gönderebilen tüm sınıflar için temel sınıftır. EventDispatcher sınıfı, görüntüleme listesindeki herhangi bir nesnenin bir olay hedefi olmasına ve dolayısıyla IEventDispatcher arabiriminin yöntemlerini kullanmasına izin verir. |
| 2 | Flex UIComponent UIComponent sınıfı, hem etkileşimli hem de etkileşimsiz tüm görsel bileşenler için temel sınıftır. |
Karmaşık Kontroller
Aşağıdakiler birkaç önemli Karmaşık Kontrollerdir -
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Veri şebekesi DataGrid denetimi, kaydırılabilir bir kılavuzun üzerinde bir sütun başlığı satırı görüntüler. |
| 2 | AdvancedDataGrid AdvancedDataGrid, veri görselleştirme özellikleri eklemek için standart DataGrid denetimine birkaç ek işlevsellik ekler. |
| 3 | Menü Menü kontrolü, ayrı ayrı seçilebilen seçeneklerden oluşan bir açılır menü oluşturur. |
| 4 | İlerleme çubuğu ProgressBar denetimi, bir görevin zaman içindeki ilerlemesinin görsel bir temsilini sağlar. |
| 5 | Zengin metin editörü RichTextEditor denetimi, kullanıcıların metin girmesine ve biçimlendirmesine izin verir. |
| 6 | Döşeme Listesi TileList denetimi TileList denetimi, döşemelere yerleştirilmiş bir dizi öğeyi görüntüler. |
| 7 | Ağaç Ağaç kontrolü, bir kullanıcının genişletilebilir bir ağaç olarak düzenlenmiş hiyerarşik verileri görüntülemesini sağlar. |
| 8 | Video oynatıcı VideoPlayer kontrolü, aşamalı indirmeyi, çok bit oranlı akışı ve video akışını destekleyen, kaplanabilir bir video oynatıcıdır. |
| 9 | Accordian Bir Accordian denetiminin alt MX kapsayıcıları veya Spark NavigatorContent kapsayıcıları koleksiyonu vardır, ancak bir seferde yalnızca biri görünür durumdadır. |
| 10 | TabNavigator TabNavigator denetimi, alt kapsayıcıları arasında gezinmek için bir TabBar kabı içerir. |
| 11 | ToggleButtonBar ToggleButtonBar denetimi, seçili veya seçili olmayan durumlarını koruyan yatay veya dikey bir düğme grubunu tanımlar. |
Düzen paneli kontrolleri, kullanıcıların sayfadaki kullanıcı arayüzü kontrollerini düzenlemesini sağlar. Her Düzen denetimi, özellikleri UIComponent sınıfından devralır ve bu da, özellikleri EventDispatcher ve diğer üst düzey sınıflardan miras alır.
| Sr.No | Kontrol ve Açıklama |
|---|---|
| 1 | Flex EventDispatcher Sınıfı EventDispatcher sınıfı, olayları gönderebilen tüm sınıflar için temel sınıftır. EventDispatcher sınıfı, görüntüleme listesindeki herhangi bir nesnenin bir olay hedefi olmasına ve dolayısıyla IEventDispatcher arabiriminin yöntemlerini kullanmasına izin verir. |
| 2 | Flex UIComponent UIComponent sınıfı, hem etkileşimli hem de etkileşimsiz tüm görsel bileşenler için temel sınıftır. |
Yerleşim Panelleri
Aşağıdakiler birkaç önemli Düzen Panelidir -
| Sr.No | Panel ve Açıklama |
|---|---|
| 1 | BorderContainer BorderContainer sınıfı, kabın kenarlığının ve arka plan dolgusunun görünümünü kontrol eden bir dizi CSS stili sağlar. |
| 2 | Form Form kapsayıcısı, bir formun düzeni üzerinde denetim sağlar, form alanlarını gerekli veya isteğe bağlı olarak işaretler, hata mesajlarını işler ve veri denetimi ve doğrulama gerçekleştirmek için form verilerini Flex veri modeline bağlar. |
| 3 | VGroup VGroup kapsayıcısı, VerticalLayout sınıfını kullanan bir Grup kapsayıcısıdır. |
| 4 | HGroup HGroup kapsayıcısı, HorizontalLayout sınıfını kullanan bir Grup kapsayıcısıdır. |
| 5 | Panel Panel sınıfı, alt öğeleri için bir başlık çubuğu, resim yazısı, kenarlık ve içerik alanı içeren bir kaptır. |
| 6 | SkinnableContainer SkinnableContainer sınıfı, görsel içerik sağlayan kaplanabilir kaplar için temel sınıftır. |
| 7 | TabBar TabBar bir dizi özdeş sekmeyi görüntüler. |
| 8 | TitleWindow TitleWindow, Paneli bir kapat düğmesi ve taşıma alanı içerecek şekilde genişletir. |
Efektler kavramını kullanarak esnek uygulamaya davranış ekleyebiliriz. Örneğin, bir metin kutusu odaklandığında, metnini daha kalın hale getirebilir ve boyutunu biraz daha büyütebiliriz.
Her efekt, özellikleri Effect sınıfından devralır ve bu da özellikleri EventDispatcher ve diğer üst düzey sınıflardan miras alır.
| Sr.No | Etki ve Açıklama |
|---|---|
| 1 | Flex Efekt Sınıfı Effect sınıfı, tüm Flex efektlerinin temel işlevlerini tanımlayan soyut bir temel sınıftır. Bu sınıf, tüm efektler için temel fabrika sınıfını tanımlar. |
Temel Etkiler
Aşağıdakiler birkaç önemli Temel Görsel Efekttir -
| Sr.No | Etki ve Açıklama |
|---|---|
| 1 | Fade Soldurma efekti, bir bileşenin alfa özelliğini canlandırır. |
| 2 | WipeLeft WipeLeft sınıfı, bir sol silme efekti tanımlar. |
| 3 | WipeRight WipeRight sınıfı, doğru silme efektini tanımlar. |
| 4 | Move3D Move3D sınıfı, hedef nesneyi x, y ve z boyutlarında taşır. |
| 5 | Ölçek3D Scale3D sınıfı, bir hedef nesneyi dönüştürme merkezinin çevresinde üç boyutlu olarak ölçekler. |
| 6 | Döndür3D Rotate3D sınıfı, hedef nesneyi x, y veya z eksenleri etrafında üç boyutlu döndürür. |
| 7 | Canlandır Bu Animate efekti, değerler arasında rastgele bir özellik kümesini canlandırır. MotionPaths özelliğini ayarlayarak canlandırılacak özellikleri ve değerleri belirtin. |
Flex, duruma veya uygulama içindeki kullanıcı etkileşimine bağlı olarak verileri bir nesneden diğerine geçirmek için olay kavramını kullanır.
ActionScript'in genel bir EventOlaylarla çalışmak için gereken işlevselliğin çoğunu tanımlayan sınıf. Bir Flex uygulamasında bir olay her gerçekleştiğinde, Event sınıfı hiyerarşisinden üç tür nesne oluşturulur.
Etkinlik aşağıdaki üç temel özelliğe sahiptir
| Sr.No | Özellik ve Açıklama |
|---|---|
| 1 | Type typene tür bir olay yaşandığını belirtir. Bu tıklama, başlatma, fareyle üzerine gelme, değiştirme vb. Olabilir. Gerçek değerler MouseEvent.CLICK gibi sabitler ile temsil edilecektir. |
| 2 | Target target Event özelliği, olayı oluşturan bileşene bir nesne başvurusudur. clickMeButton kimliğine sahip bir Button öğesini tıklarsanız, bu click olayının hedefi clickMeButton olacaktır. |
| 3 | CurrentTarget currentTargetözellik, kapsayıcı hiyerarşisini değiştirir. Esas olarak olayların akışıyla ilgilenir. |
Olay Akış Aşamaları
Bir olay, olay işleyicilerini arayan üç aşamadan geçer.
| Sr.No | Aşama ve Açıklama |
|---|---|
| 1 | Capture Yakalama aşamasında, program dışarıdan (veya en üstteki) ebeveynden en içteki olana kadar olay işleyicileri aramaya başlayacaktır. Yakalama aşaması, olayı tetikleyen nesnenin üst kısmında durur. |
| 2 | Target Hedef aşamada, olayı tetikleyen bileşen bir olay işleyicisi için kontrol edilir. |
| 3 | Bubble Kabarcık aşaması yakalama aşamasının tersidir ve hedef bileşenin üst öğesinden başlayarak yapı boyunca geri çalışır. |
Aşağıdaki uygulama kodunu düşünün -
<?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" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Kullanıcı Düğmeye tıkladığında, Panel ve Uygulamayı da tıklamış olur.
Olay, olay işleyici atamalarını arayan üç aşamadan geçer.
Bir Flex uygulamasında olay işlemeyi test etmek için aşağıdaki adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Flex, özel bileşenler oluşturmak için iki yol sağlar.
- ActionScript kullanma
- MXML'yi kullanma
ActionScript kullanma
Mevcut bileşeni genişleterek bir bileşen oluşturabilirsiniz. Flash Builder kullanarak bir bileşen oluşturmak için,File > New > ActionScript Class.
Ayrıntıları aşağıda gösterildiği gibi girin -
Flash Builder, aşağıdaki CustomButton.as dosyasını oluşturacaktır.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}MXML'yi kullanma
Mevcut bileşeni genişleterek bir bileşen oluşturabilirsiniz. Flash Builder kullanarak bir bileşen oluşturmak için,File > New > MXML Component.
Ayrıntıları aşağıda gösterildiği gibi girin.
Flash Builder, aşağıdaki CustomLogin.mxml dosyasını oluşturacaktır.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>Bir Flex uygulamasında özel kontrolleri test etmek için aşağıdaki adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | Oluşturma CustomLogin.mxml ve CustomButton.as yukarıda açıklandığı gibi bileşeni. Bu dosyaları aşağıda açıklandığı gibi değiştirin. Geri kalan dosyaları değiştirmeden tutun. |
| 4 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/client/HelloWorld.mxml.
<?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"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Flex, istemci tarafına sunucu tarafı verileri sağlamak için RPC hizmetleri sağlar. Flex, sunucu tarafındaki veriler üzerinde makul miktarda kontrol sağlar.
Flex RPC servislerini kullanarak, sunucu tarafında yürütülecek kullanıcı eylemlerini tanımlayabiliriz.
Flex RPC Sservices, herhangi bir sunucu tarafı teknolojisiyle entegre edilebilir.
Flex RPC Hizmetlerinden biri, sıkıştırılmış ikili verilerin kablo üzerinden aktarılması için dahili destek sağlar ve oldukça hızlıdır.
Flex, aşağıdaki üç tür RPC Hizmetini sağlar
| Sr.No | RPC Hizmeti ve Tanımı |
|---|---|
| 1 | HttpService <mx: HTTPService> etiketi, bir MXML dosyasında bir HTTPService nesnesini temsil etmek için kullanılır. HTTPService nesnesinin send () yöntemine bir çağrı yaptığınızda, belirtilen URL'ye bir HTTP isteği yapar ve bir HTTP yanıtı döndürülür. HTTP HEAD, OPTIONS, TRACE ve DELETE yöntemlerini de kullanabilirsiniz. |
| 2 | WebService <Mx: WebService>, SOAP uyumlu web servislerinin işlemlerine erişim sağlamak için kullanılır. |
| 3 | RemoteObject <Mx: RemoteObject> etiketi, bir MXML dosyasında bir HTTPService nesnesini temsil etmek için kullanılır. Bu etiket, Action Message Format (AMF) kodlamasını kullanarak Java nesnelerinin yöntemlerine erişmenizi sağlar. |
HTTP Hizmetini ayrıntılı olarak tartışacağız. Sunucuya yerleştirilmiş bir XML kaynak dosyası kullanacağız ve ona HTTP Hizmeti aracılığıyla istemci tarafında erişeceğiz.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>HTTPService Beyanı
Şimdi bir HTTPS hizmeti bildirin ve yukarıdaki dosyanın url'sini iletin
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>RPC Çağrısı
İtemRequest.send () yöntemine bir çağrı yapın ve itemRequest web hizmetinin lastResult nesnesindeki değerleri Flex UI bileşenine bağlayın.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>RPC Servis Çağrısı Örneği
Şimdi, bir Flex uygulamasında RPC hizmetlerini test etmek için adımları izleyelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Flash Builder 4, Flex geliştirme Döngüsünde FlexUnit entegrasyonu için mükemmel bir dahili desteğe sahiptir.
Bir Test Vaka Sınıfı Oluşturun
Flash Builder Test Sınıfı Oluştur sihirbazını kullanarak bir Test Vakası Sınıfı oluşturabilirsiniz. Bu makalede göreceğiniz gibi, Flash Builder ile test durumlarını çalıştırmak çok kolay.
Flash Builder'ı kullanarak bir test durumu sınıfı oluşturmak için, File > New > Test Case Class. Ayrıntıları aşağıda gösterildiği gibi girin.
Flash Builder, aşağıdaki TestClass1 dosyasını bir dosya olarak oluşturacaktır.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}FlexUnit Entegrasyon Örneği
Şimdi, FlexUnit Entegrasyonunu bir Flex uygulamasında test etmek için adımları izleyelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | TestClass1'i yukarıda açıklandığı gibi test senaryosu olarak oluşturun ve TestClass1'i aşağıda açıklandığı gibi Değiştirin . |
| 4 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Dosya olarak değiştirilen içeriğin içeriği aşağıdadır src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi normal modda derleyelim.
Test durumlarını çalıştırma
Şimdi paket gezgininde TestClass1'e sağ tıklayın ve seçin Run As > FlexUnit Tests. Flash Builder test penceresinde aşağıdaki çıktıyı göreceksiniz.
Flash Builder ayrıca tarayıcıda test sonuçlarını gösterir.
Flex, esnek kodda mükemmel hata ayıklama yeteneği sağlar ve Flash Builder 4, mükemmel bir yerleşik hata ayıklayıcı ve hata ayıklama perspektif desteğine sahiptir.
Hata ayıklama modu sırasında, Flex Uygulaması hata ayıklama özelliğini destekleyen Flash Builder 4'te yerleşik Flash Player Hata Ayıklayıcı sürümünde çalışır.
Böylece geliştiriciler Flash Builder'da kolay ve yerleşik bir hata ayıklama yapılandırması elde eder
Bu makalede, Flash Builder kullanarak Flex Client kodunda hata ayıklamanın kullanımını göstereceğiz. Aşağıdaki görevleri yapacağız
- Kodda kesme noktaları ayarlayın ve bunları Kesme Noktası Gezgini'nde görün.
- Hata ayıklama sırasında kodda satır satır ilerleyin.
- Değişkenin değerlerini görüntüleyin.
- Tüm değişkenlerin değerlerini inceleyin.
- Bir ifadenin değerini inceleyin.
- Askıdaki iplikler için yığın çerçevesini görüntüleyin.
Hata Ayıklama Örneği
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi normal modda derleyelim.
Adım 1 - Kesme Noktalarını Yerleştirin
HelloWorld.mxml İşleyicisini başlatan uygulamanın ilk satırına bir kesme noktası yerleştirin
Adım 2 - Uygulamada Hata Ayıklama
Şimdi
Her şey yolunda giderse, uygulama tarayıcıda başlar ve Flash Builder konsolunda aşağıdaki hata ayıklama günlüklerini görürsünüz.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionUygulama başlar başlamaz, kesme noktasını application_initialize Handler yönteminin ilk satırına yerleştirdiğimiz için Flash Builder kesme noktasına odaklandığını göreceksiniz.
Askıya alınmış iş parçacıkları için yığın izini görebilirsiniz.
İfadelerin değerlerini görebilirsiniz.
Yerleştirilen kesme noktalarının listesini görebilirsiniz.
Şimdi application_initializeHandler () yönteminin son satırına ulaşana kadar F6'ya basmaya devam edin. İşlev tuşları için referans olarak, F6 kodu satır satır inceler, F5 daha ileri adım atar ve F8 uygulamaya devam eder. Artık application_initializeHandler () yönteminin tüm değişkenlerinin değerlerinin listesini görebilirsiniz.
Artık esnek kodun, bir Java Uygulamasının hata ayıklamasıyla aynı şekilde ayıklanabildiğini görebilirsiniz. Herhangi bir satıra kesme noktaları yerleştirin ve esnekin hata ayıklama yetenekleriyle oynayın.
Flex, bir Flex uygulamasını uluslararasılaştırmak için iki yol sunar. Projeler arasında en yaygın olarak kullanılan Derleme süresi Uluslararasılaştırmanın kullanımını göstereceğiz.
| Sr.No | Teknik ve Açıklama |
|---|---|
| 1 | Compile Time Internationalization Bu teknik en yaygın olanıdır ve çalışma zamanında çok az ek yük gerektirir; hem sabit hem de parametreleştirilmiş dizeleri çevirmek için çok etkili bir tekniktir; uygulaması en basitidir. Derleme Zamanı uluslararasılaştırma, çevrilmiş dizeleri ve parametreli mesajları depolamak için standart özellikler dosyalarını kullanır ve bu özellik dosyaları doğrudan uygulamada derlenir. |
| 2 | Run Time Internationalization Bu teknik çok esnektir ancak statik dizi uluslararasılaştırmadan daha yavaştır. Yerelleştirme özellikleri dosyalarını ayrı ayrı derlemeniz, bunları uygulamanın dışında bırakmanız ve çalışma zamanında yüklemeniz gerekir. |
Bir Flex Uygulamasını uluslararasılaştırma iş akışı
Adım 1 - Klasör yapısı oluşturun
Flex projesinin src klasörü altında bir yerel klasör oluşturun.Bu, uygulamanın destekleyeceği yerel ayarlar için tüm özellik dosyalarının ana dizini olacaktır. Yerel ayar klasörünün içinde, desteklenecek uygulamanın yerel ayarlarının her biri için alt klasörler oluşturun. Yerel bir adlandırma kuralı
{language}_{country code}Örneğin en_US, Amerika Birleşik Devletleri İngilizcesini temsil eder. De_DE yerel ayarı Almancayı temsil eder. Örnek uygulama iki ortak dili destekleyecektir: İngilizce ve Almanca.
Adım 2 - Özellikler dosyaları oluşturun
Uygulamada kullanılacak mesajları içeren özellikler dosyası oluşturun. Bir yarattıkHelloWorldMessages.properties altında dosya src > locale > en_US Örneğimizdeki klasör.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Yere özgü çevrilmiş değerleri içeren özellikler dosyaları oluşturun. Bir yarattıkHelloWorldMessages.properties altında dosya src > locale > de_DEÖrneğimizdeki klasör. Bu dosya, Almanca çevirileri içermektedir. _de almanca yerel ayarı belirtir ve biz uygulamamızda almanca dilini destekleyeceğiz.
Flash Builder kullanarak özellikler dosyası oluşturuyorsanız, dosyanın kodlamasını UTF-8 olarak değiştirin. Dosyayı seçin ve ardından özellikler penceresini açmak için dosyayı sağ tıklayın. Other UTF-8. Değişikliği uygulayın ve kaydedin.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Adım 3 - Derleyici seçeneklerini belirtin
Projenize sağ tıklayın ve Özellikler'i seçin.
Flex Compiler'ı seçin ve Ek Derleyici Bağımsız Değişkenleri ayarlarına aşağıdakileri ekleyin -
-locale en_US de_DEProjenize sağ tıklayın ve Özellikler'i seçin.
Flex Derleme Yolu'nu seçin ve Kaynak Yolu ayarlarına aşağıdakileri ekleyin -
src\locale\{locale}İçselleştirme Örneği
Şimdi bir Flex uygulamasında İçselleştirme tekniğini test etmek için aşağıdaki adımları takip edelim -
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Dil açılır menüsünü kullanarak dili değiştirin ve sonucu görün.
Flex özel bir sınıf sağlar FlexPrintJob flex nesneleri yazdırmak için.
FlexPrintJob, Form veya VBox konteyneri gibi bir veya daha fazla Flex nesnesini yazdırmak için kullanılabilir.
FlexPrintJob, nesneyi ve içerdiği tüm nesneleri yazdırır.
Nesneler, görüntülenen arayüzün tamamı veya bir parçası olabilir.
Nesneler, verileri özellikle yazdırma için biçimlendiren bileşenler olabilir.
FlexPrintJob sınıfı, çıktıyı sayfaya sığacak şekilde ölçeklemenizi sağlar.
FlexPrintJob sınıfı, tek bir sayfaya sığmayan bir nesneyi yazdırmak için otomatik olarak birden çok sayfa kullanır.
FlexPrintJob sınıfı, işletim sisteminin bir Yazdır iletişim kutusu görüntülemesine neden olur. Bazı kullanıcı eylemleri olmadan yazdıramazsınız.
Bir yazdırma işi hazırlayın ve gönderin
Çıktıyı bir yazdırma işi hazırlayıp göndererek yazdırırsınız. FlexPrintJob sınıfının bir örneğini oluşturalım
var printJob:FlexPrintJob = new FlexPrintJob();Baskı işini başlatın
printJob.start();Flex, işletim sisteminin bir Yazdır iletişim kutusu görüntülemesine neden olur. Baskı işine bir veya daha fazla nesne ekleyin ve bunların nasıl ölçekleneceğini belirleyin
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Her nesne yeni bir sayfada başlar. Baskı işini yazıcıya gönderin
printJob.send();Baskı Örneği
| Adım | Açıklama |
|---|---|
| 1 | Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun. |
| 3 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
Değiştirilen mxml dosyasının içeriği aşağıdadır src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, aşağıdaki sonucu verecektir: [ Çevrimiçi deneyin ]
Bana yazdır düğmesine tıkladığınızda, aşağıda gösterilen veri tablosunun çıktısını görebilirsiniz.
