Java EE dan Flex, Bagian 1: Kombinasi yang menarik

Adobe Flex menjadi pilihan populer untuk menghasilkan sisi klien aplikasi Java perusahaan. Dalam dua artikel pertama ini, Dustin Marx mendemonstrasikan bagaimana Flex dapat membantu Anda menghadirkan antarmuka pengguna yang sangat interaktif yang mengakses logika perusahaan aplikasi Java EE Anda. Dapatkan pengantar langsung untuk menyempurnakan klien Flex sederhana, lalu aktifkan untuk berkomunikasi dengan server Java EE Anda. Level: Pemula

Flex 3 memberi Anda pilihan lain untuk membangun UI berbasis browser untuk aplikasi Java EE Anda. Jika Anda belum menemukan betapa sederhananya menambahkan klien kaya ke aplikasi Java perusahaan dengan Flex, artikel ini dapat berfungsi sebagai titik masuk Anda. Anda akan mengetahui manfaat apa yang diberikan Flex, cara membuat tata letak aplikasi menggunakan tata bahasa XML Flex, dan cara membuat klien Flex Anda berfungsi dengan aplikasi Java EE.

Pengembang Java mengadopsi Flex

Kami tahu bahwa beberapa pengembang Java menolak Flex sebagai teknologi front-end untuk Java EE, tetapi ada alasan kuat untuk memberikan kesempatan kepada Flex. Penulis Dustin Marx membahas faktor-faktor yang mendorong adopsi Flex di komunitas Java di sidebar artikel praktis ini.

Sebelum saya meminta Anda untuk menginstal Flex dan mulai menyusun aplikasi sampel, mari pertimbangkan keuntungan menggunakan Flex sebagai teknologi sisi klien. Flex menawarkan keuntungan khusus untuk pengembang Java dan beberapa yang lebih umum. Kami akan melihat keduanya.

Mengapa memilih Flex?

Mengadopsi teknologi baru berarti merangkul kurva pembelajaran, yang dapat meyakinkan. Berikut beberapa keuntungan umum menggunakan Flex:

  • Anda dapat menulis kode Flex sekali dan menjalankannya di browser Web mana pun yang memiliki plugin Flash Player. Tidak ada kode deteksi browser atau deteksi objek tipikal dari aplikasi JavaScript atau Ajax yang diperlukan.
  • Runtime target (Flash Player 9 atau yang lebih baru) diinstal di lebih dari 95 persen browser Web di seluruh dunia.
  • Flex didasarkan pada standar. Bahasa skripnya (ActionScript 3.0) berakar pada ECMAScript (spesifikasi yang sama diimplementasikan oleh JavaScript), dan bahasa tata letaknya adalah tata bahasa XML khusus yang disebut MXML. Keakraban dengan standar yang mendasari dapat membantu Anda mempelajari Flex dengan relatif mudah.
  • Flex memiliki mekanisme sederhana yang menyegarkan untuk mengikat properti satu objek dalam aplikasi Flex ke properti objek lain di Flex. Fitur adiktif ini biasanya disebut sebagai pengikatan properti . (JSR 295: Beans Binding dimaksudkan untuk menambahkan fitur ini ke bahasa Java, tetapi tidak akan disertakan di Java SE 7.)
  • Anda dapat mengaitkan front-end berbasis Flex dengan teknologi back-end menggunakan teknik yang mempromosikan sambungan longgar. Flex menyediakan dukungan built-in untuk komunikasi dengan back-end melalui HTTP tradisional dan layanan Web berbasis SOAP.
  • Flex menyediakan serangkaian komponen yang kaya, efek Flash (termasuk animasi, video, dan audio), dan fitur aksesibilitas yang membuatnya mudah untuk menambahkan kekayaan dan pengalaman yang sangat lancar ke aplikasi Web.

Flex untuk pengembang Java

Manfaat umum mungkin cukup untuk menarik Anda ke Flex, tetapi ada manfaat lain yang sebagian besar atau seluruhnya ditujukan untuk pengembang Java.

Salah satu keuntungannya adalah kesamaan yang mencolok antara Java dan ActionScript 3.0 dalam fitur bahasa, konsep, dan sintaksis. Bahasa menggunakan pernyataan bersyarat yang serupa, sintaks perulangan, dan bahkan konvensi pengkodean. (Bisa diperdebatkan bahwa ActionScript lebih seperti Java daripada JavaFX Script.) Alat pembuat dokumentasi ASDoc seperti Javadoc dari Flex menggunakan sintaks komentar yang sama yang Anda gunakan di Java untuk menghasilkan dokumentasi. Struktur pengemasan ActionScript terkait dengan struktur direktori dengan cara yang persis sama seperti pendekatan Java terhadap paket dan direktori.

ActionScript 3 juga menyediakan fitur berorientasi objek berbasis kelas (seperti kelas dalam pengertian Java, pewarisan, dan antarmuka) dan pengetikan statis. Penambahan ini pada apa yang biasa kita gunakan dalam JavaScript membuat belajar dan menggunakan ActionScript lebih mudah. (ActionScript masih membuat pengetikan dinamis dan pewarisan berbasis prototipe tersedia untuk situasi ketika Anda menginginkan atau membutuhkan fitur-fitur JavaScript tradisional tersebut.)

