Road To Flex-7

At runtime you can add a property to an Object as:
var myObj:Object = new Object();
myObj.someID=new Array();
Like javascript...
If you are using e4x notation to get the property name dynamically, you will have to enclose it in square brackets ie
myObj[c.@someID]=new Array();

implementing toString method in the AS classes will help in tracing.

to remove extra tabs select all and use Shift+Tab key combo in the eclipse based flex editor

Use source property of the Script tag to specify external script.

In AS3.0 we can override functions. For this they should have the same access specifier (public/private), have same number & type of parameters in the same order and should be explicitly preceded by the keyword override.

<mx:metadata> tag can be used to declare metadata

Questions:

1. How do you override functions in AS3.0?
2. Which tag will you use to declare metadata?
3. How will you specify an external file for the Script tag?
4. How will you add a property to an object at runtime?
   

Flex Components: Introduction

Why do we need to make components? Helps organize the code, make it modular. The aim most of the times will be to either add functionality to a pre-defined component or group numerous components together.

The general approach is
1. Plan what you want your component will be, what will it do and where it will lie in the hierarchy. Choose an appropriate name.
2. First line will be the XML DTD we are using with the main application. No application tags as one app can have only one.
3. As the first MXML tag we insert the root tag of our component
4. In tag body add the functionality
5. In the file where we want to use the component we add an XML namespace so as we can access the component
6. Instantiate the component as any predefined component.
eg: Lets say we want a component to extend a TitleWindow, skeleton may look like:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
</mx:TitleWindow>
Say we create it at location ui.popups by name DataPopup. We will add namespace in Application tag in the main file as: xmlns:p="ui.popups.*"
and then instantiate in the body at appropriate place as:
<p:DataPopup/>
All the properties that we put in the script element in component can be instantiated as properties in the instantiation like property of any other component

UIComponent is the lightest-weight component that you can use when creating an MXML component. It is ideal to use for root tag of non-visual data manager type of components.

You cannot assign id to root tag of a component

It is a good idea to bundle a few UI components in a canvas tag to control mouse events on all of them. Combine it with currentState to get appropriate changes in the ui, including mouse hovers.

The inheritance hierarchy of UIComponent class:
mx.core.UIComponent extends
flash.display.Sprite extends
flash.display.DisplayObjectContainer extends
flash.display.InteractiveObject extends
flash.events.EventDispatcher (superclass of all flex components)

Questions:

1. Why do we need components?
2. Explain in brief how you would go about making a component?
3. What base component would you use to make a non-visual component?
4. What is the inheritance hierarchy of UIComponent class?
   

Road To Flex-6

for loop has two flavors in AS3.0. One is the regular vanilla: for(var i:int;i<somecol.length;i++){}. The other looks like this: for each(var p:Object in someCollection){}.

You can call a function from the parent MXML document as:
if(this.parentDocument.parentFunction!= null){
this.parentDocument.parentFunction(param1);
}
But this is not a good practice. Can be handled using events.
Another not so good way for a component to call a function from the top level application:
mx.core.Application.application.funcToCall(params);

Use TitleWindow class+PopUpManager class to make a modal window. TitleWindow well suited. Has a showCloseButton property.

To create a popup using PopUpManager, use PopUpManager.createPopUp(parent, popUpWinClass, isModal); This method returns IFlexDisplayObject.

Use PopUpManager.removePopUp(this); to execute the actual close ie removing the popup.

UIComponent -> Container, Button, NumericStepper, ComboBase
Container -> Box, Form
Box -> VBox, HBox
ComboBase -> ComboBox

Questions:

1. Your child component need to call a function from the parent component. How will you handle it?
2. A component needs to call a function from the top level application. How can this be done?
3. How would you work on making a popup?
4. What is syntax for the for loop in AS3.0?
   

Road To Flex-5

• addItem() method of the ArrayCollection does the same thing as push() method of Array
• Making an XMLListCollection in MXML pointing to HTTPService data <mx:XMLListCollection id="myList" source="{serviceId.lastResult.family}"/>
• XMLListCollection is very much like ArrayCollection except that it is used for XML data. It is a best practice to bind to an XMLListCollection instead of the native XML object. Useful to use it for Tree control.
• In AS3.0 we can specify functions with parameters and give a default value to them. Such params if lying at the end are optional while calling the function
• AS3.0 has native XML support in the form of ECMAScript for XML(E4X). E4X specs define a set of functionalities and classes for working with XML data. These are collectively called E4X.
• XML class in AS3.0 is NOT the same as XML class in AS2.0. That class has been renamed as XMLDocument.
• RichTextEditor allows user to markup the text entered into the control.
• You can use as operator to cast an object. Collection lists generally return an object type (remids me of Java in pre Java5 days) and needs to be cast. Eg. You have a ArrayCollection col1 which holds objects of type myObject. You have function which need object of this type, function func1(data:myObject): void{}. The call to this function using an item retrieved from the collection may look like this: func1(col1.getItemAt(0) as myObject). If you dont fo do that, it gives an implicit coercion error.

Questions:

1. What is the difference between XML class in AS2.0 and AS3.0?
2. When would you use a RichTextEditor?
3. Why would you use the as operator?
4. What is E4X?
   

Working With Data in Flex: E4X

When using E4X notation, root node is not used in statements.

E4X makes dealing with AS XML objects much easier and flexible. Eliminates the need to build complicated for loops to obtain data. Was not there before 3.0.

Let us see some key E4X operators

