Flex simple example (including the source code of the Instance renderings)

A simple example is provided. In the future, we will write more examples for graphic processing.

Source code:

Copy codeThe Code is as follows: <? 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
Var k = 1;
// Contact object
Var userobj: Object;
// Default gender status
Var sexobj: String = "male ";
// Right-click to delete the menu
Var menucont: ContextMenu;
// Number of initialized rows
Var p: int = 0;

Public function init (): void {
Menucont = new ContextMenu ();
AddMenuItems ();
}
// Add a right-click menu item
Public function addMenuItems (): void {
Var item: ContextMenuItem = new ContextMenuItem ("delete ");
Menucont. customItems. push (item );
Item. addEventListener (ContextMenuEvent. MENU_ITEM_SELECT, menuItemHandler );
Menucont. hideBuiltInItems ();
Userdata. contextMenu = menucont;
}
// Context menu event processing
Public function menuItemHandler (event: ContextMenuEvent): void {
Var CaptionString: stringpolicevent.tar get. caption;
If (CaptionString = "delete "){

// Determine the number of rows where the mouse is located
Var findex: Number = Math. floor (userdata. contentMouseY/userdata. rowHeight)-1 + userdata. verticalScrollPosition;
If (findex <0 | findex> = userdata. verticalScrollPosition + userdata. rowCount-1) // handle errors when the row number is smaller than 0 and greater than the total number of datagrid rows
{
Alert. show ("select the row to be deleted", "prompt ");
} Else {
P = findex;
DataColl. removeItemAt (p );
Alert. show ("deleted successfully", "prompt ");
}
}

}
Public function checkuser (event: MouseEvent): void {
Var gname = uname. text;
Var gphone = uphone. text;

If (gname! = "" & Gphone! = ""){
Dataprovider ();
} Else {
Alert. show ("Enter the user name or phone number", "prompt ");
}
}
// Single-choice button trigger event
Public function changsex (event: ItemClickEvent): void {
If (event. currentTarget. selectedValue = "f "){
Sexobj = "female ";
} Else {
Sexobj = "male ";
}
}
// Reset
Public function resetvalue (event: MouseEvent): void {
Uname. text = "";
Uphone. text = "";
Male. selected = true;
}
// Create contact information
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 = "" fontWeight = "bold" fontSize = "14" textAlign = "center" width = "233" color = "#1B78C6"/>
<Mx: FormItem label = "name" fontSize = "12" fontWeight = "bold" horizontalAlign = "left">
<Mx: TextInput id = "uname"/>
</Mx: FormItem>
<Mx: RadioButtonGroup id = "sexgroup" itemClick = "changsex (event)"/>
<Mx: FormItem label = "gender" horizontalAlign = "center" fontSize = "12" fontWeight = "bold">
<Mx: HBox>
<Mx: RadioButton id = "male" label = "male" groupName = "sexgroup" selected = "true" value = "m"/>
<Mx: RadioButton id = "female" label = "female" groupName = "sexgroup" value = "f"/>
</Mx: HBox>
</Mx: FormItem>
<Mx: FormItem label = "phone number" 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 = "add" fontSize = "12" fontWeight = "normal" click = "checkuser (event) "textAlign =" center "height =" 30 "width =" 60 "/>
<Mx: button id = "reset" label = "reset" 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 = "Contact" dataField = "uname"/>
<Mx: DataGridColumn headerText = "gender" dataField = "usex"/>
<Mx: DataGridColumn headerText = "phone number" dataField = "uphone"/>
</Mx: columns>
</Mx: DataGrid>

</Mx: Application>