It has:
- Insert
- Update
- Delete
First, we have to create the table and fillit with data:
CREATE TABLE `tabla` (`tablaID` int(11) NOT NULL auto_increment,
`descripcion` varchar(255) NOT NULL,
`comentario` varchar(255) NOT NULL,
PRIMARY KEY (`tablaID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;
INSERT INTO `tabla` (`tablaID`, `descripcion`, `comentario`) VALUES
(22, '234234234', 'lalalalal4444'),
(23, 'ssssss', 'ddddddd'),
(25, 'ssssss', 'ddddddd'),
(26, '26', 'ddddddd'),
(27, '234234234', 'editado1'),
(28, 'inserteed 1', 'inserteed 1 com'),
(30, '324234', '234234');
Next, the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:assql="com.maclema.mysql.mxml.*"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.containers.Grid;
import mx.events.ListEvent;
import mx.controls.Alert;
import com.maclema.mysql.events.MySqlErrorEvent;
import com.maclema.util.ResultsUtil;
import mx.controls.TextInput;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var boolStateNew : Boolean= false;
private function delRow():void
{
service.send("delete from tabla where tablaID='" +
grid.selectedItem.tablaID +"'");
Alert.show("Deleted ...");
service.send("SELECT * FROM tabla");
}
private function addNew():void
{
tiComentario.editable = true;
tiDescripcion.editable = true;
grid.enabled = false;
bCancel.enabled = true;
bOk.enabled = true;
bNew.enabled = false;
boolStateNew = true;
tiComentario.text = "";
tiDescripcion.text = "";
tiComentario.setFocus();
}
private function postEdit():void
{
if (boolStateNew == false){
service.send("UPDATE tabla set comentario ='"+ tiComentario.text
+ "' where tablaID='"+ grid.selectedItem.tablaID +"'");
service.send("UPDATE tabla set descripcion ='"+
tiDescripcion.text + "' where tablaID='"+ grid.selectedItem.tablaID
+"'");
Alert.show("updated");
cancelEdit();
service.send("SELECT * FROM tabla");
}
else
{
service.send("INSERT INTO `test`.`tabla`
(`tablaID`,`descripcion` ,`comentario`) VALUES (NULL , '"
+ tiDescripcion.text + "', '" + tiComentario.text + "')");
Alert.show("Inserted ...");
cancelEdit();
service.send("SELECT * FROM tabla");
}
}
private function cancelEdit():void
{
tiComentario.editable = false;
tiDescripcion.editable = false;
grid.enabled = true;
bCancel.enabled = false;
bOk.enabled = false;
bNew.enabled = true;
}
private function handleDobleClick():void
{
tiComentario.editable = true;
tiDescripcion.editable = true;
grid.enabled = false;
bCancel.enabled = true;
bOk.enabled = true;
bNew.enabled = false;
boolStateNew = false;
tiComentario.setFocus();
}
private function selectedItemChanged():void
{
tiComentario.text = grid.selectedItem.comentario;
tiDescripcion.text = grid.selectedItem.descripcion;
}
private function handleConnected(e:Event):void {
//Alert.show("hello");
service.send("SELECT * FROM tabla");
}
private function handleError(e:MySqlErrorEvent):void {
Alert.show(e.msg);
}
private function handleChange(e:Object):void {
//sComentario = e;
}
private function handleEditEnd(e:DataGridEvent):void {
// Get the cell editor and cast it to TextInput.
var myEditor:TextInput =
TextInput(e.currentTarget.itemEditorInstance);
// Get the new value from the editor.
var newVal:String = myEditor.text;
// Get the old value.
var oldVal:String =
e.currentTarget.editedItemRenderer.data[e.dataField];
var sColName:String =
e.currentTarget.editedItemRenderer.data["tablaID"];
//Alert.show(sColName);
//Alert.show("new" + newVal);
if (oldVal != newVal)
{
service.send("UPDATE tabla set descripcion='"+ newVal
+ "' where tablaID='"+ sColName +"'");
Alert.show("actualizado");
}
//columns="{ResultsUtil.getDataGridColumns(service.lastResultSet)}"
}
]]>
</mx:Script>
<assql:MySqlService id="service"
hostname="localhost"
username="test"
password="test"
database="test"
autoConnect="true"
connect="handleConnected(event)"
sqlError="handleError(event)"
/>
<mx:VBox x="0" y="0" width="100%" height="100%"
verticalAlign="bottom">
<mx:HBox width="100%" height="70%" verticalAlign="top"
horizontalAlign="center">
<mx:VBox height="100%" width="95">
<mx:Button label="Delete Row" id="bDelRow" click="delRow()"/
<mx:Button label="New Row" id="bNew" click="addNew()"/>
<mx:Button label="Edit Row" id="bEdit"
click="handleDobleClick()"/>
</mx:VBox>
<mx:DataGrid id="grid"
dataProvider="{service.lastResult}"
doubleClickEnabled="true"
editable="false"
itemEditEnd="handleEditEnd(event)"
change="{selectedItemChanged()}"
doubleClick="handleDobleClick()"
width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="ID Number"
dataField="tablaID" />
<mx:DataGridColumn headerText="Descripción"
dataField="descripcion"/>
<mx:DataGridColumn headerText="Comentario"
dataField="comentario"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:HBox width="100%" height="30%" verticalAlign="top"
horizontalAlign="center">
<mx:Panel width="50%" height="200" layout="absolute"
cornerRadius="35" horizontalAlign="center" verticalAlign="middle">
<mx:Form width="100%" height="120" cornerRadius="35"
backgroundColor="#DEC5C5" themeColor="#009DFF" borderColor="#B4C7D4"
id="form1" left="0" top="0">
<mx:FormHeading label="Add/Edit" textAlign="left"
fontSize="19" color="#0F51A3" fontWeight="bold" height="25"/>
<mx:FormItem label="Descripción" width="100%">
<mx:TextInput width="100%" id="tiDescripcion"
editable="false"/>
</mx:FormItem>
<mx:FormItem label="Comentario" width="100%">
<mx:TextInput width="100%" id="tiComentario"
editable="false"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="Ok" enabled="false" horizontalCenter="46"
verticalCenter="59" id="bOk" click="postEdit()"/>
<mx:Button label="Cancel" enabled="false"
verticalCenter="59" horizontalCenter="117" id="bCancel"
click="cancelEdit()"/>
</mx:Panel>
</mx:HBox>
</mx:VBox>
</mx:Application>
