flex 簡(jiǎn)單例子(含實(shí)例效果圖 源碼)
更新時(shí)間:2009年09月29日 17:16:27 作者:
要過節(jié)了,工作任務(wù)也完成了,閑來沒事,研究svg,感覺市場(chǎng)上對(duì)svg支持度不高,導(dǎo)致了這項(xiàng)技術(shù)不能夠被IT群眾充分的接納,一個(gè)沒有人支持的技術(shù),她必然也不會(huì)有很大的前景。研究來研究去,還是覺得flex比較好玩。
溫故而知新,簡(jiǎn)簡(jiǎn)單單的寫了一個(gè)例子。以后會(huì)在注圖形化處理方面多寫些例子.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top" applicationComplete="init()">
<mx:Script>
<!--[CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public var dataColl:ArrayCollection=new ArrayCollection();
//ID編號(hào)
var k=1;
//聯(lián)系人對(duì)象
var userobj:Object;
//性別默認(rèn)狀態(tài)
var sexobj:String="男";
//右鍵刪除菜單
var menucont:ContextMenu;
//初始化行數(shù)
var p:int=0;
public function init():void{
menucont=new ContextMenu();
addMenuItems();
}
//添加右鍵菜單項(xiàng)
public function addMenuItems():void{
var item:ContextMenuItem = new ContextMenuItem("刪除");
menucont.customItems.push(item);
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
menucont.hideBuiltInItems();
userdata.contextMenu = menucont;
}
//菜單右鍵事件處理
public function menuItemHandler(event:ContextMenuEvent):void{
var CaptionString:String=event.target.caption;
if(CaptionString=="刪除"){
//確定鼠標(biāo)所在行數(shù)
var findex:Number = Math.floor(userdata.contentMouseY/userdata.rowHeight)-1 + userdata.verticalScrollPosition;
if (findex<0 || findex>=userdata.verticalScrollPosition+userdata.rowCount-1) //行號(hào)小于0時(shí)和大于datagrid行總數(shù)時(shí)的 錯(cuò)誤處理
{
Alert.show("請(qǐng)選擇要?jiǎng)h除的行","提示");
} else {
p=findex;
dataColl.removeItemAt(p);
Alert.show("刪除成功","提示");
}
}
}
public function checkuser(event:MouseEvent):void{
var gname=uname.text;
var gphone=uphone.text;
if(gname!="" && gphone!=""){
dataprovider();
}else{
Alert.show("請(qǐng)輸入用戶名或電話號(hào)碼","提示");
}
}
//單選按鈕觸發(fā)事件
public function changsex(event:ItemClickEvent):void{
if(event.currentTarget.selectedValue=="f"){
sexobj= "女";
}else{
sexobj= "男";
}
}
//重置
public function resetvalue(event:MouseEvent):void{
uname.text="";
uphone.text="";
male.selected=true;
}
//創(chuàng)建聯(lián)系人信息
public function dataprovider():Object{
userobj=new Object();
userobj["uid"]=k;
userobj["uname"]=uname.text;
userobj["uphone"]=uphone.text;
userobj["usex"]=sexobj;
dataColl.addItem(userobj);
k++;
return userobj;
}
]]-->
</mx:Script>
<mx:Form>
<mx:Text text="聯(lián)系簿" fontWeight="bold" fontSize="14" textAlign="center" width="233" color="#1B78C6"/>
<mx:FormItem label="姓名" fontSize="12" fontWeight="bold" horizontalAlign="left">
<mx:TextInput id="uname"/>
</mx:FormItem>
<mx:RadioButtonGroup id="sexgroup" itemClick="changsex(event)"/>
<mx:FormItem label="性別" horizontalAlign="center" fontSize="12" fontWeight="bold">
<mx:HBox>
<mx:RadioButton id="male" label="男性" groupName="sexgroup" selected="true" value="m"/>
<mx:RadioButton id="female" label="女性" groupName="sexgroup" value="f"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="電話號(hào)碼" fontWeight="bold" fontSize="12" horizontalAlign="center">
<mx:TextInput id="uphone"/>
</mx:FormItem>
<mx:HBox width="232" height="35" verticalAlign="middle" horizontalAlign="center">
<mx:Button id="go" label="添加" fontSize="12" fontWeight="normal" click="checkuser(event)" textAlign="center" height="30" width="60"/>
<mx:Button id="reset" label="重置" fontWeight="normal" fontSize="12" height="30" width="60" click="resetvalue(event)"/>
</mx:HBox>
</mx:Form>
<mx:DataGrid dataProvider="{dataColl}" width="400" id="userdata"
fontSize="12" borderStyle="inset" fontWeight="bold" textAlign="center" alternatingItemColors="[#F1B6B6, #F2EB37]" height="210" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="uid"/>
<mx:DataGridColumn headerText="聯(lián)系人" dataField="uname"/>
<mx:DataGridColumn headerText="性別" dataField="usex"/>
<mx:DataGridColumn headerText="電話號(hào)碼" dataField="uphone"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

