nonmodal Alert box in flex.

In flex by default the Alert box is modal ,so to set it to nonmodal we have to use a constant of Alert Class.

The constant is the third parameter in the Alert statement.And it would be,

Alert.NONMODAL

An Example is given which alerts in nonmodal.

<mx:Button x=”178″ y=”71″ label=”Submit” click=”alertMe()”/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function alertMe():void
{
Alert.show("kumar Gandhi","Non Modulas Alert",Alert.NONMODAL);
}
]]>
</mx:Script>

A simple alter and use of Alert Box.

Read data in to ArrayCollection.[using HttpService]

First the HttpService looks like this:

<mx:HTTPService id=”productlist” url=”product_list.php” useProxy=”false” showBusyCursor=”true” result=”readProducts(event)”/>

Now define the handler on result :

import mx.collections.ArrayCollection;

[Bindable]
private var prods:ArrayCollection = new ArrayCollection();

private function readProducts(event:ResultEvent):void
{
prods=(event.result.product.items);
}

and my PHP[product_list.php] page will output data like below:[just echo of each line]

<product>

<items>

<name>pen</name>

</items>

</product>

Now the AC variable prods has the data from PHP file[product_list.php].

Now u can give this prods as dataprovider to DataGrid.

Leave any comments for suggestions.

Note: The above post has been updated/corrected to improve readability.

call a function after few seconds using the method setTimeout().

In a Flex app if you want to call a function after sometime (in seconds or hours) you can use the method setTimeout().The below def shows the use.

setTimeout(getmyName,3000);

Here the method setTimeout() calls the function getmyName after 3 sec in the execution flow.i.e when the line setTimeout reaches in the excution flow then the execution flow calls the function getmyName after 3 sec as mentioned in the method.

The below code example explains the need.

import mx.managers.PopUpManager;
import flash.utils.setTimeout;
import mx.controls.Alert;
private var alert:Alert;
private function init():void
{
alert=Alert.show(“Hai”,”Kumar”);
setTimeout(hidealert,3000);
}
private function hidealert():void
{
PopUpManager.removePopUp(alert);
}

Here the function init() is called at creationComplete of the app.And it alerts and then waits for 3 sec and closes the Alert window as we are using the setTimeout method and calling a function to close the Alert using the PopUpManager class.

The method setTimeout() can used as our need in the app.leave any comments for suggestions.

Styles to DateField control.

The default style applied to the DateField control is OK but not upto the mark, we can edit this or change it using the property dateChooserStyleName of the DateField control.

The below code example will help you to define your  your own styles forDatField control.

<mx:DateField id=”dateField”
dateChooserStyleName=”subDateChooser” />

<mx:Style>
.subDateChooser {
backgroundColor: red;
color: white;
fontweight:bold
}
</mx:Style>

Nice property..!

Usable methods of DateField Class.

There are predefined methods for the Class DateField and they are very usefull when writing ur ActionScript.

For instance u want to know the day of the date you have mentioned in the date, this can be achevied by using the method getDate().For example the date is 28/12/2007 as below def.

private var date1=new Date();
date1=new Date(2007,11,28);

Now u want to know the day of that date variable date1.use the following line of code.

var d1=date1.getDate();

Now the variable d1 contains the day of the date variable date1.

similarly we can use the methods getMonth(),getYear(),getHours()[if u mention it in the date def],getMinutes() [if u mention it in the date def]….like that there are many methods i will come back with them later for instance have the following code.

private var date1=new Date();
private var date2=new Date();
private function init():void
{
date1=new Date(2007,11,28);
date2=new Date(2007,12,10);
}
private function show():void
{
var d1=date1.getDate();
var d2=date2.getDate();
Alert.show(” “+((30-d1)+(d2)),”SUM”);
}//similar for getmonth ,getyear, gethoures……..

<mx:Button label=”Button” click=”show()”/>

Here on click of button it alerts  the number of days in the given date range.

Similar code can be generated for other methods.

Usable properties of DateField control.

We can set year navigation of datafield control using the property yearNavigationEnabled and set it to true.

yearNavigationEnabled=”true”

And we can set the starting year in the datafield control using the property minYear and the  final year using the property maxYear, as below.

