Fabricar un componente en Flash CS3 y usarlo en Flex

Este es un post de tom ortega que según mi opinio es la mejor y fácil explicacion de cómo hacer un objeto en flash y exportarlo a Flex.

Yo lo hice con Flash CS3 y Flex 3 y resultó esto

ver acá

SWFScan detecta vulnerabilidades en Flash 9 y 10

Como publica el sitio de xombra, Allanagaby en este post:
“Esta herramienta fue desarrollada por el Grupo de Investigación de Seguridad para Web de HP, y soporta Flash 9 y 10, ActionScript 3 y Flex.
SWFScan decompila los scripts de ActionScript y realiza un análisis estático, identificando más de 60 posibles vulnerabilidades tales como fugas de datos y XSS, entre otros.
Al detectar una vulnerabilidad, muestra la línea de código en cuestión, sugiere qué cambios hacer, y presenta un reporte con las vulnerabilidades encontradas.

HP probó la herramienta contra 4,000 animaciones, encontrando que el 35% viola las guías de seguridad de Adobe. El 16% de las aplicaciones para Flash 8 y anteriores contienen vulnerabilidades XSS, y el 15% de las aplicaciones con formularios de ingreso tienen los nombres de usuario y contraseña en el código.”

Registro en HP para descargarla

Ahorro de trabajo

Descargar/Download SWFScan 1.0

Ahora ejecuten sobre sus sfw y vean los resultados 

saludos ripoblet

Cómo eliminar el error Unsupported File Type en el compilador

Cuando tomé proyectos de Flex 2 y lo pasé a Flex 3 tuve algunas veces problemas de “unsupported  file type”, porque  hay definiciones que se mantuvieron incorrectamente.

En el caso del ejemplo supondremos que la aplicacion proincipal, es decir el main se llama index.mxml.

Hay que editar el archivo de configuracion .actionScriptproperties y eliminar los los “application path=…” (vinculos) malos dentro de la etiqueta “applications”.

En detalle
Para eliminar el típico error de compilación el flex builder

Hay que editar el archivo de configuracion .actionScriptProperties

al abrir el archivo se encontraran con un XML de este modo

se deben eliminar las lineas de application que no correspondan a aplicaciones mxml

Luego el archivo se verá similar a este:

Finalmente se guarda y comienza a compilar automaticamente, si no lo hace se debe forzar una compilacion

Finalmente quedando limpecito así

Problema resuelto

Saludos
ripoblet

List with Checkbox as Itemrender

This post is my first spanuish post my native language.
Consideremos que queremos tener una lista (objeto List) que tiene el contenido renderizado con unos checkbox, un típico problema es cuando se mueve el scroll, los itemsrenders se modifican por un tema de actualización. He acá un cpdigo que funciona bien con Flex 3

CODIGO:

Este es el list

Si se pueden dar cuenta la clave es el item render que está en negrita y porsupuesto el dataprovider que debe entregar una “lista de objetos”, un arraycollection estaría bien.

CheckBoxRender.mxml

Como ven el objeto a mostrar es un Checkbox que tiene un texto que proviene del objeto entrante llamado “data” por lo tanto se despliegará la propiedad NOMBRE del objeto que viene entrando en el list, además tiene una propiedad llamada isSelected que nos permite colocar el checkbox seleccionado o no.

Finalmente en el change del objeto modificamos la propiedad recien nombrada.

Se pueden dar cuenta que pueden colocar Tags de Script dentro del checkbox, ya que este es el main,

es decir checkbox al ser componente envuelve todo el contenido.

Espero que haya quedado claro..

Saludos

Ricardo

Components Life Cycle

I’ve read this post and i want share wit you, very interesting

Adobe Flex 3 Component Life Cycle

View more
presentations
from rjowen.

Comunication between components – Flexcamp Chile 2008

This is my presentation in spanish

regards

Restrict characters into a TextInput

You must use restrict property if you don’t want the user put a special char, like spaces, ‘, <,>, etc.

