using dynamic tooltip text

December 18, 2007

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

December 18, 2007

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”

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


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

December 18, 2007

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”

December 18, 2007

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&#8221;
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 = “”;
}

</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%”>

</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 resideshtml.jpeg


Namespace Tip in writing ur tags in flex

December 18, 2007

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”.names.jpeg

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

December 18, 2007

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)

December 18, 2007

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


Follow

Get every new post delivered to your Inbox.