This is an alpha version of a tool developed using Adobe Flex, Adobe Air that uses Google translator services to make the job;
here is the link where you can find the tool
As I said this is an alpha version and it’s name is not definitive;
If you have suggestions or comments about it’s name or it’s features you can write here,
we will be glad to respond and if it’s possible to fulfill your requests;
Cheers,
AboutFlex Team
Alternativa 3D. the promising 3d engine discussed in the previous post here,
now is finally ready!
go there, get an account and download the package for free.
Alternativa 3D website
The new Famous Adobe Max Event is near
this year the great Adobe Community event will be
San Francisco, California — November 16 - 19, 2008
Milan, Italy — December 1 - 4, 2008
Tokyo, Japan — January, 2009
All the informations and the Registration for the San Francisco date are opened!
Go and register yourself at http://max.adobe.com.
This example shows you a component that extends a Panel to give it the capacity of the rotation.
Remember to embed fonts otherwise the text will not be displayed after a rotation
The Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="it.creativesource.*"
viewSourceURL="http://www.aboutflex.net/labs/rotablePanel/srcview/index.html">
<ns1:RotablePanel id="rP" x="99" y="99"
width="250" height="229" title="Rotate Me!!" >
</ns1:RotablePanel>
</mx:Application>the Component - RotablePanel
package it.creativesource
{
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.text.Font;
import flash.text.TextFormat;
import mx.containers.Panel;
import mx.controls.Button;
import mx.effects.Rotate;
public class RotablePanel extends Panel
{
[Embed(source="/assets/fonts/verdana.TTF", fontName="verdana")]
public static var verdana:Class;
private var _rotator:Button=new Button();
private var _rotator1:Button=new Button();
private var _rotator2:Button=new Button();
private var _rotator3:Button=new Button();
private var _startGap:Number=0;
private var _direction:Number=1;
public function RotablePanel()
{
Font.registerFont(verdana);
super();
}
override protected function createChildren():void{
super.createChildren();
super.rawChildren.addChild(_rotator);
super.rawChildren.addChild(_rotator1);
super.rawChildren.addChild(_rotator2);
super.rawChildren.addChild(_rotator3);
_rotator.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator1.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator2.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
_rotator3.addEventListener(MouseEvent.MOUSE_DOWN,startRotation)
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
_rotator.width=12;
_rotator.height=12;
_rotator.x=super.width-_rotator.width+12;
_rotator.y=super.height-_rotator.height+12;
_rotator1.width=12;
_rotator1.height=12;
_rotator1.x=super.width-_rotator1.width+12;
_rotator1.y=-12;
_rotator2.width=12;
_rotator2.height=12;
_rotator2.x=-12;
_rotator2.y=-12;
_rotator3.width=12;
_rotator3.height=12;
_rotator3.x=-12;
_rotator3.y=super.height-_rotator3.height+12;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "verdana";
titleTextField.embedFonts=true;
titleTextField.defaultTextFormat=textFormat;
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private function startRotation(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,rotate)
stage.addEventListener(MouseEvent.MOUSE_UP,stopRotation)
var radVal:Number = Math.PI * this.rotation / 180;
var originX:Number=unscaledWidth/2
var originY:Number=unscaledHeight/2
var centerX:Number = this.x + originX * Math.cos(radVal) - originY * Math.sin(radVal);
var centerY:Number = this.y + originX * Math.sin(radVal) + originY * Math.cos(radVal);
var a: Number = (originY-contentMouseY)
var b: Number =(originX-contentMouseX)
var ipo:Number = Math.sqrt((a*a)+(b*b))
_startGap=Math.round(180 * Math.asin(a/ipo) / Math.PI)
if(b<0){
_direction=-1
}else{
_direction=1
}
}
private function stopRotation(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP,stopRotation)
stage.removeEventListener(MouseEvent.MOUSE_MOVE,rotate)
}
private function rotate(e:MouseEvent):void{
var radVal:Number = Math.PI * this.rotation / 180;
var originX:Number=unscaledWidth/2
var originY:Number=unscaledHeight/2
var centerX:Number = this.x + originX * Math.cos(radVal) - originY * Math.sin(radVal);
var centerY:Number = this.y + originX * Math.sin(radVal) + originY * Math.cos(radVal);
var a: Number = (originY-contentMouseY)
var b: Number =(originX-contentMouseX)
var ipo:Number = Math.sqrt((a*a)+(b*b))
if(_direction>0)
this.rotation+=-_startGap+Math.round(180 * Math.asin(a/ipo) / Math.PI)
else
this.rotation+=_startGap-Math.round(180 * Math.asin(a/ipo) / Math.PI)
radVal = Math.PI * this.rotation/180;
var originalOffsetX:Number = originX * Math.cos(radVal) - originY * Math.sin(radVal);
var originalOffsetY:Number = originX * Math.sin(radVal) + originY * Math.cos(radVal);
var newX:Number = Number((centerX - originalOffsetX).toFixed(1));
var newY:Number = Number((centerY - originalOffsetY).toFixed(1));
this.move(newX, newY);
}
}
}
other components that extend the Panel
This component is a ButtonBar for the ImageBtn component.
This example shows you an ImageBtnBar in action:
the Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
xmlns:creativesource="it.creativesource.*"
viewSourceURL="srcview/index.html" width="550" height="130">
<creativesource:ImageBtnBar width="444" direction="horizontal">
<creativesource:ImageBtn
id="imageBtn"
backgroundImg="@Embed('./assets/base.png')"
rollOverImage="@Embed('./assets/over.png')"
selectedImage="@Embed('./assets/down.png')"
enableSelection="true"
width="130" height="50" />
<creativesource:ImageBtn
id="imageBtn1"
backgroundImg="@Embed('./assets/base.png')"
rollOverImage="@Embed('./assets/over.png')"
selectedImage="@Embed('./assets/down.png')"
enableSelection="true"
width="130" height="50"
/>
<creativesource:ImageBtn
id="imageBtn2"
backgroundImg="@Embed('./assets/base.png')"
rollOverImage="@Embed('./assets/over.png')"
selectedImage="@Embed('./assets/down.png')"
enableSelection="true"
width="130" height="50"
/>
</creativesource:ImageBtnBar>
</mx:Application>
the ImageBtnBar:
package it.creativesource
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.containers.Box;
public class ImageBtnBar extends Box
{
protected var dataProvider:ArrayCollection
public function ImageBtnBar(){
super();
dataProvider=new ArrayCollection();
}
override public function addChild(child:DisplayObject):DisplayObject{
if(!(child is ImageBtn))
throw new Error('The child must be an ImageBtn')
child.addEventListener(MouseEvent.CLICK,deSelectOthers);
dataProvider.addItem(child)
return super.addChild(child)
}
override public function removeChild(child:DisplayObject):DisplayObject{
for(var i:int=0;i<dataProvider.length;i++){
if(child==dataProvider[i])
removeChildAt(i);
}
return super.removeChild(child)
}
override public function removeChildAt(index:int):DisplayObject{
dataProvider.removeItemAt(index)
return super.removeChildAt(index);
}
private function deSelectOthers(e:MouseEvent):void{
for(var i:int=0;i<super.numChildren;i++){
if(dataProvider[i]!=e.currentTarget)
dataProvider[i].deSelect();
}
}
}
}the ImageBtn:
package it.creativesource
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Text;
public class ImageBtn extends Canvas
{
public const BASE_STATE:String='BASE';
public const OVER_STATE:String='OVER';
public const SELECTED_STATE:String='SELECTED';
public const STATE_CHANGED:String="stateChanged"
protected var textField:Text;
protected var background:Image;
protected var backgroundOver:Image;
protected var backgroundSelected:Image;
private var _state:String=BASE_STATE;
public function ImageBtn()
{
super();
buttonMode=true;
background=new Image()
backgroundOver=new Image()
backgroundSelected=new Image();
textField=new Text();
state=BASE_STATE;
activate();
}
override protected function createChildren():void{
super.createChildren();
addChild(background);
addChild(backgroundOver);
addChild(backgroundSelected);
addChild(textField);
}
override public function set label(value:String):void{
textField.text=value;
}
[Bindable]
override public function get label():String{
return textField.text;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
textField.x=this.width/2-textField.textWidth/2;
textField.y=this.height/2-textField.textHeight/2;
textField.mouseChildren=false;
horizontalScrollPolicy="none"
verticalScrollPolicy="none"
}
public function set enableSelection(b:Boolean):void{
if(b==true)
addEventListener(MouseEvent.CLICK,selectBtn)
}
public function set backgroundImg(s:String):void{
background.source=s;
}
public function set rollOverImage(s:String):void{
backgroundOver.source=s;
}
public function set selectedImage(s:String):void{
backgroundSelected.source=s;
}
private function handleOut(e:MouseEvent=null):void{
state=BASE_STATE;
}
private function handleOver(e:MouseEvent=null):void{
state=OVER_STATE
}
private function selectBtn(e:MouseEvent=null):void{
state=SELECTED_STATE
}
public function set state(state:String):void{
switch(state){
case BASE_STATE:
setBaseState();
break;
case OVER_STATE:
setOverState();
break;
case SELECTED_STATE:
setSelectedState();
break;
default:
throw new Error('This state does not exist, please use '+BASE_STATE+'or'+OVER_STATE+'or'+SELECTED_STATE)
setBaseState();
break;
}
_state=state
}
public function get state():String{
return _state
}
private function setBaseState():void{
background.visible=true
backgroundOver.visible=false
backgroundSelected.visible=false
dispatchEvent(new Event(STATE_CHANGED))
}
private function setOverState():void{
background.visible=false
backgroundOver.visible=true
backgroundSelected.visible=false
dispatchEvent(new Event(STATE_CHANGED))
}
private function setSelectedState():void{
if(state!=SELECTED_STATE){
backgroundSelected.visible=true
background.visible=false
backgroundOver.visible=false
removeEventListener(MouseEvent.MOUSE_OVER,handleOver)
removeEventListener(MouseEvent.MOUSE_OUT,handleOut)
dispatchEvent(new Event(STATE_CHANGED))
}
}
public function deSelect(e:MouseEvent=null):void{
state=BASE_STATE;
activate()
dispatchEvent(new Event(STATE_CHANGED))
}
private function activate():void{
addEventListener(MouseEvent.MOUSE_OVER,handleOver)
addEventListener(MouseEvent.MOUSE_OUT,handleOut)
}
}
}This component is an alpha version of a custom button with a backgroundImage that changes depending on its state;
This Example shows you a simple ImageBtn in action:
the Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
xmlns:creativesource="it.creativesource.*"
viewSourceURL="srcview/index.html" width="190" height="130">
<creativesource:ImageBtn
id="imageBtn"
backgroundImg="@Embed('./assets/base.png')"
rollOverImage="@Embed('./assets/over.png')"
selectedImage="@Embed('./assets/down.png')"
enableSelection="true"
width="130" height="50" />
<mx:Button click="imageBtn.deSelect()" label="DESELECT IT" x="140" y="89"/>
</mx:Application>
the Component:
package it.creativesource
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Text;
public class ImageBtn extends Canvas
{
public const BASE_STATE:String='BASE';
public const OVER_STATE:String='OVER';
public const SELECTED_STATE:String='SELECTED';
public const STATE_CHANGED:String="stateChanged"
protected var textField:Text;
protected var background:Image;
protected var backgroundOver:Image;
protected var backgroundSelected:Image;
private var _state:String=BASE_STATE;
public function ImageBtn()
{
super();
buttonMode=true;
background=new Image()
backgroundOver=new Image()
backgroundSelected=new Image();
textField=new Text();
state=BASE_STATE;
activate();
}
override protected function createChildren():void{
super.createChildren();
addChild(background);
addChild(backgroundOver);
addChild(backgroundSelected);
addChild(textField);
}
override public function set label(value:String):void{
textField.text=value;
}
[Bindable]
override public function get label():String{
return textField.text;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
textField.x=this.width/2-textField.textWidth/2;
textField.y=this.height/2-textField.textHeight/2;
textField.mouseChildren=false;
horizontalScrollPolicy="none"
verticalScrollPolicy="none"
}
public function set enableSelection(b:Boolean):void{
if(b==true)
addEventListener(MouseEvent.CLICK,selectBtn)
}
public function set backgroundImg(s:String):void{
background.source=s;
}
public function set rollOverImage(s:String):void{
backgroundOver.source=s;
}
public function set selectedImage(s:String):void{
backgroundSelected.source=s;
}
private function handleOut(e:MouseEvent=null):void{
state=BASE_STATE;
}
private function handleOver(e:MouseEvent=null):void{
state=OVER_STATE
}
private function selectBtn(e:MouseEvent=null):void{
state=SELECTED_STATE
}
public function set state(state:String):void{
switch(state){
case BASE_STATE:
setBaseState();
break;
case OVER_STATE:
setOverState();
break;
case SELECTED_STATE:
setSelectedState();
break;
default:
throw new Error('This state does not exist, please use '+BASE_STATE+'or'+OVER_STATE+'or'+SELECTED_STATE)
setBaseState();
break;
}
_state=state
}
public function get state():String{
return _state
}
private function setBaseState():void{
background.visible=true
backgroundOver.visible=false
backgroundSelected.visible=false
dispatchEvent(new Event(STATE_CHANGED))
}
private function setOverState():void{
background.visible=false
backgroundOver.visible=true
backgroundSelected.visible=false
dispatchEvent(new Event(STATE_CHANGED))
}
private function setSelectedState():void{
if(state!=SELECTED_STATE){
backgroundSelected.visible=true
background.visible=false
backgroundOver.visible=false
removeEventListener(MouseEvent.MOUSE_OVER,handleOver)
removeEventListener(MouseEvent.MOUSE_OUT,handleOut)
dispatchEvent(new Event(STATE_CHANGED))
}
}
public function deSelect(e:MouseEvent=null):void{
state=BASE_STATE;
activate()
dispatchEvent(new Event(STATE_CHANGED))
}
private function activate():void{
addEventListener(MouseEvent.MOUSE_OVER,handleOver)
addEventListener(MouseEvent.MOUSE_OUT,handleOut)
}
}
}
This example shows you how easy is the comunication between Flex and Javascript:
The Flex Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
creationComplete="{init()}"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" height="200" width="300" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function init():void{
if(ExternalInterface.available) {
ExternalInterface.addCallback('waitForJavascript',DisplayJavascriptText);
}
}
private function sendToJavascript():void{
if(ExternalInterface.available) {
ExternalInterface.call('displayFlexText',textInput.text)
}
}
private function DisplayJavascriptText(param:String):void{
Alert.show(param)
}
]]>
</mx:Script>
<mx:TextInput text="Send this text to Javascript" id="textInput" width="220"/>
<mx:Button click="{sendToJavascript()}" label="send" width="55"/>
</mx:Application>The Javascript/HTML Code:
<script language="javascript" >
function displayFlexText(param){
alert(param)
}
function sendToFlex(){
main.waitForJavascript(document.getElementById('textInput').value);
//note that "main" is the id of the swf object
}
</script>
<input id="textInput" type="text" value="Send this text to Flex" />
<input type="button" value="Send" onclick="sendToFlex()" /> This example shows you how to extend a Panel and add a button to minimize it:
The Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:creativesource="it.creativesource.*">
<creativesource:MinimizablePanel width="407" height="240" />
</mx:Application>
the MinimizeablePanel :
package it.creativesource
{
import flash.events.MouseEvent;
import mx.containers.Panel;
import mx.controls.Button;
import mx.effects.Resize;
public class MinimizablePanel extends Panel
{
private var _minimizer:Button=new Button();
private var _resizerEffect:Resize=new Resize();
private var _oldHeight:int=30;
public function MinimizablePanel()
{
super();
_minimizer.addEventListener(MouseEvent.CLICK,minimize)
}
override protected function createChildren():void{
super.createChildren();
super.titleBar.addChild(_minimizer);
}
private function minimize(e:MouseEvent):void{
_resizerEffect.stop()
_minimizer.removeEventListener(MouseEvent.CLICK,minimize)
_minimizer.addEventListener(MouseEvent.CLICK,maximize)
_resizerEffect.heightFrom=this.height;
_resizerEffect.heightTo=_oldHeight;
_oldHeight=this.height;
_resizerEffect.play([this]);
}
private function maximize(e:MouseEvent):void{
_resizerEffect.stop()
_minimizer.removeEventListener(MouseEvent.CLICK,maximize)
_minimizer.addEventListener(MouseEvent.CLICK,minimize)
_resizerEffect.heightFrom=this.height;
_resizerEffect.heightTo=_oldHeight;
_oldHeight=this.height;
_resizerEffect.play([this]);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
_minimizer.x=super.titleBar.width-55;
_minimizer.y=4;
_minimizer.width=22;
_minimizer.height=22;
}
}
}other components that extend the Panel
This example shows you how to extend a Panel and add a button to resize it:
The Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="it.creativesource.*">
<ns1:ResizablePanel title="Resize Me !!" x="73"
y="110" width="258" height="213" />
</mx:Application>the ResizePanel :
package it.creativesource
{
import flash.events.MouseEvent;
import mx.containers.Panel;
import mx.controls.Button;
public class ResizablePanel extends Panel
{
public function ResizablePanel()
{
super();
resizer.addEventListener(MouseEvent.MOUSE_DOWN,handleDown)
}
private var resizer:Button=new Button();
override protected function createChildren():void{
this.resizer.width=12;
this.resizer.height=12;
super.createChildren();
this.rawChildren.addChild(resizer);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
this.resizer.y = unscaledHeight - resizer.height ;
this.resizer.x = unscaledWidth - resizer.width ;
}
private function handleDown(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,handleScale)
stage.addEventListener(MouseEvent.MOUSE_UP,stopResize)
}
private function handleScale(e:MouseEvent):void{
if(stage.mouseX-this.x>50)
this.width=stage.mouseX-this.x
if(stage.mouseY-this.y>50)
this.height=stage.mouseY-this.y
}
private function stopResize(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,handleScale)
stage.removeEventListener(MouseEvent.MOUSE_UP,stopResize)
}
}
}other components that extend the Panel
This example shows you how to extend a Panel and make it draggable:
the Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="it.creativesource.*">
<ns1:DraggablePanel title="Drag Me !!" x="192"
y="110" width="230" height="273" />
</mx:Application>
the DraggablePanel:
package it.creativesource
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.containers.Panel;
public class DraggablePanel extends Panel
{
public function DraggablePanel()
{
super();
}
private function handleDown(e:Event):void{
this.startDrag()
}
private function handleUp(e:Event):void{
this.stopDrag()
}
override protected function createChildren():void{
super.createChildren();
super.titleBar.addEventListener(MouseEvent.MOUSE_DOWN,handleDown)
super.titleBar.addEventListener(MouseEvent.MOUSE_UP,handleUp)
}
}
}other components that extend the Panel
This example extends the Datagrid and ables you to make search inside the dataProvider;
The Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="{init()}" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:creativesource="it.creativesource.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arrayCollection:ArrayCollection=new ArrayCollection();
private function init():void{
arrayCollection.addItem({id:0,name:'Fedele',surname:'Marotti'});
arrayCollection.addItem({id:1,name:'Alessandro',surname:'Lambiase'});
arrayCollection.addItem({id:2,name:'Magie',surname:'Cannizzaro'});
arrayCollection.addItem({id:3,name:'Francesco',surname:'Romeo'});
arrayCollection.addItem({id:4,name:'James',surname:'Marotti'});
arrayCollection.addItem({id:5,name:'Tom',surname:'Lambiase'});
arrayCollection.addItem({id:6,name:'Antony',surname:'Cannizzaro'});
arrayCollection.addItem({id:7,name:'George',surname:'Romeo'});
}
]]>
</mx:Script>
<creativesource:SearchableDataGrid id="sDg" enableSearch="true"
serchableFields="['name']"
dataProvider="{arrayCollection}" x="10" y="40" width="357">
<creativesource:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Surname" dataField="surname"/>
</creativesource:columns>
</creativesource:SearchableDataGrid>
</mx:Application>
the SearchableDatagrid:
package it.creativesource
{
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.containers.HBox;
import mx.controls.DataGrid;
import mx.controls.TextInput;
public class SearchableDataGrid extends DataGrid
{
protected var textField:TextInput=new TextInput();
public var serchableFields:Array=[];
private var _dataProvider:ArrayCollection=new ArrayCollection();
public var enableSearch:Boolean=true;
private var _headerBox:HBox=new HBox()
public function SearchableDataGrid()
{
super();
}
override protected function createChildren():void{
super.createChildren();
if(enableSearch){
_headerBox.width=super.width;
_headerBox.height=22;
_headerBox.y=-25;
textField.width=100;
textField.addEventListener(Event.CHANGE,handleChange)
_headerBox.addChild(textField)
super.addChild(_headerBox)
super.y=super.y+25;
}
}
private function handleChange(e:Event):void{
_dataProvider.refresh();
dispatchEvent(new Event('textChanged'));
}
private function myFilterFunction(item:Object):Boolean{
var r:Boolean=false;
for (var i:String in item){
if(serchableFields.length==0){
try{
if( matchCase(item[i].toLowerCase()))
return true;
}catch(e:*){}
}else{
for(var j:int=0;j<serchableFields.length;j++){
if(i==serchableFields[j]){
try{
if( matchCase(item[i].toLowerCase()))
return true;
}catch(e:*){}
}
}
}
}
return false;
}
private function matchCase(str:String):Boolean{
var pattern:RegExp = new RegExp(textField.text.toLowerCase());
return pattern.test(str);
}
override public function set dataProvider(value:Object):void{
try{
_dataProvider=ArrayCollection(value);
_dataProvider.filterFunction=myFilterFunction;
}catch(e:Error){
throw new Error('In this component the datatype of the dataProvider must be an ArrayCollection ;');
}
super.dataProvider=_dataProvider;
}
}
}
The “Create application from database” is a Flex 3 feature that enable you to create simple applications in few clicks;
Here is an example which use php as back-end and MySql as DataSource:
First of all you have to setup your MySql datasource by creating a database and a table;
Create a database
CREATE DATABASE `users` ;Create a table:
CREATE TABLE `accounts` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 16 ) NOT NULL ,
`password` VARCHAR( 16 ) NOT NULL ,
`priviledge` INT( 1 ) NOT NULL
) ENGINE = innodb;Than create a project that use PHP as server technology:
Right Click on the Flex Navigation Panel -> new -> Flex Project;
Choose the project name and select PHP as Application server type;
Click Next;
Before clicking the Finish button be sure that the Web root folder and Root URL are valid, to do so you can click on Validate Configuration;
Now you can create your application!
Choose Data -> Create Application from Database from the main menu;
Select your project and create a New Connection, give it a name a a description(optional) and check the flag Auto-connect when the wizard is finished;
Setup your connection by filling the TextFields and then click on Test Connection
This is an example of a tipical MySql Connection
Host URL: localhost
Database Name:users
User Name: root
Password: DatabasePasswordForRootIf your connection is valid you can click finish and return to the main screen where you can select the table and the Primary key;
In this example the Table name is accounts and the primary key is id
Click the Next button;
choose the source folder and the PHP file name and go on;
in this screen you can see all the column of your table and you can choose which one you want to show and on which column enable filtering;
Click on Finish and thats all!!
Publish and enjoy!!!
Using the RemoteClass Metadata, Flex can register the data type of the Class;
For example if you want to drag an item form one ListBase to another one, you need to define that Class as a RemoteClass, otherwise the data type is losted after the drag;
The Application:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”
xmlns:creativesource=”it.creativesource.*” >
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.Alert;
private function displayInformation(e:ListEvent):void{
Alert.show(e.itemRenderer.data.toString())
}
]]>
</mx:Script>
<mx:Label text=”Drag items to the central datagrid and then click them!!“/>
<mx:HBox>
<mx:DataGrid dragEnabled=”true” width=”250” height=”150“>
<mx:dataProvider>
<mx:Array>
<creativesource:ObjectWithRemote idObj=”1” name=”Object1 With Remote“/>
<creativesource:ObjectWithRemote idObj=”2” name=”Object2 With Remote“/>
</mx:Array>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn headerText=”Objects with remote” dataField=”name“/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid itemClick=”displayInformation(event)” dropEnabled=”true” horizontalCenter=”0” top=”173” width=”250” height=”150“>
<mx:columns>
<mx:DataGridColumn headerText=”Objects” dataField=”name“/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dragEnabled=”true” width=”250” height=”150“>
<mx:dataProvider>
<mx:Array>
<creativesource:ObjectWithoutRemote idObj=”1” name=”Object1 without remote“/>
<creativesource:ObjectWithoutRemote idObj=”2” name=”Object2 without remote“/>
</mx:Array>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn headerText=”Objects without Remote” dataField=”nome“/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>Object without RemoteClass Metadata:
package it.creativesource
{
import flash.display.Sprite;
public class ObjectWithoutRemote extends Sprite
{
private var _idObj:String=”;
private var _name:String=”;
public function ObjectWithoutRemote()
{
super();
}
public function get idObj():String{
return _idObj;
}
public function set idObj(idObj:String):void{
_idObj=idObj;
}
public function get name():String{
return _name;
}
public function set name(name:String):void{
_name=name;
}
}
}Object with Remote Metadata:
package it.creativesource
{
import flash.display.Sprite;
[RemoteClass]
public class ObjectWithRemote extends Sprite
{
private var _idObj:String=”;
private var _name:String=”;
public function ObjectWithRemote()
{
super();
}
public function get idObj():String{
return _idObj;
}
public function set idObj(idObj:String):void{
_idObj=idObj;
}
public function get name():String{
return _name;
}
public function set name(name:String):void{
_name=name;
}
}
}Google has finally released the Api for Flash of the famous Google maps,too!
to start developing you can visit http://code.google.com/apis/maps/index.html
and follow this instructions:
- get your personal Google Map API KEY that you can use on your domain
- download the SWC library
This is a simple flex project
the Application.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Panel title="Google Maps API for Flash - Simple Map" width="100%" height="100%">
<mx:UIComponent id="mapContainer"
initialize="startMap(event);"
resize="resizeMap(event)"
width="100%" height="100%"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
private var map:Map;
public function startMap(event:Event):void {
map = new Map();
map.addEventListener(MapEvent.MAP_READY, onMapReady);
mapContainer.addChild(map);
}
public function resizeMap(event:Event):void {
map.setSize(new Point(mapContainer.width, mapContainer.height));
}
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(41.936907, 12.539244), 14, MapType.NORMAL_MAP_TYPE);
}
]]>
</mx:Script>
</mx:Application>
P.S. remember to modify the Html to pass the API KEY like a flashvars
in this way:
the HTML file
<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="./swf/MapSimple.swf">
<param name="quality" value="high">
<param name="flashVars" value="key=ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g">
<embed
width="800px"
height="600px"
src="./swf/MapSimple.swf"
quality="high"
flashVars="key=ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div>
This example shows you how to switch between custom ItemRenderer in a TileList
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="{init()}" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="*">
<mx:Script>
<![CDATA[
import it.creativesource.*;
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection=new ArrayCollection()
private function init():void{
dp.addItem({text:"Obj1"})
dp.addItem({text:"Obj2"})
dp.addItem({text:"Obj3"})
dp.addItem({text:"Obj4"})
}
private function switchToButton():void{
var itemRenderer:ClassFactory=new ClassFactory(it.creativesource.ItemRenderer2)
tileList.itemRenderer=itemRenderer;
}
private function switchToLabel():void{
var itemRenderer:ClassFactory=new ClassFactory(it.creativesource.ItemRenderer1)
tileList.itemRenderer=itemRenderer;
}
]]>
</mx:Script>
<mx:TileList
columnCount="2"
id="tileList"
itemRenderer="it.creativesource.ItemRenderer1"
dataProvider="{dp}" width="400" height="244"/>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button click="switchToLabel()" label="Label"/>
<mx:Button click="switchToButton()" label="Button"/>
</mx:HBox>
</mx:Application>
ItemRenderer1:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label text="{data.text}" xmlns:mx="http://www.adobe.com/2006/mxml" />
ItemRenderer2:
<?xml version="1.0" encoding="utf-8"?>
<mx:Button label="{data.text}" xmlns:mx="http://www.adobe.com/2006/mxml"/>