Flex - Panduan Cepat

Apa itu Flex?

Flex adalah framework aplikasi open source yang kuat yang memungkinkan Anda membangun aplikasi tradisional untuk browser, seluler, dan desktop menggunakan model, alat, dan basis kode pemrograman yang sama.

Flex menyediakan FLEX SDK yang terdiri dari perpustakaan kelas Flex (kelas ActionScript), kompiler Flex, debugger, bahasa pemrograman MXML dan ActionScript, dan utilitas lain untuk membangun aplikasi internet kaya yang ekspresif dan interaktif (RIA)

Flex menangani antarmuka pengguna (UI) atau fungsionalitas sisi klien dari aplikasi web. Fungsionalitas sisi server bergantung pada komponen sisi server yang ditulis dalam bahasa skrip tradisional (Java / PHP dll.)

Aplikasi berbasis Flex sebenarnya dikirimkan sebagai file SWF dan sangat mirip dengan bagian HTML / JavaScript dari aplikasi web tradisional.

Aplikasi Flex digunakan sebagai file SWF ditambah pembungkus HTML, file CSS dan file skrip sisi server (yaitu Java, .CFM, .PHP, dll.) Ke server. Seperti aplikasi web tradisional.

Sumber daya ini dikirim dari server ke browser klien menggunakan mode permintaan / respons HTTP biasa dan Flash Player yang menjalankan aplikasi di browser.

Keuntungan Flex

  • Aplikasi fleksibel biasanya berbasis Flash Player yang dapat mengakses kemampuan perangkat seperti GPS, kamera, database lokal, akselerometer grafis.

  • Aplikasi Flex dapat berjalan di perangkat Android, BlackBerry Tablet OS, dan iOS.

  • Aplikasi Flex dapat berjalan di Browser maupun di Desktop.

  • Aplikasi fleksibel tidak bergantung pada platform. UI bisa native platform atau bisa dibuat sama di setiap platform.

  • Aplikasi Flex dapat berinteraksi dengan server dengan semua teknologi sisi server utama seperti Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion, dan SAP menggunakan standar industri seperti REST, SOAP, JSON, JMS, dan AMF.

  • Aplikasi Flex menjamin pengalaman pengguna yang kaya melalui interaksi intuitif dengan aplikasi dan menyajikan informasi dalam antarmuka yang lebih kaya secara visual.

  • Aplikasi Flex adalah aplikasi satu halaman di mana status dapat bertransisi dari satu status ke status lain tanpa harus mengambil halaman baru dari server atau menyegarkan browser.

  • Aplikasi Flex sangat mengurangi beban pada server karena hanya diperlukan untuk mengembalikan aplikasi satu kali, bukan halaman baru setiap kali pengguna mengubah tampilan.

Kekurangan Flex

  • Aplikasi Flex adalah aplikasi single threaded tetapi Flex menyediakan model pemrograman asinkron untuk mengurangi masalah ini.

  • Flex berbasis ActionScript dan XML. Mempelajari keduanya adalah suatu keharusan untuk bekerja di Flex.

Tutorial ini akan memandu Anda tentang cara mempersiapkan lingkungan pengembangan untuk memulai pekerjaan Anda dengan Adobe Flex Framework. Tutorial ini juga akan mengajarkan Anda cara mengatur JDK dan Adobe Flash Builder di komputer Anda sebelum Anda mengatur Flex Framework.

Persyaratan Sistem

FLEX membutuhkan JDK 1.4 atau lebih tinggi, jadi persyaratan pertama adalah menginstal JDK di mesin Anda.

JDK 1.4 atau lebih tinggi.
Penyimpanan Tidak ada persyaratan minimum.
Ruang Disk Tidak ada persyaratan minimum.
Sistem operasi Tidak ada persyaratan minimum.

Ikuti langkah-langkah yang diberikan untuk mengatur lingkungan Anda untuk memulai dengan pengembangan aplikasi Flex.

Langkah 1 - Verifikasi instalasi Java di komputer Anda

Sekarang buka konsol dan jalankan perintah berikut java perintah.

OS Tugas Perintah
Windows Buka Konsol Perintah c: \> java -version
Linux Buka Terminal Perintah $ java -version
Mac Buka Terminal mesin: ~ joseph $ java -version

Mari verifikasi output untuk semua sistem operasi -

OS Output yang Dihasilkan
Windows

versi java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

VM Klien Java HotSpot (TM) (build 17.0-b17, mode campuran, berbagi)

Linux

versi java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

VM Klien Java HotSpot (TM) (build 17.0-b17, mode campuran, berbagi)

Mac

versi java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

Java HotSpot (TM) 64-Bit Server VM (build 17.0-b17, mode campuran, berbagi)

Langkah 2 - Siapkan Java Development Kit (JDK)

Jika Anda belum menginstal Java, Anda dapat menginstal Java Software Development Kit (SDK) dari situs Java Oracle Java SE Downloads . Anda akan menemukan instruksi untuk menginstal JDK dalam file yang diunduh, kemudian ikuti instruksi yang diberikan untuk menginstal dan mengkonfigurasi pengaturan. Terakhir, setel variabel lingkungan PATH dan JAVA_HOME untuk merujuk ke direktori yang berisi java dan javac, biasanya masing-masing java_install_dir / bin dan java_install_dir.

Mengatur JAVA_HOMEvariabel lingkungan untuk menunjuk ke lokasi direktori dasar tempat Java diinstal pada mesin Anda. Misalnya -

OS Keluaran
Windows Setel variabel lingkungan JAVA_HOME ke C: \ Program Files \ Java \ jdk1.6.0_21
Linux ekspor JAVA_HOME = / usr / local / java-current
Mac ekspor JAVA_HOME = / Library / Java / Home

Tambahkan lokasi compiler Java ke System Path.

OS Keluaran
Windows Tambahkan string;% JAVA_HOME% \ bin ke akhir variabel sistem, Path.
Linux ekspor PATH =$PATH:$JAVA_HOME / bin /
Mac tidak dibutuhkan

Langkah 3 - Siapkan Adobe Flash Builder 4.5

Semua contoh dalam tutorial ini telah ditulis menggunakan Adobe Flash Builder 4.5 Profession IDE Trial Version. Oleh karena itu, sarankan Anda untuk menginstal Adobe Flash Builder versi terbaru di komputer Anda. Juga, periksa kompatibilitas sistem operasi.

Untuk memasang Adobe Flash Builder IDE, unduh binari Adobe Flash Builder terbaru dari https://www.adobe.com/in/products/flash-builder.html. Setelah Anda mengunduh instalasi, keluarkan distribusi biner ke lokasi yang nyaman. Misalnya, di C: \ flash-builder di windows, atau / usr / local / flash-builder di Linux / Unix dan terakhir setel variabel PATH dengan tepat.

Flash Builder akan dimulai, saat Anda menjalankan perintah berikut di mesin windows, atau saat Anda cukup mengklik dua kali pada FlashBuilder.exe

%C:\flash-builder\FlashBuilder.exe

