Changing background color of Textinput: using setStyle() method.

By default the background color of the Textinput is white and if u wanted to change it u can use the method like setStyle() with the Textinput refernce.

<Style>

.textinputStyle

{

textinput.setStyle(“backgroundColor”,”#00FF00″);

}

</Style>

include this style in textinput control, here textinput is the reference of Textinput

combobox open and close on button rollOver

In combobox class there are methods like open() and close(), so we can use these methods to open the combobox list and close the combobox list.Here iam doing it on button rollOver.

<mx:ComboBox id="comboBox"
            openDuration="2000"
            closeDuration="1000">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="one" />
                <mx:Object label="two" />
                <mx:Object label="three" />
                <mx:Object label="four" />
                <mx:Object label="five" />
                <mx:Object label="six" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

<mx:Button label="open"
                rollOver="comboBox.open();"  -- combobox class method open()

enabled="false" />
        <mx:Button label="close"
                rollOver="comboBox.close();"  -- combobox class method open()  

              enabled="false" /> 

using dynamic tooltip text

you can dynamically add text to your tooltip and its simple.

First get the text which u want to add to tooltip : here i want the textinput text

<mx:TextInput id=”txtmail” />  — this contains the text to add to tooltip

<mx:Button id=”btnmail” toolTip=”click to mail to{txtmail.text}” /> — here the tooltip appears when the user moves the mouse on to the button as “click to mail to {textinput text}

The text entered in the textinput will appear as the button tooltip dynamically.

Ex: if user enters kumar@yahoo.com in textinput and moves the mouse on to the button then the tooltip text will be click to mail to kumar@yahoo.com

Another approach to creating dynamic tooltip is to intercept the  ToolTip in its toolTipShow event handler and change the values of its text property. the below examples shows this.

public function initApp():void

{

b1.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myToolTipChanger)

}

public function myToolTipChanger(event:ToolTipEvent):void

{

ToolTipManager.currentToolTip.text = “Click the button buttom to login”;

}

and the button is

<mx:Button id=”b1″ label=”Click Me” />

so this is how u dynamically add text to tooltip.

Properties of RichTextEditor

I come across the RTE and its properties and i need only the editor not the control bar and status bar, so i discovered that there are two properties namely showControlBar and status

and setting it false with disable the bars and donot show them ,this is cool, now my RTE contains only the editor.

 showControlBar=”false”  status=”false”

  here u can see that there is no controbar and status bar.

Count the rows in list (or) number of List items

Providing the dataprovider to the list will bring up the list items.

<mx:List height=”120″  id=”searchlist”
dataProvider=”{sendsearch.lastResult.search.type}” labelField=”name”>

here in above example the data comes from the httpservice, sendsearch is the Id of the httpservice , and reading the data from php page.

Now to count the number of rows fetched to the list and avilable in the list we have to use the property called length.

{searchlist.dataProvider.length} — this will give length of the list (rows).

Html Pages on the Flex application : “importing a html page to flex”

Html pages on the flex application : “importing a html page to flex app”
Importing a html page from a server or through database is a easy job with some upgradation of the html page generated by the flex application.
Here we can use a concept of IFrame’s ,persons who has basic knowledge of html knows it.
At first i want to import a google page in to my flex application than i start the code like this.

1.define a iframe component in flex of type canvas, it contains get and set methods which are used to set and get the source of the html page, and
other methods for moving the iframe and soure set.here we use ExternalInterface.
The code any iframe is similar to that of below one.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
resize=”callLater(moveIFrame)”
move=”callLater(moveIFrame)”>

<mx:Script>
<![CDATA[

import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;

private var __source: String;

/**
* Move iframe through ExternalInterface. The location is determined using localToGlobal()
* on a Point in the Canvas.
**/
private function moveIFrame(): void
{

var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}

/**
* The source URL for the IFrame. When set, the URL is loaded through ExternalInterface.
**/
public function set source(source: String): void
{
if (source)
{

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.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
moveIFrame();
}
}

public function get source(): String
{
return __source;
}

/**
* Whether the IFrame is visible.
**/
override public function set visible(visible: Boolean): void
{
super.visible=visible;

if (visible)
{
ExternalInterface.call("showIFrame");
}
else
{
ExternalInterface.call("hideIFrame");
}
}

]]>
</mx:Script>

