Archive for flex questions

Flex Questions

1) What’s the difference between Java and AS3 getters and setters?
2) Explain how binding works in mxml components.
3) What’s the difference between ChangeWatcher.watch, and BindingUtils.bindProperty?
4) Why would you want to keep a reference to a ChangeWatcher and call unwatch()?

Architecture
5) How do you add event listeners in mxml components.  Now AS3 components?
6) What does calling preventDefault() on an event do?  How is this enforced?
7) (If applicable) Explain the lifecycle of a Cairngorm action.

More
8) What are some ways to specify styles on components?
9) What is the problem with calling setStyle()
10) Explain the difference between creating an effect and setting the target as opposed to adding an

effectListener
11) What do repeater components do?
12) How do you identify a component created in a repeater?

 

1. Is it possible to make httpService Requests synchronous?
2. I need to load an image from flickr into my application. Do I need a crossdomain.xml file on flickr?
3. What is the difference between httpService and Data Service?
4. How do you generate random numbers within a given limit with actionscript?
5. Have you built any components with actionscript? If so explain how you did it?
6. How do you implement push on a flex applications?
7.I am going to add images into a tag. How will it resize itself?
8. What is a resource Manager??
9.What are the similarities between java and flex
10. What is the dynamic keyword used for?
11.How do you implement push with flex data services?
12. What are the methods called when a UI component is intialized?
13. How do you implement drag and drop on components that do not support ondrag and ondrop?
14.Can you write to the file system from flex?
15. What is a drag manager?
16 . HOw do you call javascript from Flex?
17. How do you use a repeater?
18. what are three ways to skin a component in flex?
19. How do you use css styles in flex?
20. What is the difference between sealed class and dynamic classes?
21.what is MVC and how do you relate it to flex apps?
22.what is state? what is the difference between states and ViewStack?
23.how does item renderer work? How do I add item renderer at runtime?
24.what keyword allows you to refer to private variables of a class?
25.how polymorphism works on actionscript?
26.how do you overload functions in actionscript?
27.what is dynamic keyword used for?
28.what are sealed classes ?
29 what are runtime shared libraries?
30.What is caringhorm ? how do you use it?Have you worked with Cairnghorn?
31.What keyword allows you to implement abstraction better?
32.What design patterns have you used? in Actionscript and java?

Interview Questions

What is different between BlazeDS and LiveCycle Data Services?

Following are the differences between LCDS and BlazeDS in terms of features. For more details on the features, please visit

http://www.adobe.com/products/livecycle/dataservices/features.html

 ) – Indicates the feature is available

Features BlazeDS LCDS
Data management Services    
Client-Server synchronization   )
Conflict resolution   )
Data paging   )
SQL adapter  
)
Hibernate adapter  
)
Document Services    
LiveCycle remoting   )
RIA-to-PDF conversion   )
Enterprise-Class Flex application services    
Data access/remoting
)
)
Proxy service
)
)
Automated testing support  
)
Software clustering )
)
Web tier compiler  
)
Enterprise Integration    
WSRP generation  
)
Ajax data services )
)
Flex-Ajax bridge )
)
Runtime configuration
)
)
Open adapter architecture )
)
JMS adapter
)
)
Server-side component framework integration )
)
ColdFusion integration  
)
Offline Application Support    
Offline data cache  
)
Local message queuing  
)
Real – Time Data    
Publish and Subscribe messaging
)
)
Real -time data quality of service  
)
RTMP tunneling  
)

ArrayCollection to XML Conversion

This post have three significant solutions:

   1. ArrayCollection output into XML
   2. Converting any MySQL DB values into XML using PHP
   3. Simple Login form using PHP and MXML

The below php code converts db output as xml dbtoconnect.php

<?php
define(“HOSTNAME”,”localhost”);
define(“USERNAME”,”root”);
define(“PASSWORD”,””);
define(“DB_NAME”,”sample”);
define(“TABLE_NAME”,”login”);

mysql_connect(HOSTNAME, USERNAME, PASSWORD);
mysql_select_db(DB_NAME);

$result = mysql_query(“SELECT * FROM “.TABLE_NAME);//Get the number of rows
$num_row = mysql_num_rows($result);
echo ‘<?xml version=”1.0″ encoding=”iso-8859-1”?>’;//Start the output of XML
echo “<data>”;
echo ‘<num>’ .$num_row. ‘</num>’;
if (!$result) {
die(‘Query failed: ‘ . mysql_error());
}
/* get column metadata – column name */
 $i = 0;
 while ($i < mysql_num_fields($result)) {
    $meta = mysql_fetch_field($result, $i);
  $ColumnNames[] = $meta->name;  //place col name into array
  $i++;
 }
