FLEX Code Example: Example of using CSS styles in Flex Builder

My name is Edward Tanguay. I am a web developer in Berlin, Germany. I learn everything I can and record it on this site.

Other things you might be looking for:

My Ubuntu Tutorial

My Datapod Project

My Blog Feed:

- Code Examples

FLEX CODE EXAMPLE - added on June 13, 2008

Example of using CSS styles in Flex Builder

Check out this example here. This shows you the basics of using styles in flex, I did all of this with the FlexBuilder in design mode, very easy to use, when you are in a CSS file just click on design. The alpha transparency is wonderfully easy and the background picture leaves behind all the problems you have with page backgrounds in HTML/CSS, namely, it constantly resizes it, etc.

styles102.mxml
------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundImage="@Embed(source='assets/kidPicture.jpg')">

<mx:Script>
		<![CDATA[
			
			public function showRules():void {
				mainText.text = "Here are the rules of the game:\n\n1. Do this.\n2. Do that.";
			}
			
			public function startGame():void {
				mainText.text = "The game would now start...";
			}
			
		]]>
	</mx:Script>
	
	<mx:Style source="assets/main.css"/>

<mx:Panel x="46" y="52" width="250" height="200" layout="absolute" title="Intro">
		<mx:Button x="10" y="10" label="Rules" click="showRules()" />
		<mx:Button x="10" y="82" label="Start" click="startGame()" />
	</mx:Panel>
	<mx:Panel x="242" y="290" width="250" height="244" layout="absolute" title="Game">
		<mx:TextArea alpha="0" fontSize="14" color="#555555" id="mainText" x="10" y="10" width="210" height="167">
			<mx:text>Welcome to this kid's game, an experiment in Flex Builder style functionality.</mx:text>
		</mx:TextArea>
		
	</mx:Panel>
	
</mx:Application>

main.css
--------------------------------
/* CSS file */

Panel {
	corner-radius: 15;
	background-color: #FFFE96;
	borderColor: #3672E1;
	borderAlpha: 0.5;
	backgroundAlpha: 0.8;
	color: #FFFFFF;
	fontSize: 24;
	roundedBottomCorners: true;	
}
Button
{
	color: #165D6C;
	cornerRadius: 3;
	fillAlphas: 0.55, 1.0, 0.0, 0.0;
	fillColors: #EDF437, #E4E238;
	paddingLeft: 10;
	paddingRight: 10;
	paddingTop: 10;
	paddingBottom: 10;
	fontSize: 20;
	themeColor: #AA8904;
	disabledColor: #15ABAD;
}

post comment or question

Similar Code Examples:

FLEX CODE EXAMPLE - added on November 8, 2008

Develop Flash Applications without Flash with free Flex SDK and free FlashDevelop editor

The following instructions show you the exact steps to set up a free development environment on windows which allows you to develop Flex applications with ActionScript 3. You won't have the nice step-through debugging or the design view of Adobe's FlexBuilder but this code shows you how to create a two-line MXML file which allows you to do all your programming back in ActionScript 3 classes anyway so you just kind of use the MXML file as a tunnel to be able use the rich Flex libraries. FlashDevelop has very nice code-completion and other features, and with traces you can do decent debugging. The code helps you get up to speed with event handlers which are a bit different than web scripting if that is all you have been doing so far. You can view a running example of this appliction here.

SHOW CODE

## Download and Install FlashDevelop (free)
- goto http://www.flashdevelop.org
- click download
- click on latest (FlashDevelop 3.0.0 Beta9 released)
- down at bottom, click on download link, download
- double-click on .exe: next, agree, etc. all defaults
- open it when finished

## Download and Install Flex SDK (free)
- goto http://www.adobe.com/products/flex/flexdownloads/index.html
- click "I have read, agree"
- click on download link
- download (81MB)
- unzip it in its folder, then move the folder "flex_sdk_3" to C:\ so it becomes "C:\flex_sdk_3"

## Create Flex project
- in Flashdevelop: close start page, click on "project" tab lower right, "create a new project":
	- name: test
	- location: ...add "\flexprojects", e.g. "C:\Users\Edward\Documents\flexprojects"
	- check "create directory for project"
- replace Main.mxml with this content:

<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass xmlns:custom="components.*"/>

- right-click on the "src" folder and add a new folder called "components"
- right-click on the new folger "components" and add new class called "ApplicationClass.as"
- replace contents with this:

