Archive for the ‘Adobe Certifications’ Category

Calling Flex Function From JavaScript

November 8th, 2011 by aabhaanjan
Here is an example :
Flex Side :
[xml]
<?xml version=”1.0″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark” creationComplete=”initApp()”>
<fx:Script>
import flash.external.*;
import mx.controls.Alert;
import flash.events.*;
private var alert:Alert;
public function initApp():void {
try {
ExternalInterface.addCallback(“myFlexFunction”,myFunc);
} catch(e:Error) {
trace(e)
}
alert = Alert.show(‘App is initialized ‘);
}
public function myFunc(msg:String):void {
alert = Alert.show(‘JavaScript is sending value to As \n ‘+msg);
}
</fx:Script>
</s:Application>
[/xml]

Here is an example :

Flex Side :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark” creationComplete=”initApp()”>

<fx:Script>

import flash.external.*;

import mx.controls.Alert;

import flash.events.*;

private var alert:Alert;

public function initApp():void {

try {

ExternalInterface.addCallback(“myFlexFunction”,myFunc);

} catch(e:Error) {

trace(e)

}

alert = Alert.show(‘App is initialized ‘);

}

public function myFunc(msg:String):void {

alert = Alert.show(‘JavaScript is sending value to As \n ‘+msg);

}

</fx:Script>

</s:Application>

[/xml]