Flash Builder dapat dimulai dengan menjalankan perintah berikut di mesin Unix (Solaris, Linux, dll.) -

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder Trial Version dapat digunakan selama 60 hari. Terima saja syarat dan ketentuannya, dan lewati langkah pendaftaran awal untuk melanjutkan dengan IDE. Untuk pemahaman kami, kami menggunakan versi percobaan untuk tujuan pengajaran.

Setelah startup berhasil, jika semuanya baik-baik saja maka itu akan menampilkan hasil sebagai berikut -

Adobe Flash Builder telah dikonfigurasikan sebelumnya dengan FLEX SDK. Kami menggunakan FLEX SDK 4.5 dalam contoh kami yang disertakan dengan Adobe Flash Builder 4.5.

Langkah 4 - Siapkan Apache Tomcat

Anda dapat mengunduh Tomcat versi terbaru dari https://tomcat.apache.org/. Setelah Anda mengunduh penginstalan, buka paket distribusi biner ke lokasi yang nyaman. Misalnya, di C: \ apache-tomcat-6.0.33 di windows, atau /usr/local/apache-tomcat-6.0.33 di Linux / Unix dan setel variabel lingkungan CATALINA_HOME yang menunjuk ke lokasi instalasi.

Tomcat dapat dijalankan dengan menjalankan perintah berikut di mesin windows, atau Anda cukup mengklik dua kali pada startup.bat

%CATALINA_HOME%\bin\startup.bat 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat dapat dimulai dengan menjalankan perintah berikut di mesin UNIX (Solaris, Linux, dll.) -

$CATALINA_HOME/bin/startup.sh 
Or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

Setelah pengaktifan berhasil, aplikasi web default yang disertakan dengan Tomcat akan tersedia dengan mengunjungi http://localhost:8080/. Jika semuanya baik-baik saja, maka itu akan menampilkan hasil berikut -

Informasi lebih lanjut tentang mengonfigurasi dan menjalankan Tomcat dapat ditemukan dalam dokumentasi yang disertakan di sini, serta di situs web Tomcat: http://tomcat.apache.org

Tomcat dapat dihentikan dengan menjalankan perintah berikut di mesin windows -

%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat dapat dihentikan dengan menjalankan perintah berikut pada mesin UNIX (Solaris, Linux, dll.) -

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Sebelum kita mulai membuat aplikasi "HelloWorld" yang sebenarnya menggunakan Flash Builder, mari kita lihat apa bagian sebenarnya dari aplikasi Flex -

Aplikasi Flex terdiri dari empat bagian penting berikut, di mana bagian terakhir bersifat opsional tetapi tiga bagian pertama wajib.

  • Perpustakaan Flex Framework
  • Kode sisi klien
  • Sumber Daya Publik (HTML / JS / CSS)
  • Kode sisi server

Lokasi sampel dari berbagai bagian aplikasi Flex biasa seperti HelloWord akan seperti yang ditunjukkan di bawah ini -

Nama Lokasi
Akar proyek Halo Dunia/
Perpustakaan Flex Framework Bangun Jalur
Sumber daya publik html-template
Kode sisi klien tabel table-bordered / com / tutorialspoint / client
Kode sisi server tabel berbatas tabel / com / tutorialspoint / server

Proses Pembuatan Aplikasi

Untuk memulainya, aplikasi Flex membutuhkan pustaka kerangka kerja Flex. Nanti, Flash Builder secara otomatis menambahkan pustaka ke jalur pembuatan.

Saat kami membuat kode kami menggunakan pembuat Flash, pembuat Flash akan melakukan tugas-tugas berikut -

  • Mengompilasi kode sumber ke file HelloWorld.swf.

  • Mengompilasi HelloWorld.html (file pembungkus untuk file swf) dari file index.template.html yang disimpan di folder html-template

  • Menyalin file HelloWorld.swf dan HelloWorld.html di folder target, bin-debug.

  • Menyalin swfobject.js, kode JavaScript yang bertanggung jawab untuk memuat file swf secara dinamis di HelloWorld.html di folder target, bin-debug

  • Menyalin perpustakaan framework dalam bentuk file swf bernama frameworks_xxx.swf di folder target, bin-debug

  • Menyalin modul flex lainnya (file .swf seperti sparkskins_xxx.swf, textLayout_xxx.swf) di folder target.

Proses Peluncuran Aplikasi

  • Buka file HelloWorld.html yang tersedia di folder \ HelloWorld \ bin-debug di browser web mana pun.

  • HelloWorld.swf akan dimuat secara otomatis dan aplikasi akan mulai berjalan.

Perpustakaan Flex Framework

Berikut adalah detail singkat tentang beberapa pustaka kerangka kerja penting. Harap dicatat bahwa, perpustakaan Flex dilambangkan dengan notasi .swc

Sr Tidak Node & Deskripsi
1

playerglobal.swc

Pustaka ini khusus untuk FlashPlayer yang diinstal di komputer Anda dan berisi metode asli yang didukung oleh pemutar flash.

2

textlayout.swc

Pustaka ini mendukung fitur terkait tata letak teks.

3

framework.swc

Ini adalah pustaka kerangka kerja fleksibel yang berisi fitur-fitur inti Flex.

4

mx.swc

Pustaka ini menyimpan definisi dari kontrol mx UI.

5

charts.swc

Pustaka ini mendukung kontrol bagan.

6

spark.swc

Pustaka ini menyimpan definisi kontrol UI percikan.

7

sparkskins.swc

Pustaka ini mendukung skinning kontrol UI percikan.

Kode sisi klien

Kode aplikasi Flex dapat ditulis MXML sebaik ActionScript.

Sr Tidak Jenis & Deskripsi
1

MXML

MXML adalah bahasa markup XML yang akan kami gunakan untuk menyusun komponen antarmuka pengguna. MXML dikompilasi ke dalam ActionScript selama proses pembuatan.

2

ActionScript

ActionScript adalah bahasa pemrograman prosedural berorientasi objek dan didasarkan pada spesifikasi bahasa draf ECMAScript (ECMA-262) edisi 4.

Di Flex, kita dapat mencampur ActionScript dan MXML, untuk melakukan hal berikut -

  • Tata letak komponen antarmuka pengguna menggunakan tag MXML

  • Gunakan MXML untuk secara deklaratif menentukan aspek nonvisual aplikasi, seperti akses ke sumber data di server

  • Gunakan MXML untuk membuat data binding antara komponen antarmuka pengguna dan sumber data di server.

  • Gunakan ActionScript untuk menentukan event listener di dalam atribut event MXML.

  • Tambahkan blok skrip menggunakan menandai.

  • Sertakan file ActionScript eksternal.

  • Impor kelas ActionScript.

  • Buat komponen ActionScript.

Sumber Daya Publik

Ini adalah file bantuan yang direferensikan oleh aplikasi Flex, seperti halaman Host HTML, CSS atau gambar yang terletak di bawah folder html-template. Ini berisi file berikut -

Sr Tidak Nama & Deskripsi File
1

index.template.html

Host halaman HTML, dengan placeholder. Flash Builder menggunakan template ini untuk membuat halaman asli HelloWorld.html dengan file HelloWorld.swf.

2

playerProductInstall.swf

Ini adalah utilitas flash untuk menginstal Flash Player dalam mode ekspres.

3

swfobject.js