Kemampuan Flex untuk berkomunikasi dengan back-end Java EE menggunakan HTTP atau layanan Web berbasis SOAP sangat berguna, tetapi Anda tidak terbatas pada pendekatan komunikasi tersebut. Blaze DS - produk open source yang terpisah dari Adobe - memberi Anda fleksibilitas yang lebih besar untuk berkomunikasi antara front-end Flex dan back-end Java EE. BlazeDS memungkinkan Anda menggunakan JMS untuk komunikasi dan memungkinkan Anda menggunakan objek jarak jauh dengan Java. BlazeDS juga menambahkan potensi manfaat kinerja karena menggunakan format AMF3 biner untuk komunikasi yang lebih cepat daripada yang biasanya dialami dengan XML.

Produk open source pihak ketiga yang disebut GraniteDS menawarkan lebih banyak pilihan untuk menerapkan front-end berbasis Flex ke aplikasi Java EE. GraniteDS menawarkan dukungan untuk format biner AMF3 dan juga beberapa fitur yang tidak tersedia dengan BlazeDS. Misalnya, GraniteDS menawarkan alat dan kerangka kerja layanan untuk lebih mudah mengintegrasikan Flex dengan back-end berdasarkan EJB 3, Kerangka Pegas, Guice, atau Seam.

Dalam membahas Flex selama ini, saya berulang kali menggunakan kata-kata sederhana dan mudah . Tapi jangan hanya percaya kata-kata saya. Cara terbaik untuk memahami betapa sederhana dan mudahnya dasar-dasar Flex adalah dengan mencobanya sendiri. Di bagian selanjutnya Anda akan mengimplementasikan aplikasi sampel, memfaktorkan ulang untuk menambahkan fitur dan mengurangi kode boilerplate, lalu membangun komunikasi antara klien baru berbasis Flex dan servlet Java.

Mendapatkan dan menginstal Flex

Contoh artikel ini menggunakan Flex 3.2 SDK. Jika Anda ingin membuat dan menjalankan contoh, unduh Flex SDK (termasuk kompilator baris perintah dan debugger). Satu file ZIP berisi Flex SDK untuk berbagai platform.

Buka zip file ke lokasi yang jelas, seperti C:\flex_sdk_3_2. Untuk kenyamanan, tambahkan lokasi bindirektori Flex SDK di jalur sehingga alat baris perintah dapat dijalankan dari direktori mana pun. Saya suka membuat FLEX_HOMEvariabel lingkungan yang menunjuk ke lokasi Flex SDK dan kemudian menambahkan $FLEX_HOME/binatau %FLEX_HOME%\binke PATH. Anda dapat memverifikasi instalasi Flex yang benar dengan menjalankan perintah mxmlc -version, seperti yang ditunjukkan pada Gambar 1.

Meskipun tidak diharuskan untuk membangun dan menjalankan contoh, Anda mungkin tertarik untuk mengunduh FlexBuilder 3, yang tersedia tanpa biaya untuk masa percobaan. FlexBuilder memungkinkan Anda menggunakan editor teks apa pun (seperti JEdit atau vim) atau Java IDE (seperti NetBeans atau Eclipse) untuk menulis dan memelihara file MXML dan ActionScript. Aptana Studio dan Spket IDE menyertakan dukungan khusus untuk mengedit file terkait Flex.

MXML: Tata letak fleksibel dengan XML

Flex menggunakan MXML untuk menentukan tata letak aplikasi Flex. File tata letak fleksibel biasanya dinamai dengan .mxmlekstensi. Kode MXML harus dalam format XML yang baik dan menggunakan namespace XML. Contoh pada Listing 1 menunjukkan aplikasi Flex yang sederhana namun berfungsi penuh, ditulis seluruhnya dengan MXML, yang menampilkan daftar artikel JavaWorld yang dipilih.

Kode 1. Contoh MXML Statis

Karena contoh ini statis, tidak menunjukkan banyak keunggulan Flex dan Flash. Namun, ini berfungsi sebagai pengantar yang baik untuk MXML.

Semua kode dalam Daftar 1 adalah XML dengan format yang baik. Sebagian besar baris XML dalam Daftar 1 terkait dengan baris kode yang sama ( GridRowelemen berulang dengan elemen bersarang GridItemdan Label). Mereka digunakan untuk mendefinisikan grid tampilan statis dengan Gridkomponen GridRowdan GridItemsub-elemennya. Penggunaan , dan mengatur dan menyajikan data dalam cara yang mirip dengan bagaimana elemen tabel HTML

,, dan
, masing-masing, sering digunakan.

Contoh MXML pertama ini juga menunjukkan tag root yang digunakan di semua aplikasi MXML. Tag ini menyertakan lebar dan tinggi eksplisit untuk aplikasi Flex. The mxawalan dikaitkan dengan Flex XML namespace sebagai bagian dari elemen root ini.

Anda akan menggunakan kompiler baris perintah Flex`` mxmlcuntuk mengkompilasi contoh artikel ini. Default Flex (ditentukan dalam flex-config.xmlfile) cukup untuk kebutuhan contoh, membuat kompilasi dengan mxmlcmudah. Dengan asumsi daftar MXML pertama disimpan dalam sebuah file bernama Example1.mxml, Anda mengkompilasinya dengan perintah ini:

mxmlc Example1.mxml

Sesuai dengan pengaturan default, file MXML ini dikompilasi menjadi file SWF, disebut Example1.swf, yang ditempatkan di direktori yang sama dengan file MXML asalnya. Anda dapat menjalankan file SWF dengan membukanya di browser Web atau hanya dengan memasukkan seluruh nama file di baris perintah. File SWF yang dirender terlihat seperti Gambar 2.