Selvakumar p's Blog

September 23, 2009

windows theme in flex

Filed under: FLEX — selvakumar p @ 2:49 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundColor=”#EBF9FD” creationComplete=”init()” backgroundImage=”@Embed(source=’images/background_example.jpg’)”>
<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.effects.Fade;
import mx.effects.Iris;
import mx.effects.WipeUp;
public var status:int=new int();
public var ostatus:int=new int();
public var opstat:Boolean=new Boolean();
import mx.formatters.DateFormatter;
private var ticker:Timer;
[Bindable] private var time:String;

public function showTime():void
{
var timeFormat:DateFormatter = new DateFormatter;
timeFormat.formatString = “HH:NN:SS”
var currentTime:Date = new Date();
time=timeFormat.format(currentTime);
ticker = new Timer(1,1);
ticker.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);
ticker.start();
}

public function onTimerComplete(event:TimerEvent):void{
showTime();
ti.text=time;
}

private function init():void
{
opstat=false;
resw.visible=false;
posv.visible=false;
hkv.visible=false;
mainv.visible=false;
start.addEventListener(MouseEvent.CLICK,sta);
fov.visible=false;
this.addEventListener(MouseEvent.CLICK,outclick);
fov.addEventListener(MouseEvent.MOUSE_OVER,visib);
fol.addEventListener(MouseEvent.MOUSE_OVER,setstat);
posl.addEventListener(MouseEvent.MOUSE_OVER,setstat);
hkl.addEventListener(MouseEvent.MOUSE_OVER,setstat);
mal.addEventListener(MouseEvent.MOUSE_OVER,setstat);
resl.addEventListener(MouseEvent.CLICK,open);
}
private function open(ev:MouseEvent):void
{
var ir:Iris=new Iris();
ir.duration=1000;
ir.target=resw;
resw.visible=true;
ir.play();
}
private function sta(e:MouseEvent):void
{
e.stopPropagation();
show();
}
private function outclick(ev:MouseEvent):void
{

mainv.visible=false;
fov.visible=false;
hkv.visible=false;
posv.visible=false;

}
private function visib(ev:Event):void
{

ev.currentTarget.visible=true;
}
private function setstat(event:Event):void
{
if(event.currentTarget.id==”fol”)
{
status=1;
show();
}
else if(event.currentTarget.id==”posl”)
{
status=2;
show();
}
else if(event.currentTarget.id==”hkl”)
{
status=3;
show();
}
else if(event.currentTarget.id==”mal”)
{
status=4;
show();
}
}
private function show():void
{
mainv.visible=true;
var wip:WipeUp=new WipeUp();
if(status==0)
{

wip.target=mainv;
}
else if(status==1)
{
fov.visible=true;
posv.visible=false;
hkv.visible=false;
status=0;
wip.target=fov;

}
else if(status==2)
{
fov.visible=false;
posv.visible=true;
hkv.visible=false;
status=0;
wip.target=posv;
}
else if(status==3)
{
fov.visible=false;
posv.visible=false;
hkv.visible=true;
status=0;
wip.target=hkv;
}
wip.play();
}
private function close():void
{
var fa:Fade=new Fade();
fa.alphaTo=0;
fa.duration=1500;
fa.target=resw;
fa.addEventListener(EffectEvent.EFFECT_END,vifal);
fa.play();

}
private function vifal(e:EffectEvent):void
{
resw.visible=false;
resw.alpha=1;
}

]]>
</mx:Script>
<mx:ApplicationControlBar x=”10″ y=”558″ width=”780″ height=”32″>
<mx:Button  id=”start” label=”START” borderColor=”#05572D” themeColor=”#A22A2A” fontAntiAliasType=”advanced” focusRoundedCorners=”true”/>
<mx:HBox width=”627″>
</mx:HBox>
<mx:Label color=”#F3EAEA” id=”ti” fontWeight=”bold” creationComplete=”showTime()” width=”60″/>
</mx:ApplicationControlBar>
<mx:ApplicationControlBar x=”10″ y=”10″ width=”780″ height=”120″>
</mx:ApplicationControlBar>
<mx:VBox id=”mainv” x=”10″ y=”343″ height=”178″ width=”131″ visible=”false”>
<mx:ApplicationControlBar width=”128″ color=”#F35C11″ barColor=”#F21C1C”>
<mx:Text text=”start” width=”101″ fontStyle=”italic” fontWeight=”bold” color=”#E8113A” fontThickness=”20″ fontSize=”14″/>
</mx:ApplicationControlBar>
<mx:LinkButton id=”fol” label=”Office  &gt;&gt;” width=”125″ textAlign=”center” rollOverColor=”#F17E7E” color=”#E3EEF4″/>
<mx:LinkButton id=”posl” label=”les  &gt;&gt;” width=”126″ textAlign=”center” color=”#E3EEF4″/>
<mx:LinkButton id=”hkl” label=”House” textAlign=”center” rollOverColor=”#F17E7E” color=”#E3EEF4″/>
<mx:LinkButton id=”mal” label=”ters” textAlign=”center” color=”#E3EEF4″/>
</mx:VBox>
<mx:VBox id=”fov” x=”136″ y=”287″ height=”152″ width=”121″ visible=”false”>
<mx:ApplicationControlBar width=”119″ height=”30″>
<mx:Text text=”Office” width=”100″ color=”#E8113A” fontWeight=”bold” textAlign=”center”/>
</mx:ApplicationControlBar>
<mx:LinkButton id=”resl” label=”Reservation ” width=”115″ color=”#E3EEF4″/>
<mx:LinkButton label=”tion” width=”114″ color=”#E3EEF4″/>
<mx:LinkButton label=”tings” width=”115″ color=”#E3EEF4″/>
<mx:LinkButton label=”ters” width=”116″ color=”#E3EEF4″/>
</mx:VBox>
<mx:VBox id=”posv” x=”136″ y=”287″ height=”158″ width=”132″ visible=”false”>
<mx:ApplicationControlBar width=”128″ height=”30″>
<mx:Text text=”LES” width=”100″ color=”#E8113A” fontWeight=”bold” textAlign=”center”/>
</mx:ApplicationControlBar>
<mx:LinkButton label=”ING” width=”126″ color=”#F2EBEB” height=”28″/>
<mx:LinkButton label=”RS” width=”128″ color=”#F2EBEB”/>
<mx:LinkButton label=”EM” width=”127″ color=”#F2EBEB”/>
<mx:LinkButton label=”ERS” width=”127″ color=”#F2EBEB”/>
</mx:VBox>
<mx:VBox id=”hkv” x=”136″ y=”287″ height=”158″ width=”132″ visible=”false”>
<mx:ApplicationControlBar width=”128″ height=”30″>
<mx:Text text=”ING” width=”100″ color=”#E8113A” fontWeight=”bold” textAlign=”center”/>
</mx:ApplicationControlBar>
<mx:LinkButton label=”MENT” width=”126″ color=”#F2EBEB” height=”28″/>
<mx:LinkButton label=”ING” width=”128″ color=”#F2EBEB”/>
<mx:LinkButton label=”DRY” width=”127″ color=”#F2EBEB”/>
<mx:LinkButton label=”ERS” width=”127″ color=”#F2EBEB”/>
</mx:VBox>
<mx:VBox id=”resw” x=”381″ y=”138″ height=”412″ width=”391″ visible=”false”>
<mx:Canvas width=”385″ height=”404″>
<mx:Image x=”22″ y=”41″ width=”253″ height=”139″ source=”images/venice_hotel_reservation.jpg” id=”resim”/>
<mx:VBox x=”22″ y=”188″ height=”198″ width=”155″ borderStyle=”inset”>
<mx:LinkButton label=”ION” color=”#F9EFEF”/>
<mx:LinkButton label=”N” width=”146″ color=”#F9EFEF”/>
<mx:LinkButton label=”ODIFY” width=”148″ color=”#F9EFEF”/>
<mx:LinkButton label=”RNCEL” width=”147″ color=”#F9EFEF”/>
<mx:LinkButton label=”RSE” width=”147″ color=”#F9EFEF”/>
<mx:LinkButton label=”R” width=”150″ color=”#F9EFEF”/>
<mx:LinkButton label=”REOWS” color=”#F9EFEF” width=”148″/>
</mx:VBox>
<mx:VBox x=”198″ y=”188″ height=”198″ width=”163″ borderStyle=”inset”>
<mx:LinkButton label=”SHAILS” width=”156″ color=”#F9EFEF”/>
<mx:LinkButton label=”EXTAY” color=”#F9EFEF” width=”156″/>
<mx:LinkButton label=”ROMENT” width=”156″ color=”#F9EFEF”/>
<mx:LinkButton label=”ADAYMENT” width=”157″ color=”#F9EFEF”/>
<mx:LinkButton label=”ADEL” width=”157″ color=”#F9EFEF”/>
<mx:LinkButton label=”REUIRY” width=”159″ color=”#F9EFEF”/>
<mx:LinkButton label=”RELEASE” height=”21″ width=”151″ color=”#F9EFEF”/>
</mx:VBox>
<mx:ApplicationControlBar width=”374″ x=”0″ y=”0″>
<mx:Text text=”RESION” width=”284″ fontWeight=”bold” color=”#281317″/>
<mx:Button label=”[]” width=”26″ textAlign=”left”/>
<mx:Button  id=”clo” label=”X” width=”31″ click=”close()”/>
</mx:ApplicationControlBar>
</mx:Canvas>
</mx:VBox>
<mx:VBox x=”361″ y=”138″ height=”373″ width=”300″ visible=”false”>
<mx:ApplicationControlBar width=”299″>
<mx:Label text=”RETION” color=”#520921″ fontWeight=”bold”/>
</mx:ApplicationControlBar>
<mx:Canvas width=”295″ height=”334″>
</mx:Canvas>
</mx:VBox>
</mx:Application>

