Flex Photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"verticalAlign="middle" backgroundColor="white"> <mx:Style> Continue reading 'Creating a simple image gallery with the Flex TileList control'
To push data from server to client, you use the Flex.data.DataServiceTransactions Java class. The object is used on the server-side to push changes to managed code stored on clients that have the AutoSyncEnabled property of the DataService component set to true.
The Data Management Service creates an instance of the DataServiceTransaction class when you make changes to a sync method. With the instance, you can call the getcurrentDataServiceTransaction(), deleteitem(), and createitem() methods to trigger additional changes. If the current transaction is rolled back, these changes are not pushed to clients.
Note that when you compile code that uses the FDS Java APIs, you must include the messaging JAR and flex-messaging-common.jar files in your class path.
Being able to handle events in Flex is very important because you will most likely need to use them to interact with Flex controls, custom controls, and components. This section provides you with basic information about the event model in Flex 2, and describes the Event object, its subclasses, and the event dispatching model.
Events inform a developer that something has happened within a Flex application. They can be generated when the visual appearance of a component changes, when the component is created and destroyed, and by using user devices such as the mouse and keyboard. In other words, any user interaction will most likely trigger an event, or even data that is returned from the server may trigger an event. This happens without any user interaction.
The developer can listen for these events by adding event listeners, which are functions used to respond to the triggered events. They are commonly referred to as event handlers. To give you an example, a user clicks a button that downloads data from the server. An event handler listens for an event to be triggered once the data has been fully downloaded. The event is fired, which, in turn, calls the event-handler function and parses the data into some meaningful information to be used in a DataGrid control, for example.
All or most components in Flex have built-in events that can be handled in ActionScript in your MXML applications
As a Flex developer, you will find that ActionScript’s primary use will be working with visual controls and containers in your application. In this section, you learn how to reference a Flex control and manipulate the properties in ActionScript.
Before you write any ActionScript, you must define a control in MXML and assign an id property to it. This allows you to reference the Flex control in ActionScript.
<mx:TextInput id="myTextInput"
text="Refer to me via the id property" />
The id property is optional and is only required when referencing the component. The MXML compiler creates a variable called myTextInput that contains a reference to the TextInput object. You can access all the public methods and properties using the dot notation in ActionScript.
To access the control in ActionScript, you must reference the id property. The following example shows you how this is done:
<?xml version="1.0"
encoding="utf-8"?> <mx:Application xmlns:
mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
horizontalAlign="center"
xmlns="*">
<mx:Script> <![CDATA[
public function getText():String
{
return myTextInput.text; } ]]>
</mx:Script> <mx:TextInput id="myTextInput"
text="Refer to me via the id property" />
</mx:Application>
The getText() method returns a string, refers to the TextInput control’s id property (myTextInput) and accesses the text property of the object.
One thing to note is that the ids for all tags in an MXML component, even deeply nested, generate public variables in the component being defined. In other words, all id properties must be unique within the document.
If the id property of a Flex component is not defined, you can use the methods of the component’s container, namely, getChildAt() and getChildByName():
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http:
//www.adobe.com/2006/mxml"
verticalAlign="middle"
horizontalAlign="center">
<mx:Script>
<![CDATA[ import mx.controls.Alert;
import mx.controls.TextInput;
public function getText():String
{ var name:String = TextInput(getChildAt(0)).name;
var text:String = TextInput(getChildByName(name)).text;
return text; } ]]>
</mx:Script> <mx:TextInput text="Hello World!" />
<mx:Button label="Get Text" click="Alert.show(getText())" />
</mx:Application>
This example casts the getChildAt(0) to type TextInput to access the name property and assigns the value to the variable name. The variable name is passed into the childChildByName(name) method and cast to type TextInput to allow access to the text property, which is assigned to variable text.
The this keyword is another way to reference components in a document using ActionScript. To access the object, you use the keyword, followed by the square brackets, passing in a string between them.
The following code example has the same functionality as the previous one, except it uses the this keyword to reference the TextInput control:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
verticalAlign="middle"
horizontalAlign="center"> <mx:Script>
<![CDATA[ import mx.controls.Alert;
import mx.controls.TextInput;
public function getText():String {
return this["myTextInput"].text; }
]]> </mx:Script>
<mx:TextInput id="myTextInput" text="Hello World!" />
<mx:Button label="Get Text"
click="Alert.show(getText())" /> </mx:Application>
This section provides a brief overview of how to create reusable components using ActionScript. Later in this book, you will build more complex components using MXML and ActionScript.
Custom components can contain graphical elements, define some kind of business logic, or extend existing components in the Flex framework. Defining your own components in ActionScript has several advantages:
Divide your application into individual models that can be developed and maintained separately.
Implement commonly used logic within the components.
Build a collection of components that can be reused among all your Flex applications.
When creating custom components, you may find it useful to extend the component from the Flex class hierarchy. This allows you to inherit functionality already built into the Flex components.
As shown in the following example, you can define a custom TextInput and derive it from the Flex TextInput control:
package myComponents { public class MyTextInput extends TextInput { public function MyTextInput() { ... } ... } }
The filename of the control MyTextInput must be in a filename called MyTextInput.as and stored at the root of your Flex application in a subdirectory name myComponents. As you may have already picked up, the package name reflects the location of the component, myComponents.
To use the custom component in your Flex application, you will need to write the following MXML:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="myComponents.*" > <components:MyTextInput label="Adobe Flex 2"/> </mx:Application>
The code xmlns:components=”myComponents.*” defines a namespace called components that points to the subdirectory myComponents. You can then reference the component as an MXML tag using the namespace prefix.
