Minggu, 13 Maret 2011

Aplikasi sederhana hello world dengan flex 3

Assalamualaykum Wr. Wb
Sebelumnya bagi yang udah master flex, aku mohon ijin dulu ya. Jika repost dari blog atau website orang lain, maka itu adalah hal yang tidak disengaja dan tidak ada maksud untuk copas.

Mari kita lanjut untuk membuat aplikasi yang amat sangat sederhana. Aplikasi yang menurut beberapa teman adalah aplikasi dasar ketika baru mengenal suatu bahasa pemrograman. Dengan menampilkan Hello world, seseorang akan mudah mengerti apa tentang bahasa pemrograman baru tersebut. Ketika penulis(link) sudah dapat menampilkan hello world, penulis sangat senang. hehe lebay deh... Sekian kata pengantar untuk apa itu hello world, yuk dilanjut pembuatan hello world dengan flexnya..

  1. Langkah pertama yang diperlukan yaitu siapkan tools yang diperlukan untuk membuat aplikasinya:
    • Flex builder 3 (recomended)
    • Flash develop (tidak disarankan karena penulis juga tidak tau caranya)
    • OS: yang mendukung Flex builder
  2. Buka Flex builder 3 dan akan tampil seperti gambar di bawah ini:
  3. Buatlah Project baru Flex builder 3 anda, lihat gambar di bawah ini:
  4. Beri nama projectnya pada Field project name dengan Hello World. Hilangkan centang pada Use default location. Klik browse dan pilih tempat dimana Project anda akan disimpan. Pada aplication tipe pilih tipe aplikasi anda, pada kali ini aplikasi yang dibuat yaitu aplikasi web yang akan dijalankan menggunakan Flash player. Server technology pilih saja none, karena pada nantinya kita belum memanfaatkannya. Terakhir klik next untuk melanjutkan. Untuk lebih jelasnya perhatikan gambar dibawah ini: 
  5. Isikan output folder yang akan digunakan ketika menjalankan aplikasi tersebut. Isi saja dengan nama 'hasil'
  6. Tambahkan library jika diperlukan. Karena saat ini hanya menggunakan yang sederhana saja, maka tidak perlu menambahkan library.
  7. Tunggu hingga file project yang akan digunakan selesai di generate.
  8. Gambar di bawah ini merupakan tampilan awal ketika Flex project siap untuk di utak-atik.
  9. Tambahkan panel dan beri label hello, Label dan button seperti gambar di bawah ini
  10. Klik pada panel dan pada bagian constrains berikan tandan cetang seperti gambar di bawah. Ini digunakan agar  tampilan yang dihasilkan berada di bagian tengah pada browser.
  11. Tambahkan script seperti pada di bawah ini dan lihat hasilnya:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function hallo():void
{
var tampil:String = "hallo dunia... selamat datang di flex";
Alert.show(tampil, "Hallow...");
}
]]>
</mx:Script>
<mx:Panel width="250" height="118" layout="absolute" title="Hello" defaultButton="{tombol}" horizontalCenter="0" verticalCenter="-45" borderColor="#DA3A3A" backgroundColor="#F3AF8E">
<mx:Button x="82.5" y="46" label="Button" id="tombol" click="hallo()"/>
<mx:Label x="26.5" y="10" text="Klik Button Untuk Melanjutkan" fontSize="12"/>
</mx:Panel>
<mx:Style source="style.css"/>
</mx:Application>



2 komentar:

  1. mau tanya nih...
    seandainya flex tersebut di embed pada blog bisa ap ga ya?

    BalasHapus
  2. bisa aja, tapi harus di upload dlu di sever lain

    BalasHapus

Tinggalkan komen yang membangun ya...