package components {
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.XMLNode;
	import mx.controls.Button;
	import mx.core.Application;
	import mx.events.FlexEvent;
	import flash.events.MouseEvent;
	import mx.controls.Alert;
	import flash.events.Event;
	
	public class ApplicationClass extends Application  {
		
		private var eventItemId:int;
		private var theXml:XML = new XML();
		private var XML_URL:String = "data/layers.xml";
		private var myLoader:URLLoader;
		private var arrItems:Array = new Array();
		private var arrButtons:Array = new Array();
	
		public function ApplicationClass ()
		{
			addEventListener (FlexEvent.CREATION_COMPLETE, init);
		}
		
		public function init(event : FlexEvent ) : void
		{
			
			//settings
			this.layout = "absolute";
			
			//load
			var myXMLURL:URLRequest = new URLRequest(XML_URL);
			myLoader = new URLLoader(myXMLURL);
			myLoader.addEventListener(Event.COMPLETE, start);		
		}
		
		
		private function start(e:Event):void
		{
			
			//LoadManager.start();
			theXml = XML(this.myLoader.data);
			trace("XML loaded and it is: " + theXml);
			
			//iterate through nodes
			var layerNodes:XMLList = theXml.layer;
			var id:int;
			var x:int;
			var y:int;
			var title:String;
			var description:String;
			for (var i:int = 0; i < layerNodes.length() ; i++) {
				var arrItem:Array = new Array();
				id = layerNodes[i].@id;
				x = layerNodes[i].@x;
				y = layerNodes[i].@y;
				title = layerNodes[i].@title;
				description = layerNodes[i].@description;			
				arrButtons.push(this.createButton(id, x, y, title));
				arrItem["x"] = x;
				arrItem["y"] = y;
				arrItem["title"] = title;
				arrItem["description"] = description;
				arrItems.push(arrItem);
			}
								
			
		}
		
		private function handleClick(e:MouseEvent):void
		{
			var button:Button = e.currentTarget as Button;
			var buttonIndex:int = arrButtons.indexOf(button);
			var arrItem:Array = arrItems[buttonIndex];
			
			Alert.show(arrItem["description"]);
			
		}
		
		private function createButton(id:int, x:int, y:int, label:String): Button
		{
			var button : Button = new Button();
			button.label = label;
			button.x = x;
			button.y = y;
			this.eventItemId = id;
			button.addEventListener(MouseEvent.CLICK, handleClick);			
			this.addChild( button );		
			
			return button;
		}
	}
}

- right-click on the folder "bin" and create the folder "data"
- right-click on the folder "data" and create the file "layers.xml"
- replace contents with this:

<?xml version="1.0" encoding="utf-8" ?>
<layers>
	<layer id="1" x="10" y="10" title="Welcome" description="Welcome to this information console.">		
	</layer>
	<layer id="2" x="10" y="40" title="Reports" description="Here is the information about the reports.">		
	</layer>
	<layer id="3" x="10" y="70" title="Products" description="The projects are listed here.">		
	</layer>
	<layer id="4" x="10" y="100" title="Help" description="This is the help you requested.">		
	</layer>
</layers>

- press F5 to play, takes about 20 seconds to come up in the flash player the first time, click "unblock" on any windows that come up
- (if it doesn't play and you get the message "No application is associated with the specified file for this operation", do: project, properties, test movie, play in popup, and try again)

post comment or question

FLEX CODE EXAMPLE - added on June 13, 2008

How to apply a simple filter to a label

You can do a lot more with filters, e.g. dynamically change them in ActionScript but here is the syntax for a basic shadow filter on a text.

SHOW CODE

Johann: Hello, I'am very new to Flex 3 and programming but like it a lot. I've a ne question: i'am using multiple hsliders and the sum of the values of those sliders may not be over 100(%), so when the first slider value=60 the second slider is limited to value=40. What AS function do I need to achieve this?

post comment or question

FLEX CODE EXAMPLE - added on June 11, 2008

How to use ActionScript to access file system in AIR

This is another example of access filesystem this time with ActionScript. Did an expanding window in this example, but there are some scrolling issues on this window I need to work out, couldn't find a scrollable=false in the application element. To try this example, download adobe air and then you can install this application.

SHOW CODE

Pramod: Is it possible to access the File System in Flex web application, not AIR? If it is, how it is done? FileSystem type is not recognized in a Flex web application. I want to upload a file in Flex web application? Need Help. Thanks in advance...

post comment or question

FLEX CODE EXAMPLE - added on June 10, 2008

Basic file access example in AIR

This shows you the basics of getting access to files and directories with AIR using FileSystemTree and FileSystemDataGrid. Would be interesting to see how these work in Linux and Mac. To try this example, download adobe air and then you can install this application.

SHOW CODE

post comment or question

FLEX CODE EXAMPLE - added on June 10, 2008

Basic syntax for Windows in AIR

Here's how to get started with windows in an AIR application.

SHOW CODE

post comment or question

FLEX CODE EXAMPLE - added on June 7, 2008

How to add a custom icon to a button

View the example here. The graphic is png with transparency and you see that it lets the background of the button show through.

SHOW CODE

post comment or question

FLEX CODE EXAMPLE - added on June 7, 2008

How to handle a custom component with a custom event

Check out the example here. This shows you how to make a custom component (LanguageSelector) that you call from your main MXML file. The component throws a custom event which you handle externally in your main MXML file as well.

SHOW CODE

customEvents3.mxml
------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="absolute"
		xmlns:ns1="info.tanguay.components.*"
		applicationComplete="applyLanguageText('English')"
		>
		
		<mx:Script>
			<![CDATA[
				import mx.formatters.SwitchSymbolFormatter;
				
				import info.tanguay.events.LanguageSelectedEvent;
				
				public function languageSwitchHandler(event:LanguageSelectedEvent):void {
					this.applyLanguageText(event.languageSelected.toString());
				}
				
				public function applyLanguageText(language:String):void {
					switch(language) {
						case "French":
							infoPanel.title = "Les Informations";
							infoMessage.text = "C'est les informations ici, s’il vous plaît";
							break;
						case "German":
							infoPanel.title = "Informationen zum Programm";
							infoMessage.text = "Hier sind die Informationen, die gelesen werden können.";
							break;
						case "English":
							infoPanel.title = "Info Bar";
							infoMessage.text = "Here is the information in the info bar.";
							break;
					}
				}
				
			]]>
		</mx:Script>
	<mx:Panel id="infoPanel" x="35" y="33" width="400" height="236" layout="absolute" title="Info Bar" borderColor="#6FDB6A" color="#E1E9EB">
		<mx:Text id="infoMessage" color="#000000" left="10" top="10" right="10" bottom="10"/>
	</mx:Panel>
	<ns1:LanguageSelector x="443" y="33" width="188" languageWasSelected="languageSwitchHandler(event)" height="163">
	</ns1:LanguageSelector>
	
</mx:Application>

LanguageSelector.mxml
----------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="400"
	height="300"
	title="The Language Selector">
	
	<mx:Metadata>
		[Event(name="languageWasSelected", type="info.tanguay.events.LanguageSelectedEvent")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			
			import info.tanguay.events.LanguageSelectedEvent;
			
			public function selectLanguage():void {
				var theEvent:LanguageSelectedEvent = new LanguageSelectedEvent("languageWasSelected");
				theEvent.languageSelected = languages.selectedItem;
				dispatchEvent(theEvent);
			}
			
		]]>
	</mx:Script>
	
	<mx:List id="languages" width="100%" height="100%">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:String>English</mx:String>
				<mx:String>German</mx:String>
				<mx:String>French</mx:String>
			</mx:ArrayCollection>
		</mx:dataProvider>
		
	</mx:List>
	<mx:ControlBar>
		<mx:Button label="Select Language" click="selectLanguage()"/>
	</mx:ControlBar>
	
