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.