KELOMPOK 18 TRI   SISWANDONO ABIMANYU 5106100 051 AHMAD KADIQ 5107100024 M. S Y AIFULLAH 5107100 159 Adobe Flex
Pengenalan <ul><li>Adobe Flex adalah RIA yang menggunakan bahasa pemrograman ActionScript3 dan MXML. </li></ul><ul><li>Act...
Fitur yang ditawarkan oleh Flex <ul><li>Flex mempermudah dalam pembuatan: </li></ul><ul><li>User interface yang memiliki f...
Perbedaan Flex dan Flash <ul><li>Pembangunan aplikasi Flex berdasar pada pemrograman dengan menggunakan MXML dan ActionScr...
Yang diperlukan dalam pembuatan aplikasi Flex <ul><li>Flex SDK yang bisa didapatkan melalui  www.adobe.com/products/flex/d...
<ul><li>Adobe LiveCycle Data Services </li></ul><ul><li>Servis ini menambahkan fitur-fitur seperti data push dan sinkronis...
Dasar Pemrograman MXML <ul><li>Sebuah dokumen MXML dideklarasikan sebagai dokumen XML </li></ul><ul><li>Semua aplikasi Fle...
Kompilasi Dokumen MXML <ul><li>Dokumen MXML perlu dikompilasi untuk menghasilkan file SWF </li></ul><ul><li>Kompilasi dila...
Menjalankan Aplikasi Flex di Web Browser <ul><li>Aplikasi Flex bisa dijalankan melalui web browser yang memiliki plug-in F...
Membuat HTML wrapper <ul><li>Copy file  AC_OETags.js  dan  index.template.html  dari direktori template pada Flex SDK ke d...
Image Viewer sederhana dengan Flex tampilan
Code  Image Viewer sederhana dengan Flex
Code  Image Viewer sederhana dengan Flex
Code  Image Viewer sederhana dengan Flex
Image Viewer sederhana dengan Flex <ul><li>User Interface pada aplikasi menggunakan elemen-elemen Flex yaitu: </li></ul><u...
Sekian <ul><li>Terima Kasih </li></ul>
Upcoming SlideShare
Loading in …5
×

Tugas pbw chapter 18_flex 2 and ria

