Flex - Aplikasi

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

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

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

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

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

Proses Pembuatan Aplikasi

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

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

Mengompilasi kode sumber ke file HelloWorld.swf.
Mengompilasi HelloWorld.html (file pembungkus untuk file swf) dari file index.template.html yang disimpan di folder html-template
Menyalin file HelloWorld.swf dan HelloWorld.html di folder target, bin-debug.
Menyalin swfobject.js, kode JavaScript yang bertanggung jawab untuk memuat file swf secara dinamis di HelloWorld.html di folder target, bin-debug
Menyalin perpustakaan framework dalam bentuk file swf bernama frameworks_xxx.swf di folder target, bin-debug
Menyalin modul flex lainnya (file .swf seperti sparkskins_xxx.swf, textLayout_xxx.swf) di folder target.

Proses Peluncuran Aplikasi

Buka file HelloWorld.html yang tersedia di folder \ HelloWorld \ bin-debug di browser web mana pun.
HelloWorld.swf akan dimuat secara otomatis dan aplikasi akan mulai berjalan.

Perpustakaan Flex Framework

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

Sr Tidak	Node & Deskripsi
1	playerglobal.swc Pustaka ini khusus untuk FlashPlayer yang diinstal di komputer Anda dan berisi metode asli yang didukung oleh pemutar flash.
2	textlayout.swc Pustaka ini mendukung fitur terkait tata letak teks.
3	framework.swc Ini adalah pustaka kerangka kerja fleksibel yang berisi fitur-fitur inti Flex.
4	mx.swc Pustaka ini menyimpan definisi dari kontrol mx UI.
5	charts.swc Pustaka ini mendukung kontrol bagan.
6	spark.swc Pustaka ini menyimpan definisi kontrol UI percikan.
7	sparkskins.swc Pustaka ini mendukung skinning kontrol UI percikan.

Kode sisi klien

Kode aplikasi Flex dapat ditulis MXML sebaik ActionScript.

Sr Tidak	Jenis & Deskripsi
1	MXML MXML adalah bahasa markup XML yang akan kami gunakan untuk menyusun komponen antarmuka pengguna. MXML dikompilasi ke dalam ActionScript selama proses pembuatan.
2	ActionScript ActionScript adalah bahasa pemrograman prosedural berorientasi objek dan didasarkan pada spesifikasi bahasa draf ECMAScript (ECMA-262) edisi 4.

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

Tata letak komponen antarmuka pengguna menggunakan tag MXML
Gunakan MXML untuk secara deklaratif menentukan aspek nonvisual aplikasi, seperti akses ke sumber data di server
Gunakan MXML untuk membuat data binding antara komponen antarmuka pengguna dan sumber data di server.
Gunakan ActionScript untuk menentukan event listener di dalam atribut event MXML.
Tambahkan blok skrip menggunakan menandai.
Sertakan file ActionScript eksternal.
Impor kelas ActionScript.
Buat komponen ActionScript.

Sumber Daya Publik

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

Sr Tidak	Nama & Deskripsi File
1	index.template.html Halaman host 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 compiler 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 Merupakan 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.