If you want restrict the space you must use <mx:TextInput id=”txtInput” restrict=”^ ” />

If you want restrict single quote you must use <mx:TextInput id=”txtInput” restrict=”^’” />

If you want restrict double quote you must use <mx:TextInput id=”txtInput” restrict=”^\”" />

If you want restrict single and double quote you must use <mx:TextInput id=”txtInput” restrict=”^’\”" />

If you want restrict < or > you must use <mx:TextInput id=”txtInput” restrict=”^<>” />

 

Summary

If you want restrict some character you must use the restrict property and put into all characters that you don’t want user put into the text, but always beginnig with a ^ character.

 

Regards

 

ripoblet

 

How to sort dates correctly with a datagrid column

When we have datagrid column showing is a date field, but when retrive from database sometimes formated “DD/MM/YYYY HH24:mi” (oracle format), the datagrid column can’t sort correct because it’s trying to sort strings alphabetically and strings dates are not words, are dates. (obviously).

Example Preconditions: Objects in dataprovider have a “DATE” property with a string date, example “11/06/2008 17:45″

 

This time the solution is

1) Transform strings format dates to date format dates

2) Create sort function

3) Set datagrid colum with the property “sortCompareFunction”

 Code

1) Transform function called String2Date

 private function String2Date(date:String):Date{

var day_month:Array = date.split(‘/’); //cut day, month and year with hour 

      var day:int = new Number(day_month[0]);

      var month:int = new Number(day_month[1]);

      var year_hour:String = day_month[2];

     

      var arr:Array = year_hour.split(‘ ‘); //cut year and hours with minutes separated by a space ” “

      var year:int = new Number(arr[0]);

      var hour_minutes:String = arr[1];

                   

      var arr2:Array = hour_minutes.split(‘:’); // cut hour and minutes seperated by “:”

      var hour:int = new Number(arr2[0]);

      var minutes:int = new Number(arr2[1]);

                 

      var date_date:Date = new Date(year, month -1, day, year, minutes, 0, 0);

             

      return date_date;

}

 

2) Compare function called “sortDates”

 

public function sortDates(itemA:Object, itemB:Object):int {

var dateA:Date = String2Date(itemA.FECHA);

      var dateB:Date = String2Date(itemB.FECHA);

      return ObjectUtil.dateCompare(dateA, dateB);

}

3) Finally set datagrid column, o suppose you have a defined column datagrid

 

<mx:DataGridColumn headerText=”Date” dataField=”DATE” sortCompareFunction=”sortDates“/>

 

Now you can sort dates in a datagrid.

 

PD: If you have a simple date string format like “DD/MMM/YYYY” modify String2Date function.

END

 

Regards

 

ripoblet

 

Understand Events in Flex with examples, part 3 [working with components]

Typically, flex applications is component based, I’m not talking about flex components framework, like combobox, datagrid, etc, i mean components like a composed with a canvas, a form inside it with controls that manage a specific thing in our application, etc, It could be a fully functionality. And a lot of times we need communicate this component with others around it.

Goal, comunicate components, Let’s do it.

Example_03

Functionality:The user needs operate 2 numbers, the operators are “add” (+) and “less” (-). The operators are inside a component and the main application have 3 text inputs, 2 textinput where user input the numbers to operate and a third with operation result .

We need a a MAIN application and a COMPONENT inside.

OperatorComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 	width="210" height="74"
  backgroundColor="#80ff80">
 <mx:Metadata>
  [Event(name="doOperation", type="flash.events.Event")]
 </mx:Metadata>
  <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var operators:ArrayCollection = new ArrayCollection([
             {"operator":"Select..."},
             {"operator":"add"},
             {"operator":"less"}]);
   
    private function closeHandler():void{
    //trigger an event when user select an operator
    dispatchEvent(new Event("doOperation"));
   }
  ]]>
 </mx:Script>
 