dont bother about the menus . just lookat the format. and also note the time running in task bar .

for downloading
http://www.box.net/shared/k6×7l07fl8

September 22, 2009

ADDING AND DELETING CONTROLS DYNAMICALLY

Filed under: FLEX — selvakumar p @ 3:09 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”>
<mx:Style>

</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.controls.Text;
import mx.effects.WipeDown;
import mx.effects.WipeUp;
import mx.collections.ArrayCollection;
import mx.events.EffectEvent;
import mx.effects.Resize;
import mx.effects.Move;
import mx.controls.Alert;
public var mo:Move=new Move();
[Bindable]
public var redata:Array=new Array();
public var selob:Array=new Array();
public var nwob:Array=new Array();
public var repda:Array=new Array();
public var addctl:Array=new Array();
public var caddctl:Array=new Array();
public var faddctl:Array=new Array();
public var count:int=new int();
public var fcount:int=new int();
public var ccount:int=new int();
public var cli:int=new int();
public var style:CSSStyleDeclaration = new CSSStyleDeclaration();
[Bindable]
public var arrc:ArrayCollection=new ArrayCollection(repda);
public var mco:int=new int();
private function rep(event:Event):void
{
if(cli==0)
{
hre.visible=true;
cli++;
}
else if(cli==1)
{
hre0.visible=true;
cli++;
}
else if(cli==2)
{
hre3.visible=true;
cli++;
}
event.currentTarget.visible=false;

}
private function inlisten():void
{
plus.addEventListener(MouseEvent.CLICK,rep);
plus0.addEventListener(MouseEvent.CLICK,rep);
plus1.addEventListener(MouseEvent.CLICK,rep);
plus2.addEventListener(MouseEvent.CLICK,rep);
}
private function init():void
{
tab.addEventListener(IndexChangedEvent.CHANGE,chng);
style.setStyle( “fontWeight”, “bold” );
style.setStyle( “text-transform”, “capitalize” );
StyleManager.setStyleDeclaration( “Text”, style, false );
addre.addEventListener(MouseEvent.CLICK,add);
addnw.addEventListener(MouseEvent.CLICK,adnw);
min.addEventListener(MouseEvent.CLICK,mini);
var eff:WipeUp=new WipeUp()
eff.xFrom=10;
eff.yFrom=664;
eff.yTo=26;
eff.target=perpa;
eff.duration=2000;
eff.play();
}
private function chng(event:IndexChangedEvent):void
{
if(tab.selectedIndex==2)
{
var ftre:Resize=new Resize();
ftre.target=tab;
ftre.widthTo=809;
ftre.heightTo=411;
ftre.play();
var fre:Resize=new Resize();
fre.target=perpa;
fre.widthTo=876;
fre.play();
}
else
{

remin();

}
}
private function mini(event:Event):void
{

var cmo:Move=new Move();
cmo.xTo=653;
cmo.yTo=0;
cmo.target=cpan;
cmo.addEventListener(EffectEvent.EFFECT_END,eff);
cmo.play();
var cre:Resize=new Resize();
cre.heightFrom=493;
cre.heightTo=66;
cre.widthTo=371;
cre.target=cpan;
cre.play();

}
private function adnw(event:Event):void
{
var x:int=44;
var y:int=30;
var ycou:int=0;
var cycou:int=0;
var fycou:int=0;
if(typ.selectedIndex==0)
{
var hc:HBox=new HBox();
var nt:Text=new Text();
var nti:TextInput=new TextInput() ;
hc.width=230;
nt.width=110;
nt.text=nwtex.text;
nti.width=110;
hc.addChild(nt);
hc.addEventListener(KeyboardEvent.KEY_DOWN,del);
hc.label=nwtex.text;
if(count==0)
{
hc.x=10;
hc.y=338;

}
else
{
hc.x=addctl[count-1].x+x;
ycou++;

if(ycou!=0)
{
hc.y=addctl[count-1].y+y;
hc.x=10;
ycou=0;
}
}
hc.addChild(nti);
pcan.addChild(hc);
addctl.push(hc);
count++;

}
else if(typ.selectedIndex==1)
{

var chc:HBox=new HBox();
var cnt:Text=new Text();
var cnti:TextInput=new TextInput() ;
chc.addEventListener(KeyboardEvent.KEY_DOWN,del);
chc.label=nwtex.text;
cnt.width=120;
cnt.text=nwtex.text;
cnti.width=110;
chc.addChild(cnt);
chc.addEventListener(KeyboardEvent.KEY_DOWN,del);
if(ccount==0)
{
chc.x=10;
chc.y=345;

}
else
{
chc.x=caddctl[ccount-1].x+x;
cycou++;
if(cycou!=0)
{
chc.y=caddctl[ccount-1].y+y;
chc.x=10;
cycou=0;
}
}
chc.addChild(cnti);
ccan.addChild(chc);
caddctl.push(chc);
ccount++;

}
else if(typ.selectedIndex==2)
{

Alert.show(typ.selectedIndex.toString());
var fhc:HBox=new HBox();
var fnt:Text=new Text();
var fnti:TextInput=new TextInput() ;
fhc.addEventListener(KeyboardEvent.KEY_DOWN,del);
fhc.label=nwtex.text;
fnt.width=50;
fnt.text=nwtex.text;
fnti.width=100;
fhc.addEventListener(KeyboardEvent.KEY_DOWN,del);
fhc.addChild(fnt);
if(fcount==0)
{
fhc.x=10;
fhc.y=420;
fcount++;
}
else
{
fhc.x=faddctl[fcount-1].x+x;
fycou++;
if(fycou!=0)
{
fhc.y=faddctl[fcount-1].y+y;
fhc.x=10;
fycou=0;
}
}
fhc.addChild(fnti);
fcan.addChild(fhc);
faddctl.push(fhc);
ccount++;

}

}
private function add(event:Event):void
{
selob[li.selectedIndex].visible=true;
redata.splice(li.selectedIndex,1);
li.dataProvider=redata;
if(redata.length==0)
{
while(selob.length!=0)
selob.pop();
}

}
private function del(event:KeyboardEvent):void
{
if(event.keyCode.toString()==”46″)
{
event.currentTarget.visible=false;
selob.push(event.currentTarget);
redata.push(event.currentTarget.label);
li.dataProvider=redata;
}

}
private function remin():void
{
var re:Resize=new Resize();
re.target=perpa;
re.widthTo=588;
re.play();
var tre:Resize=new Resize();
tre.target=tab;
tre.widthTo=533;
tre.heightTo=411;
tre.play();

}
private function eff(event:EffectEvent):void
{
if(mco==0)
{
remin();
var rz:Resize=new Resize();
rz.heightTo=500;
rz.widthTo=371;
rz.target=cpan;
rz.play();
mco++;
}
else if(mco>0)
{
var rre:Resize=new Resize();
rre.target=perpa;
rre.widthTo=876;
rre.play();
var rtre:Resize=new Resize();
rtre.target=tab;
rtre.widthTo=809;
rtre.heightTo=411;
rtre.play();
mco=0;
}
}
private function movef():void
{
mo.target=cpan;
mo.xTo=620;
mo.yTo=21;
mo.addEventListener(EffectEvent.EFFECT_END,eff);
mo.play();
}
]]>
</mx:Script>
<mx:MenuBar id=”myMenuBar” labelField=”@label” enabled=”false”>
<mx:XMLList>
<menuitem label=”Home”>
<menuitem label=”SubMenuItem A-1″ enabled=”true”/>
<menuitem label=”SubMenuItem A-2″/>
</menuitem>
<menuitem label=”MenuItem B”/>
<menuitem label=”MenuItem C”/>
<menuitem label=”MenuItem D”>
<menuitem label=”SubMenuItem D-1″
type=”radio” groupName=”one”/>
<menuitem label=”SubMenuItem D-2″
type=”radio” groupName=”one”
selected=”true”/>
<menuitem label=”SubMenuItem D-3″
type=”radio” groupName=”one”/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>

