[Bindable] private var cities:ArrayCollection = new ArrayCollection();

	private function initComp():void
	{
		cities.addItem({id:0, label:"Bucuresti"});
		cities.addItem({id:1, label:"Slobozia"});
		cities.addItem({id:2, label:"Urziceni"});
		cities.addItem({id:3, label:"Iasi"});
		cities.addItem({id:4, label:"Suceava"});
	}

unde CityRenderer poate contine orice fel de informatie legata de un anumit oras

Nu stiu daca si-a pus cineva problema sortarii item-urilor. Din toate cautarile mele pe net nu a rezultat ca s-ar fi gandit cineva la asa ceva. Poate pentru ca nu a fost considerat pana acum util sau poate pentru ca este inutil. Poate fi si datorita faptului ca nici acordeonul nu ofera suport pentru drag and drop in sensul ca headerele nu au predefinite handlere pentru drag and drop. Aici intra in scena DragManager cu ajutorul caruia poti determina cam orice obiect dintr-o aplicatie flex poate sa se miste sau sa fie pusa peste alta.

Avand in vedere ce am spus mai devreme despre headerele acordeonului pentru a putea gestiona evenimentele aparute in cadrul unei actiuni de tip drag and drop ar trebui sa definim o componenta custom pe care o vom numi DraggabelAccordion. Singura proprietate a acestei componente este ca defineste un renderer special pentru headere in cadrul caruia vom gestiona evenimentele de tip drag and drop.

CustomHeaderRenderer extinde componenta Button si contine handlere pentru mouseMove, dragEnter, dragExit precum si pentru dragDrop denumite intr-un mod usor de inteles. Pentru fiecare de handler voi prezenta codul precum si explicatiile aferente.

mouseMovehandler:

	private function mouseMoveHandler(event:MouseEvent):void
	{
		var dragInitiator:Button = Button(event.currentTarget);
		var ds:DragSource = new DragSource();
		DragManager.doDrag(dragInitiator, ds, event);
	}

In momentul in care mouse-ul se afla asupra render-ului, DragManager este informat ca initiatorul drag-ului este un element de tip buton, respectiv cel asupra caruia se afla cursorul precum si ca acest element suporta actiunea drag.

dragEnterHandler:

	public function dragEnterHandler(event:MouseEvent):void
	{
		var dropTarget:Button=Button(event.currentTarget);
		DragManager.acceptDragDrop(dropTarget);
		var accordion:DraggableAccordion = dropTarget.document as DraggableAccordion;
		dropTarget.graphics.lineStyle(4, 0x000000, 1);
		dropTarget.graphics.beginFill(0x00FF00);
		dropTarget.graphics.moveTo(5, dropTarget.height-2);
		dropTarget.graphics.lineTo(dropTarget.width-5, dropTarget.height-2);
	}

Avand in vedere ca drop se poate face doar asupra unui element de tip Button si mai presus de toate se poate face asupra oricarui element DragManager este informat ca elementul asupra caruia pluteste header-ul tras accepta drop. De asemenea o linie neagra este trasata la baza destinatiei pentru a informa utilizatorul unde urmeaza sa fie plasat elementul tras.

dragExitHandler:

	public function dragExitHandler(event:MouseEvent):void
	{
		var dropTarget:Button=Button(event.currentTarget);
		dropTarget.graphics.lineStyle(4, 0xffffff, 1);
		dropTarget.graphics.beginFill(0xFFFFFF);
		dropTarget.graphics.moveTo(5, dropTarget.height-2);
		dropTarget.graphics.lineTo(dropTarget.width-5, dropTarget.height-2);
	}

Functia aceasta este apelata in momentul in care butonul tras iese din aria de acoperire a tintei si nu face decat sa stearga linia de la baza tintei, in acest mod informand utilizatorul ca nu se va face drop in acest punct.

dragDropHandler:

	public function dragDropHandler(event:DragEvent):void
	{
		var sourceLabel:String = CustomHeaderRenderer(event.dragInitiator).label;
		var targetLabel:String = this.label;
		var dataSource:ArrayCollection = this.data.repeater.dataProvider;
		var key:Object;
		var source:Object;
		var sourcePosition:int = 0;
		var targetPosition:int = 0;
		for (key in dataSource)
		{
			if (dataSource[key].label == sourceLabel)
				{
					source = dataSource[key];
					sourcePosition = int(key);
				}
		}
		dataSource.removeItemAt(sourcePosition);
		for (key in dataSource)
		{
			if (dataSource[key].label == targetLabel)
				{
					targetPosition = int(key);
				}
		}
		if (targetPosition==dataSource.length-1)
		{
			dataSource.addItem(source);
		}
		else
		{
			var tempArray:Array = dataSource.source.slice(targetPosition+1,dataSource.source.length);
			var tempCollection:ArrayCollection = new ArrayCollection(tempArray);
			var i:int = dataSource.length - 1;
			for (i = dataSource.length - 1;i>targetPosition;i--)
			{
				dataSource.removeItemAt(i);
			}
			dataSource.addItem(source);
			var obj:Object;
			for each (obj in tempCollection)
			{
				dataSource.addItem(obj);
			}
		}
	}

Functia de mai sus modifica dataProvider-ul din repeater-ul acordeonului pentru a se obtine efectul dorit. Daca destinatia este chiar ultimul element din accordion aceasta este pur si simplu stearsa si readaugata la sfarsitul sirului. In celelalte cazuri se sterge elementul sursa, se copiaza elementele ce-l preced intr-un ArrayCollection temporar si se reface dataProvider-ul in forma dorita.