$specialchar = array(“&”,”>”,”<“);  //special characters
$specialcharReplace = array(“&amp;”,”&gt;”,”&lt;”); //replacement
/* query & convert table data and column names to xml*/

$w = 0;
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo “<row>”;
foreach ($line as $col_value){
 echo ‘<‘.$ColumnNames[$w].’>’;
 $col_value_strip = str_replace($specialchar, $specialcharReplace, $col_value);
 echo $col_value_strip;
 echo ‘</’.$ColumnNames[$w].’>’;
 if($w == ($i – 1)) { $w = 0; }
 else { $w++; }
   }
echo “</row>”;
}
echo “</data>”;
mysql_free_result($result);

?>

The below mxml file converts php ArrayCollection output into XML dbconnect.mxml

 <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” horizontalAlign=”center” verticalAlign=”middle” creationComplete=”init()”>
 <mx:Style source=”css/halo.css”/>
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.collections.ArrayCollection;
   
   public var xmlList:XMLList;
   
   public var userBoolean:Boolean;
   public var passBoolean:Boolean;
   
   private function init():void
   {
    httpserviceId.send();
   }
  
   public function remoteloginValidation(event:ResultEvent):void
   {
    xmlList = xmlConvertion(event.result.data.row);
    //Alert.show(“remoteloginValidation :”+xmlList);

   }
   public function remoteLoginFaultHandler(event:FaultEvent):void
   {
    Alert.show(event.fault.faultString, ‘Error’);
   }
   private function xmlConvertion(xmlArrayCol:ArrayCollection):XMLList
   {
    var xmlString:String = “<?xml version=\”1.0\” encoding=\”utf-8\”?>\n<data>”;
    for each(var xmlObj:Object in xmlArrayCol)
    {
     xmlString += “<record>”;
     xmlString += “<UserId>”+xmlObj.UserId+”</UserId>”;
     xmlString += “<Loginname>”+xmlObj.Loginname+”</Loginname>”;
     xmlString += “<Password>”+xmlObj.Password+”</Password>”;
     xmlString += “</record>”;
    }
    xmlString += “\n</data>”;
    return new XMLList(xmlString);
   }
   private function loginHalo(event:Event):void
   {
    var _userName:String = userNameText.text;
    var _passName:String = passNameText.text;
    
    var xmlListValidation:XMLList = xmlList.record.(Loginname == _userName)
    
    //Alert.show(“loginHalo :”+xmlListValidation.Loginname);
    userBoolean = String(xmlListValidation.Loginname)==_userName;
    passBoolean = String(xmlListValidation.Password)==_passName;
    
    Alert.show(“userBoolean :”+userBoolean+” , passBoolean :”+passBoolean);
    if((!userBoolean) && (!passBoolean))
    {
     Alert.show(“UserName & Password Wrong”);
    }
    else if((userBoolean) && (!passBoolean))
    {
     Alert.show(“Password Wrong”);
    }    
   }   
   private function forgetPass(event:Event):void
   {
   }  
  ]]>
 </mx:Script>

 <mx:HTTPService id=”httpserviceId” url=”http://localhost/dptoconnect.php” useProxy=”false” showBusyCursor=”true” result=”remoteloginValidation(event)” fault=”remoteLoginFaultHandler(event)”/>   
 <mx:Panel id=”panelId” width=”420″ height=”220″> 
  <mx:VBox width=”100%” height=”70%” backgroundColor=”#E0E0E0″ horizontalGap=”0″ verticalGap=”0″>
   <mx:Form id=”loginForm” textAlign=”left”>   
    <mx:FormItem label=”User Name:”>
              <mx:TextInput id=”userNameText” />
          </mx:FormItem>
          <mx:FormItem label=”Password:”>
              <mx:TextInput id=”passNameText” displayAsPassword=”true”  />
          </mx:FormItem>
          <mx:FormItem>
              <mx:CheckBox label=”Always login me with current credential”/>
          </mx:FormItem>
          <mx:HBox>
           <mx:FormItem width=”60″>
              </mx:FormItem>
           <mx:FormItem>
               <mx:Button id=”loginId” label=”LOGIN” styleName=”LoginButton” click=”loginHalo(event)” />
              </mx:FormItem>
           <mx:FormItem >
               <mx:LinkButton label=”I forget my password” rollOverColor=”#EFE9D9″ click=”forgetPass(event)”/>
           </mx:FormItem>
    </mx:HBox>        
      </mx:Form>
  </mx:VBox> 
  <mx:HBox width=”100%” height=”30%” verticalGap=”0″ horizontalGap=”0″ backgroundColor=”#F0F0F0″ verticalAlign=”middle” borderColor=”#BABABA”>
   <mx:VBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” borderColor=”#BABABA” verticalGap=”0″>
    <mx:HBox width=”100%” horizontalAlign=”center”>
     <mx:Label text=”Problems with the application?” fontSize=”12″/>
     <mx:LinkButton label=”HALOSupport@emantras.com” textDecoration=”underline” color=”#AE2324″ selectionColor=”#BFBFBF” rollOverColor=”#F0F0F0″/>
    </mx:HBox>
    <mx:HBox width=”100%” horizontalAlign=”center”>
     <mx:LinkButton label=’Copyright @ 2008, Emantras Inc.’ textDecoration=”underline” color=”#AE2324″ selectionColor=”#BFBFBF” rollOverColor=”#F0F0F0″ />
    </mx:HBox>
   </mx:VBox>
  </mx:HBox>     
 </mx:Panel>