HTML Side :
[xml]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>addCallback() Wrapper</title>
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var swfVersionStr = “0”;
var xiSwfUrlStr = “”;
var flashvars = {};
var params = {};
params.quality = “high”;
params.bgcolor = “#ffffff”;
params.allowscriptaccess = “sameDomain”;
var attributes = {};
attributes.id = “ExternalInterfaceAddCallback”;
attributes.name = “ExternalInterfaceAddCallback”;
attributes.align = “middle”;
swfobject.embedSWF(
“ExternalInterfaceAddCallback.swf”, “flashContent”,
“100%”, “100%”,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
</script>
</head>
<SCRIPT LANGUAGE=”JavaScript”>
function callApp() {
window.document.title = document.getElementById(“myName”).value;
var ExternalInterfaceAddCallback = document.getElementById(“ExternalInterfaceAddCallback”);
ExternalInterfaceAddCallback.myFlexFunction(window.document.title);
}
</SCRIPT>
<body>
<form id=”f1″>
Enter Your Name: <input type=”text” size=”30″ id=”myName” onchange=”callApp()”>
</form>
<div id=”flashContent”/>
</body>
</html>
[/xml]

Tags: , , , ,

How to transfer Array within an Object to JavaScript using External Interface ?

November 4th, 2011 by aabhaanjan
Here is an example :
Flex Side :
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script><![CDATA[
import flash.external.*;
public function callJavaScriptFunction():void {
var msg:String;
if (ExternalInterface.available) {
var _obj:Object = new Object();
_obj.fname = “Aava”;
_obj.lname = “Rani”;
_obj.familly = new Array(‘RP’,’AK’,’SK’,’BK’);
msg = ExternalInterface.call(‘receiveComplexDataTypes’, _obj);
} else {
msg = “Not available”;
}
}
]]></fx:Script>
<s:Button label=”Send Data” click=”callJavaScriptFunction()”/>
</s:Application>
HTML Side :-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>Complex Data and ExternalInterface Example</title>
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var swfVersionStr = “0”;
var xiSwfUrlStr = “”;
var flashvars = {};
var params = {};
params.quality = “high”;
params.bgcolor = “#ffffff”;
params.allowscriptaccess = “sameDomain”;
var attributes = {};
attributes.id = “ComplexDataExternalInterface”;
attributes.name = “ComplexDataExternalInterface”;
attributes.align = “middle”;
swfobject.embedSWF(
“ComplexDataExternalInterface.swf”, “flashContent”,
“100%”, “100%”,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
</script>
</head>
<SCRIPT LANGUAGE=”JavaScript”>
function receiveComplexDataTypes(object) {
var str = (“The Data values are :- ” + object.fname + ” \n and :-” + object.lname + “!”);
for (i=0; i<object.familly.length; i++) {
str +=  i + “: ” + object.familly [i] + “\n”;
}
alert(str);
return “successful”;
}
</SCRIPT>
<body>
<div id=”flashContent”/>
</body>

Here is an example :

Flex Side :

[xml]

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

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<fx:Script><![CDATA[

import flash.external.*;

public function callJavaScriptFunction():void {

var msg:String;

if (ExternalInterface.available) {

var _obj:Object = new Object();

_obj.fname = “Aava”;

_obj.lname = “Rani”;

_obj.familly = new Array(‘RP’,’AK’,’SK’,’BK’);

msg = ExternalInterface.call(‘receiveComplexDataTypes’, _obj);

} else {

msg = “Not available”;

}

}

]]></fx:Script>

<s:Button label=”Send Data” click=”callJavaScriptFunction()”/>

</s:Application>

[/xml]

HTML Side :-

[xml]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>

<title>Complex Data and ExternalInterface Example</title>

<script type=”text/javascript” src=”swfobject.js”></script>

<script type=”text/javascript”>

var swfVersionStr = “0”;

var xiSwfUrlStr = “”;

var flashvars = {};

var params = {};

params.quality = “high”;

params.bgcolor = “#ffffff”;

params.allowscriptaccess = “sameDomain”;

var attributes = {};

attributes.id = “ComplexDataExternalInterface”;

attributes.name = “ComplexDataExternalInterface”;

attributes.align = “middle”;

swfobject.embedSWF(

“ComplexDataExternalInterface.swf”, “flashContent”,

“100%”, “100%”,

swfVersionStr, xiSwfUrlStr,

flashvars, params, attributes);

</script>

</head>

<SCRIPT LANGUAGE=”JavaScript”>

function receiveComplexDataTypes(object) {

var str = (“The Data values are :- ” + object.fname + ” \n and :-” + object.lname + “!”);

for (i=0; i<object.familly.length; i++) {

str +=  i + “: ” + object.familly [i] + “\n”;

}

alert(str);

return “successful”;

}

</SCRIPT>

<body>

<div id=”flashContent”/>

</body>

[/xml]

Tags: , , , , , , , ,

How to transfer complex data to JavaScript using External Interface ?

November 4th, 2011 by aabhaanjan

Here is an example :
Flex Side :
[java]
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script><![CDATA[
import flash.external.*;

public function callJavaScriptFunction():void {
var msg:String;
if (ExternalInterface.available) {
var _obj:Object = new Object();
_obj.fname = “Aava”;
_obj.lname = “Rani”;
msg = ExternalInterface.call(‘receiveComplexDataTypes’, _obj);
} else {
msg = “Not available”;
}
}
]]></fx:Script>

<s:Button label=”Send Data” click=”callJavaScriptFunction()”/>

</s:Application>
[/java]
HTML Side :-
[xml]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>Complex Data and ExternalInterface Example</title>
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var swfVersionStr = “0”;
var xiSwfUrlStr = “”;
var flashvars = {};
var params = {};
params.quality = “high”;
params.bgcolor = “#ffffff”;
params.allowscriptaccess = “sameDomain”;
var attributes = {};
attributes.id = “ComplexDataExternalInterface”;
attributes.name = “ComplexDataExternalInterface”;
attributes.align = “middle”;
swfobject.embedSWF(
“ComplexDataExternalInterface.swf”, “flashContent”,
“100%”, “100%”,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
</script>
</head>

<SCRIPT LANGUAGE=”JavaScript”>
function receiveComplexDataTypes(object) {
alert(“The Data values are :- ” + object.fname + ” \n and :-” + object.lname + “!”);
return “successful”;
}
</SCRIPT>

<body>
<div id=”flashContent”/>
</body>
</html>
[/xml]

Tags: , , , , , , , , , ,

Using Cascading Style Sheets in Flex 4 or FB4

March 8th, 2011 by aabhaanjan

Cascading Style Sheets (CSS) : A style sheet is a collection of formatting rules for types of components or classes that include sets of components:

Differences in Flex between support of CSS and the CSS specification:

  1. Flex supports subclassing selectors.
  2. Flex supports a subset of the style properties that are available in CSS.
  3. Flex controls also have unique style properties that are not defined by the CSS specification.
  4. Flex controls only support styles that are defined by the current theme.
  5. Flex style sheets can define skins for controls using the Embed keyword.
  6. The CSS 3 wildcard namespace prefix syntax of *| that matches any namespace is not supported.
  7. The universal selector scoped to a particular CSS namespace is not supported. Namespaces are not known at runtime in Flex and as such the universal selector remains universal no matter what namespace it is scoped to in CSS.
  8. If you apply multiple class selectors to a component, the order of preference that the styles is applied is the order in which they appear in the styleName property’s space-delimited list, not the order in which they are defined in the CSS block or external style sheet.

Selector :  In CSS syntax, each declaration associates a style name, or selector, with one or more style properties and their values.

We can define multiple style properties in each selector by separating each property with a semicolon.

Example :

In this example   selector name is  myFontStyle:

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Style>

.myFontStyle {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

About selector names

When applying style properties with CSS in a <fx:Style> block or in an external style sheet, the best practice is to use camel-case without hyphens .

Important point * : However, Flex supports both the camel-case and hyphenated syntax in style sheets

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

.myFontStyle {

fontSize: 15; /* Note the camelCase. */

}

</fx:Style>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:Application>

[/xml]

Example :

[xml]

.myClass { … } /* Valid style name */

.my-class { … } /* Not a valid style name */

[/xml]

About namespaces in CSS

Why namespaces :

To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

For example, we can specify that a particular selector apply to all components in the Spark namespace only.

@namespace s “library://ns.adobe.com/flex/spark”;

Example :

[xml]

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

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:myComps=”*”

>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

s|Button {

fontSize:16;

}

mx|VBox {

color:red;

}

</fx:Style>

<mx:VBox>

<s:Button label=”Click Me, Too”/>

</mx:VBox>

</s:Application>

[/xml]

Important points :

1. The following are valid namespace directives in Flex 4 that refer to the manifests in the related SWC files:

library://ns.adobe.com/flex/spark

library://ns.adobe.com/flex/mx

2. If you do not use type selectors in your style sheets, then you are not required to use the @namespace rule.

3. You can also specify that a particular selector apply to mixed nested namespaces.

4. This is common if you are using descendant selectors.

5. You can exclude an identifier, in which case the declared namespace becomes the default namespace.

6. For custom components, you can define your own style namespace; that style namespace must match the component’s namespace.

For example, components in the myComponents package use the style namespace “myComponents.*”

Example :

[xml]

<?xml version=”1.0″?>

<!– styles/CustomComponentsNamespace.mxml –>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:comps=”myComponents.*”>

<fx:Style>

@namespace comps “myComponents.*”;

comps|MyButton {

color:green;

}

</fx:Style>

<comps:MyButton label=”Click Me”/>

</s:Application>

[/xml]

Style Array in MXML syntax and apply those values inline

February 2nd, 2011 by aabhaanjan

We can set the values of the Array in MXML syntax and apply those values inline.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Declarations>

<fx:Array id=”myDepthColors”>

<fx:Object>0xFFCC33</fx:Object>

<fx:Object>0xFFCC99</fx:Object>

<fx:Object>0xCC9900</fx:Object>

</fx:Array>

<fx:Array id=”myAlternatingRowColors”>

<fx:Object>red</fx:Object>

<fx:Object>green</fx:Object>

</fx:Array>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”Subnode 1″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

<node label=”Subnode 2″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Test” width=”50%”>

<mx:Tree id=”tree”

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”

depthColors=”{myDepthColors}”

alternatingItemColors=”{myAlternatingRowColors}”/>

</s:Panel>

</s:Application>

[/xml]

Tags: , ,

Defining Arrays for style properties using Action Script in Flex 4

February 2nd, 2011 by aabhaanjan

We can define the Array in AS by using a comma-separated list of values surrounded by braces.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”

creationComplete=”initApp()”

height=”500″>

<fx:Script>

<![CDATA[

public function initApp():void {

tree1.setStyle(“depthColors”,[0xFF3300, 0xFFCC99, 0xCC9900]);

tree1.setStyle(“alternatingItemColors”,[“red”, “green”]);

}

]]>

</fx:Script>

<fx:Declarations>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”subnode 1″>

<node label=”label 1″/>

<node label=”label 2″/>

<node label=”label 3″/>

</node>

<node label=”subnode 2″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Style Array using Action Script” width=”100%”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:Tree id=”tree1″

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”/>

<mx:Tree id=”tree2″

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”

depthColors=”[0xFFCC33, 0xFFCC99, 0xCC9900]”

alternatingItemColors=”[‘red’, ‘green’]”/>

</s:Panel>

</s:Application>

[/xml]

Tags: ,

Using Arrays for style properties of Tree component in Flex 4 or Flash Builder

February 1st, 2011 by aabhaanjan

By assigning colors to a property in an Array using comma-separated list to the property’s definition we can use array for style properties. The index is assigned to each entry in the order that it appears in the list.

Tree control’s depthColors style property can use a different background color for each level in the tree.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Style>

@namespace mx “library://ns.adobe.com/flex/mx”;

mx|Tree {

depthColors: #FF3300, #FFCC99, #CC9900;

}

</fx:Style>

<fx:Declarations>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”subnode1″>

<node label=”text1″/>

<node label=”text2″/>

<node label=”text3″/>

</node>

<node label=”subnode2″>

<node label=”text1″/>

<node label=”text2″/>

</node>

<node label=”text1″/>

<node label=”text2″/>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Style Using Array” width=”100%”>

<mx:Tree id=”myTree” width=”100%” labelField=”@label” dataProvider=”{treeData}”/>

[/xml]

Tags: ,