Monday, September 10, 2007

Working With Data in Flex-2

When retrieving data, one needs to know the structure of XML being fetched. In order to form a collection out of the same on needs to point to the repeating structure. For eg. in the following XML:
<parent>
<child>
<name>child1</name>
<id>0</id>
</child>
<child>
<name>child2</name>
<id>1</id>
</child>
<child>
<name>child3</name>
<id>2</id>
</child>
<child>
<name>child4</name>
<id>3</id>
</child>
</parent>
we would have some function:

[Bindable]
private var resultList:ArrayCollection=new ArrayCollection();

public function getResult(event:ResultEvent):void{
resultList = event.result.parent.child;
}

In this case child is the repeating unit.
When using a list-based control we could directly specify the data from this xml as follows:
<mx:List id="id" rowCount="3" dataProvider="{resultList}" labelField="name"/>
Note that for labelField we have directly specified the name of the node to be used.

The actual call will happen only when the send method is invoked using the id given to HTTPService class. It is prudent to call it on creationComplete event of application if data is to be used application wide. Else on creationComplete of the specific ui objects.

Always use collections instead of arrays for data-binding. Much more useful. By default complex data-structure is returned as an ArrayCollection. Multiple control enable display datastructures using the dataProvider property. List-based controls (List,Tree,DataGrid,TileList,ComboBox) use this property for sure. dataProvider control have a lot of advantage in the sense they are dynamic and can be used to populate multiple controls. UI control data-binding does not happen with AS2.0 Array. You can pass the array to creation constructor of a collection to form a collection with the array elements.

Questions:
  1. What is the advantage of using collections instead of arrays for data-binding?
  2. Explain usage of HTTPService with an example.
  3. When does the call to the URL mentioned in HTTPService happen?

Friday, September 7, 2007

Working With Data in Flex : Using HTTPService

<mx:Model> tag allows you to build a client-side data-model. AS can access it in id.tagName format. When using databinding in MXML, it is indicated by {}. You can either type the tags or specify an external file. Useful to embed data that will not change (like options in option box/label text). Also useful for applications that need data offline. However this data is not typed: can result in poor performance and severly limit error trapping. It is just a simple substitute for server-side data. Can be addressed by using AS class for client side data-structure. Another reason that it is a bad idea is because it embeds XML into the swf. Besides increasing the size it also means that we need to recompile the swf every time we change the XML. A better option will be to pick the XML at runtime using the HTTPService class. It will retrieve XML using HTTP/HTTPS protocol by making a GET or POST request.

HTTPService class can be used to make asychronous calls. send() method of the object is used to send the request. After data has been received, result event (ResultEvent) is broadcast. The result is stored in lastResult property. A resultFormat can be specified or Flex will parse it approproately. Format can be array, e4x, flashvars, object, text or xml.

Flex gives the flexibility to convert to native XML object (E4X) or to directly convert into a object(like ArrayCollection, XMLListCollection).

For automatic conversion, we will have a tag similar to this in the MXML:
<mx:HTTPService id="serviceId" url="http://www.myUrl.com/myXml.xml" result="handlingFunc(event)" fault="handleFault(event)"/>

Use fault event to handle errors. The event in this case will be FaultEvent and not ResultEvent

Questions:
  1. What are the advantages and disadvantages of using a Model tag in flex?
  2. How can you avoid using a Model tag?
  3. Describe in brief how HTTPService class works.
  4. What are possible result formats for HTTPService?
  5. What are the advantages of using HTTPService?
Sample MXML would make sense after a few more writings in this series. This is a very important feature in flex and well worth the time spent on it :) !

Thursday, September 6, 2007

Road To Flex-4

  • All tags added to MXML represent an object
  • creationComplete is a system event, dispatched by flex components after being screen rendered. Application dispatches it after all components drawn and individual components dispatch too.
  • [Bindable] metadata tag, when specified in front of the class keyword, means that every property in the class can be bound to controls or other datastructures. We can also specify individual properties as bindable. Allows changes to be reflected from source to destination.
  • A class constructor is defined using function keyword followed by the name of the class
  • Event class holds a lot of useful information about the event generated. currentTarget property refers to the element which generated the event. type property tells about the event type.

Questions that can be asked:
  1. How can we find out if a ui component has been rendered completely or not in flex?
  2. What is the use of Bindable tag?
  3. How do you define a class constructor in AS?

Tuesday, September 4, 2007

Road To Flex-3

  • To control focus in a form use FocusManager class.
  • <mx:CheckBox> is a regular ui component. selected property determines if checked.
  • <mx:Script> tag to write AS. functions defined can be called by name in control actions (like click for Button). Script written as is between <![CDATA[]]>
  • To display an image we use an Image control. ID property can be used by actionscript to reference the Image class. Scale content property if set to true scales image to container size. Embed directive embeds the image into the swf. eg: source="@Embed('assets/myPic.jpg')". mouseOver/ mouseOut property can be used to change current state.
  • Label control allows you to display a single line of text
  • Text control allows you to display multiple lines of text
  • <mx:Spacer> tag to add space between two controls. Specify width.
  • <mx:DateField> for date based input
  • All radio buttons must belong to a group. data property helps determine which btn selected in a group.
Questions:
  1. Name some common UI controls in flex.
  2. What can you do to control focus in a form?
  3. How can you ensure that a checkbox componenet is selected on creation?
  4. How can you write an actionscript in an MXML?
  5. How can you prevent an image in an image component from scaling?
  6. What effect will an Embed command have on an Image component?
  7. Which component will you use for a date-based input?
