Pandu Satria

Sometime imagination better than knowledge

CSS dalam Flex

leave a comment »

Dalam pembuatan aplikasi menggunakan Flex, kita dapat menggabungkan dengan sebuah CSS. Berikut beberapa contoh aplikasi sederhana sebagai contoh penggunaan CSS di dalam Flex.

1.  Menggunakan CSS yang dibuat langsung pada aplikasi Flex

Source code file CSS1.mxml :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
verticalAlign="middle" horizontalAlign="center" backgroundColor="0x323232">

 <mx:Style>
 .Button, .TextInput, .Label {
 fontStyle: italic;
 fontSize: 24;
 }
 </mx:Style>

 <mx:Button styleName="Button" id="tombolcss" label="Klik Disini"/>
 <mx:Label styleName="Label" id="lblcss" text="Ini Label" color="white"/>
 <mx:TextInput styleName="TextInput" id="TIcss" text="Input Text Disini"/>

</mx:Application>

Berikut adalah hasil dari source code di atas :

2.  Menggunakan CSS yang berasal dari luar aplikasi Flex

Source code file css.css :

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.Button
{
 cornerRadius: 18;
 color: #0033ff;
 textRollOverColor: #003366;
 fontFamily: Tahoma;
 fontWeight: bold;
}

Source code file CSS2.mxml :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
verticalAlign="middle" horizontalAlign="center" backgroundColor="0x323232">

 <mx:Style source="/AppsFlex2/src/css.css" />

 <mx:Button label="CSS Example" styleName="Button"/>

</mx:Application>

Berikut adalah hasil dari source code di atas :

 

 

Catatan : file css.css disimpan dalam folder yang sama dengan file CSS2.mxml, yang kemudian dipanggil menggunakan tag <mx:Style source=”/AppsFlex2/src/css.css” />

Selamat mencoba dan belajar.

Written by ndoet

10/19/2010 at 12:26 PM

Posted in Flex

Tagged with , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: