Tag Flex Component

itemTag.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="true" currentState="normal">
	<fx:Style source="./assets/css/estilos.css"/>
	<fx:Script>
		<![CDATA[
			import flatspark.utils.AwesomeUtils;
			import flatspark.utils.ColorUtils;
			
			import spark.components.DataGroup;
			
			private function deleteTag():void{
				var parentDataG:DataGroup = owner as DataGroup;
				parentDataG.dataProvider.removeItemAt(parentDataG.dataProvider.getItemIndex(data));
			}
			
		]]>
	</fx:Script>
	<s:states>
		<s:State name="normal" />
		<s:State name="hovered" />
	</s:states>
	<s:transitions>
		<s:Transition fromState="normal" toState="hovered" autoReverse="true">
			<s:Parallel>
				<s:Resize targets="{[contentG,bgFill,removeLbl]}" duration="615" >
					<s:easer>
						<s:Sine/>
					</s:easer>
				</s:Resize>
				
				<s:Fade targets="{[contentG,bgFill,removeLbl]}" duration="550" >
					
				</s:Fade>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
	<s:Group id="contentG" width="100%" height="100%" >
		<s:Rect id="bgFill" radiusX="8"  width="100%" height="100%">
			<s:fill>
				<s:SolidColor color.normal="{ColorUtils.Carrot}"
							  color.hovered="{ColorUtils.Pumpkin}"/>
			</s:fill>
		</s:Rect>
		<s:HGroup  gap="3" paddingBottom="5" paddingLeft="8" paddingRight="8"
				   verticalAlign="middle" paddingTop="5" horizontalAlign="left">
			
			
			<s:Label id="labelDisplay"  text="{data.tag}" verticalAlign="middle"
					 fontFamily="Lato" fontSize="15" fontWeight="normal" 
					 fontStyle="normal" />
			<s:Label id="removeLbl" includeIn="hovered" buttonMode="true" verticalAlign="middle"
					 fontFamily="FontAwesome" fontSize="15" text="{AwesomeUtils.fa_times}"
					 click="deleteTag()"/>
		</s:HGroup>
		
	</s:Group>
	
</s:ItemRenderer>

tagInput.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<fx:Style source="./assets/css/estilos.css"/>
	<fx:Script>
		<![CDATA[
			import flatspark.utils.AwesomeUtils;
			import flatspark.utils.ColorUtils;
			
			import mx.collections.ArrayCollection;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			[Bindable]public var _tagsArray:ArrayCollection;
			public var _tagTitulo:String;
			
			private function init():void{
				_tagsArray =  new ArrayCollection();
			}
			
			public function addTagList(tagText:String):void{
				if(tagText.length>0){
					var temp:Object= new Object();
					temp.tag=tagText;
					temp.actividad=0;
					temp.fecha="";
					temp.semana=0;
					temp.titulo="";
					temp.nip=FlexGlobals.topLevelApplication.usuario.nip;
					//temp.titulo=_tagTitulo;
					_tagsArray.addItem(temp);
					_tagsArray.refresh();
					tagtxt.text = "";
				}
			}
			
			public function buscaTags():void{
				var vtnTags:googleTag = googleTag(PopUpManager.createPopUp(FlexGlobals.topLevelApplication as DisplayObject,googleTag, true));
				vtnTags._MtagsArray=_tagsArray;
				FlexGlobals.topLevelApplication.setWinPopX(vtnTags);
				//PopUpManager.centerPopUp(vtnTags);
				vtnTags.addEventListener(FlexEvent.REMOVE, popupClose, false, 0, true);
				
			}
			
			private function popupClose(e:FlexEvent):void { 
				_tagsArray = e.target._MtagsArray; 
			} 
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup width="100%" height="100%" gap="6">
		<s:HGroup width="100%" height="42" gap="6" horizontalAlign="left" paddingBottom="5"
				  verticalAlign="middle">
			<s:Label text="Etiqueta:" fontFamily="RobotoB" fontSize="17"/>
			<s:TextInput fontSize="15" change="{tagtxt.text=tagtxt.text.toLocaleUpperCase()}" id="tagtxt"
						 enter="addTagList(tagtxt.text);" maxChars="50" prompt="Agrega una Etiqueta"
						 toolTip="ESCRIBE LO QUE IDENTIFIQUE A TU ACTIVIDAD O ENCUENTRA ETIQUETAS PARECIDAS CON EL BUSCADOR."/>
			<s:Label text="{AwesomeUtils.fa_plus_circle}" fontFamily="FontAwesome" fontSize="25"
					 buttonMode="true" click="addTagList(tagtxt.text);" color="{ColorUtils.Emerald}" 
					 enabled="{tagtxt.text.length>0?true:false}" toolTip="AGREGA LO QUE ESCRIBISTE COMO NUEVA ETIQUETA A TU LISTA."/>
			<s:Label text="{AwesomeUtils.fa_search_plus}" fontFamily="FontAwesome" fontSize="25"
					 buttonMode="true" click="buscaTags();" color="{ColorUtils.Emerald}"
					 toolTip="BUSCADOR DE ETIQUETAS USADAS EN PROACTIV"/>
		</s:HGroup>
		<s:HGroup >
			<s:Scroller >
				
			
			<s:DataGroup itemRenderer="componentes.renderers.itemTag" width="715" height="60"
						 dataProvider="{_tagsArray}" clipAndEnableScrolling="true" >
				<s:layout>
					<s:TileLayout horizontalAlign="justify" horizontalGap="8" 
								  verticalAlign="justify"/>
				</s:layout>
			</s:DataGroup>
			</s:Scroller>
		</s:HGroup>
		
	</s:VGroup>
</s:Group>

This is the component I use to manage Tags. Theres a part where it references another component called "googleTag", I didnt add it 'cause is just a little browser (2 list) of tags used from other users and what you want to use, but i can share that too if you like.

I used the FlatSpark from Apache Flex but its compile with SDK 4.6.

Thank you for sharing your approach, I'll check it out!