</mx:Application>

iFrame

// ———————————————————————–
// IFrame.as – Alistair Rutherford, http://www.netthreads.co.uk
// Glasgow, Scotland Oct 2007 .
// ———————————————————————–
// Revision Date Notes
// ——– —- —–
// 1.0 16/09/07 .Initial version
// 1.1 29/09/07 .Fixed bug where the frame wasn’t resizing itself
// when the source url was assigned.
// ———————————————————————–
// This component is based on the work of:
//
// Christophe Conraets
// http://www.coenraets.org
//
// and
//
// Brian Deitte
// http://www.deitte.com/archives/2006/08/finally_updated.htm
//
// ———————————————————————–
// I have made some additions to the original code
//
// – javascript support functions are now generated by the component and
// inserted directly into the DOM.
//
// – Component generates it’s own div and iframe element and inserts them
// into the DOM.
//
// – When the component is created the display list is traversed from the
// component down to the root element. At each traversal a test is made to
// see if current component is a container. If it is a container then the
// child of the element which leads back to the component is determined and
// a note madeof the appropriate ‘index’ on the path. The index is stored
// against a reference to the Container in a Dictionary. Also the container
// is ‘seeded’ with an event handler so that if the container triggers an
// IndexChangedEvent.CHANGE (i.e. when you click on a tab in a viewstack)
// the path of ‘index’ values down to the component can be checked. If the
// path indicates that the indexes ‘line up’ to expose the component then
// the view is made visible. I hope I have explained this correctly 🙂
// ———————————————————————–

package
{
import flash.geom.Point;
import flash.events.Event;
import flash.utils.Dictionary;
import flash.display.DisplayObjectContainer;

import mx.core.Container;
import mx.events.IndexChangedEvent;

import flash.external.ExternalInterface;

public class IFrame extends Container
{
private var __source: String;
private var frameId:String;
private var iframeId:String;

private var containerDict:Object = null;
private var settingDict:Object = null;

/**
* Here we define javascript functions which will be inserted into the DOM
*
*/
private static var FUNCTION_CREATEIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.createIFrame==null)” +
“{” +
“createIFrame = function (frameID)” +
“{ ” +
“var bodyID = document.getElementsByTagName(\”body\”)[0];” +
“var newDiv = document.createElement(‘div’);” +
“newDiv.id = frameID;” +
“newDiv.style.position =’absolute’;” +
“newDiv.style.backgroundColor = ‘transparent’;” +
“newDiv.style.border = ‘0px’;” +
“newDiv.style.visibility = ‘hidden’;” +
“bodyID.appendChild(newDiv);” +
“}” +
“}” +
“}”;

private static var FUNCTION_MOVEIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.moveIFrame==null)” +
“{” +
“moveIFrame = function(frameID, iframeID, x,y,w,h) ” +
“{” +
“var frameRef=document.getElementById(frameID);” +
“frameRef.style.left=x;” +
“frameRef.style.top=y;” +
“var iFrameRef=document.getElementById(iframeID);” +
“iFrameRef.width=w;” +
“iFrameRef.height=h;” +
“}” +
“}” +
“}”;