Ini adalah JavaScript yang bertanggung jawab untuk memeriksa versi flash player yang diinstal dan memuat HelloWorld.swf di halaman HelloWorld.html.

4

html-template/history

Folder ini berisi sumber daya untuk manajemen riwayat aplikasi.

HelloWorld.mxml

Ini adalah kode MXML / AS (ActionScript) sebenarnya yang ditulis mengimplementasikan logika bisnis aplikasi dan kompiler Flex diterjemahkan ke dalam file SWF yang akan dijalankan oleh flash player di browser.

Contoh kelas Entri HelloWorld adalah sebagai berikut -

<?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>

Tabel berikut memberikan deskripsi dari semua tag yang digunakan dalam skrip kode di atas.

Sr Tidak Node & Deskripsi
1

Application

Mendefinisikan wadah Aplikasi yang selalu merupakan tag root dari aplikasi Flex.

2

Script

Berisi logika bisnis dalam bahasa ActionScript.

3

VGroup

Mendefinisikan Penampung Pengelompokan Vertikal yang dapat berisi kontrol UI Flex secara vertikal.

4

Label

Mewakili kontrol Label, komponen antarmuka pengguna yang sangat sederhana yang menampilkan teks.

5

Button

Mewakili kontrol Tombol, yang dapat diklik untuk melakukan beberapa tindakan.

Kode sisi server

Ini adalah bagian sisi server dari aplikasi Anda dan sangat opsional. Jika Anda tidak melakukan pemrosesan backend dalam aplikasi Anda, maka Anda tidak memerlukan bagian ini, tetapi jika ada beberapa pemrosesan yang diperlukan di backend dan aplikasi sisi klien Anda berinteraksi dengan server, Anda harus mengembangkan komponen ini.

Pada bab berikutnya, kita akan menggunakan semua konsep yang disebutkan di atas untuk membuat file HelloWorld aplikasi menggunakan Flash Builder.

Kami akan menggunakan Flash Builder 4.5 untuk membuat Aplikasi Flex. Mari kita mulai dengan yang sederhanaHelloWorld aplikasi.

Langkah 1 - Buat Proyek

Langkah pertama adalah membuat Proyek Flex sederhana menggunakan Flash Builder IDE. Luncurkan wizard proyek menggunakan opsiFile > New > Flex Project. Sekarang beri nama proyek Anda sebagai HelloWorld menggunakan jendela wizard sebagai berikut -

Pilih Jenis Aplikasi Web (runs in Adobe Flash Player). Namun, jika ini tidak dipilih, biarkan nilai default lainnya seperti itu dan klik Tombol Selesai. Setelah proyek Anda berhasil dibuat, maka Anda akan memiliki konten berikut di Project Explorer Anda -

Berikut adalah deskripsi singkat dari semua folder penting -

Map Lokasi
tabel dibatasi tabel

File kode sumber (mxml / sebagai kelas).

Kami telah membuat struktur folder com / tutorialspoint / klien yang berisi kelas java khusus sisi klien yang bertanggung jawab untuk tampilan UI klien.

bin-debug

Ini adalah bagian keluaran, ini mewakili aplikasi web sebenarnya yang dapat diterapkan.

Folder History berisi file pendukung untuk manajemen sejarah aplikasi Flex.

framework_xxx.swf, file kerangka kerja fleksibel harus digunakan oleh aplikasi flex.

HelloWorld.html, File HTML pembungkus / host untuk aplikasi fleksibel.

HelloWorld.swf, aplikasi berbasis flex kami.

playerProductInstall.swf, penginstal cepat flash player.

spark_xxx.swf, pustaka untuk dukungan komponen spark.

swfobject.js, JavaScript bertanggung jawab untuk memuat HelloWorld.swf di HelloWorld.html. Ia memeriksa versi flash player dan meneruskan parameter inisialisasi ke file HelloWorld.swf.

textLayout_xxx.swf, pustaka untuk dukungan komponen teks.

html-template

Ini mewakili aplikasi web yang dapat dikonfigurasi. Flash Builder mengompilasi file dari html-template ke folder bin-debug.

Folder History berisi file pendukung untuk manajemen sejarah aplikasi Flex.

index.template.html, file HTML wrapper / host untuk aplikasi fleksibel yang memiliki placeholder untuk konfigurasi khusus Flash Builder. Dikompilasi ke HelloWorld.html di folder bin-debug selama pembuatan.

playerProductInstall.swf, penginstal cepat flash player akan disalin ke folder bin-debug selama pembuatan.

swfobject.js, JavaScript bertanggung jawab untuk memuat HelloWorld.swf di HelloWorld.html. Ia memeriksa versi flash player dan meneruskan parameter inisialisasi ke file HelloWorld.swf disalin ke folder bindebug selama build.

Langkah 2 - Buat File CSS Eksternal

Buat file CSS styles.css untuk halaman Wrapper HTML di html-template map.

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;
}

Langkah 3 - Ubah template halaman HTML Pembungkus

Ubah template halaman HTML Wrapper index.template.html di htmltemplatemap. Flash Builder akan membuat template halaman HTML Pembungkus default html-template / index.template.html , yang akan dikompilasi ke HelloWorld.html.

File ini berisi placeholder yang digantikan oleh Flash Builder selama proses kompilasi. Misalnya versi flash player, nama aplikasi, dll.

Mari kita ubah file ini untuk menampilkan pesan khusus jika plugin flash tidak diinstal.

<!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>

Langkah 4 - Buat file CSS Internal

Buat file CSS Style.css untuk HelloWorld.mxml di table tablebordered/com/tutorialspointmap. Flex menyediakan gaya css yang serupa untuk Kontrol UI-nya karena ada gaya css untuk kontrol UI HTML.