Sample MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private var categories:ArrayCollection = new ArrayCollection();

private function myFunction():void{
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:LinkButton label="Default State" click="this.currentState=''"/>
<mx:LinkButton label="Change State" click="this.currentState='state1'"/>
<mx:Spacer width="100%"/>
<mx:Label text="Date Field"/>
<mx:DateField id="myDate"/>
<mx:RadioButtonGroup id="radioGrp"/>
<mx:RadioButton id="r1"
groupName="radioGrp"
label="Option 1"
data="1"
selected="true"/>
<mx:RadioButton id="r2"
groupName="radioGrp"
label="Option 2"
data="2"/>
</mx:ApplicationControlBar>
<mx:states>
<mx:State name="state1">
<mx:SetProperty target="{mainPanel}" name="width" value="0"/>
<mx:SetProperty target="{mainPanel}" name="height" value="0"/>
</mx:State>
</mx:states>
<mx:Panel id="mainPanel" title="My Panel" height="100%" width="100%">
</mx:Panel>
</mx:Application>

Flex Problems September 2007

Just archiving the flex problems I faced and the solutions that helped me. Will have one of these per month depending on whether I find a problem or not :p.

Problem: This message comes in debug mode: "Installed Flash Player is Not a Debugger. Flex Builder cannot locate the required debug version of the Flash Player. You may need to install the debug version of the Flash Player 9.0 or reinstall Flex Builder. Do you want to try to debug with the current version?"


Solution: Visit this link

The Road to Flex-2

  • All constraints are set relative to edges of a Canvas container (or those that can act as a canvas container like Application, Panel). They cannot be set relative to other controls or containers
  • Constraints help in controlling the view when window size changes
  • View state is one of the several views that you define for an application or a custom component. Every MXML page has at least one state, referred to as the base view state.
  • Each MXML page has a property called currentState that can be used to control which state of application to show to the user at any given time.
  • Setting currentState to blank string resets app to initial state
  • Forms are needed to collect info from users. In flex form containers can designate fields as optional or required, handle error messages and do validations. Form container uses <mx:Form>, <mx:FormHeading>, <mx:FormItem>. <mx:Form> is outermost tag and always arranges children in vertical fashion and left aligns them. We can have multiple heads. Form heading enable to specify label for a group of form items. Form item will automatically supply one label control. Other controls are added within tags and follow the label. By default all controls laid vertically right to the label. To change one needs to specify 'direction' property.
Questions:
  1. How are view constraints set in Flex?
  2. What is the use of having such constraints?
  3. What is the use of view states?
  4. What is the use of the property currentState?
  5. What will happen if the property currentState is set to a blank string?
  6. What is the use of forms in flex?
  7. How many heads/headings can a form have?
  8. What is the default layout for controls in a form? How can that be changed?
A sample MXML showing use of forms:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Form>
<mx:FormHeading label="Form Heading"/>
<mx:FormItem label="Item1 Name">
<mx:TextInput id="item1Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item2 Name">
<mx:TextInput id="item2Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item3 CB">
<mx:CheckBox id="cb1" selected="true"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label="Save"/>
<mx:Button label="Cancel"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Application>

Thursday, August 30, 2007

The Road to Flex-1

AJAX is good and I am already finding very good books and tutorials for the same on the web and the internet. But with Flex things are different, especially in India. Good books are still not available and I am not very happy with the internet resources.

So, here I am starting a compilation of what I have learned in flex 2.0 as it comes to me basis. I am not trying to make a tutorial YET. But what I am trying is compiling the basics for anybody who may find it useful. If it helps even one guy, this is going to be worth it:). Any comments welcome!

Everyday or so I will mention few things I learned about Flex 2.0 , possible interview questions one could frame using them and a sample MXML demonstrating the point. In "Road To Flex" series I will clobber whatever I learnt and feel I cannot put under one general topic. Specific topics/problems would invite separate entries from time to time.

My resources are the internet and Training from the Source book by Adobe.

For today:
  • You can have only one <mx:Application> tag per Flex application
  • UI Layout in an application can be absolute, vertical or horizontal.
  • All layout in flex is done using containers:VBox, HBox, Canvas, Application, Tile, Panel, ControlBar, ApplicationControlBar
  • ControlBar is used to dock a toolbar to the bottom of a panel container or a titlewindow container
  • ApplicationControlBar used to hold components that provide access to elements used throughout an application. If specified as first child of <mx:Application> tag and dock attribute set to true, docks at top of app's draw area, extends full width and does not scroll.
Interview questions that can be asked for these points:
  1. How many <mx:Application> tags can a flex application have?
  2. What are possible values for UI Layout?
  3. Name some containers used by Flex.
  4. Which container will you use to make a toolbar?
  5. What is the use of an ApplicationControlBar?

A sample MXML demonstrating some of the points:

<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:applicationcontrolbar dock="true">
<mx:linkbutton label="Link1"/>
<mx:linkbutton label="Link2"/>
</mx:ApplicationControlBar>
<mx:panel id="panel1" title="My Panel">
<mx:Controlbar></mx:ControlBar>
</mx:Panel>
<mx:VBox id="vertBox">
<mx:panel id="panel2" title="Panel Inside">
<mx:controlbar></mx:ControlBar>
</mx:Panel>
</mx:VBox>
</mx:Application>