<mx:Panel  id=”perpa” x=”10″ y=”40″ width=”876″ height=”497″ layout=”absolute” title=”USER DETAILS” buttonMode=”true”>
<mx:TabNavigator  id=”tab” x=”25″ y=”30″ width=”809″ height=”411″ horizontalAlign=”left”>
<mx:Canvas id=”pcan” label=”PERSONAL DETAILS” width=”100%” height=”100%”>
<mx:Text x=”10″ y=”44″ text=”NAME*” width=”48″ fontWeight=”bold”/>
<mx:TextInput x=”119″ y=”40″ width=”122″/>
<mx:Text x=”119″ y=”14″ text=”First name”/>
<mx:TextInput x=”249″ y=”40″ width=”113″/>
<mx:Text x=”249″ y=”14″ text=”Middle name”/>
<mx:TextInput x=”370″ y=”40″ width=”129″/>
<mx:Text x=”370″ y=”14″ text=”Last name”/>
<mx:Text x=”12″ y=”72″ text=”D.O.B*” fontWeight=”bold”/>
<mx:DateField x=”119″ y=”70″ width=”100″/>
<mx:ComboBox x=”119″ y=”106″ width=”100″>
<mx:ArrayCollection>
<mx:String>Single</mx:String>
<mx:String>Married</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Text x=”10″ y=”108″ text=”MARITAL STATUS” fontWeight=”bold”/>
<mx:Text x=”10″ y=”148″ text=”SEX” fontWeight=”bold”/>
<mx:ComboBox x=”119″ y=”146″ width=”100″>
<mx:ArrayCollection>
<mx:String>Male</mx:String>
<mx:String>Female</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Text text=”ADDRESS” fontWeight=”bold” x=”249″ y=”74″/>
<mx:TextArea x=”328″ y=”73″ width=”151″ height=”71″/>
<mx:Text x=”251″ y=”242″ text=”PIN” fontWeight=”bold”/>
<mx:TextInput x=”328″ y=”240″ width=”151″/>
<mx:TextInput x=”328″ y=”157″ width=”151″/>
<mx:TextInput x=”328″ y=”212″ width=”151″/>
<mx:Text x=”251″ y=”214″ text=”COUNTRY” fontWeight=”bold” height=”20″/>
<mx:HBox id=”conby” x=”10″ y=”203″ width=”230″ label=”contact by”>
<mx:Text text=”CONTACT BY” fontWeight=”bold” width=”103″/>
<mx:TextInput width=”110″/>
</mx:HBox>
<mx:HBox id=”mob” x=”251″ y=”269″ width=”228″ height=”27″ label=”mobile”>
<mx:Text text=”MOBILE” fontWeight=”bold” width=”70″/>
<mx:TextInput width=”149″/>
</mx:HBox>
<mx:HBox id=”lan” x=”10″ y=”233″ width=”230″ height=”27″ label=”landline”>
<mx:Text text=”LANDLINE1″ fontWeight=”bold” width=”106″/>
<mx:TextInput width=”108″/>
</mx:HBox>
<mx:HBox id=”fax” x=”251″ y=”304″ width=”230″ height=”26″ label=”fax”>
<mx:Text text=”FAX” fontWeight=”bold” width=”71″/>
<mx:TextInput width=”148″/>
</mx:HBox>
<mx:Text x=”259″ y=”159″ text=”CITY” fontWeight=”bold” height=”20″/>
<mx:Text x=”251″ y=”187″ text=”STATE” fontWeight=”bold” height=”20″/>
<mx:TextInput x=”328″ y=”185″ width=”151″/>
<mx:HBox id=”lan0″ x=”10″ y=”268″ width=”230″ height=”27″ label=”landline”>
<mx:Text text=”LANDLINE2″ fontWeight=”bold” width=”106″/>
<mx:TextInput width=”108″/>
</mx:HBox>
<mx:HBox id=”lan1″ x=”10″ y=”303″ width=”230″ height=”27″ label=”landline”>
<mx:Text text=”EMAIL” fontWeight=”bold” width=”106″/>
<mx:TextInput width=”108″/>
</mx:HBox>
</mx:Canvas>
<mx:Canvas id=”ccan” label=”COMPANY DETAILS” width=”100%” height=”100%”>
<mx:Text x=”10″ y=”44″ text=”COMPANY NAME” width=”105″ fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”42″/>
<mx:Text x=”10″ y=”79″ text=”PROFESSION” fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”77″/>
<mx:Text x=”10″ y=”120″ text=”DESIGNATION” fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”118″/>
<mx:Text x=”10″ y=”160″ text=”ADDRESS” fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”223″/>
<mx:TextArea x=”138″ y=”148″ height=”67″/>
<mx:Text x=”18″ y=”227″ text=”CITY” fontWeight=”bold”/>
<mx:Text x=”18″ y=”257″ text=”STATE” fontWeight=”bold”/>
<mx:Text x=”315″ y=”44″ text=”MOBILE” fontWeight=”bold”/>
<mx:TextInput x=”393″ y=”42″ width=”122″/>
<mx:Text x=”315″ y=”77″ text=”LANDLINE1″ fontWeight=”bold”/>
<mx:TextInput x=”393″ y=”75″ width=”122″/>
<mx:Text x=”315″ y=”147″ text=”FAX” fontWeight=”bold”/>
<mx:TextInput x=”393″ y=”145″ width=”122″/>
<mx:Text x=”315″ y=”185″ text=”EMAIL” fontWeight=”bold”/>
<mx:TextInput x=”393″ y=”183″ width=”122″/>
<mx:Text x=”315″ y=”107″ text=”LANDLINE2″ fontWeight=”bold”/>
<mx:TextInput x=”394″ y=”105″ width=”122″/>
<mx:TextInput x=”138″ y=”253″/>
<mx:Text x=”18″ y=”285″ text=”COUNTRY” fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”283″/>
<mx:Text x=”18″ y=”320″ text=”PIN” fontWeight=”bold”/>
<mx:TextInput x=”138″ y=”318″/>
</mx:Canvas>
<mx:Canvas  id=”fcan” label=”FAMILY DETAILS” width=”100%” height=”100%” creationComplete=”inlisten()”>
<mx:Text x=”26″ y=”58″ text=”SPOUSE NAME” fontWeight=”bold”/>
<mx:Text x=”121″ y=”24″ text=”First name”/>
<mx:Text x=”251″ y=”24″ text=”Middle name”/>
<mx:Text x=”372″ y=”24″ text=”Last name”/>
<mx:TextInput x=”121″ y=”50″ width=”122″/>
<mx:TextInput x=”251″ y=”50″ width=”113″/>
<mx:TextInput x=”372″ y=”50″ width=”129″/>
<mx:Text x=”26″ y=”84″ text=”D.O.B*” fontWeight=”bold”/>
<mx:DateField x=”121″ y=”82″ width=”114″/>
<mx:Text x=”26″ y=”110″ text=”ANNIVERSARY” fontWeight=”bold” height=”20″/>
<mx:DateField x=”121″ y=”112″ width=”110″/>
<mx:Text x=”26″ y=”170″ text=”KID NAME” fontWeight=”bold”/>
<mx:TextInput x=”121″ y=”168″ width=”122″/>
<mx:TextInput x=”251″ y=”168″ width=”113″/>
<mx:TextInput x=”372″ y=”168″ width=”129″/>
<mx:Text x=”121″ y=”142″ text=”First name”/>
<mx:Text x=”251″ y=”142″ text=”Middle name”/>
<mx:Text x=”372″ y=”142″ text=”Last name”/>
<mx:Text x=”509″ y=”170″ text=”KID D.O.B*” fontWeight=”bold”/>
<mx:DateField x=”589″ y=”170″ width=”114″/>
<mx:Button x=”711″ y=”170″ label=”+” width=”42″ id=”plus”/>
<mx:HBox id=”hre” x=”26″ y=”210″ width=”771″ visible=”false” height=”24″>
<mx:Text text=”KID NAME” fontWeight=”bold” width=”86″/>
<mx:TextInput  width=”122″/>
<mx:TextInput width=”113″/>
<mx:TextInput width=”129″/>
<mx:Text text=”KID D.O.B*” fontWeight=”bold” width=”74″/>
<mx:DateField width=”121″/>
<mx:Button label=”+” width=”42″ id=”plus0″ />
</mx:HBox>
<mx:HBox id=”hre0″ x=”26″ y=”242″ width=”771″ visible=”false” height=”22″>
<mx:Text text=”KID NAME” fontWeight=”bold” width=”88″/>
<mx:TextInput  width=”122″/>
<mx:TextInput width=”113″/>
<mx:TextInput width=”129″/>
<mx:Text text=”KID D.O.B*” fontWeight=”bold” width=”74″/>
<mx:DateField width=”121″/>
<mx:Button label=”+” width=”42″ id=”plus1″/>
</mx:HBox>
<mx:HBox id=”hre3″ x=”26″ y=”281″ width=”771″ visible=”false” height=”25″>
<mx:Text text=”KID NAME” fontWeight=”bold” width=”89″/>
<mx:TextInput  width=”122″/>
<mx:TextInput width=”113″/>
<mx:TextInput width=”129″/>
<mx:Text text=”KID D.O.B*” fontWeight=”bold” width=”75″/>
<mx:DateField width=”121″/>
<mx:Button label=”+” width=”42″ id=”plus2″/>
</mx:HBox>
</mx:Canvas>
</mx:TabNavigator>
</mx:Panel>
<mx:Panel id=”cpan” x=”653″ y=”0″ width=”371″ height=”66″ layout=”absolute” title=”control panel “>
<mx:Text x=”24″ y=”25″ text=”FIELDS” fontWeight=”bold”/>
<mx:Text x=”24″ y=”204″ text=”REMOVED FIELDS” fontWeight=”bold”/>
<mx:List id=”li” x=”24″ y=”230″ width=”98″ height=”100″ dataProvider=”{redata}”></mx:List>
<mx:Button id=”addre” x=”130″ y=”241″ label=”&lt;&lt;ADD”/>
<mx:Text x=”10″ y=”36″ text=”ADDING NEW FIELDS” fontWeight=”bold”/>
<mx:Text x=”24″ y=”80″ text=”ENTER FIELD NAME”/>
<mx:TextInput id=”nwtex” x=”149″ y=”78″ width=”95″/>
<mx:Button id=”addnw” x=”149″ y=”168″ label=”&lt;&lt;ADD”/>
<mx:Text x=”24″ y=”124″ text=”DETAILS TYPE” fontWeight=”normal”/>
<mx:ComboBox id=”typ” x=”149″ y=”122″ width=”178″>
<mx:ArrayCollection>
<mx:String>Personal Details</mx:String>
<mx:String>Company Details</mx:String>
<mx:String>Family Details</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Button id=”min” label=”minimize” x=”274″ y=”0″/>
<mx:Button x=”179″ y=”0″ label=”maximize” click=”movef()”/>