</mx:Canvas>

2.now upgrading the generated html files of ur flex application.For example if u create ur project as IFrameDemo than the html page is IFramDemo.html in the bin folder ( Iam spoon feeding i think ) and another html file is IFrameDemo-debug.html in bin folder and another html file index.template.html in html-template folder.
so these three html files u have to make changes(Note: these file are generated on creation of project no need to create again).
The three changes u have to make in these three html files is
1. wmode set to opaque at AC_FL_RunContent(); mehtod and in <object> tag
2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods including in the script tag
3. the ‘myFrame’ div adding at the bottom
the code for secound point:

<script language=”JavaScript” type=”text/javascript”>

// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;

function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById(“myFrame”);
frameRef.style.left=x;
frameRef.style.top=y;
var iFrameRef=document.getElementById(“myIFrame”);
iFrameRef.width=w;
iFrameRef.height=h;
}

function hideIFrame(){
document.getElementById(“myFrame”).style.visibility=”hidden”;
}

function showIFrame(){
document.getElementById(“myFrame”).style.visibility=”visible”;
}

function loadIFrame(url){
document.getElementById(“myFrame”).innerHTML = “<iframe id=’myIFrame’ src=’” + url + “‘frameborder=’0′></iframe>”;
}

</script>

the code for 3rd point div tag:

<div id=”myFrame” style=”position:absolute;background-color:transparent;border:0px;visibility:hidden;”></div> at bottom of the page
Note:
these changes in all the three html pages

3.including the iframe component at the application

<mx:Panel width=”100%” height=”100%” title=”Content Pane” paddingTop=”1″ paddingBottom=”1″ paddingLeft=”1″ paddingRight=”1″ >
<mx:Canvas width=”100%” height=”100%”>
<IFrame id=”iFrame” x=”0″ y=”0″ width=”100%” height=”100%” >
</IFrame>
</mx:Canvas>

in script tag put iFrame.source=”www.google.com/”; to view the result. it displays google page at the flex application.

As u can see the below inamge the panel contains an iframe where my html pages resides

Namespace Tip in writing ur tags in flex

In flex the default namespace given to tags is mx as u can see it preceeds every tag in flex as the image shows below
the highlited content “mx”.

what if u want to change it and give ur own namespace : ok i will tell u how to do that its simple.
change it give it k in place of “mx” thats it its done now as u can see the tags changes.cool tip

Refer Object of Parent App using ParentApplication

Applications can load other applications; therefore, you can have a hierarchy of applications, similar to the hierarchy of documents within each application. Every UIComponent class has a parentApplication read-only property that references the Application object in which the object exists. The parentApplication property of an Application object is never itself; it is either the Application object into which it was loaded, or it is null (for the Application object).

Walking the application chain by using the parentApplication property is similar to walking the document chain by using the parentDocument property.

Ex:

parentApplication.viewstack1.selectedIndex=1

  this line of code is in a child component like titlewindow and viewstack1 is the reference of viewstack in App(parent)

livedragging property to update the layouts of Divider box (H || V)

To update the layouts of its children by a hdivider or vdivider  when the user dragging the divider we use livedragging property of the divider control.
By default the container disables this property.
You can configure the DividedBox container to use live dragging by setting the liveDragging property to true. With live dragging enabled, the DividedBox container updates its layout as the user moves a divider. In some cases, you may encounter decreased performance if you enable live dragging.

Hope this will help out

To show handcursor on a control in flex app

by default there is no handcursor on any  control there is an arrow , but to set the handcursor we have to use two properties here they are
useHandcursor and buttonMode they are of type Boolean , u can see them at the tags itself, so to set it make the values of both the properties as true.
Thats it now u can see the handcursor.

