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.exeFlash Builder dapat dimulai dengan menjalankan perintah berikut di mesin Unix (Solaris, Linux, dll.) -
$/usr/local/flash-builder/FlashBuilderAdobe 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.batTomcat 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.shSetelah 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\shutdownTomcat 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.shSebelum 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
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
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
<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 <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>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
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 decompressionSegera 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_DEKlik 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.