</mx:Panel>
</mx:Application>

FOR DOWNLOADING

http://www.box.net/shared/ppmuafl72h

DASHBOARD

Filed under: Uncategorized — selvakumar p @ 3:03 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundColor=”#F6FFFD” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.effects.Move;
import mx.effects.Rotate;
import mx.effects.Resize;
import mx.containers.Panel;
import mx.effects.Iris;
import mx.effects.easing.Circular;
import mx.controls.Alert;
public var sta:int=new int();
private function init():void
{
fo.addEventListener(MouseEvent.CLICK,setsta);
pos.addEventListener(MouseEvent.CLICK,setsta);
hk.addEventListener(MouseEvent.CLICK,setsta);
ma.addEventListener(MouseEvent.CLICK,setsta);
fop.visible=false;
fop.height=28;
fop.width=250;
fop.x=400;
fop.y=106
pop.visible=false;
pop.height=28;
pop.width=250;
pop.x=412;
pop.y=106;
hkp.visible=false;
hkp.height=28;
hkp.width=250;
hkp.x=412;
hkp.y=106;
map.visible=false;
map.height=28;
map.width=250;
map.x=412;
map.y=106;

}
private function setsta(event:Event):void
{
if(event.currentTarget.id=="fo")
{
sta=1;
dropdw(sta);
}
else if(event.currentTarget.id=="pos")
{
sta=2;
dropdw(sta);
}
else if(event.currentTarget.id=="hk")
{
sta=3;
dropdw(sta);

}
else if(event.currentTarget.id=="ma")
{
sta=4;
dropdw(sta);

}

}
private function dropdw(stat:int):void
{
var mo1:Resize=new Resize();
var mo2:Parallel=new Parallel();
mo1.heightTo=393;
if(stat==1)
{
init();
fop.visible=true;
mo1.target=fop;
mo2.target=fop;
}
else if(stat==2)
{
init();
pop.visible=true;
mo1.target=pop;
mo2.target=pop;
}
else if(stat==3)
{
init();
hkp.visible=true;
mo1.target=hkp;
mo2.target=hkp;
}
else if(stat==4)
{
init();
map.visible=true;
mo1.target=map;
mo2.target=map;
}
mo1.play();
var rot:Rotate=new Rotate();
rot.angleTo=360;
var mov:Move=new Move();
mov.xTo=10;
mov.yTo=146;
mo2.addChild(rot);
mo2.addChild(mov);
mo2.play();

}
private function buteff():void
{
var ir:Iris=new Iris();
ir.target=fo;
ir.duration=2000;
fo.visible=true;
ir.play();
var pir:Iris=new Iris();
pir.target=pos;
pir.duration=2000;
pos.visible=true;
pir.play();
var hir:Iris=new Iris();
hir.target=hk;
hk.visible=true;
hir.duration=2000;
hir.play();
var mir:Iris=new Iris();
hir.target=ma;
ma.visible=true;
hir.duration=2000;
hir.play();
var qir:Iris=new Iris();
hir.target=qu;
qu.visible=true;
hir.duration=2000;
hir.play();
}
]]>
</mx:Script>
<mx:Text creationCompleteEffect=”efp” x=”44″ y=”41″ text=”#xa;  CRM” width=”221″ height=”83″ fontStyle=”italic” fontSize=”30″ color=”#2C99B4″/>
<mx:Parallel id=”efp”>
<mx:Iris duration=”2000″ >
</mx:Iris>
<mx:Glow color=”red” repeatCount=”0″ blurXTo=”10″ blurYTo=”5″ alphaFrom=”0″ alphaTo=”1″ duration=”1000″>
</mx:Glow>
</mx:Parallel>
<mx:ApplicationControlBar x=”297″ y=”41″ width=”548″ height=”57″ creationCompleteEffect=”wipd” >
<mx:Button id=”fo” label=”FRONT OFFICE” visible=”false”/>
<mx:Button id=”pos” label=”POINT OF SALES” visible=”false”/>
<mx:Button id=”hk” label=”HOUSE KEEPING” visible=”false”/>
<mx:Button id=”ma” label=”MASTERS” visible=”false”/>
<mx:Button id=”qu” label=”QUIT” visible=”false”/>
</mx:ApplicationControlBar>
<mx:WipeDown id=”wipd” duration=”2000″ effectEnd=”buteff()”>
</mx:WipeDown>
<mx:HBox x=”10″ y=”738″ width=”100%” backgroundColor=”#26127D”>
<mx:Text text=”ALL RIGHTS RESERVED BY CELERIS @ 2009″ width=”100%” color=”#F7EFEF” textAlign=”center”/>
</mx:HBox>
<mx:Panel id=”fop” x=”154″ y=”106″ width=”250″ height=”391″ layout=”absolute” title=”FRONT OFFICE” visible=”true”>
<mx:VBox x=”29″ y=”20″ height=”324″ width=”172″ borderColor=”#D4CDEC” borderStyle=”inset”>
<mx:LinkButton width=”164″ height=”30″ label=”RESERVATION”/>
<mx:LinkButton label=”RECEPTION” width=”165″/>
<mx:LinkButton label=”POSTINGS” width=”165″/>
<mx:LinkButton label=”MASTER” width=”165″/>
<mx:LinkButton label=”SYSTEM” width=”164″/>
<mx:LinkButton label=”QUIT” width=”166″/>
</mx:VBox>
</mx:Panel>
<mx:Panel id=”pop” x=”412″ y=”106″ width=”250″ height=”28″ layout=”absolute” title=”POINT OF SALES”>
</mx:Panel>
<mx:Panel id=”hkp” x=”670″ y=”112″ width=”178″ height=”22″ layout=”absolute” title=”HOUSE KEEPING” visible=”false”>
</mx:Panel>
<mx:Panel id=”map” x=”670″ y=”106″ width=”250″ height=”38″ layout=”absolute” title=”MASTERS”>
</mx:Panel>
</mx:Application>