minYear=”2007″
maxYear=”2010″ 

With these properties the DateField control looks like this.

<mx:DateField id=”dateField”
yearNavigationEnabled=”true”
minYear=”2000″
maxYear=”2010″ />

Try it usable properties of DateField control.

Converting between dates and strings using the DateField class and methods in it,in Flex.

In DateField Class there are methods like dateToString() stringToDate() toDateString(). so by using these methods we can define our code.

First import the required package and class in it.

import mx.controls.DateField;

The following example explains the need:

var birthday:String = “16/10/1984″;

var birthdayDate:Date = DateField.stringToDate(birthday, “DD/MM/YYYY”);

labelbirthday.text=birthdayDate.toDateString();

<mx:Label id=”labelbirthday” />

Here first the string birthday is converted into Date using the method stringToDate() and then convert it into DateString using the method toDateString();.Thats all the label prints the birthday in string format as “Tue Oct 16 1984″.

Now its similar to convert a Date into String using the methos,dateToString().The below Example shows it.

var today:Date = new Date();

var todayString:String = DateField.dateToString(today, “DD/MM/YYYY”);
todayLabel.text = todayString;

Now the todayLabel get the today date in string.Thats it Enjoy the code.

Applying styles to a particular control.

Here let me explain with an example, suppose iam having 4 panels in a flex app of id panel1,panel2,panel3,panel4 and i want to apply style only to panel2,how would u do it.The answer is simple , for a control there is a property named styleName so by using this the problem will be solved.

Usually we apply styles as Internal or External with the control name as the specifier.This will apply style to all the controls of same specifier.This can be avoided with the property styleName property of the control.

<style>

panel

{

backGroundColor:#000000;

..

}

</style>

This will apply style to every panel in the flex app.

So using styleName:

In the control use the property  styleName and give a name as specefier or reference.As below.

<mx:Panel layout=”vertical” id=”leftpanel1″ left=”10″ right=”10″ bottom=”10″
styleName=”leftpanel” />

Now in the style tag use this stylename to define styles, it will apply only to that panel of stylename.

<mx:Style>
.leftpanel
{
borderColor: #000000;
borderAlpha: 0.69;
borderThickness: 1;
titleStyleName: “mypanelTitle1“;
}
.mypanelTitle1
{
color: #ffffff;
textAlign: center;
fontWeight: bold;
}
</mx:Style>

Now this Explains the need i hope.

Read Data from Database into DataGrid Control: PHP backend

As we know that flex app reads data in the form of XML, so we have to send data from PHP page in the form of XML.So that it can be embed into the datagrid control.

So the PHP page looks like this below, which generates XML lookslike data.

echo “<product>”;

echo “<items>”;
echo “<name1>”Kumar”</name>”;
echo “<name2>”Gandhi”</link>”;
echo “</items>”;

echo “</product>”;

Now in the flex app use HTTPService to get the data,like below.

<mx:HTTPService id=”productlist” url=”product_.php” useProxy=”false” showBusyCursor=”true” />

Now in the datagrid control use the dataprovider property to mention the httpservice id and in the datagridcolumn use the property datafield to the required field in to the column.

<mx:DataGrid x=”10″ y=”39″ height=”200″ id=”datagrid” dataProvider=”{productlist.lastResult.product.items}” >
<mx:columns>
<mx:DataGridColumn headerText=”FirstName” dataField=”name1″ visible=”true”/>
<mx:DataGridColumn headerText=”Last Name” dataField=”name2″ visible=”true”/>
</mx:columns>
</mx:DataGrid>

Applying styles to ToolTip.(Change the default style of ToolTip)

The default style of ToolTip is really dull,so we can change this by defining our own style.

This we can do by using inline or external styles, and use the properties in this to manupulate the styles.The below example shows a simple style applyed in External.

ToolTip {
backgroundColor: #000000;
color: #ffffff;
fontFamily: Arial Black;
fontSize: 12;
fontWeight: normal;
}

Now save the file as tooltip.css and include it in the flex app using the tag <style>

or define it in the <style> tag in the flex app itself. Now ur ToolTip styles are ready.

Explore with many more properties in ToolTip using the ToolTipmanager Class.

Changing the default dayname and monthname of the date control using DateBase Class

