Top Things You Need to Know When Working With Flex
Explore the key features of Flex with code examples and working sample applications. These step-by-step code-based tutorials are written in easy to digest 15 minute chunks. We suggest going through them (at least glancing at them) in order, but you can also pick and choose among the topics if you’re already familiar with the concepts:
A. Working with Data
Use data modeling and data binding when working with data.
B. Handling Events
Use event handler functions to handle asynchronous network and UI events.
C. Designing a UI: Using Components and Containers
Use Flex’s built-in components and containers to lay out your Flex Application
D. Designing a UI: Displaying Lists of Items
Use the powerful List based components of Flex to display groups of related data items using either the built-in or custom item renderers and item editors.
E. Designing a UI: Creating a multi-page application
Use navigation controls such as ViewStack and TabNavigator to easily add a navigaton system to your applicaton.
F. Extending and Customizing Components
Create your own components from scratch or by extending existing classes in the Flex Class Library using Object Oriented Programming and Code Behind Techniques.
G. Debugging an Application
Learn about Flex Builder’s rich debugging capabilities.
Import these projects into Flex Builder
Each of these modules is available on the Download Projects Page as exported ZIP files that you can import into Flex Builder.
Panel 1 is a column chart declared in the main application and Panel 2 is the exact same column chart in a module. There is an embedded font ‘Verdana’ in the main application.
Charting.mxml
<?xml version=”1.0? encoding=”utf-8??>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal” xmlns:local=”*”>
<mx:Style>
Application
{
font-family: Verdana;
}
@font-face {
src:url(”font/verdana.ttf”);
fontFamily: Verdana;
advancedAntiAliasing: true;
}
@font-face {
src:url(”font/verdanab.ttf”);
fontFamily: Verdana;
fontWeight: bold;
advancedAntiAliasing: true;
}
@font-face {
src:url(”font/verdanai.ttf”);
fontFamily: Verdana;
font-style: italic;
advancedAntiAliasing: true;
}
</mx:Style>
<local:ColumnChart width=”50%” height=”100%” title=”Chart 1?/>
<mx:ModuleLoader url=”ChartModule.swf” width=”50%” height=”100%”/>
</mx:Application>
Create a Java Class that extends RuntimeException.
package com.flex3.exception;
public class FlexException extends RuntimeException
{
public FlexException(String message)
{
super(message);
}
}
2. Create a matching flex class called FlexException, and put the usual RemoteObject tag in their so BlazeDS will know what to look for. Also remember in actionscript, each object must be instantiated at least once, so be sure to do that somewhere with FlexException.
3. In Java, whenever there is a known exception, or some error where the end user needs to be shown a message, throw a FlexException and pass in the message the user should see in the constructor. Let’s say the user just entered an invalid password. throw new FlexException(”Wrong Password Entered, Please Try Again.”); Continue reading ‘Exception Handling with BlazeDS and Flex’
Accessing the Throwable object in Flex
RemoteObject component invokes the fault event when an error occurs while remote method invocation. The fault event handler is provided with the FaultEvent object. This FaultEvent object has property named message of type mx.messaging.messages.ErrorMessage. The message property holds the Throwable object from the Java method in the rootCause property. We need to use this rootCause property to retrieve the properties which are set to the Throwable object in Java. All the public properties from the Throwable object are available.
We will see a sample application. In this application I am creating a custom Exception and adding a getter method to that, which will return my custom data. From the Flex application I will access both the error message and the custom data.
MyException.java
public class MyException extends Exception {
public MyException(String message) {
super(message);
}
public String getMyName(){
return “Sujit Reddy G”;
}
}
Method throwing exception
This method will throw the custom exception created above, add this method to a Java class. Invoke the below method using RemoteObject component in Flex.
public void throwCheckedException() throws Exception{
throw new MyException(”This is a checked exception”);
}
Reading values in Flex application
We add the method below as the fault event handler to the RemoteObject component in the Flex application. You can see that we accessed the rootCauseobject to retrieve the properties of the custom Exception object returned from the Java method. Continue reading ‘Handling Java Exceptions in Flex application’
The following example shows how you can style the last button in a Flex ButtonBar control
by setting the lastButtonStyleName style.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ButtonBar_lastButtonStyleName_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.lastButton {
color: red;
cornerRadius: 10;
fontWeight: normal;
themeColor: haloGreen;
}
</mx:Style>
<mx:ButtonBar id="buttonBar"
dataProvider="[Red,Orange,Yellow,Green,Blue]"
lastButtonStyleName="lastButton" />
</mx:Application>
Continue reading 'styling the last button in a buttonbar control in flex'
