Minggu, 24 April 2011

Membuat calculator flex sederhana

Assalamualaykum Wr. Wb.
Salam bagi penggemar flex di seluruh dunia.. hehe lebay mode on..
Ni aku mau berbagi sedikit mengenai flex, kali ini mitbay akan sharing tentang cara membuat calculator sederhana dengan flex. Kenapa menggunakan Flex?hehe lihat aja google.. Kalo ada waktu nanti penulis tambahin deh..

Kembali ke aplikasi yang akan dibuat ya.. Setelah membuat aplikasi yang sangat sederhana sekali yaitu membuat aplikasi hello world dengan flex, kalkulator ini
adalah aplikasi sederhana selanjutnya yang disarankan untuk dibuat. hehe... Mengapa aplikasi calculator? Aplikasi kalkulator menggunakan flex ini relatif mudah untuk dibuat dan sudah mencakup beberapa aspek penting dalam membuat aplikasi. Misalnya sudah mencakup input, output, event listener, mouse event dan mungkin ada tambahan lagi?

Ayo sekarang saatnya membuat aplikasi flexnya..

  1. Buat New Project nya, atau dapat juga digabungkan dengan project yang sebelumnya, (lihat project hello world)
  2. Pada folder src klik new aplication, beri nama sesuai selera, hehe... misalnya kasih nama calc.
  3. Tambahkan panel, text input, dan button, susun seperti gambar di bawah ini:
    calculator flex
    Jika tidak mau susah, tambahkan saja kode dibawah ini:
      <mx:application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:panel height="284" horizontalcenter="0" layout="absolute" title="Kalkulator flex" verticalcenter="-44" width="372">
      <mx:form height="109" width="332" x="10" y="10">
      <mx:formitem label="Bil 1">
      <mx:textinput id="bil1" text="0">
      </mx:textinput></mx:formitem>
      <mx:formitem label="Bil 2">
      <mx:textinput id="bil2" text="0">
      </mx:textinput></mx:formitem>
      <mx:formitem label="Hasil:">
      <mx:label id="hasil" text="0">
      </mx:label></mx:formitem>
      </mx:form>
      <mx:button label="Tambah" x="29" y="136">
      <mx:button label="Kurang" x="108" y="136">
      <mx:button label="Bagi" width="67" x="181" y="136">
      <mx:button label="Kali" width="67" x="256" y="136">
      <mx:button label="Reset" x="146.5" y="166">
      </mx:button></mx:button></mx:button></mx:button></mx:button></mx:panel>
      </mx:application>
  4. Tambahkan kode actionscriptnya seperti dibawah ini setelah kode 
  5. <mx:application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script>
        <![CDATA[
        import mx.events.*;
        public var bilangan1:Number;
        public var bilangan2:Number;
        private function tambah(event:MouseEvent):void{
        bilangan1 = parseFloat(bil1.text.toString());
        bilangan2 = parseFloat(bil2.text.toString());
        var hslTambah:Number;
        hslTambah = bilangan1 + bilangan2;
        hasil.text = hslTambah.toString();
        }
        private function kurang(event:MouseEvent):void{
        bilangan1 = parseFloat(bil1.text.toString());
        bilangan2 = parseFloat(bil2.text.toString());
        var hslTambah:Number;
        hslTambah = bilangan1 - bilangan2;
        hasil.text = hslTambah.toString();
        }
        private function kali(event:MouseEvent):void{
        bilangan1 = parseFloat(bil1.text.toString());
        bilangan2 = parseFloat(bil2.text.toString());
        var hslTambah:Number;
        hslTambah = bilangan1 * bilangan2;
        hasil.text = hslTambah.toString();
        }
        private function bagi(event:MouseEvent):void{
        bilangan1 = parseFloat(bil1.text.toString());
        bilangan2 = parseFloat(bil2.text.toString());
        var hslTambah:Number;
        hslTambah = bilangan1 / bilangan2;
        hasil.text = hslTambah.toString();
        }
        private function reset():void{
        bil1.text = "0";
        bil2.text = "0";
        hasil.text = "0";
        }
        ]]>
        </mx:Script>
  6. Panggil actionscript tadi pada button di aplikasi flex dengan cara menambahakn properti click="". Kode pada button jadi berubah seperti ini:
    <mx:Button label="Tambah" x="29" y="136" click="tambah(event)"/> bagian yang ditebalkan adalah kode tambahan untuk memanggil fungsi pada actionscript.
  7. Kalo sudah semua dan tidak ada eror , saatnya mencoba dengan cara klik kanan pada aplikasi dan klik run.
Beginilah tampilan flex calculator yang sangat sederhana..

Sekian dulu ya contoh aplikasi flex yang sangat sederhana. selamat mencoba....
Wassalamualaykum Wr. Wb

Tidak ada komentar:

Posting Komentar

Tinggalkan komen yang membangun ya...