<mx:Label x="10" y="10" text="Select operator"/>
 <mx:ComboBox id="comboOperation"
           dataProvider="{operators}"
           labelField="operator"
           x="10" y="36" width="190"
           close="closeHandler()"/>
 
</mx:Canvas>

In OperatorComponent, the component expose the event that can trigger called “doOperation”, it’s means in the application when instance the component it will catch the event and do something, in this case operate the numbers.

This component have a green background and have a combobox inside a canvas, the combobox have a dataprovider called “operators” and display the ”operator” property.

Now the container, the main application.

MainPart3App.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:comp="*"
  layout="absolute" xmlns:local="*">
 
 <mx:Script>
  <![CDATA[
    private function doOperationHandler(evt:Event):void{
    		//Obtain from father component the value of an object inside the son component
		var operator:String = component1.comboOperation.selectedItem.operator;
    		//It's a good practice obtain just one time the value
    
    		if (Number(value1.text) is Number && Number(value2.text)){
     			//Verify the operation
     			if (operator == "add"){
      				result.text = String(Number(value1.text) + Number(value2.text));
     			}
     			else if (operator == "less"){
      				result.text = String(Number(value1.text) - Number(value2.text));
     			}
     			else {
      				result.text="";
     			}
    		}
    		else {
     			result.text="";
    		}
   	}
  ]]>
 </mx:Script>
 <mx:Label x="49" y="59" text="Input the numbers"/>
 <mx:TextInput x="117" y="85" width="53" id="value1"/>
 <mx:TextInput x="117" y="115" width="53" id="value2"/>
 <mx:Label x="49" y="87" text="Value 1"/>
 <mx:Label x="49" y="117" text="Value 2"/>
 <mx:Label x="49" y="164" text="Result"/>
 <mx:TextInput x="117" y="162" width="53" id="result"/>
 
 <!-- set operator components-->
 <comp:OperatorComponent id="component1" x="247" y="85"
    doOperation="doOperationHandler(event);"/>
 
</mx:Application>

First: When we expose events with metadata tags in components, the container above can capture the event, it means a listener for the event. In this case the application execute the function “doOperationHandler” when component trigger the event. In other words, when the combobox inside the component close the list, it dispatch an event called “doOperation” and the main application capture it and execute “doOperationHandler” and show the result.

OK, i hope you understand the example, i part4 will use 2 components, but the new component is into the OperatorComponent.

 

Regards.

ripoblet

 

 

 

Understand Events in Flex with examples, part 2

This example shows how to implement  part 1 example with actionscript. I hope yo see the bubble again.

Example_02

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onCreationComplete()">
 <mx:Script>
    <![CDATA[
   	import mx.controls.Button;
   	import mx.containers.Panel;
   	import flash.events.MouseEvent;
   	import mx.controls.Alert;
   	private var myButton:Button;
   	private var myPanel:Panel;
   
   	// Handler function creationComplete event
   	private function onCreationComplete():void {
   	 	myPanel=new Panel();
    		myPanel.width=200;
    		myPanel.height=150;
    		myPanel.layout="absolute";
    		myPanel.title="I'm a Panel";
    		addChild(myPanel);
    		myButton = new Button();
    		myButton.label = "Click me";
    		myButton.x=60.5;
    		myButton.y=38;
    		myPanel.addChild (myButton);
    		// Add event click to the button
    		myButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
    		// Add event click to the panel
    		myPanel.addEventListener(MouseEvent.CLICK, panelClickHandler);
    		//myPanel.addEventListener(MouseEvent.CLICK, panelClickHandler, true);
   	}
   
	// The button click handler (the target phase)
   	private function buttonClickHandler(event:MouseEvent) :void{
   		Alert.show ("Event click on the button");
   	}

   	// The panel handler to demo bubbling
   	private function panelClickHandler(event:MouseEvent) :void{
   		Alert.show ("Event click on the panel");
   	}
  ]]>
 </mx:Script>
</mx:Application>
 

Now. The important is know how “say to the button”: listen the click over you, and to the panel too.

(Note: The examples one and two has been based on theriabook examples)