FOR VIEWING:

http://www.box.net/shared/63vs4ceyon

August 10, 2009

poll

Filed under: FLEX — selvakumar p @ 6:03 am

July 23, 2009

fun editor inflex

Filed under: FLEX — selvakumar p @ 8:44 am
Tags:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
public var ar:Array=new Array();
public var ar2:Array=new Array();
public var count:int;
public var j:int;
public var len:int;
public var kcount:int;
private function init2():void
{
count=0;
kcount=0;
j=1;
len=0;
len=ar.length+ar2.length;
}
private function init():void
{
count=0;
kcount=0;
j=0;
len=0;
pan.visible=true;
ric.visible=false;
tx.addEventListener(KeyboardEvent.KEY_DOWN,inp);
ric.textArea.editable=false;
ric.textArea.addEventListener(KeyboardEvent.KEY_UP,chg);
ar2.push(" ");
ar2.push("i");
ar2.push("s");
ar2.push(" ");
ar2.push("a");
ar2.push(" ");
ar2.push("f");
ar2.push("o");
ar2.push("o");
ar2.push("l");
ar2.push(" ");
}
private function handlealert(event:CloseEvent):void
{
if(event.detail==Alert.CANCEL)
{
exit();
}
else
{
ric.visible=false;
}
exi.visible=false;
}
private function exit():void
{
Alert.okLabel="sure";
Alert.cancelLabel="noway";
Alert.show("R U SURE U R A FOOL??",null,Alert.OK|Alert.CANCEL,this,handlealert);
}
private function chg(event:KeyboardEvent):void
{
kcount++;
if(count<ar.length)
{
ric.textArea.text=ric.textArea.text+ar[count];
count++;
}
else if(kcount!=len)
{
ric.textArea.text=ric.textArea.text+ar2[j];
j++;
}
if(kcount==len)
{
init2();
}
event.updateAfterEvent();
}
private function ex():void
{
var str:String;
pan.visible=false;
ric.visible=true;
ar.push(” “);
exi.visible=true;
len=ar.length+ar2.length;
}
private function inp(event:KeyboardEvent):void
{
ar.push(String.fromCharCode(event.charCode));
}
]]>
</mx:Script>
<mx:Panel id=”pan” x=”151″ y=”144″ width=”250″ height=”200″ layout=”absolute” title=”LOGIN” visible=”false”>
<mx:Label x=”10″ y=”33″ text=”enter ur name”/>
<mx:Button x=”70″ y=”94″ label=”Button” click=”ex()”/>
<mx:TextInput id=”tx” x=”103″ y=”31″ width=”117″/>
</mx:Panel>
<mx:RichTextEditor x=”0″ y=”0″ title=”ENTER ANY TEXT” id=”ric” height=”100%” width=”100%” >
</mx:RichTextEditor>
<mx:Button x=”800″ y=”570″ label=”exit” id=”exi” click=”exit()” visible=”false”/>
</mx:Application>

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

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”>