dot [.] operator allows to navigate to a particular node type. Eg:
for XML:
private var myXML:XML = new XML();
myXML=
<parent>
   <family>
      <child age="2" weight="10">
         <name>child1</name>
         <id>0</id>
      </child>
       <child age="2" weight="15">
         <name>child2</name>
         <id>1</id>
       </child>
   </family>
   <family>
      <child age="4" weight="17">
          <name>child3</name>
         <id>2</id>
       </child>
      <child age="5" weight="20">
          <name>child4</name>
         <id>3</id>
      </child>
    </family>
</parent>

now,
myXML.family.child.name
would give
<name>child1</name>
<name>child2</name>
<name>child3</name>
<name>child4</name>

parantheses [()] operator allows to get node using condition
eg:
myXML.family.child.(name="child1")
will give
<child age="2" weight="10">
    <name>child1</name>
    <id>0</id>
</child>

attribute [@] operator can be used to do the same thing using an attribute
eg:
myXML.family.child.(@age="2")
will give
<child age="2" weight="10">
    <name>child1</name>
    <id>0</id>
</child>
<child age="2" weight="15">
    <name>child2</name>
    <id>1</id>
</child>
All the nodes matching the criteria are returned

descendant accessor [..] operator allows getting any descendant, no matter how deep they are buried.
myXML..name
will give
<name>child1</name>
<name>child2</name>
<name>child3</name>
<name>child4</name>

When we want E4X format we specify resultFormat in HTTPService:
<mx:HTTPService id="serviceId" url="http://www.myUrl.com/myXml.xml" result="handlingFunc(event)" resultFormat="e4x"/>

Questions:

1. What is the advantage of using E4X?
2. In E4X explain the usage of dot [.] operator.
3. In E4X explain the usage of attribute [@] operator.
4. In E4X explain the usage of parentheses [()] operator.
5. In E4X explain the usage of descendant accessor [..] operator.
6. How will HTTPService know that the format of result returned?
   

Working With Data in Flex: Using Cursor

Collections have ability to manipulate and sort data. This uses the concept of "cursor". All classes that implement ICursorView interface have the functionality. Eliminates need of complicated loops.

ArrayCollection implements ICursorView. Before we can use a cursor on it, we need to sort it. For this we use Sort and SortField classes and sort property of the collection.eg:

var cursor:IViewCursor = myArrayCollection.createCursor();
var sort1:Sort = new Sort();
var sortField1:SortField = new SortField("fieldToUse1");
var sortField2:SortField = new SortField("fieldToUse2",false,true,true);
sort1.fields=new Array(sortField1,sortField2);
myArrayCollection.sort = sort1;
myArrayCollection.refresh();

First we make a new instance of Sort. Then we need to make sort fields for the sort ie the property by which the whole collection should be sorted. SortField has one mandatory and three optional parameters with default value of false. First is name of property on which to sort. Second if sort should be case sensitive. Third if it should be descending sort. Fourth if it should be a numeric sort. A Sort can have several fields given to it in an Array. It uses them in the order to sort. In this case it would first sort by field1 and then by field2. Then this sort is given to the collection and refresh method called to sort.

From this point we can various methods on the cursor. The cursor will find using the fields specified for sorting. eg. cursor.findFirst(obj); will see if the obj Object already exists in myArrayCollection and will return true or false accordingly. The search will happen using the sortfield ie field of the Object will be matched with those in the list. We also have findLast and findAny methods. cursor.current gives the current object being pointed to. Dont forget to cast the object obtained. Finally there is the remove() method to remove the object to which the cursor is pointing to.

Questions:

1. How do you sort/manipulate data in flex collections?
2. With an example illustrate how you would sort a collection?
3. How would you ensure that a field is used to sort the collection is case insensitive, ascending and numeric?
4. What is the use of a cursor?
   

Normal -> AJAX -> AJAJ -> AJAJS

The internet world is moving towards a rich and fast user experience at a very rapid speed. AJAX is contributing majorly in this direction.
AJAX [Asynchronous Javascript And XML] is not a technology, it is a concept built on the existing technology provided by major webbrowsers.
The native XMLHttpRequest object or the Microsoft.XMLHTTP ActiveXObject enables the use of AJAX. Using one of these [as the case may be] objects, the javascript code in a webpage can asynchronously send the HTTP's GET/POST request to a webserver. Javascript can be further used to display the responseText/responseXML anywhere on the existing webpage. This way some text [or image or any other HTML object for that matter] can be changed on the existing webpage without reloading the whole page.
Gmail, Orkut, Google Suggest and many other existing and upcoming sites use this concept extensively.
You can find a detailed explanation and examples of how to implement AJAX in your applications here.

AJAX requires the response from the webserver to be in XML format. To further improve the performance of the application, XML can be replaced by something light in weight. JSON (JavaScript Object Notation) provides a fat free notation of JavaScript objects. AJAJ (Asynchronous Javascript And JSON) does exactly this. By the use of AJAJ you may not have to fetch/parse the responseXML of the HTTP object to extrace the relevant info. The responseText can be directly loaded in the JavaScript variables. The official JSON website demonstrates this with beautiful examples.
There are 2 benifits of using AJAJ over AJAX:
1. JSON is lighter that XML.
2. You do not have to parse JSON on the client side to initialize JS variables, unlike XML.

Going a step further, we may even replace the JSON of AJAJ with JavaScript. I call it AJAJS [Asynchronous JavaScript And JavaScript]. Insead of responding with the responseXML or a JSON in the responseText, the server might respond with a javascript code in the responseText. And on the client side, you may use the JavaScript eval() function to execute the responseText. So now the responseText can even be a function call.
Eq:
suppose http.responseText = "showMessage('From: chhabra.kapil@naukri.com', 'Subject: Hey!', 'Body: How do you do, buddy! ...')";
Now suppose that showMessage is a function in your javascript that accepts 3 parameters to display an email mesage on the page, you may just
eval(http.responseText)
in your client side JS code.