private static var FUNCTION_HIDEIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.hideIFrame==null)” +
“{” +
“hideIFrame = function (frameID)” +
“{” +
“document.getElementById(frameID).style.visibility=’hidden’;” +
“}” +
“}” +
“}”;

private static var FUNCTION_SHOWIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.showIFrame==null)” +
“{” +
“showIFrame = function (frameID)” +
“{” +
“document.getElementById(frameID).style.visibility=’visible’;” +
“}” +
“}” +
“}”;

private static var FUNCTION_LOADIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.loadIFrame==null)” +
“{” +
“loadIFrame = function (frameID, iframeID, url)” +
“{” +
“document.getElementById(frameID).innerHTML = \”<iframe id=’\”+iframeID+\”‘ src=’\”+url+\”‘ frameborder=’0’></iframe>\”;” +
“}” +
“}” +
“}”;

/**
* Constructor
*
*/
public function IFrame()
{
super();
}

/**
* Generate DOM elements and build display path.
*
*/
override protected function createChildren():void
{
super.createChildren();

if (! ExternalInterface.available)
{
throw new Error(“ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.”);
}

// Generate unique id’s for frame div name
frameId = id;
iframeId = “iframe_”+frameId;

// Add functions to DOM if they aren’t already there
ExternalInterface.call(FUNCTION_CREATEIFRAME);
ExternalInterface.call(FUNCTION_MOVEIFRAME);
ExternalInterface.call(FUNCTION_HIDEIFRAME);
ExternalInterface.call(FUNCTION_SHOWIFRAME);
ExternalInterface.call(FUNCTION_LOADIFRAME);

// Insert frame into DOM using our precreated function ‘createIFrame’
ExternalInterface.call(“createIFrame”, frameId);

buildContainerList();
}

/**
* Build list of container object on the display list path all the way down
* to this object. We will seed the container classed we find with an event
* listener will be used to test if this object is to be displayed or not.
*
*/
private function buildContainerList():void
{
// We are going to store containers against index of child which leads down
// to IFrame item.
containerDict = new Dictionary();
settingDict = new Dictionary();

var current:DisplayObjectContainer = parent;
var previous:DisplayObjectContainer = this;

while (current!=null)
{
if (current is Container)
{
if (current.contains(previous))
{
var childIndex:Number = current.getChildIndex(previous);

// Store child index against container
containerDict[current] = childIndex;
settingDict[current] = childIndex;

// Tag on a change listener
current.addEventListener(IndexChangedEvent.CHANGE, handleChange);

}

}

previous = current;
current = current.parent;
}

}

/**
* Triggered by one of our listeners seeded all the way up the display
* list to catch a ‘changed’ event which might hide or display this object.
*
* @param event Event trigger
*
*/
private function handleChange(event:Event):void
{
var target:Object = event.target;

if (event is IndexChangedEvent)
{
var changedEvent:IndexChangedEvent = IndexChangedEvent(event)

var newIndex:Number = changedEvent.newIndex;

visible = checkDisplay(target, newIndex);

}
}

/**
* This function updates the selected view child of the signalling container
* and then compares the path from our IFrame up the displaylist to see if
* the index settings match. Only an exact match all the way down to our
* IFrame will satisfy the condition to display the IFrame contents.
*
* @param target Object event source
* @param newIndex Number index from target object.
*
*/
private function checkDisplay(target:Object, newIndex:Number):Boolean
{
var valid:Boolean = false;

if (target is Container)
{
var container:DisplayObjectContainer = DisplayObjectContainer(target);

// Update current setting
settingDict[container] = newIndex;

valid = true;

for (var item:Object in containerDict)
{
var index:Number = lookupIndex(item as Container);
var setting:Number = lookupSetting(item as Container);

valid = valid&&(index==setting);
}

}

return valid;
}

/**
* Return index of child item on path down to this object. If not
* found then return -1;
*
* @param target Container object
*
*/
public function lookupIndex(target:Container):Number
{
var index:Number = -1;

try
{
index = containerDict[target];
}
catch (e:Error)
{
// Error not found, we have to catch this or a silent exception
// will be thrown.
trace(e);
}

return index;
}

/**
* Return index of child item on path down to this object. If not
* found then return -1;
*
* @param target Container object
*
*/
public function lookupSetting(target:Container):Number
{
var index:Number = -1;

try
{
index = settingDict[target];
}
catch (e:Error)
{
// Error not found, we have to catch this or a silent exception
// will be thrown.
trace(e);
}

return index;
}