<mx:Script>

<![CDATA[

import mx.events.CloseEvent;

import mx.controls.Alert;

public var ar:Array=new Array();

public var ar2:Array=new Array();

public var count:int;

public var j:int;

public var len:int;

public var kcount:int;

private function init2():void

{

count=0;

kcount=0;

j=1;

len=0;

len=ar.length+ar2.length;

}

private function init():void

{

count=0;

kcount=0;

j=0;

len=0;

pan.visible=true;

ric.visible=false;

tx.addEventListener(KeyboardEvent.KEY_DOWN,inp);

ric.textArea.editable=false;

ric.textArea.addEventListener(KeyboardEvent.KEY_UP,chg);

ar2.push(" ");

ar2.push("i");

ar2.push("s");

ar2.push(" ");

ar2.push("a");

ar2.push(" ");

ar2.push("f");

ar2.push("o");

ar2.push("o");

ar2.push("l");

ar2.push(" ");

}

private function handlealert(event:CloseEvent):void

{

if(event.detail==Alert.CANCEL)

{

exit();

}

else

{

ric.visible=false;

}

exi.visible=false;

}

private function exit():void

{

Alert.okLabel="sure";

Alert.cancelLabel="noway";

Alert.show("R U SURE U R A FOOL??",null,Alert.OK|Alert.CANCEL,this,handlealert);

}

private function chg(event:KeyboardEvent):void

{

kcount++;

if(count<ar.length)

{

ric.textArea.text=ric.textArea.text+ar[count];

count++;

}

else if(kcount!=len)

{

ric.textArea.text=ric.textArea.text+ar2[j];

j++;

}

if(kcount==len)

{

init2();

}

event.updateAfterEvent();

}

private function ex():void

{

var str:String;

pan.visible=false;

ric.visible=true;

ar.push(” “);

exi.visible=true;

len=ar.length+ar2.length;

}

private function inp(event:KeyboardEvent):void

{

ar.push(String.fromCharCode(event.charCode));

}

]]>