</mx:Panel>

LanguageSelectedEvent.as
-------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="400"
	height="300"
	title="The Language Selector">
	
	<mx:Metadata>
		[Event(name="languageWasSelected", type="info.tanguay.events.LanguageSelectedEvent")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			
			import info.tanguay.events.LanguageSelectedEvent;
			
			public function selectLanguage():void {
				var theEvent:LanguageSelectedEvent = new LanguageSelectedEvent("languageWasSelected");
				theEvent.languageSelected = languages.selectedItem;
				dispatchEvent(theEvent);
			}
			
		]]>
	</mx:Script>
	
	<mx:List id="languages" width="100%" height="100%">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:String>English</mx:String>
				<mx:String>German</mx:String>
				<mx:String>French</mx:String>
			</mx:ArrayCollection>
		</mx:dataProvider>
		
	</mx:List>
	<mx:ControlBar>
		<mx:Button label="Select Language" click="selectLanguage()"/>
	</mx:ControlBar>
	
</mx:Panel>

Udayan: Can you please let me know, if the code for LanguageSelectedEvent.as you mistakenly put the code of LanguageSelector.mxml. As both LanguageSelector.mxml and LanguageSelectedEvent.as looks same.

post comment or question

FLEX CODE EXAMPLE - added on June 4, 2008

How to react to events from Combobox and Button

View this example here. These examples show how you can determine if a user was pressing the CTRL key while clicking a button and will show the selected item when an item is selected in a combobox.

SHOW CODE

post comment or question

FLEX CODE EXAMPLE - added on June 3, 2008

Nice example of simple events for Flex controls

Look at the example here which shows a dropdown (combobox), button, tab navigator which all fire events to write inside a panel/textarea. All of this is simple inline which makes you realize how much bang you can get from MXML with no coding, amazing actually.

SHOW CODE

post comment or question

My Free Tutorials:

How to Install the Android SDK on Windows XP and Create an Application that Runs in the Cell Phone Emulator

How to Create a Website with Datapod

Install Fedora 6 in VMWare on Windows XP and connect it to your network

Install Perl 5 on Windows XP and Get a Perl Hello World Running

Install OpenSuse 10.2 in VMWare on Windows XP and connect it to your network

Install Ubuntu 7.04 in VMWare on Windows XP and connect it to your network

Install Java on Windows XP and Learn the Basics of Java 6 using the NetBeans IDE

Setup a PHP Development Environment on Windows XP With Apache, PHP 5, MySQL 5, SQLite, Eclipse, Subversion, PHPMyAdmin, and Datapod

Install a PHP Development Environment with Eclipse PDT, Apache 2.2, PHP 5, MySQL 5, and phpMyAdmin Using XAMPP Lite

How to Install Ruby on Rails with Instant Rails and Create a Website Using JEdit and the Ruby Plugin