this is set only for a particular control , so set it individually for every control if wanted.

useHandcursor=”true” buttonMode=”true”

To access column’s of a datagrid control. catch the column click and item of that click

Naturally we go for accessing an item in a row from which we can’t tell  which column it is being accessed, so for accessing a column in DG control we have to use columnIndex property of a ListEvent.

To see this in action first call a function on itemclick with the property itemClick  and the function “itemClickEvent(event)” (itemClick=”itemClickEvent(event)”);

Now define the function with the ListEvent
private function itemClickEvent(event:ListEvent):void
{
if(event.columnIndex==0)
{
— here we can catch the click of 1st column
}
else if(event.columnIndex==1)
{
— here we can catch the click of  2nd column
}
}

now u can use datagrid.selectedItem.datafieldname   to get the item of that particular column

To expand tree items on doubleclick of Node

There are two properties to mention here itemDoubleClick , doubleClickEnabled . In itemDoubleClick property call a function with event like the below
itemDoubleClick=”tree_itemDoubleClick(event);
and in secound property doubleClickEnabled=”true”

Now write some code to expand the tree on click of node in the function.
private function tree_itemDoubleClick(evt:ListEvent):void   — here as u can see the event is ListEvent and u have import events package
import mx.events.ListEvent;

in the function
{
var node:XML = treeID.selectedItem as XML;      — this will get the node
var isOpen:Boolean = treeID.isItemOpen(node);    — this will check tree is opened or not
treeID.expandItem(node, !isOpen);                         — this will expand the tree if not and close if opened (viceversa)
}

Now on double of tree node that respected node will expand.

call a flex app function from javascript or wrapper html page

To call a function in flex app from java script or html wrapper we need to use a function of ExternalIntrface API the function name is addCallback()
the syntax of the function is given below
ExternalInterface.addCallback(“getarg”,myFunction);
here  myFunction is the function which is called when an instance is returned from the JS i’e “getarg”
this statement should be in public function of flex app
and the function we call myFunction should also be public.
Example:
public funciton init():void
{
ExternalInterface.addCallback(“getarg”,myFunction);
}

public function myFunction(s1:String):void
{
var s:String=new String();
s=s1;
Alert.show(” “+s,”Title”);
}

The above lines of code are for flex app, Now to raise the function myFunction from wrapper page we have to include the following lines of statements
<body onload=’callEx()’>
<script …..>
function callEx()
{
mymxml.getarg(document.title);
}

here the mymxml is the “name” and “id” of the <Object> and <Embed> tags by default they are created but we have to change to give them periods as they don’t have periods.now when the body loads the function callEx() is called and title of the page is passed to the flex page there we are getting it in a string and Alert it.
thats it calling a function from the JS.

Mailing in flex using javascript function : mailto

Mailing in flex app using javascript functions: the first thing here is that u should know that there is a function “mailto” with parameter e-ID, then its simple include it the URLRequest and call navigatoURL method to raise the function. as shown below

private function mailme():void
{
var u:URLRequest = new URLRequest(“mailto:” + ti1.text);
navigateToURL(u,”_self”);
}

<mx:TextInput id=”ti1″/>   — this contains the e-ID and the button to call mailme()
<mx:Button click=”mailme()”/>

thats all it will raise a outlook express dialog and with e-ID.

To print a page in FLEX using javascript functions

To print the current page in flex its a simple app i will tell u how to do it.
The method used navigateTOURL() and class used URLRequest and a package used flash.net

first put a button control to call the function to print page. like shown below

<mx:Button id=”b1″ click=”printpagecall(event)” label=”print Me”/>

import the package flash.net.*;

define the function as shown below

public function printpagecall(e:Event):void {
var u:URLRequest = new URLRequest(“javascript:printpage()”);  —> calling a function defined in html wrapper in script tag
navigateToURL(u,”_self”);
}

now define the function printpage() in the html wrapper as shown below
<script lan………> in script tag
function printpage()
{
window.print();———> this will raise a dialog box  to print
}