</mx:Script>

<mx:Panel id=”pan” x=”151″ y=”144″ width=”250″ height=”200″ layout=”absolute” title=”LOGIN” visible=”false”>

<mx:Label x=”10″ y=”33″ text=”enter ur name”/>

<mx:Button x=”70″ y=”94″ label=”Button” click=”ex()”/>

<mx:TextInput id=”tx” x=”103″ y=”31″ width=”117″/>

</mx:Panel>

<mx:RichTextEditor x=”0″ y=”0″ title=”ENTER ANY TEXT” id=”ric” height=”100%” width=”100%” >

</mx:RichTextEditor>

<mx:Button x=”800″ y=”570″ label=”exit” id=”exi” click=”exit()” visible=”false”/>

</mx:Application>

I WILL GET THE USER NAME THROGH MY LOGIN PANEL TEXT BOX AND PUSH THE INPUT IN TO THE ARRAY AR.
THEN IN THE RICH TEXT EDITOR I HAVE THE KEY UP LISTENER FUNCTION WHICH WOULD PRINT “USER NAME ” “IS A FOOL”
I HAVE A EXIT BUTTON WHICH WHEN CLICKED EXECUTES THE EXIT()
FUNCTION .
IN THE EXIT() FUNCTION I CUSTOMIZED THE ALERT BOX TO HAVE A SURE BUTTON AND NOWAY BUTTON WITH THE FOLLOWING CODE
Alert.okLabel=”sure”;
Alert.cancelLabel=”noway”;
Alert.show(“R U SURE U R A FOOL??”,null,Alert.OK|Alert.CANCEL,this,handlealert);
I HAVE ADDED A LISTENER FOR ALERT BUTTON WHICH WILL EXECUTE THE HANDLE ALERT  FUNCTION WHEN CLICKED.
IN THE HANDLEALERT FUNCTION I HAVE CHECKED WHETHER THE EVENT IS FROM OK BUTTON THEN  I HAVE PROCEEDED ACCORDINGLY.

FOR DOWNLOADING IT:

http://www.box.net/shared/9nngn1l0tn

July 6, 2009

Handling multiple events of same type with one event handler