/**
* Adjust frame position to match the exposed area in the application.
*
*/
private function moveIFrame(): void
{

var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);

ExternalInterface.call(“moveIFrame”, frameId, iframeId, globalPt.x, globalPt.y, this.width, this.height);
}

/**
* Triggered by change to component properties.
*
*/
override protected function commitProperties():void
{
super.commitProperties();

if (source)
{
ExternalInterface.call(“loadIFrame”, frameId, iframeId, source);

// Trigger re-layout of iframe contents.
invalidateDisplayList();
}
}

/**
* Triggered when display contents change. Adjusts frame layout.
*
* @param unscaledWidth
* @param unscaledHeight
*
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

moveIFrame();
}

/**
* Set source url
*
* @param url Frame contents
*
*/
public function set source(source: String): void
{
if (source)
{
__source = source;

invalidateProperties();
}
}

/**
* Return url of frame contents
*
*/
public function get source(): String
{
return __source;
}

/**
* Sets visibility of html iframe. Rtn calls inserted javascript functions.
*
* @param visible Boolean flag
*
*/
override public function set visible(visible: Boolean): void
{
super.visible=visible;

if (visible)
{
ExternalInterface.call(“showIFrame”, frameId);
}
else
{
ExternalInterface.call(“hideIFrame”, frameId);
}

}

}

}

—–Inline Attachment Follows—–

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml
xmlns:local=”*”
creationComplete=”init();”
viewSourceURL=”srcview/index.html”>

<mx:Script>
<![CDATA[
private function init():void
{
iFrame.visible=true;
}
]]>
</mx:Script>
<mx:HBox width=”100%” height=”100%”>

<mx:Panel title=”Tree” width=”200″ height=”100%” roundedBottomCorners=”true”>
<mx:Tree id=”tree” width=”100%” height=”100%” dataProvider=”{treeData}”
labelField=”@label” showRoot=”false”
change=”iFrame.source = (Tree(event.target).selectedItem.attribute(‘path’).toString());” />
</mx:Panel>

<mx:Panel width=”100%” height=”100%” title=”Content” paddingTop=”1″ paddingBottom=”1″ paddingLeft=”1″ paddingRight=”1″ >
<local:IFrame id=”iFrame” source=”http://www.adobe.com/devnet/flex/” width=”100%” height=”100%”/>
<mx:ControlBar>
<mx:CheckBox id=”cbVisible” label=”IFrame Visible” selected=”true” click=”iFrame.visible=cbVisible.selected”/>
</mx:ControlBar>
</mx:Panel>

</mx:HBox>

<mx:XMLList id=”treeData”>
<node label=”Flex Resources”>
<node label=”Flex Developer Center” path=”http://www.adobe.com/devnet/flex/” />
<node label=”Open ppt file ” path=”/TNOU/jsp/MKU.ppt” />
<node label=”Open xls file ” path=”/TNOU/jsp/list.xls” />
<node label=”Open doc file ” path=”/TNOU/jsp/PURA.doc” />
<node label=”OpenOffice WordFile” path=”/TNOU/jsp/ig1.rtf”/>
<node label=”OpenOffice PPTFile” path=”/TNOU/jsp/sxwFileDemo.sxw”/>

<!– these sites pop themselves out of a frame:
<node label=”flex.org” path=”http://www.flex.org” />
<node label=”Adobe Labs” path=”http://labs.adobe.com/wiki/index.php/Main_Page” />
–>
</node>
<node label=”Search”>
<node label=”Google” path=”http://www.google.com” />
<node label=”Yahoo” path=”/TNOU/jsp/Rich_Internet_Applications_With_Adobe_Flex_and_Java.pdf” />
</node>
</mx:XMLList>

</mx:Application>

GUMBO [The next version of Flex, code name Gumbo]

GUMBO component

AIR iPhone @ Chalkboard Phone

AIR iPhone

Imagine, a fully-functional iPhone on your desktop that enables users to make calls, take calls and capture voice messages on their computer. Soon users will be able to do all that through the AIR iPhone developed on the Ribbit API using Adobe AIR technology. Watch the video to see how it works. Learn more about the phone and the developer behind it.

http://developer.ribbit.com/showcase/

Chalkboard Phone

Experience the Chalkboard Phone developed on the Ribbit API. See how users will be able to make calls, take calls and capture voice messages through their computer with this internet phone. NO download of any kind is required to use this phone. Watch the video to see how it works. Learn more about the phone and the developer behind it.

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!