How to Insert Text over the Image in datagrid ItemRenderer in flex

step 1: create mxml file like :

<!–

–>

step 2: create ItemRenderer component in flex/actionscript

file name: ImageComponent.mxml

<![CDATA[

import mx.controls.Label;
import mx.controls.Alert;
import mx.controls.*;

[Bindable]
public var val:Number;

[Bindable]
public var srcImg:String ;

public function init():void
{
var temp:Label=new Label();
temp.htmlText="

“+val + “%

“;
temp.setActualSize(200,100);
if(srcImg != “Yellow.jpg”)
temp.setStyle(“color”,”white”);
else
temp.setStyle(“color”,”black”);
temp.setStyle(“fontWeight”,12);
img.addChildAt(temp,1);
var num:Number=(img.width/2-15);
var num1:Number=(img.height/2-5);
temp.move(num,num1);
}

]]>

Step 3 :Create Remote Object and Set bean Properties

/**
@author: Ashoka bhat
This is the main class for all other Files
*/

package mtnu;
/*
import javax.servlet.*;
import javax.servlet.http.*;
import javax.naming.*;
*/

import java.util.*;
import java.sql.*;
import java.lang.Integer;
import java.text.DecimalFormat;
import java.io.FileInputStream;
import java.io.*;
import java.text.*;

public class CEOSummary
{

public DBConnection dbCon;
public Connection c;
public List finallist ;

public List arrList;

public List arrListBullet ;
public List arrListSpark ;

public Vector columnTypeCategorical;
public Vector columnTypeNumeric;

public String strCatFields=””;
public String strNumFields=””;

public void ConnectDatabase()
{
dbCon = new DBConnection();
dbCon.ConnectDB();
c = dbCon.conn;
}

/**
@param -Query String
@return -array List
*/
public List Summary(String Query)
{
try {
ConnectDatabase();
finallist = new ArrayList();
String sql = “”;
Statement deptStmt = null;
ResultSet deptRS = null;
deptStmt = c.createStatement();
String deptSql = Query;
deptRS = deptStmt.executeQuery(deptSql);

while(deptRS.next())
{
CEOSummaryBean ceosum = new CEOSummaryBean();
long condYoy;
long condBdg;
ceosum.setMetric(deptRS.getString(2));
condYoy = deptRS.getLong(3);
condBdg = deptRS.getLong(4);
System.out.println(“YOY”+deptRS.getLong(3));
System.out.println(“BDG”+deptRS.getLong(4));
//if(condYoy >= 0){
ceosum.setYoy(deptRS.getLong(3));
//}

//if(condBdg >= 0){
ceosum.setBdg(deptRS.getLong(4));
//}

//ceosum.setComment(deptRS.getString(5));

if(condYoy >=0 )
{
ceosum.setYoysignal(“Green.jpg”);
}else if(condYoy 0 )
{
ceosum.setBdgsignal(“Green.jpg”);
}else if(condBdg < 0 )
{
ceosum.setBdgsignal("Red.jpg");
}else if(condBdg == 0 )
{
ceosum.setBdgsignal("Yellow.jpg");
}

//System.out.println(""+deptRS.getString(1));
finallist.add(ceosum);
}
//c.close();
}
catch (SQLException se)
{
System.out.println("Couldn't Connect to Database:"+se);
se.printStackTrace();
}
catch(Exception exe)
{
System.out.println("Error:"+exe);
}
return finallist;
}

}

Create Bean File for Respective Java file

package mtnu;

/**
@author: Ashoka Bhat
Date : 16-aug -2010
*/

public class CEOSummaryBean
{
private String metric;
private long yoy;
private long bdg;
private String comment;
private String yoysignal;
private String bdgsignal;

public String getMetric() {
return metric;
}
public void setMetric(String metric) {
this.metric = metric;
}

public long getYoy() {
return yoy;
}
public void setYoy(long yoy) {
this.yoy = yoy;
}

public long getBdg() {
return bdg;
}
public void setBdg(long bdg) {
this.bdg = bdg;
}

public String getYoysignal() {
return yoysignal;
}
public void setYoysignal(String yoysignal) {
this.yoysignal = yoysignal;
}

public String getBdgsignal() {
return bdgsignal;
}
public void setBdgsignal(String bdgsignal) {
this.bdgsignal = bdgsignal;
}

public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}

}

Step 4 :Blaze_ds Settings

mtnu.CEOSummary
application

Step 5: Compile java files

Step 6: Compile MXML file

Step 7: Restart Apache Tomcat server

Step 8: Open the Application in Browser

About ashokabhat

I am a C,C ,JAVA,Adobe Flex,.NET Programmer Currently working as a Software Developer
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s