/* 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;
}

Langkah 5 - Modifikasi Kelas Tingkat Awal

Flash Builder akan membuat tabel file mxml default tablebordered / com.tutorialspoint / HelloWorld.mxml , yang memiliki wadah <application> tag root untuk aplikasi. Mari kita ubah file ini untuk menampilkan "Hello, World!" -

<?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>

Anda dapat membuat lebih banyak file mxml atau actionscript di direktori sumber yang sama untuk menentukan aplikasi baru atau untuk menentukan rutinitas helper.

Langkah 6 - Bangun Aplikasi

Flash Builder memiliki Build Automaticallysecara default dicentang. Periksa sajaProblemsLihat apakah ada kesalahan. Setelah Anda selesai dengan perubahan tersebut, Anda tidak akan melihat kesalahan apapun.

Langkah 7 - Jalankan Aplikasi

Sekarang klik pada

menu Run application dan pilihHelloWorld aplikasi untuk menjalankan aplikasi.

Jika semuanya baik-baik saja, Anda harus melihat pop up browser, aplikasi aktif, dan berjalan. Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Karena, Anda menjalankan aplikasi di flash player, maka itu perlu menginstal plugin Flash Player untuk browser Anda. Cukup ikuti petunjuk di layar untuk menginstal plugin. Jika Anda sudah menyetel plugin Flash Player untuk browser Anda, maka Anda harus dapat melihat output berikut -

Selamat! Anda telah menerapkan aplikasi pertama Anda menggunakanFlex.

Tutorial ini akan menjelaskan cara membuat aplikasi war file dan cara menyebarkannya di root server Web Apache Tomcat.

Jika Anda memahami contoh sederhana ini, maka Anda juga akan dapat menerapkan aplikasi Flex yang kompleks dengan mengikuti langkah-langkah yang sama.

Mari kita ikuti langkah-langkah berikut untuk membuat aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket telekomunikasi. tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Ikuti langkah-langkah yang diberikan di bawah ini untuk membuat rilis build dari aplikasi Flex dan kemudian menerapkannya ke server tomcat -

Langkah pertama adalah membuat build rilis menggunakan Flash Builder IDE. Luncurkan wizard rilis rilis menggunakan opsiFile > Export > Flash Builder > Release Build.

Pilih proyek sebagai HelloWorld menggunakan jendela wizard sebagai berikut

Biarkan nilai default lain seperti itu dan klik Tombol Selesai. Sekarang, Flash Builder akan membuat folder bin-release yang berisi build rilis proyek.

Sekarang rilis build kami sudah siap, mari kita ikuti langkah-langkah berikut untuk menerapkan aplikasi Flex -

Langkah Deskripsi
1 Zip konten folder pelepasan bin aplikasi dalam bentuk file HelloWorld.war dan terapkan di Webserver Apache Tomcat.
2 Luncurkan aplikasi web Anda menggunakan URL yang sesuai seperti yang dijelaskan di bawah ini pada langkah terakhir.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, maka itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Buat File WAR

Sekarang aplikasi kami berfungsi dengan baik dan kami siap mengekspornya sebagai file perang. Ikuti langkah-langkah berikut -

  • Masuk ke direktori bin-release proyek Anda C: \ workspace \ HelloWorld \ binrelease

  • Pilih semua file & folder yang tersedia di dalam direktori bin-release.

  • Zip semua file & folder yang dipilih ke dalam file bernama HelloWorld.zip .

  • Ubah nama HelloWorld.zip menjadi HelloWorld.war.

Terapkan file WAR

Hentikan server kucing jantan.

  • Salin file HelloWorld.war ke direktori instalasi tomcat> folder webapps.

  • Mulai server kucing jantan.

  • Lihat di dalam direktori webapps, seharusnya ada folder yang dibuat oleh HelloWorld.

  • Sekarang HelloWorld.war berhasil digunakan di root Tomcat Webserver.

Jalankan Aplikasi

Masukkan URL di browser web -

http: // localhost: 8080 / HelloWorld / HelloWorld.html untuk meluncurkan aplikasi.

Nama server (localhost) dan port (8080) dapat bervariasi sesuai konfigurasi tomcat Anda.

Siklus Hidup Aplikasi Flex

Meskipun, Anda dapat membuat aplikasi Flex tanpa memahami fase siklus hidup aplikasi, ada baiknya Anda mengetahui mekanisme dasarnya; urutan terjadinya sesuatu. Ini akan membantu Anda mengonfigurasi fitur seperti memuat aplikasi Flex lainnya saat runtime, dan mengelola proses pemuatan dan pembongkaran pustaka kelas dan aset saat runtime.

Pemahaman yang baik tentang siklus hidup aplikasi Flex akan memungkinkan Anda membangun aplikasi yang lebih baik dan mengoptimalkannya karena Anda akan tahu di mana harus menjalankan kode secara optimal. Misalnya, jika Anda perlu memastikan bahwa beberapa kode berjalan selama prapemuat, Anda perlu mengetahui di mana harus menempatkan kode untuk peristiwa itu.

Saat kita memuat aplikasi flex di browser, kejadian berikut terjadi selama siklus hidup aplikasi flex.

Berikut adalah detail singkat tentang berbagai peristiwa siklus Hidup Fleksibel.

Sr Tidak Deskripsi acara
1

preInitialize: mx.core.UIComponent.preinitialize

Jenis Acara: mx.events.FlexEvent.PREINITIALIZE

Peristiwa ini dikirim di awal urutan inisialisasi komponen. Komponen berada dalam status sangat mentah saat acara ini dikirim. Banyak komponen, seperti Kontrol tombol membuat komponen anak internal untuk mengimplementasikan fungsionalitas. Misalnya, kontrol Tombol membuat komponen Bidang Teks UI internal untuk merepresentasikan teks labelnya.

Ketika Flex mengirimkan acara pra-inisialisasi, turunan, termasuk semua turunan internal, dari sebuah komponen belum dibuat.

2

menginisialisasi: mx.core.UIComponent.initialize

Jenis Acara: mx.events.FlexEvent.INITIALIZE

Acara ini dikirim setelah fase pra-inisialisasi. Kerangka kerja fleksibel menginisialisasi struktur internal komponen ini selama fase ini. Peristiwa ini secara otomatis dijalankan ketika komponen ditambahkan ke induk.

Anda tidak perlu memanggil initialize () secara umum.

3

creationComplete: mx.core.UIComponent.creationComplete

Jenis Acara: mx.events.FlexEvent.CREATION_COMPLETE

Peristiwa ini dikirim setelah komponen menyelesaikan konstruksinya, pemrosesan properti, pengukuran, tata letak, dan gambarnya.

Pada titik ini, bergantung pada propertinya yang terlihat, komponen tidak terlihat meskipun telah digambar.

4

applicationComplete: spark.components.Application.applicationComplete

Jenis Kejadian: mx.events.FlexEvent.APPLICATION_COMPLETE

Dikirim setelah Aplikasi diinisialisasi, diproses oleh LayoutManager, dan dilampirkan ke daftar tampilan.

Ini adalah peristiwa terakhir dari siklus hidup pembuatan aplikasi dan menandakan bahwa aplikasi telah dimuat sepenuhnya.

Contoh Siklus Hidup Fleksibel

Mari kita ikuti langkah-langkah untuk memahami siklus hidup uji aplikasi Flex dengan membuat aplikasi uji -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket telekomunikasi. tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3 Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Flex mendukung penggunaan sintaks dan gaya CSS untuk diterapkan ke kontrol UI-nya dengan cara yang sama seperti komponen CSS ke HTML.

Cara # 1: Menggunakan File Lembar Gaya Eksternal

Anda dapat merujuk ke lembar gaya yang tersedia di jalur kelas aplikasi. Misalnya pertimbangkan file Style.css dicom/tutorialspoint/client folder di mana file HelloWorld.mxml juga berada.

/* 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;
}

Kemudian file css dapat dirujuk dengan potongan kode berikut

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

Tetapkan gaya ke komponen UI menggunakan properti styleName

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>

Cara # 2: Menggunakan Gaya Dalam Komponen Kontainer Ui

Anda bisa mendefinisikan gaya dalam komponen penampung UI menggunakan tag <fx: Style>

Pemilih Tingkat Kelas

<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>

Tetapkan gaya ke komponen UI menggunakan properti styleName.

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

Pemilih Tingkat Id

Gaya komponen UI menggunakan pemilih id.

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" />

Ketik Level Selector

Style satu jenis Komponen UI dalam satu GO.

<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)" />

Gaya Fleksibel dengan Contoh CSS

Mari kita ikuti langkah-langkah untuk memeriksa gaya CSS dari aplikasi Flex dengan membuat aplikasi percobaan -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah Style.css, HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file CSS yang dimodifikasi 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;
}

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, ini akan menghasilkan hasil sebagai berikut: [ Coba online ]

Apa itu Skinning?

  • Skinning in Flex, adalah proses menyesuaikan tampilan dan nuansa Komponen UI sepenuhnya.

  • Sebuah Skin dapat menentukan teks, gambar, filter, transisi dan status suatu komponen.

  • Sebuah Skin dapat dibuat sebagai mxml atau komponen ActionScript terpisah.

  • Dengan menggunakan skin, kita dapat mengontrol semua aspek visual dari komponen UI.

  • Proses mendefinisikan skin sama untuk semua komponen UI.

Langkah 1 - Buat Skin

Luncurkan wizard Buat MXML Skin menggunakan opsi File > New > MXML Skin.

Masukkan Paket sebagai com.tutorialspoint.skin, nama sebagai GradientBackgroundSkin dan pilih komponen host sebagai kontrol BorderContainer flex yang adaspark.component.BorderContainer.

Sekarang Anda telah membuat skin untuk BorderContainer. Ubah konten file skin mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.

Perbarui lapisan isian sebagai berikut -

<!-- 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>

Langkah 2: Oleskan Kulit

Anda dapat mengoleskan kulit di atas komponen dengan dua cara -

Terapkan kulit dalam skrip MXML (secara statis)

Menerapkan GradientBackgroundSkin ke BorderContainer dengan id mainContainer menggunakan nya skinClass atribut.

<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">

Terapkan kulit di ActionScript (secara dinamis)

Menerapkan GradientBackgroundSkin ke BorderContainer dengan id mainContainer menggunakan nya skinClass Properti.

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

Gaya Fleksibel dengan Contoh Kulit

Mari kita ikuti langkah-langkah berikut untuk melihat skinning beraksi di aplikasi Flex dengan membuat aplikasi tes -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Buat GradientBackgroundSkin.mxml skin di bawah paket com.tutorialspoint.skin seperti dijelaskan di atas. Jaga file lainnya tidak berubah.
3 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
4 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file GradientBackgroundSkin.mxml 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>

Berikut ini adalah isi dari HelloWorld.mxml yang telah dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Apa itu Data Binding?

Data Binding adalah proses dimana data dari satu objek diikat ke objek lain. Ini membutuhkan properti sumber, properti tujuan, dan peristiwa pemicu yang menunjukkan, kapan harus menyalin data dari sumber ke tujuan.

Flex menyediakan tiga cara untuk melakukan Data Binding seperti di bawah ini

  • Sintaks kurung kurawal dalam MXML Script ({})
  • <fx: binding> di MXML
  • BindingUtils di ActionScript

Data Binding - Menggunakan Curly Braces di MXML

Contoh berikut menunjukkan cara menggunakan kurung kurawal untuk menentukan data binding dari sumber ke tujuan.

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

Data Binding - Menggunakan tag <fx: Binding> di MXML

Contoh berikut menunjukkan cara menggunakan tag untuk menentukan pengikatan data dari sumber ke tujuan.

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

Data Binding - Menggunakan BindingUtils di ActionScript

Contoh berikut menunjukkan cara menggunakan BindingUtils untuk menentukan data binding dari sumber ke tujuan.

<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)" />

Contoh Pengikatan Data Flex

Mari kita ikuti langkah-langkah yang diberikan di bawah ini untuk melihat skinning beraksi dalam aplikasi Flex dengan membuat aplikasi tes -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut ini adalah konten dari file HelloWorld.mxml yang dimodifikasisrc/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 &lt;fx:Binding&gt;)" 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Setiap antarmuka pengguna mempertimbangkan tiga aspek utama berikut -

  • UI Elements- Ini adalah elemen visual inti yang akhirnya dilihat dan berinteraksi dengan pengguna. Flex menyediakan daftar besar elemen yang banyak digunakan dan umum yang bervariasi dari dasar hingga kompleks yang akan kita bahas dalam tutorial ini.

  • Layouts- Mereka menentukan bagaimana elemen UI harus diatur pada layar dan memberikan tampilan dan nuansa akhir pada GUI (Graphical User Interface). Bagian ini akan dibahas dalam bab Tata Letak.

  • Behavior- Peristiwa ini terjadi saat pengguna berinteraksi dengan elemen UI. Bagian ini akan dibahas dalam bab Penanganan Event.

Elemen UI Fleksibel

Pustaka Flex UI menyediakan kelas dalam hierarki kelas yang terdefinisi dengan baik untuk membuat antarmuka pengguna berbasis web yang kompleks. Semua kelas dalam hierarki komponen ini diturunkan dariEventDispatcher kelas dasar seperti yang ditunjukkan di bawah ini -

Setiap kontrol UI Dasar mewarisi properti dari kelas Komponen UI yang pada gilirannya mewarisi properti dari EventDispatcher dan kelas tingkat atas lainnya.

Sr Tidak Kontrol & Deskripsi
1 Kelas Flex EventDispatcher

Kelas EventDispatcher adalah kelas dasar untuk semua kelas yang dapat mengirimkan acara. Kelas EventDispatcher memungkinkan objek apa pun pada daftar tampilan untuk menjadi target acara dan dengan demikian, menggunakan metode antarmuka IEventDispatcher.

2 Flex UIComponent

Kelas UIComponent adalah kelas dasar untuk semua komponen visual, baik interaktif maupun non-interaktif.

Kontrol Dasar

Berikut adalah beberapa Kontrol Dasar yang penting -

Sr Tidak Kontrol & Deskripsi
1 Label

Label adalah komponen UIC tingkat rendah yang dapat merender satu atau lebih baris teks dengan format seragam.

2 Teks

Kontrol Teks memungkinkan Anda menampilkan konten HTML serta teks biasa dalam aplikasi Anda.

3 Gambar

Kontrol Gambar memungkinkan Anda mengimpor file JPEG, PNG, GIF, dan SWF saat runtime.

4 LinkButton

Kontrol LinkButton adalah kontrol Tombol tanpa batas yang isinya disorot saat pengguna menggerakkan mouse di atasnya.

Kontrol formulir memungkinkan pengguna untuk memasukkan data dan memberi mereka kemampuan interaksi dengan aplikasi. Setiap UI Formulir mengontrol dan mewarisi properti dari kelas UIComponent yang pada gilirannya mewarisi properti dari EventDispatcher dan kelas tingkat atas lainnya.

Sr Tidak Kontrol & Deskripsi
1 Kelas Flex EventDispatcher

Kelas EventDispatcher adalah kelas dasar untuk semua kelas yang dapat mengirimkan acara. Kelas EventDispatcher memungkinkan objek apa pun pada daftar tampilan untuk menjadi target acara dan dengan demikian, menggunakan metode antarmuka IEventDispatcher.

2 Flex UIComponent

Kelas UIComponent adalah kelas dasar untuk semua komponen visual, baik interaktif maupun noninteraktif.

Kontrol Formulir

Berikut adalah beberapa Kontrol Formulir penting -

Sr Tidak Kontrol & Deskripsi
1 Tombol

Komponen Tombol adalah tombol persegi panjang yang umum digunakan.

2 ToggleButton

Komponen ToggleButton mendefinisikan tombol sakelar.

3 Kotak Centang

Komponen Kotak Centang terdiri dari label opsional dan kotak kecil yang dapat berisi tanda centang atau tidak.

4 Pemilih warna

Kontrol ColorPicker menyediakan cara bagi pengguna untuk memilih warna dari daftar contoh.

5 Kotak kombo

Kontrol ComboBox adalah kelas anak dari kontrol DropDownListBase.

6 DateChooser

Kontrol DateChooser menampilkan nama bulan, tahun, dan kisi hari dalam sebulan, dengan kolom berlabel hari dalam seminggu.

7 Tombol radio

Komponen RadioButton memungkinkan pengguna membuat satu pilihan dalam serangkaian pilihan yang saling eksklusif.

8 TextArea

TextArea adalah kontrol entri teks yang memungkinkan pengguna memasukkan dan mengedit beberapa baris teks yang diformat.

9 TextInput

TextInput adalah kontrol entri teks yang memungkinkan pengguna memasukkan dan mengedit satu baris teks berformat seragam.

10 DropDownList

Kontrol DropDownList berisi daftar drop-down di mana pengguna dapat memilih satu nilai.

11 NumericStepper

Kontrol NumericStepper memungkinkan Anda memilih nomor dari set yang dipesan.

Kontrol kompleks memberi pengguna kemampuan tingkat lanjut untuk menangani sejumlah besar data dengan cara yang lebih mudah dan memberi mereka kemampuan interaksi dengan aplikasi. Setiap kontrol UI Kompleks mewarisi properti dari kelas UIComponent yang pada gilirannya mewarisi properti dari EventDispatcher dan kelas tingkat atas lainnya.

Sr Tidak Kontrol & Deskripsi
1 Kelas Flex EventDispatcher

Kelas EventDispatcher adalah kelas dasar untuk semua kelas yang dapat mengirimkan acara. Kelas EventDispatcher memungkinkan objek apa pun pada daftar tampilan untuk menjadi target acara dan dengan demikian, menggunakan metode antarmuka IEventDispatcher.

2 Flex UIComponent

Kelas UIComponent adalah kelas dasar untuk semua komponen visual, baik interaktif maupun noninteraktif.

Kontrol Kompleks

Berikut adalah beberapa Kontrol Kompleks penting -

Sr Tidak Kontrol & Deskripsi
1 Kisi Data

Kontrol DataGrid menampilkan deretan judul kolom di atas kisi yang dapat digulir.

2 AdvancedDataGrid

AdvancedDataGrid menambahkan beberapa fungsionalitas tambahan ke kontrol DataGrid standar untuk menambahkan fitur visualisasi data.

3 Tidak bisa

Kontrol Menu membuat menu pop-up dari pilihan yang dapat dipilih secara individual.

4 ProgressBar

Kontrol ProgressBar memberikan representasi visual dari kemajuan tugas dari waktu ke waktu.

5 RichTextEditor

Kontrol RichTextEditor memungkinkan pengguna memasukkan dan memformat teks.

6 TileList

Kontrol TileList Kontrol TileList menampilkan sejumlah item yang ditata dalam ubin.

7 Pohon

Kontrol Pohon memungkinkan pengguna melihat data hierarki yang disusun sebagai pohon yang dapat diperluas.

8 Pemutar video

Kontrol VideoPlayer adalah pemutar video skinnable yang mendukung unduhan progresif, streaming multi-bitrate, dan streaming video.

9 Accordian

Kontrol Accordian memiliki kumpulan penampung MX turunan atau penampung Spark NavigatorContent, tetapi hanya satu yang terlihat pada satu waktu.

10 TabNavigator

Kontrol TabNavigator menyertakan wadah TabBar untuk menavigasi di antara wadah anaknya.

11 ToggleButtonBar

Kontrol ToggleButtonBar menentukan grup tombol horizontal atau vertikal yang mempertahankan status yang dipilih atau batal dipilih.

Kontrol panel tata letak memberi pengguna untuk mengatur kontrol UI di halaman. Setiap kontrol Layout mewarisi properti dari kelas UIComponent yang pada gilirannya mewarisi properti dari EventDispatcher dan kelas tingkat atas lainnya.

Sr Tidak Kontrol & Deskripsi
1 Kelas Flex EventDispatcher

Kelas EventDispatcher adalah kelas dasar untuk semua kelas yang dapat mengirimkan acara. Kelas EventDispatcher memungkinkan objek apa pun pada daftar tampilan untuk menjadi target acara dan dengan demikian, menggunakan metode antarmuka IEventDispatcher.

2 Flex UIComponent

Kelas UIComponent adalah kelas dasar untuk semua komponen visual, baik interaktif maupun noninteraktif.

Panel Tata Letak

Berikut adalah beberapa Panel Tata Letak penting -

Sr Tidak Panel & Deskripsi
1 BorderContainer

Kelas BorderContainer menyediakan sekumpulan gaya CSS yang mengontrol tampilan batas dan pengisian latar belakang penampung.

2 Bentuk

Wadah Formulir memberikan kontrol atas tata letak formulir, menandai bidang formulir sebagai wajib atau opsional, menangani pesan kesalahan, dan mengikat data formulir ke model data Flex untuk melakukan pemeriksaan dan validasi data.

3 VGroup

Wadah VGroup adalah wadah Grup yang menggunakan kelas VerticalLayout.

4 HGroup

Wadah HGroup adalah wadah Grup yang menggunakan kelas HorizontalLayout.

5 Panel

Kelas Panel adalah wadah yang menyertakan bilah judul, keterangan, batas, dan area konten untuk anak-anaknya.

6 SkinnableContainer

Kelas SkinnableContainer adalah kelas dasar untuk container skinnable yang menyediakan konten visual.

7 TabBar

TabBar menampilkan sekumpulan tab yang identik.

8 TitleWindow

The TitleWindow memperluas Panel untuk menyertakan tombol tutup dan memindahkan area.

Kita dapat menambahkan perilaku untuk melenturkan aplikasi menggunakan konsep Effects. Misalnya, ketika kotak teks mendapatkan fokus, kita dapat membuat teksnya menjadi lebih tebal dan ukurannya sedikit lebih besar.

Setiap efek mewarisi properti dari kelas Efek yang pada gilirannya mewarisi properti dari EventDispatcher dan kelas tingkat atas lainnya.

Sr Tidak Efek & Deskripsi
1 Kelas Efek Fleksibel

Kelas Effect adalah kelas dasar abstrak yang mendefinisikan fungsionalitas dasar dari semua efek Flex. Kelas ini mendefinisikan kelas pabrik dasar untuk semua efek.

Efek Dasar

Berikut adalah beberapa Efek Visual Dasar yang penting -

Sr Tidak Efek & Deskripsi
1 Luntur

Efek Fade menganimasikan properti alpha dari sebuah komponen.

2 WipeLeft

Kelas WipeLeft mendefinisikan efek hapus ke kiri.

3 WipeRight

Kelas WipeRight mendefinisikan efek wipe right.

4 Pindah3D

Kelas Move3D memindahkan objek target dalam dimensi x, y, dan z.

5 Scale3D

Kelas Scale3D menskalakan objek target dalam tiga dimensi di sekitar pusat transformasi.

6 Rotate3D

Kelas Rotate3D memutar objek target dalam tiga dimensi di sekitar sumbu x, y, atau z.

7 Menghidupkan

Efek Animate ini menganimasikan sekumpulan sembarang properti antar nilai. Tentukan properti dan nilai yang akan dianimasikan dengan menyetel properti motionPaths.

Flex menggunakan konsep event untuk meneruskan data dari satu objek ke objek lainnya tergantung pada keadaan atau interaksi pengguna dalam aplikasi.

ActionScript memiliki file generik Eventkelas yang mendefinisikan banyak fungsionalitas yang dibutuhkan untuk bekerja dengan acara. Setiap kali sebuah event terjadi dalam aplikasi Flex, tiga tipe objek dari hierarki kelas Event dibuat.

Acara memiliki tiga properti utama berikut

Sr Tidak Deskripsi properti
1

Type

Itu typemenyatakan tentang peristiwa seperti apa yang baru saja terjadi. Ini bisa berupa klik, inisialisasi, gerakan mouse, ubah, dll. Nilai aktual akan diwakili oleh konstanta seperti MouseEvent.CLICK.

2

Target

Itu target properti Peristiwa adalah referensi objek ke komponen yang menghasilkan peristiwa. Jika Anda mengklik Tombol dengan id clickMeButton, target peristiwa klik tersebut adalah clickMeButton

3

CurrentTarget

Itu currentTargetproperti bervariasi dalam hierarki penampung. Ini terutama berkaitan dengan aliran peristiwa.

Tahapan Alur Peristiwa

Sebuah acara melalui tiga fase mencari penangan acara.

Sr Tidak Fase & Deskripsi
1

Capture

Pada tahap capture, program akan mulai mencari event handler dari luar (atau atas) induk sampai yang paling dalam. Fase penangkapan berhenti di induk objek yang memicu peristiwa tersebut.

2

Target

Dalam fase target, komponen yang memicu kejadian, diperiksa untuk penanganan kejadian.

3

Bubble

Fase Bubble adalah kebalikan dari fase penangkapan, bekerja kembali melalui struktur, dari induk komponen target ke atas.

Pertimbangkan kode aplikasi berikut -

<?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>

Ketika pengguna mengklik Tombol, dia juga mengklik Panel dan Aplikasi.

Acara ini melewati tiga fase untuk mencari tugas penanganan acara.

Mari kita ikuti langkah-langkah di bawah ini untuk menguji penyerahan acara dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Flex menyediakan dua cara untuk membuat komponen khusus.

  • Menggunakan ActionScript
  • Menggunakan MXML

Menggunakan ActionScript

Anda dapat membuat komponen dengan memperluas komponen yang sudah ada. Untuk membuat komponen menggunakan Flash Builder, KlikFile > New > ActionScript Class.

Masukkan detailnya seperti yang ditunjukkan di bawah ini -

Flash Builder akan membuat file CustomButton.as berikut.

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

Menggunakan MXML

Anda dapat membuat komponen dengan memperluas komponen yang sudah ada. Untuk membuat komponen menggunakan Flash Builder, KlikFile > New > MXML Component.

Masukkan detailnya seperti yang ditunjukkan di bawah ini.

Flash Builder akan membuat file CustomLogin.mxml berikut.

<?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>

Mari kita ikuti langkah-langkah berikut untuk menguji kontrol khusus dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Buat CustomLogin.mxml dan CustomButton.as komponen seperti dijelaskan di atas. Ubah file-file ini seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
4 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Berikut adalah konten file mxml yang dimodifikasi 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";
      }
   }
}

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Flex menyediakan layanan RPC untuk menyediakan data sisi server ke sisi klien. Flex memberikan cukup banyak kontrol ke data sisi server.

  • Dengan menggunakan layanan Flex RPC, kita dapat menentukan tindakan pengguna yang akan dijalankan di sisi server.

  • Layanan Flex RPC dapat diintegrasikan dengan teknologi sisi server apa pun.

  • Salah satu Layanan RPC Flex menyediakan dukungan bawaan untuk data biner terkompresi yang akan ditransfer melalui kabel dan cukup cepat.

Flex menyediakan tiga jenis Layanan RPC berikut

Sr Tidak Layanan & Deskripsi RPC
1

HttpService

Tag <mx: HTTPService> digunakan untuk mewakili objek HTTPService dalam file MXML. Saat Anda melakukan panggilan ke metode send () objek HTTPService, itu membuat permintaan HTTP ke URL yang ditentukan, dan respons HTTP dikembalikan. Anda juga dapat menggunakan metode HTTP HEAD, OPTIONS, TRACE, dan DELETE.

2

WebService

<Mx: WebService> digunakan untuk mendapatkan akses ke operasi layanan web yang sesuai dengan SOAP.

3

RemoteObject

Tag <mx: RemoteObject> digunakan untuk mewakili objek HTTPService dalam file MXML. Tag ini memberi Anda akses ke metode objek Java menggunakan pengkodean Action Message Format (AMF).

Kami akan membahas Layanan HTTP secara rinci. Kami akan menggunakan file sumber XML yang ditempatkan di server dan mengaksesnya di sisi klien melalui Layanan HTTP.

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>

Deklarasi HTTPService

Sekarang deklarasikan HTTPService dan berikan url dari file di atas

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

Panggilan RPC

Lakukan panggilan ke metode itemRequest.send () dan ikat nilai dari objek lastResult webservice itemRequest ke komponen Flex UI.

...
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>

Contoh Panggilan Layanan RPC

Sekarang, Mari kita ikuti langkah-langkah untuk menguji layanan RPC dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Flash Builder 4 memiliki dukungan bawaan yang sangat baik untuk integrasi FlexUnit dalam Siklus pengembangan Flex.

Buat Kelas Kasus Uji

Anda dapat membuat Kelas Kasus Uji menggunakan wizard Flash Builder Buat Kelas Uji. Menjalankan kasus uji sangat mudah dengan Flash Builder seperti yang akan Anda lihat di artikel ini.

Untuk membuat kelas kasus uji menggunakan Flash Builder, Klik File > New > Test Case Class. Masukkan detailnya seperti yang ditunjukkan di bawah ini.

Flash Builder akan membuat TestClass1.sebagai file.

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 {}	
   }
}

Contoh Integrasi FlexUnit

Sekarang, mari kita ikuti langkah-langkah untuk menguji Integrasi FlexUnit dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Buat TestClass1.sebagai kasus uji seperti dijelaskan di atas dan Ubah TestClass1.seperti dijelaskan di bawah ini.
4 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file yang dimodifikasi 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);
      }
   }
}

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi .

Menjalankan kasus Uji

Sekarang Klik Kanan pada TestClass1 di penjelajah paket dan pilih Run As > FlexUnit Tests. Anda akan melihat keluaran berikut di jendela uji Flash Builder.

Flash Builder juga menunjukkan hasil tes di browser.

Flex memberikan kemampuan yang sangat baik untuk men-debug kode fleksibel dan Flash Builder 4 memiliki dukungan perspektif debugger dan debugging bawaan yang sangat baik.

  • Selama mode debug, Aplikasi Flex berjalan pada versi Flash Player Debugger yang dibangun di Flash Builder 4 yang mendukung kemampuan debugging.

  • Jadi pengembang mendapatkan konfigurasi debugging yang mudah dan terintegrasi di Flash Builder

Dalam artikel ini, kami akan mendemonstrasikan penggunaan debugging kode Klien Flex menggunakan Flash Builder. Kami akan melakukan tugas-tugas berikut

  • Tetapkan break point dalam kode dan lihat di Breakpoint Explorer.
  • Langkah melalui kode baris demi baris selama debugging.
  • Lihat nilai variabel.
  • Periksa nilai semua variabel.
  • Periksa nilai ekspresi.
  • Tampilkan bingkai tumpukan untuk benang yang ditangguhkan.

Contoh Debugging

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi .

Langkah 1 - Tempatkan Breakpoints

Tempatkan breakpoint pada baris pertama aplikasi yang menginisialisasi Handler dari HelloWorld.mxml

Langkah 2 - Aplikasi Debug

Sekarang klik

menu aplikasi Debug dan pilihHelloWorld aplikasi untuk men-debug aplikasi.

Jika semuanya baik-baik saja, aplikasi akan diluncurkan di browser dan Anda akan melihat log debug berikut di konsol Flash Builder.

[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 decompression

Segera setelah Aplikasi diluncurkan, Anda akan melihat fokus pada titik putus Flash Builder karena kami telah menempatkan titik putus tersebut pada baris pertama metode application_initialize Handler.

Anda dapat melihat stacktrace untuk utas yang ditangguhkan.

Anda dapat melihat nilai ekspresi.

Anda dapat melihat daftar breakpoints ditempatkan.

Sekarang terus tekan F6 sampai Anda mencapai baris terakhir dari metode application_initializeHandler (). Sebagai referensi untuk tombol fungsi, F6 memeriksa kode baris demi baris, F5 melangkah lebih jauh dan F8 akan melanjutkan aplikasi. Sekarang Anda dapat melihat daftar nilai dari semua variabel metode application_initializeHandler ().

Sekarang Anda dapat melihat kode flex dapat di-debug dengan cara yang sama seperti Aplikasi Java dapat di-debug. Tempatkan breakpoint ke baris mana pun dan mainkan dengan kemampuan debugging dari flex.

Flex menyediakan dua cara untuk menginternasionalkan aplikasi Flex, Kami akan mendemonstrasikan penggunaan Waktu kompilasi Internasionalisasi yang paling umum digunakan di antara proyek.

Sr Tidak Teknik & Deskripsi
1

Compile Time Internationalization

Teknik ini paling umum dan memerlukan sedikit biaya tambahan saat runtime; adalah teknik yang sangat efisien untuk menerjemahkan string konstan dan berparameter; paling sederhana untuk diterapkan. Internasionalisasi Waktu Kompilasi menggunakan file properti standar untuk menyimpan string yang diterjemahkan dan pesan berparameter, dan file properti ini dikompilasi langsung dalam aplikasi.

2

Run Time Internationalization

Teknik ini sangat fleksibel tetapi lebih lambat dari internasionalisasi string statis. Anda perlu mengompilasi file properti pelokalan secara terpisah, membiarkannya di luar aplikasi, dan memuatnya pada waktu proses.

Alur kerja internasionalisasi Aplikasi Flex

Langkah 1 - Buat struktur folder

Buat folder lokal di bawah folder src dari proyek Flex. Ini akan menjadi direktori induk untuk semua file properti untuk lokal yang akan didukung aplikasi. Di dalam folder lokal, buat subfolder, satu untuk setiap lokal aplikasi yang akan didukung. Konvensi penamaan lokal adalah

{language}_{country code}

Misalnya, en_US mewakili bahasa Inggris Amerika Serikat. Lokal de_DE mewakili bahasa Jerman. Aplikasi sampel akan mendukung dua bahasa umum: Inggris, dan Jerman.

Langkah 2 - Buat file properti

Buat file properti yang berisi pesan untuk digunakan dalam aplikasi. Kami telah membuatHelloWorldMessages.properties file di bawah src > locale > en_US folder dalam contoh kami.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Buat file properti yang berisi nilai terjemahan khusus untuk lokal. Kami telah membuatHelloWorldMessages.properties file di bawah src > locale > de_DEfolder dalam contoh kami. File ini berisi terjemahan dalam bahasa jerman. _de menentukan lokal jerman dan kami akan mendukung bahasa jerman di aplikasi kami.

Jika Anda membuat file properti menggunakan Flash Builder, ubah penyandian file menjadi UTF-8. Pilih file, lalu klik kanan di dalamnya untuk membuka jendela propertinya, Pilih Penyandian file teks sebagai Other UTF-8. Terapkan dan Simpan perubahan.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Langkah 3 - Tentukan opsi Compiler

  • Klik kanan proyek Anda dan pilih Properties.

  • Pilih Flex Compiler, dan tambahkan berikut ini ke pengaturan Argumen Kompilator Tambahan -

-locale en_US de_DE
  • Klik kanan proyek Anda dan pilih Properties.

  • Pilih Flex Build Path, dan tambahkan yang berikut ini ke pengaturan Source Path -

src\locale\{locale}

Contoh Internalisasi

Sekarang Mari kita ikuti langkah-langkah berikut untuk menguji teknik Internalisasi dalam aplikasi Flex -

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Ubah bahasa menggunakan drop down bahasa dan lihat hasilnya.

Flex menyediakan kelas khusus FlexPrintJob untuk mencetak objek fleksibel.

  • FlexPrintJob dapat digunakan untuk mencetak satu atau lebih objek Flex, seperti wadah Formulir atau VBox.

  • FlexPrintJob mencetak objek dan semua objek di dalamnya.

  • Objek dapat menjadi semua atau sebagian dari antarmuka yang ditampilkan.

  • Objek dapat berupa komponen yang memformat data khusus untuk dicetak.

  • Kelas FlexPrintJob memungkinkan Anda menskalakan keluaran agar pas dengan halaman.

  • Kelas FlexPrintJob secara otomatis menggunakan beberapa halaman untuk mencetak objek yang tidak muat pada satu halaman.

  • Kelas FlexPrintJob menyebabkan sistem operasi menampilkan kotak dialog Print. Anda tidak dapat mencetak tanpa tindakan pengguna.

Siapkan dan kirim pekerjaan cetak

Anda mencetak keluaran dengan mempersiapkan dan mengirim pekerjaan cetak. Mari buat instance kelas FlexPrintJob

var printJob:FlexPrintJob = new FlexPrintJob();

Mulai pekerjaan cetak

printJob.start();

Flex akan menyebabkan sistem operasi menampilkan kotak dialog Print. Tambahkan satu atau beberapa objek ke pekerjaan cetak dan tentukan cara menskalakannya

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

Setiap objek dimulai di halaman baru. Kirim pekerjaan cetak ke printer

printJob.send();

Contoh Pencetakan

Langkah Deskripsi
1 Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2 Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Klik tombol cetak saya dan Anda dapat melihat hasil cetakan dari data grid yang ditunjukkan di bawah ini.