By default the day name of the date control in flex app is given as single letters as s m t w … for sunday monday …. but this looks pretty obvious, we can change this by using the DateBase class in the Flex.

There are properties like dayNamesShort, dayNamesLong in the datebase class we can use this to change the default values.

dayNamesShort will give out arraycollection of days in short form like :sun for sunday.

similarly for dayNamesLong will give out arraycollection of days in long form like :sunday for sunday. and soon.

Now the question is how to use those properties,its  simple and small and given below.

comboBox1.dataProvider = new ArrayCollection(DateBase.dayNamesShort);
comboBox2.dataProvider = new ArrayCollection(DateBase.dayNamesLong);

<mx:ComboBox id=”comboBox1″ />

<mx:ComboBox id=”comboBox2″ />

the above two comboboxes contain the day lists in short and long.

Now its similar to change default monthname using the properties,monthNamesShort

monthNamesLong and u can try with this.

getting FullScreen mode in Flex APP.

First thing here is that u have do is to mention the allowFullScreen property in the embed tag of ur Html page(wrapper), and set it to true.

allowFullScreen=”true”

and same thing in AC_FL_RunContent() method as

“allowFullScreen”, “true”

Now there is some code in the flex app we have to do.

1.import the required packages.

import flash.display.StageDisplayState;
import mx.managers.SystemManager;

2.Define a control on which u want to call the fullscreen option , here iam using button control.

<mx:Button label=”Alter-fullscreen” click=”toggleFullScreen()” x=”361″ y=”348″/>

3.Now define the function that mentioned in the button control to go to full screen.

private function toggleFullScreen():void

{
try
{
switch (systemManager.stage.displayState)
{
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
}

catch (err:SecurityError)
{
// ignore
}
}

Thats it, now when u click the button the window is set to fullscreen mode and viceversa.

Leave any comments for suggestions. this is how the fullscreen apperars.

Httpservice not refreshing : Cache control problem

The main point here is the Browser, Mozilla works, its creates new sessions and no cache problem, but when it comes to IE this problem persists, so simple solution is that we have to manually create sessions each time the script runs, and this is done by simply adding two lines of code in every PHP script page and those lines are given below.

<?php
session_start();
header(“Cache-control: private”);
?>

It will create a new session each time the script runs. Even when this won’t work put “no-store” in place of “private” in the header.Problem solved i guess.

Leave any comments for suggestions.

Bounce Effect to open and close combobox cox control.

Here we have to use a class Bounce and easing methods.

Before doing this import the needed package as below.

<mx:Script>
import mx.effects.easing.*;
</mx:Script>

Now we have to use the openEasingFunction ,closeEasingFunction , openDuration properties of the combobox to get our bounce effect.

<mx:ComboBox openEasingFunction=”{Bounce.easeOut}” openDuration=”1000″ closeEasingFunction=”{Bounce.easeIn}“></mx:ComboBox>

Now we have our bounce effect done,what r u waiting for try it.

To add Button to DataGrid Control column

To do this we have to use itemRenderer property of the column of the datagrid control.

Define a component of type HBox  and put a button with a image in it.( if u wanted ).

like the below code.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml”  horizontalAlign=”center”>
<mx:Button icon=”@Embed(source=’images/image1.png’)” id=”wordbtn”/>
</mx:HBox>

save it as dgimage.mxml.

now in the App  define a Datagrid control and in the datagridcolumn use itemRenderer property and mention the name of the component u difined which contains the button,here its “dgimage“.

and the code for the datagrid is given below.

<mx:DataGrid top=”35″ right=”5″ bottom=”5″ left=”5″ dataProvider=”{arrforms}” id=”datagrid”  itemClick=”itemClickEvent(event)” toolTip=”click to download form”>
<mx:columns>
<mx:DataGridColumn headerText=”S.no”  width=”35″ textAlign=”left”/>
<mx:DataGridColumn headerText=” name”  textAlign=”left”/>
<mx:DataGridColumn headerText=”button” itemRenderer=”dgimage” dataField=”IMAGE” width=”90″ textAlign=”left”/>
</mx:columns>
</mx:DataGrid>

Now the column with  headerText=”button” contains the button

Leave comments for suggestions