563
-1

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
563
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tugas pbw chapter 18_flex 2 and ria

  1. 1. KELOMPOK 18 TRI SISWANDONO ABIMANYU 5106100 051 AHMAD KADIQ 5107100024 M. S Y AIFULLAH 5107100 159 Adobe Flex
  2. 2. Pengenalan <ul><li>Adobe Flex adalah RIA yang menggunakan bahasa pemrograman ActionScript3 dan MXML. </li></ul><ul><li>ActionScript3 adalah implementasi Adobe terhadap ECMAScript 4(biasa disebut JavaScript2) </li></ul><ul><li>MXML adalah markup language yang dapat digunakan untuk mendeskripsikan komponen-komponen dari user-interface sebuah aplikasi Flex. </li></ul>
  3. 3. Fitur yang ditawarkan oleh Flex <ul><li>Flex mempermudah dalam pembuatan: </li></ul><ul><li>User interface yang memiliki fitur seperti drag & drop, konten dinamis & multimedia </li></ul><ul><li>User interface yang menarik seperti Flash, dan proses client-side yang stabil seperti JavaScript. </li></ul><ul><li>Animated interface yang kompleks bila penggunaannya digabungkan dengan Flash. </li></ul>
  4. 4. Perbedaan Flex dan Flash <ul><li>Pembangunan aplikasi Flex berdasar pada pemrograman dengan menggunakan MXML dan ActionScript3 </li></ul><ul><li>Aplikasi dengan Flash dibangun melalui Adobe Flash dengan sedikit menggunakan ActionScript </li></ul><ul><li>Aplikasi Flash membutuhkan skil dalam animasi dan biasanya kurang dikuasai oleh programmer. </li></ul>
  5. 5. Yang diperlukan dalam pembuatan aplikasi Flex <ul><li>Flex SDK yang bisa didapatkan melalui www.adobe.com/products/flex/downloads </li></ul><ul><li>Flash Player 9 atau yang lebih baru </li></ul><ul><li>Java Runtime Edition 1.4.2_06 atau yang lebih baru </li></ul><ul><li>Program pengolah teks, atau </li></ul><ul><li>Program Flex Builder yang disediakan oleh Adobe untuk pembuatan aplikasi Flex </li></ul>
  6. 6. <ul><li>Adobe LiveCycle Data Services </li></ul><ul><li>Servis ini menambahkan fitur-fitur seperti data push dan sinkronisasi pada sistem messaging Flex, membuat Flex dapat menangani diskoneksi dan melakukan sinkronisasi dinamis ketika rekoneksi. </li></ul><ul><li>Flex Charting </li></ul><ul><li>Librari perluasan untuk Flex untuk pembuatan representasi data yang dinamis. </li></ul>Yang diperlukan dalam pembuatan aplikasi Flex (opsional)
  7. 7. Dasar Pemrograman MXML <ul><li>Sebuah dokumen MXML dideklarasikan sebagai dokumen XML </li></ul><ul><li>Semua aplikasi Flex dengan menggunakan MXML berawal dan diakhiri dengan tag <mx:Application> </li></ul><ul><li>mx adalah namespace yang digunakan untuk elemen-elemen Flex dalam dokumen MXML </li></ul>
  8. 8. Kompilasi Dokumen MXML <ul><li>Dokumen MXML perlu dikompilasi untuk menghasilkan file SWF </li></ul><ul><li>Kompilasi dilakukan melalui Command Prompt pada OS Windows </li></ul><ul><li>Kompiler yang digunakan adalah file mxmlc yang terdapat pada bin/mxmlc pada direktori Flex SDK </li></ul><ul><li>Penggunaan paling umum adalah dengan mengetikkan mxmlc namafile pada command prompt </li></ul>
  9. 9. Menjalankan Aplikasi Flex di Web Browser <ul><li>Aplikasi Flex bisa dijalankan melalui web browser yang memiliki plug-in Flash Player </li></ul><ul><li>Aplikasi Flex (berupa file SWF) dapat dimasukkan ke dalam file HTML sehingga dapat dijalankan melalui web browser. </li></ul>
  10. 10. Membuat HTML wrapper <ul><li>Copy file AC_OETags.js dan index.template.html dari direktori template pada Flex SDK ke direktori aplikasi Flex yang sedang dibuat. </li></ul><ul><li>Rename index.template.html menjadi index.html jika menginginkan file tersebut menjadi default HTML di web server. </li></ul><ul><li>Buka file HTML dengan text editor (Notepad++,dreamweaver,dll), dan replace variable ${title} , ${swf} ,dan ${application} dengan filename aplikasi tanpa extensi .swf </li></ul><ul><li>Untuk variable ${height} dan ${width} ,gunakan 100% . Dan ${bgcolor} , gunakan #869ca7 , ini adalah warna default Flex. </li></ul>
  11. 11. Image Viewer sederhana dengan Flex tampilan
  12. 12. Code Image Viewer sederhana dengan Flex
  13. 13. Code Image Viewer sederhana dengan Flex
  14. 14. Code Image Viewer sederhana dengan Flex
  15. 15. Image Viewer sederhana dengan Flex <ul><li>User Interface pada aplikasi menggunakan elemen-elemen Flex yaitu: </li></ul><ul><ul><li><mx:Panel> </li></ul></ul><ul><ul><li><mx:VBox> dan <mx:HBox> </li></ul></ul><ul><ul><li><mx:Vslider> dan <mx:HSlider> </li></ul></ul><ul><ul><li><mx:Image> </li></ul></ul><ul><ul><li><mx:HorizontalList> </li></ul></ul><ul><li>Dan beberapa elemen untuk data </li></ul><ul><ul><li><mx:Binding> </li></ul></ul><ul><ul><li><mx:ArrayCollection> </li></ul></ul>
  16. 16. Sekian <ul><li>Terima Kasih </li></ul>

×