take a look at here if you
want to creat a flex component
Showing posts with label flex component. Show all posts
Showing posts with label flex component. Show all posts
Wednesday, September 5, 2007
Tuesday, July 24, 2007
Monday, July 23, 2007
About the component instantiation life cycle
The component instantiation life cycle describes the sequence of steps that occur when you create a component object from a component class. As part of that life cycle, Flex automatically calls component methods, dispatches events, and makes the component visible.
The following example creates a Button control and adds it to a container:
The following ActionScript is equivalent to the portion of the MXML code. Flex executes the same sequence of steps in both examples.
// Create a Box container.
var box1:Box = new Box();
// Configure the Box container.
box1.width=200;
// Create a Button control.
var button1:Button = new Button()
// Configure the Button control.
button1.label = "Submit";
// Add the Button control to the Box container.
box1.addChild(button1);
The following steps show what occurs when you execute the ActionScript code to create the Button control, and add it to the Box container. When you create the component in MXML, Flex 2 SDK generates equivalent code.
You call the component's constructor, as the following code shows: // Create a Button control.
var button1:Button = new Button()
You configure the component by setting its properties, as the following code shows:// Configure the button control.
button1.label = "Submit";
You call the addChild() method to add the component to its parent, as the following code shows:// Add the Button control to the Box container.
box1.addChild(button1);
Flex performs the following actions to process this line:
Flex sets the parent property for the component to reference its parent container.
Flex computes the style settings for the component.
Flex dispatches the add event from the button
Flex dispatches the childAdd event from the parent container.
Flex dispatches the preinitialize event on the component. The component is in a very raw state when this event is dispatched. Many components, such as the Button control, create internal child components to implement functionality; for example, the Button control creates an internal UITextField component to represent its label text. When Flex dispatches the preinitialize event, the children, including the internal children, of a component have not yet been created.
Flex creates and initializes the component's children, including the component's internal children.
Flex dispatches the initialize event on the component. At this time, all of the component's children have been initialized, but the component has not been fully processed. In particular, it has not been sized for layout.
Later, to display the application, a render event gets triggered, and Flex does the following.
Flex completes all processing required to display the component, including laying out the component.
Flex makes the component visible by setting the visible property to true.
Flex dispatches the creationComplete event on the component. The component has been sized and processed for layout and all properties are set. This event is dispatched only once when the component is created.
Flex dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the position, size, or other visual characteristic of the component changes and the component has been updated for display.
You can later remove a component from a container using the removeChild() method. The removed child's parent property is set to null. If you add the removed child to another container, it retains its last known state. If there are no references to the component, it is eventually deleted from memory by the garbage collection mechanism of Adobe Flash Player.
Given this sequence of actions, you should use the events as follows:
The preinitialize event occurs too early in the component life cycle for most initialization activities. It is useful, however, in the rare situations where you must set the properties on a parent before the children are created.
To configure a component before Flex has determined its visual appearance, use the initialize event. For example, use this for setting properties that affect its appearance, height, or width.
Use the creationComplete event for actions that rely on accurate values for the component's size or position when the component is created. If you use this event to perform an action that changes the visual appearance of the component, Flex must recalculate its layout, which adds unnecessary processing overhead to your application.
Use the updateComplete event for actions that must be performed each time a component's characteristics change, not just when the component is created.
The following example creates a Button control and adds it to a container:
<?xml version="1.0"?>
<!-- components\AddButtonToContainer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Box id="box1" width="200">
<mx:Button id="button1" label="Submit"/>
</mx:Box>
</mx:Application>
The following ActionScript is equivalent to the portion of the MXML code. Flex executes the same sequence of steps in both examples.
// Create a Box container.
var box1:Box = new Box();
// Configure the Box container.
box1.width=200;
// Create a Button control.
var button1:Button = new Button()
// Configure the Button control.
button1.label = "Submit";
// Add the Button control to the Box container.
box1.addChild(button1);
The following steps show what occurs when you execute the ActionScript code to create the Button control, and add it to the Box container. When you create the component in MXML, Flex 2 SDK generates equivalent code.
You call the component's constructor, as the following code shows: // Create a Button control.
var button1:Button = new Button()
You configure the component by setting its properties, as the following code shows:// Configure the button control.
button1.label = "Submit";
You call the addChild() method to add the component to its parent, as the following code shows:// Add the Button control to the Box container.
box1.addChild(button1);
Flex performs the following actions to process this line:
Flex sets the parent property for the component to reference its parent container.
Flex computes the style settings for the component.
Flex dispatches the add event from the button
Flex dispatches the childAdd event from the parent container.
Flex dispatches the preinitialize event on the component. The component is in a very raw state when this event is dispatched. Many components, such as the Button control, create internal child components to implement functionality; for example, the Button control creates an internal UITextField component to represent its label text. When Flex dispatches the preinitialize event, the children, including the internal children, of a component have not yet been created.
Flex creates and initializes the component's children, including the component's internal children.
Flex dispatches the initialize event on the component. At this time, all of the component's children have been initialized, but the component has not been fully processed. In particular, it has not been sized for layout.
Later, to display the application, a render event gets triggered, and Flex does the following.
Flex completes all processing required to display the component, including laying out the component.
Flex makes the component visible by setting the visible property to true.
Flex dispatches the creationComplete event on the component. The component has been sized and processed for layout and all properties are set. This event is dispatched only once when the component is created.
Flex dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the position, size, or other visual characteristic of the component changes and the component has been updated for display.
You can later remove a component from a container using the removeChild() method. The removed child's parent property is set to null. If you add the removed child to another container, it retains its last known state. If there are no references to the component, it is eventually deleted from memory by the garbage collection mechanism of Adobe Flash Player.
Given this sequence of actions, you should use the events as follows:
The preinitialize event occurs too early in the component life cycle for most initialization activities. It is useful, however, in the rare situations where you must set the properties on a parent before the children are created.
To configure a component before Flex has determined its visual appearance, use the initialize event. For example, use this for setting properties that affect its appearance, height, or width.
Use the creationComplete event for actions that rely on accurate values for the component's size or position when the component is created. If you use this event to perform an action that changes the visual appearance of the component, Flex must recalculate its layout, which adds unnecessary processing overhead to your application.
Use the updateComplete event for actions that must be performed each time a component's characteristics change, not just when the component is created.
Class hierarchy for visual components
Object
|
EventDispatcher
|
DisplayObject
|
InteractiveObject
|
DisplayObjectContainer
|
Sprite
|
UIComponent
|
AllComponent
|
EventDispatcher
|
DisplayObject
|
InteractiveObject
|
DisplayObjectContainer
|
Sprite
|
UIComponent
|
AllComponent
Creating visual Flex components in ActionScript
You can use ActionScript to programmatically create visual Flex components using the new operator, in the same way that you create instances of any ActionScript class. The created component has default values for its properties, but it does not yet have a parent or any children (including any kind of internal DisplayObjects), and it is not yet on the display list in Flash Player, so you can't see it. After creating the component, you should use standard assignment statements to set any properties whose default values aren't appropriate.
Finally, you must add the new component to a container, by using that container's addChild() or addChildAt() method, so that it becomes part of the visual hierarchy of a Flex application. The first time that it is added to a container, a component's children are created. Children are created late in the component's life cycle so that you can set properties that can affect children as they are created.
When creating visual controls, you must import the appropriate package. In most cases, this is the mx.controls package, although you should check Adobe Flex 2 Language Reference.
The following example creates a Button control inside the HBox:
Flex creates the new child as the last child in the container. If you do not want the new child to be the last in the container, use the addChildAt() method to change the order. You can the setChildIndex() method after the call to the addChild() method, but this is less efficient.
You should declare an instance variable for each dynamically created component and store a reference to the newly created component in it, just as the MXML compiler does when you set an id property for a component instance tag. You can then access your dynamically created components in the same way as those declaratively created in MXML.
To programmatically remove a control, you can use the removeChild() or removeChildAt() methods. You can also use the removeAllChildren() method to remove all child controls from a container. Calling these methods does not actually delete the objects. If you do not have any other references to the child, Flash Player includes it in garbage collection at some future point. But if you stored a reference to that child on some object, the child is not removed from memory.
In some cases, you declaratively define a component with an MXML tag. You can set the creationPolicy property of the component's container to none to defer the creation of the controls inside that container. Then, to create a component that has been declared with a tag but not instantiated, you use the createComponentFromDescriptor() and createComponentsFromDescriptors() methods. These methods let you create a component programmatically rather than declaratively. For information on using the creationPolicy property, see Improving Startup Performance in Building and Deploying Flex 2 Applications.
The only component you can pass to the addChild() method is a UIComponent. In other words, if you create a new object that is not a subclass of mx.core.UIComponent, you must wrap it in a UIComponent before you can attach it to a container. The following example creates a new Sprite object, which is not a subclass of UIComponent, and adds it as a child of the UIComponent before adding it to the Panel container:
Finally, you must add the new component to a container, by using that container's addChild() or addChildAt() method, so that it becomes part of the visual hierarchy of a Flex application. The first time that it is added to a container, a component's children are created. Children are created late in the component's life cycle so that you can set properties that can affect children as they are created.
When creating visual controls, you must import the appropriate package. In most cases, this is the mx.controls package, although you should check Adobe Flex 2 Language Reference.
The following example creates a Button control inside the HBox:
<?xml version="1.0"?>
<!-- usingas/ASVisualComponent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.controls.Button;
public var button2:Button;
public function createObject():void {
button2 = new Button();
button2.label = "Click Me";
hb1.addChild(button2);
}
]]></mx:Script>
<mx:HBox id="hb1">
<mx:Button label="Create Object" click="createObject()"/>
</mx:HBox>
</mx:Application>
Flex creates the new child as the last child in the container. If you do not want the new child to be the last in the container, use the addChildAt() method to change the order. You can the setChildIndex() method after the call to the addChild() method, but this is less efficient.
You should declare an instance variable for each dynamically created component and store a reference to the newly created component in it, just as the MXML compiler does when you set an id property for a component instance tag. You can then access your dynamically created components in the same way as those declaratively created in MXML.
To programmatically remove a control, you can use the removeChild() or removeChildAt() methods. You can also use the removeAllChildren() method to remove all child controls from a container. Calling these methods does not actually delete the objects. If you do not have any other references to the child, Flash Player includes it in garbage collection at some future point. But if you stored a reference to that child on some object, the child is not removed from memory.
In some cases, you declaratively define a component with an MXML tag. You can set the creationPolicy property of the component's container to none to defer the creation of the controls inside that container. Then, to create a component that has been declared with a tag but not instantiated, you use the createComponentFromDescriptor() and createComponentsFromDescriptors() methods. These methods let you create a component programmatically rather than declaratively. For information on using the creationPolicy property, see Improving Startup Performance in Building and Deploying Flex 2 Applications.
The only component you can pass to the addChild() method is a UIComponent. In other words, if you create a new object that is not a subclass of mx.core.UIComponent, you must wrap it in a UIComponent before you can attach it to a container. The following example creates a new Sprite object, which is not a subclass of UIComponent, and adds it as a child of the UIComponent before adding it to the Panel container:
<?xml version="1.0"?>
<!-- usingas/AddingChildrenAsUIComponents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import flash.display.Sprite;
import mx.core.UIComponent;
private function addChildToPanel():void {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(0, 0, 20);
var c:UIComponent = new UIComponent();
c.addChild(circle);
panel1.addChild(c);
}
]]></mx:Script>
<mx:Panel id="panel1" height="100" width="100"/>
<mx:Button id="myButton" label="Click Me" click="addChildToPanel();"/>
</mx:Application>
Sunday, July 22, 2007
Monday, July 16, 2007
Layering Components in your Flex App
ref : here
For example:
<mx:application>
<mx:Image .... />
<mx:Panel .... />
<mx:Button .... />
</mx:application>
The button is on top of the panel which is on top of the image, meaning that the image is in the "background" (though not the actual background of Application as set forth by the backgroundImage attribute).
Friday, July 13, 2007
excellent flex open source component
excellent flex open source component
http://flexbox.mrinalwadhwa.com/
http://flexbox.mrinalwadhwa.com/
Subscribe to:
Posts (Atom)