源碼:
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top" applicationComplete="init()">
<mx:Script>
<!--[CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public var dataColl:ArrayCollection=new ArrayCollection();
//ID編號(hào)
var k=1;
//聯(lián)系人對(duì)象
var userobj:Object;
//性別默認(rèn)狀態(tài)
var sexobj:String="男";
//右鍵刪除菜單
var menucont:ContextMenu;
//初始化行數(shù)
var p:int=0;
public function init():void{
menucont=new ContextMenu();
addMenuItems();
}
//添加右鍵菜單項(xiàng)
public function addMenuItems():void{
var item:ContextMenuItem = new ContextMenuItem("刪除");
menucont.customItems.push(item);
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemHandler);
menucont.hideBuiltInItems();
userdata.contextMenu = menucont;
}
//菜單右鍵事件處理
public function menuItemHandler(event:ContextMenuEvent):void{
var CaptionString:String=event.target.caption;
if(CaptionString=="刪除"){
//確定鼠標(biāo)所在行數(shù)
var findex:Number = Math.floor(userdata.contentMouseY/userdata.rowHeight)-1 + userdata.verticalScrollPosition;
if (findex<0 || findex>=userdata.verticalScrollPosition+userdata.rowCount-1) //行號(hào)小于0時(shí)和大于datagrid行總數(shù)時(shí)的 錯(cuò)誤處理
{
Alert.show("請(qǐng)選擇要?jiǎng)h除的行","提示");
} else {
p=findex;
dataColl.removeItemAt(p);
Alert.show("刪除成功","提示");
}
}
}
public function checkuser(event:MouseEvent):void{
var gname=uname.text;
var gphone=uphone.text;
if(gname!="" && gphone!=""){
dataprovider();
}else{
Alert.show("請(qǐng)輸入用戶名或電話號(hào)碼","提示");
}
}
//單選按鈕觸發(fā)事件
public function changsex(event:ItemClickEvent):void{
if(event.currentTarget.selectedValue=="f"){
sexobj= "女";
}else{
sexobj= "男";
}
}
//重置
public function resetvalue(event:MouseEvent):void{
uname.text="";
uphone.text="";
male.selected=true;
}
//創(chuàng)建聯(lián)系人信息
public function dataprovider():Object{
userobj=new Object();
userobj["uid"]=k;
userobj["uname"]=uname.text;
userobj["uphone"]=uphone.text;
userobj["usex"]=sexobj;
dataColl.addItem(userobj);
k++;
return userobj;
}
]]-->
</mx:Script>
<mx:Form>
<mx:Text text="聯(lián)系簿" fontWeight="bold" fontSize="14" textAlign="center" width="233" color="#1B78C6"/>
<mx:FormItem label="姓名" fontSize="12" fontWeight="bold" horizontalAlign="left">
<mx:TextInput id="uname"/>
</mx:FormItem>
<mx:RadioButtonGroup id="sexgroup" itemClick="changsex(event)"/>
<mx:FormItem label="性別" horizontalAlign="center" fontSize="12" fontWeight="bold">
<mx:HBox>
<mx:RadioButton id="male" label="男性" groupName="sexgroup" selected="true" value="m"/>
<mx:RadioButton id="female" label="女性" groupName="sexgroup" value="f"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="電話號(hào)碼" fontWeight="bold" fontSize="12" horizontalAlign="center">
<mx:TextInput id="uphone"/>
</mx:FormItem>
<mx:HBox width="232" height="35" verticalAlign="middle" horizontalAlign="center">
<mx:Button id="go" label="添加" fontSize="12" fontWeight="normal" click="checkuser(event)" textAlign="center" height="30" width="60"/>
<mx:Button id="reset" label="重置" fontWeight="normal" fontSize="12" height="30" width="60" click="resetvalue(event)"/>
</mx:HBox>
</mx:Form>
<mx:DataGrid dataProvider="{dataColl}" width="400" id="userdata"
fontSize="12" borderStyle="inset" fontWeight="bold" textAlign="center" alternatingItemColors="[#F1B6B6, #F2EB37]" height="210" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="uid"/>
<mx:DataGridColumn headerText="聯(lián)系人" dataField="uname"/>
<mx:DataGridColumn headerText="性別" dataField="usex"/>
<mx:DataGridColumn headerText="電話號(hào)碼" dataField="uphone"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
相關(guān)文章
Flex 非常實(shí)用的學(xué)習(xí)資料整理
對(duì)于學(xué)習(xí)flex 的朋友,絕對(duì)是個(gè)不錯(cuò)的一些資料,大家可以用ctrl+F搜索獲取2009-01-01Flex與.NET互操作 了解FluorineFx的環(huán)境配置(遠(yuǎn)程對(duì)象、網(wǎng)關(guān)、通道、目的地)
Flex中的遠(yuǎn)程對(duì)象訪問,也就是服務(wù)端提供一個(gè)遠(yuǎn)程服務(wù)對(duì)象(RemotingService Object),在Flex客戶端通過相應(yīng)的訪問技術(shù)去調(diào)用遠(yuǎn)程對(duì)象的過程。2009-06-06Flex與.NET互操作 使用HttpService、URLReqeust和URLLoader加載/傳輸數(shù)據(jù)
在前兩篇文章中分別介紹了Flex與.NET的WebService之間的數(shù)據(jù)交互通信知識(shí),本文將介紹另外一種加載數(shù)據(jù)以及發(fā)起請(qǐng)求的方式。2009-06-06Flex 動(dòng)態(tài)綁定BindingUtils.bindProperty
Flex 動(dòng)態(tài)綁定BindingUtils.bindProperty實(shí)現(xiàn)代碼。2009-06-06Flex Gumbo中通過baseColor樣式 設(shè)置FxHScrollBar背景顏色
Gumbo中通過baseColor樣式 設(shè)置FxHScrollBar背景顏色的實(shí)現(xiàn)代碼。需要的朋友可以參考下。2009-08-08