Filed under: FLEX — selvakumar p @ 6:24 am
Tags:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” height=”388″ creationComplete=”initApp()”>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.ItemClickEvent;
import flash.events.Event;
import mx.controls.Alert;
private var s:String="";
private var u:String="";
private var c:String="";
private function initApp():void{
b.addEventListener(MouseEvent.CLICK,sub);
}
public function le(event:Event):void
{
if(event.currentTarget.toString()=="newpro0.li")
{
c=li.selectedItem.toString();
}
if(event.currentTarget.toString()=="newpro0.co")
{
u=co.selectedItem.toString();
}
}
public function reve(event:ItemClickEvent):void
{
s=SEX.selectedValue.toString();
}
public function sub(e:MouseEvent):void
{
tx.text="name:"+nam.text+"\nsex:"+s+"\nU.G:"+u+"\nspecialization:"+c;
lb3;
}
]]>
</mx:Script>
<mx:Label x=”70″ y=”35″ text=”NAME” width=”43″/>
<mx:TextInput id=”nam” x=”143″ y=”33″/>
<mx:Label id=”se” x=”70″ y=”95″ text=”SEX” width=”43″/>
<mx:RadioButtonGroup id=”SEX” itemClick=”reve(event);”/>
<mx:RadioButton x=”143″ y=”86″ value=”male” label=”MALE” groupName=”SEX”/>
<mx:RadioButton x=”143″ y=”112″ value=”female” label=”FEMALE” groupName=”SEX”/>
<mx:ComboBox change=”le(event)” id=”co”  x=”143″ y=”153″>
<mx:ArrayCollection>
<mx:String>BE</mx:String>
<mx:String>BSC</mx:String>
<mx:String>BCOM</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:Label x=”70″ y=”155″ text=”U.G”/>
<mx:List   change=”le(event)” id=”li” x=”143″ y=”194″ width=”118″ height=”71″>
<mx:dataProvider>
<mx:String >cse</mx:String >
<mx:String>it</mx:String>
<mx:String>ece</mx:String>
</mx:dataProvider>
</mx:List>
<mx:Label x=”24″ y=”213″ text=”SPECIALIZATION”/>
<mx:Button id=”b” x=”345″ y=”243″ label=”submit” />
<mx:TextArea id=”tx” x=”143″ y=”302″ height=”76″/>
<mx:Label id=”lb3″ x=”47″ y=”324″ text=”Label”/>
</mx:Application>

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

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” height=”388″ creationComplete=”initApp()”>

<mx:Script>

<![CDATA[

import mx.events.ListEvent;

import mx.events.ItemClickEvent;

import flash.events.Event;

import mx.controls.Alert;

private var s:String="";

private var u:String="";

private var c:String="";

private function initApp():void{

b.addEventListener(MouseEvent.CLICK,sub);

}

public function le(event:Event):void

{

if(event.currentTarget.toString()=="newpro0.li")

{

c=li.selectedItem.toString();

}

if(event.currentTarget.toString()=="newpro0.co")

{

u=co.selectedItem.toString();

}

}

public function reve(event:ItemClickEvent):void

{

s=SEX.selectedValue.toString();

}

public function sub(e:MouseEvent):void

{

tx.text="name:"+nam.text+"\nsex:"+s+"\nU.G:"+u+"\nspecialization:"+c;

lb3;

}

]]>

</mx:Script>

<mx:Label x=”70″ y=”35″ text=”NAME” width=”43″/>

<mx:TextInput id=”nam” x=”143″ y=”33″/>

<mx:Label id=”se” x=”70″ y=”95″ text=”SEX” width=”43″/>

<mx:RadioButtonGroup id=”SEX” itemClick=”reve(event);”/>

<mx:RadioButton x=”143″ y=”86″ value=”male” label=”MALE” groupName=”SEX”/>

<mx:RadioButton x=”143″ y=”112″ value=”female” label=”FEMALE” groupName=”SEX”/>

<mx:ComboBox change=”le(event)” id=”co”  x=”143″ y=”153″>

<mx:ArrayCollection>

<mx:String>BE</mx:String>

<mx:String>BSC</mx:String>

<mx:String>BCOM</mx:String>

</mx:ArrayCollection>

</mx:ComboBox>

<mx:Label x=”70″ y=”155″ text=”U.G”/>

<mx:List   change=”le(event)” id=”li” x=”143″ y=”194″ width=”118″ height=”71″>

<mx:dataProvider>

<mx:String >cse</mx:String >

<mx:String>it</mx:String>

<mx:String>ece</mx:String>

</mx:dataProvider>

</mx:List>

<mx:Label x=”24″ y=”213″ text=”SPECIALIZATION”/>

<mx:Button id=”b” x=”345″ y=”243″ label=”submit” />

<mx:TextArea id=”tx” x=”143″ y=”302″ height=”76″/>

<mx:Label id=”lb3″ x=”47″ y=”324″ text=”Label”/>

</mx:Application>

In this code u can see that both the combo box and the list are using the change event dispatcher which call the function le()
In the le() function see the line
if(event.currentTarget.toString()==”newpro0.co”)
which will check at which object the event was targetted
here newppro0 is thew name of the project, that is the class and co is the combobox  object so the code inside the if will be executed if the event was targetted at the combo box else it will check with the list box whether it was the target and execute the prescribed code.thus handling two controls events in a single function

July 3, 2009

ADDING NUMBERS WITH CHARACTERS

Filed under: C PROGRAMMING — selvakumar p @ 5:44 am
Tags:

void main()
{
char ch[10];
printf(“enter:”);
gets(ch);
printf(“\n%c”,(*ch+1));
}

output:
enter:APPLE
B
can’t understand just go through the explanation….

if u enter “APPLE” in to the array ch then (*ch+1) will first add the number
one with the first character of the array (actually the ascii value of the character) hence here
when one is added with the ascii value of ‘A’ produces the next character ‘B’ which is the output.

June 30, 2009

web widgets

Filed under: WEB2.O — selvakumar p @ 7:20 am
Tags:

web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets include: gadget, badge, module, webjit, capsule, snippet, mini and flake. Web widgets usually but not always use DHTMLJavaScript, or Adobe Flash.

Widgets often take the form of on-screen tools (clocks, event countdowns, auction-tickers, stock market tickers, flight arrival information, daily weather etc).

A widget is anything that can be embedded within a page of HTML, i.e. a web page. A widget adds some content to that page that is not static. Generally widgets are originated by third parties, though they can be home made. Embeddable chunks of code have existed since the early development of the World Wide Web. Web developers have long sought and used third party code chunks in their pages. Early web widgets provided functions such as link counters and advertising banners.

Blog at WordPress.com.