Pe masura ce timpul va trece si pe masura ce aplicatia pentru care a fost necesara o astfel de componenta se va dezvolta probabil voi include si alte facilitati.

package custom
{
  import com.google.maps.LatLng;
  import com.google.maps.overlays.Marker;
  import com.google.maps.overlays.MarkerOptions;

  public class TtMarker extends Marker
  {
   public var id:int;
   public var name:String;
   public var shortDescription:String;
   public var image:String;
   public var url:String;
   public var lat:Number;
   public var lng:Number;

   public function TtMarker(arg0:LatLng, arg1:MarkerOptions=null)
   {
    super(arg0, arg1);
   }

  }
}

Avand la dispozitie markerData, un obiect cu informatiile despre marker obtinut din baza de date, declararea am facut-o in modul urmator:

var markerOptions:MarkerOptions = new MarkerOptions({
  icon:markerIconData,
  iconAlignment:MarkerOptions.ALIGN_BOTTOM
});

var position:LatLng = new LatLng(
  markerData.lat as Number,
  markerData.lng as Number
);
var marker:TtMarker = new TtMarker(position, markerOptions);
marker.id = markerData.id;
marker.name = markerData.name;
marker.image = markerData.image;
marker.shortDescription = markerData.shortDescription;
marker.url = markerData.url;
marker.lat = markerData.lat;
marker.lng = markerData.lng;

marker.addEventListener(MapMouseEvent.CLICK,markerShowWindow);
googleMap.addOverlay(marker);

apoi pentru a evidentia si modul in care ne folosim de datele din marker mai jos gasiti si ce se intampla cand se executa click pe marker

private function markerShowWindow(event:MapMouseEvent):void
{
  var newMarker:TtMarker = event.currentTarget as TtMarker;
  var infoWindow:InfoWindowOptions = new InfoWindowOptions();
  var html:String = '';
  html += '<img  src="/images/'+newMarker.image+'" />';
  html += newMarker.shortDescription + '';
  html += '<a href="/'+newMarker.url+'" >Detalii</a>';

  infoWindow.padding = 5;
  infoWindow.contentHTML = html;
  infoWindow.height = 210;
  infoWindow.width = 230;
  newMarker.openInfoWindow(infoWindow);
}

1. intro

2. hot dog

3. my generation

4. full nelson

5. my way

6. rollin’ (air raid vehicle)

7. livin’it up

8. the one

9. getha’ groove on

10. take a look around

11. it’ll be ok

12. boiler

13. hold on

14. rollin’ (urban assault vehicle)

15. outro

Urasc colindatorii care bat la usi in speranta ca fac si ei un ban de sarbatori. Nu vreau sa le dau bani. Colindatul, in esenta lui, ar trebui sa fie o activitate benevola care sa anunte prin cantece un eveniment religios inaltator nu sa ma oblige pe mine sa “primesc cu steaua”.

Urasc felicitarile corporate si mesajele de sarbatori nepersonalizate. “Fie ca lumina sfanta sa-mi lumineze calea”. Pe bune? Atat de putin insemn pentru tine astfel incat sa-mi trimiti un mesaj pe care oricum il trimiti altor sute de contacte din telefon sau address book? Nu vreau sa primesc asa ceva si mai ales nu raspund la asa ceva. Le gasesc revoltatoare si lipsite de sens.

Las postul deschis… O sa mai izbeasca idei.

Validarea formularelor a pus probleme oricarui programator ce s-a lovit vreodata de interactiunea cu utilizatorii lipsiti de experienta sau, pur si simplu, neatenti. Presupunem ca avem urmatorul formular si ne dorim ca cele doua campuri text sa fie validate in functie de o lungime minima.

<mx:Form width=”60%” height=”100%”>
<mx:FormHeading label=”Adaugare” width=”243″ height=”42″/>
<mx:FormItem>
<mx:Label text=”Nume” />
<mx:TextInput id=”lastName” />
</mx:FormItem>
<mx:FormItem>
<mx:Label text=”Prenume” />
<mx:TextInput id=”firstName” />
</mx:FormItem>
<mx:FormItem>
<mx:Label text=”Starea” />
<mx:CheckBox id=”active” />
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:Button label=”Salveaza modificarile” click=”save()” />
<mx:Button label=”Renunta” click=”close()” />
</mx:ControlBar>

Pentru a realiza acest lucru definim doua validatoare pentru cele doua campuri:

<mx:StringValidator
id=”firstNameValidator”
source=”{firstName}”
property=”text”
minLength=”3″
tooShortError=”Introduceti cel putin 3 caractere”
requiredFieldError=”Introduceti numele”
/>

<mx:StringValidator
id=”lastNameValidator”
source=”{lastName}”
property=”text”
minLength=”3″
tooShortError=”Introduceti cel putin 3 caractere”
requiredFieldError=”Introduceti numele”
/>

In continuare cream un array ce va contine lista cu validatorii ce se aplica pe elementele formularului:

validatorArr = new Array(firstNameValidator, lastNameValidator);

Parcurgand array-ul de mai sus se poate determina daca formularul in cauza este sau nu valid:

private function validForm(validatorArr:Array):Boolean
{
var validatorErrorArray:Array = Validator.validateAll(validatorArr);
var isValidForm:Boolean = validatorErrorArray.length == 0;
if (isValidForm) {
return true;
} else {
var err:ValidationResultEvent;
var errorMessageArray:Array = [];
for each (err in validatorErrorArray) {
var errField:String = FormItem(err.currentTarget.source.parent).label
errorMessageArray.push(errField + “: ” + err.message);
}
}
return false;
}

Prin urmare punand conditia in modul urmator obtinem ce ne dorim:

if (this.validForm(validatorArr))

{

// actions

}