<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();"
xmlns:rc_controls="com.ricardocanelas.controls.*"
pageTitle="CRUD ArrayCollection / Flex 3 / Experimental / RicardoCanelas.com"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import com.ricardocanelas.controls.alert_msn.Alerta;
import mx.utils.ObjectUtil;
import com.ricardocanelas.Utils;
import mx.collections.SortField;
import mx.collections.Sort;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable]
private var dataEmployer:ArrayCollection = new ArrayCollection([
{id:"47", active:"1", firstname:"Malin", lastname:"Akerman", state_id:"3", email:"malin@ricardocanelas.com", birth:"1978-4-12"},
{id:"23", active:"1", firstname:"Hayley ", lastname:"Williams ", state_id:"1", email:"hayley@ricardocanelas.com", birth:"1986-7-21"},
]);
[Bindable]
private var dataStates:ArrayCollection = new ArrayCollection([
{id:"1",name:"Rio Grande do Sul"},
{id:"2",name:"Santa Catarina"},
{id:"3",name:"Paraná"},
{id:"4",name:"São Paulo"}
]);
private function init():void
{
initValidator();
sortDataStates();
sortDataEmployer();
initFilter();
formClear();
}
/***********************
* SORT / PÔR EM ORDEM
**********************/
private function sortDataStates():void
{
dataStates.sort = new Sort();
dataStates.sort.fields = [new SortField("name", true, false, false)];
dataStates.refresh();
}
private function sortDataEmployer():void
{
dataEmployer.sort = new Sort();
dataEmployer.sort.fields = [new SortField("id", true, false, true)];
dataEmployer.refresh();
}
/**************
* DATAGRID
*************/
private function dg_LabelFullName(item:Object, columm:DataGridColumn):String
{
return item.firstname + " " + item.lastname;
}
private function dg_LabelState(item:Object, columm:DataGridColumn):String
{
var index:int = com.ricardocanelas.Utils.searchIndex(dataStates,"id",item.state_id);
return dataStates[index].name;
}
private function dg_LabelBirth(item:Object, columm:DataGridColumn):String
{
var d:Date = Utils.stringToDate(item.birth); var str:String = Utils.dateFormatter("DD, MMMM YYYY - EEEEE", d)
return str;
}
private function dg_sortBirth(itemA:Object, itemB:Object):int
{
var dateA:Date = Utils.stringToDate(itemA.birth); var dateB:Date = Utils.stringToDate(itemB.birth); return ObjectUtil.dateCompare(dateB, dateA);
}
private function dg_change():void
{
formSet();
btnDel.enabled = true;
btnSave.enabled = true;
}
/**************
* FORMULÁRIO
*************/
private function formGet():Object
{
var obj:Object = new Object();
obj.id = int(Math.random()* 1000);
obj.active = int(ckActive.selected);
obj.firstname = txFirstname.text;
obj.lastname = txLastname.text;
obj.email = txEmail.text;
obj.state_id = cbState.selectedItem.id;
obj.birth = dfBirth.dateUniversal;
return obj;
}
private function formSet():void
{
var data:Object = dg.selectedItem;
panelForm.status = data.id;
ckActive.selected = Boolean(data.active);
txFirstname.text = data.firstname;
txLastname.text = data.lastname;
txEmail.text = data.email;
dfBirth.data = Utils.stringToDate(data.birth); cbState.selectedValue = data.state_id
}
private function formClear():void
{
dataEmployer.refresh();
panelForm.status = "";
ckActive.selected = true;
cbState.selectedIndex = -1;
txFirstname.text = "";
txLastname.text = "";
txEmail.text = "";
dfBirth.text = "";
btnDel.enabled = false;
btnSave.enabled = false;
dg.selectedIndex = -1;
txFirstname.errorString = "";
txLastname.errorString = "";
txEmail.errorString = "";
}
/**************
* EVENTOS
*************/
private function btnAdd_click():void
{
if(formValidator() == false)return;
var o:Object = formGet();
dataEmployer.addItem(o);
formClear();
Alerta.show("Adicionado","Foi adicionado com sucesso",Alerta.ALERTA_SUCESSO,4000);
}
private function btnCancel_click():void
{
formClear();
}
public function btnDel_click():void
{
var index:int = dg.selectedIndex; dataEmployer.removeItemAt( index );
formClear();
Alerta.show("Excluido","Foi excluido com sucesso",Alerta.ALERTA_INFO,4000);
}
private function btnSave_click():void
{
if(formValidator() == false)return;
var o:Object = formGet();
var data:Object = dg.selectedItem;
data.id = data.id;
data.active = o.active;
data.firstname = o.firstname;
data.lasttname = o.firstname;
data.email = o.email;
data.state_id = o.state_id;
data.birth = o.birth;
formClear();
}
private function btnTrace_click():void
{
Alert.show(ObjectUtil.toString(dataEmployer), " TRACE ");
}
/**************
* FITLER
*************/
private function initFilter():void
{
cbFilter_dateProvider();
}
private function cbFilter_dateProvider():void
{
var item:Object = {name:" --- Todos --- ", term_id:"0"};
var arrColl:ArrayCollection = new ArrayCollection(dataStates.toArray());
arrColl.addItemAt(item,0);
cbFilter.dataProvider = arrColl;
}
private function filter():void
{
dataEmployer.filterFunction = filterProcess;
dataEmployer.refresh();
}
private function filterProcess(item:Object):Boolean
{
var isMath:Boolean = false;
var filterText:String = txFilter.text.toUpperCase();
var filterStateID:int = cbFilter.selectedItem.id;
var fullname:String = item.firstname + " " + item.lastname;
if ( (fullname.toUpperCase().indexOf(filterText) >= 0
|| item.email.toUpperCase().indexOf(filterText) >= 0
|| item.id.indexOf(filterText) >= 0)
&& (item.state_id == filterStateID || filterStateID == 0) ){
isMath = true;
}else{
isMath = false;
}
return isMath;
}
]]>
</mx:Script>
<mx:ApplicationControlBar x="0" y="0" cornerRadius="0" width="100%">
<mx:Button id="btnTrace" label="Trace (employed)" height="20" fontSize="9" click="btnTrace_click()" />
<mx:HBox horizontalAlign="right" width="100%">
<mx:Text text="Código fonte: Botão da direita / View Source" color="#070707"/>
</mx:HBox>
</mx:ApplicationControlBar>
<mx:Panel y="42" width="376" height="268" layout="absolute" title="Formulário" right="10" id="panelForm">
<mx:Form x="0" y="0" width="100%" height="100%">
<mx:FormItem label="Ativo:" required="false">
<mx:CheckBox id="ckActive"/>
</mx:FormItem>
<mx:FormItem label="Estado:" required="false">
<rc_controls:ExtendedComboBox id="cbState" dataProvider="{dataStates}" prompt="Escolha" labelField="name" property="id"/>
</mx:FormItem>
<mx:FormItem label="Nome:" required="true">
<mx:TextInput id="txFirstname" />
</mx:FormItem>
<mx:FormItem label="Sobrenome:" required="true">
<mx:TextInput id="txLastname" />
</mx:FormItem>
<mx:FormItem label="E-mail:" required="true">
<mx:TextInput id="txEmail" />
</mx:FormItem>
<mx:FormItem label="Data nascimento:" required="false">
<rc_controls:DateFieldPt id="dfBirth"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:Button label="Salvar" id="btnSave" click="btnSave_click();"/>
<mx:Button label="Excluir" id="btnDel" click="btnDel_click();"/>
<mx:Button label="Cancelar" id="btnCancel" click="btnCancel_click();"/>
<mx:VBox width="100%" horizontalAlign="right">
<mx:Button label="Adicionar" id="btnAdd" click="btnAdd_click();"/>
</mx:VBox>
</mx:ControlBar>
</mx:Panel>
<mx:Panel layout="absolute" title="Employed" left="10" top="42" bottom="10" right="394">
<mx:DataGrid id="dg" left="10" right="10" bottom="10" top="10" dataProvider="{dataEmployer}" change="dg_change()">
<mx:columns>
<mx:DataGridColumn headerText="" dataField="active" minWidth="26" width="26" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="left" verticalAlign="middle" paddingLeft="4">
<mx:Image source="{data.active == 1 ? 'assets/icons/bullet_green.png' : 'assets/icons/bullet_red.png' }"
toolTip="{data.active == 1 ? 'Ativo' : 'Desativo'}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="ID" dataField="id" width="40"/>
<mx:DataGridColumn headerText="Nome" labelFunction="dg_LabelFullName"/>
<mx:DataGridColumn headerText="E-mail" dataField="email"/>
<mx:DataGridColumn headerText="Nascimento" labelFunction="dg_LabelBirth" sortCompareFunction="dg_sortBirth" width="210"/>
<mx:DataGridColumn headerText="Estado" labelFunction="dg_LabelState"/>
<mx:DataGridColumn headerText="" dataField="" minWidth="34" width="54" sortable="false">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="left" horizontalGap="5" verticalAlign="middle" paddingLeft="5" paddingRight="5" >
<mx:Image source="assets/icons/delete_dg.png" toolTip="Excluir" click="outerDocument.btnDel_click()" useHandCursor="true" buttonMode="true" alpha="0.75"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:Label text="Filtro:"/>
<mx:ComboBox id="cbFilter" change="filter()" labelField="name"></mx:ComboBox>
<mx:TextInput width="100%" id="txFilter" change="filter()"/>
</mx:ControlBar>
</mx:Panel>
<mx:StringValidator id="validFirstname" source="{txFirstname}" property="text"
requiredFieldError="Este campo é necessário."
tooShortError="Este campo deve ser no mínimo, 3 caracteres."
tooLongError="Este campo deve ser no máximo, 32 caracteres."
minLength="2" maxLength="32"/>
<mx:StringValidator id="validLastname" source="{txLastname}" property="text"
requiredFieldError="Este campo é necessário."
tooShortError="Este campo deve ser no mínimo, 3 caracteres."
tooLongError="Este campo deve ser no máximo, 32 caracteres."
minLength="2" maxLength="32"/>
<mx:EmailValidator id="validEmail" source="{txEmail}" property="text"
requiredFieldError="Este campo é necessário."
invalidCharError="Caracteres inválidos em seu endereço de email."
invalidDomainError= "O domínio em seu e-mail está formatada incorretamente."
invalidIPDomainError="O IP domínio em seu e-mail está formatada incorretamente."
invalidPeriodsInDomainError="O domínio em seu endereço eletrônico tenha períodos consecutivos."
missingAtSignError="Ausentes em um personagem no seu endereço de email."
missingPeriodInDomainError="O domínio em seu e-mail está faltando."
missingUsernameError="O nome de usuário no seu endereço de email está em falta."
tooManyAtSignsError="Demasiados em caracteres de seu endereço de email." />
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.validators.Validator;
[Bindable]
private var validatorArr:Array;
private function initValidator():void
{
validatorArr = new Array();
validatorArr.push(validEmail);
validatorArr.push(validFirstname);
validatorArr.push(validLastname);
}
private function formValidator():Boolean
{
var validatorErrorArray:Array = Validator.validateAll(validatorArr);
var isValidForm:Boolean = validatorErrorArray.length == 0;
if( isValidForm == false) Alerta.show("Erro","Existe um ou mais campos inválidos",Alerta.ALERTA_ERRO,4000);
return isValidForm;
}
]]>
</mx:Script>
</mx:Application>