Fev 7

Criando um Alert que fecha sozinho com a classe flash.utils.Timer

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, auto, BI, Bindable, código, control, Controls, Dica, event, EventListener, exemplo, Flex, function, handle, if, label, library, MXML, Number, O, on, pt, RIA, Ria’s Geral, spark, UI, XML @ 02 7th, 2011 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é para aqueles que nos últimos dias me perguntaram sobre como fechar automaticamente uma janela depois de um certo período de tempo. Para esse exemplo criamos um Alert que será fechado após 5 segundos. Veja o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Aguarde, serei fechado em 5seg ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

Espero que tenham gostado. Até a próxima!

Dez 28

Criação dinâmica de objetos com RSL

Escrito por Fabio da Silva em 1, 2009, 4, 6, Adobe, AR, as3, BI, blog, Blogs, bug, class, classe, classes, components, control, Controls, demo, err, erro, flash, Flex, Flex 3, Flex 4, for, framework, function, Google, html, IE, if, int, library, mg, O, on, RIA, Ria’s Geral, runtime, SDK, skins, spark, swf, team, UI, uint, utils @ 12 28th, 2010 | via http://fabiophx.blogspot.com | Sem comentários

No meu post Criação dinâmica de objetos mostrei os passos para este tipo de criação.

Naquele post digo que é necessário o registro das classes dos objetos a serem criados dinamicamente para o compilador “saber” quais classes compilar. Isto é válido quando a opção Project > Properties > Flex Build Path > Library Path > Framework Linkage está marcado como Merged into code.

Quando a opção Framework Linkage está marcada como Runtime shared library (RSL) o registro não é necessário porque todo o framework estará junto (normalmente) com o swf da aplicação. Com isso podemos criar objetos dinamicamente da seguinte forma:

Flex 3
import mx.core.UIComponent;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“mx.controls.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
addChild(instance);
}

Flex 4
import mx.core.UIComponent;
import spark.skins.spark.ButtonSkin;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“spark.components.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
instance.setStyle(“skinClass”, spark.skins.spark.ButtonSkin);
addElement(instance);
}

A diferença entre o Flex 3 e 4 é que no 4 se não for definido o skinClass dará um erro no addElement informando que não foi possível encontrar o skin, o que vejo como um bug o qual reportei aqui (mais votos mais fácil o Flex Team dar uma olhada).

Nov 20

Spark Button com Imagem

Escrito por Fabio da Silva em 1, 4, 6, app, AR, BI, blog, Blogs, botão, class, control, Controls, exemplo, Flex, Flex 4, fonte, Google, html, IE, if, image, mg, O, on, pt, RIA, Ria’s Geral, spark, swf, UI @ 11 20th, 2010 | via http://fabiophx.blogspot.com | Sem comentários

Baseado no fonte do controle IconButton do Chris Callendar peguei o fonte e inclui o style disabledIcon e a propriedade showAsImage.

Neste link você pode ter acesso a uma aplicação exemplo com o botão direito opção View Source habilitada.

Nov 12

Flex Messaging com BlazeDS

Escrito por João Augusto em .NET, 1, 4, 6, Access, Adobe, api, app, Apresentação, AR, AUG, bar, Blazeds, blog, class, control, Controls, Download, event, events, flash, Flex, fonte, for, FullScreen, function, handle, ide, IE, if, label, layout, Mac, Messaging, mg, MXML, O, on, PHP, player, pt, redeRIA, RIA, Ria’s Geral, screen, Sem categoria, swf, TAT, wave, XML @ 11 12th, 2010 | via http://blog.joaoaugusto.com.br | 2 comentários

Slides e fontes da minha apresentação sobre Flex Messaging na Semana da Informática da UNIVILLE.

Semana da Informática UNIVILLE – Flex Messaging

View more presentations from zaratine.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="application1_creationCompleteHandler(event)" width="100%" height="100%">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.messaging.messages.AsyncMessage;
			import mx.messaging.messages.IMessage;
			import mx.rpc.Fault;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			private function send():void{
				var message:IMessage = new AsyncMessage();
				message.body.subtopic = "Joao"
				message.body.chatMessage  = txtMessage.text;
				producer.send(message);
				txtMessage.text = "";
			}

			private function messageHandler(message:IMessage):void{
				txtConversation.text += message.body.chatMessage + "n";
			}

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				consumer.subscribe();
			}

		]]>
	</mx:Script>

	<!--Responsável por receber as mensagens-->
	<mx:Consumer id="consumer" destination="chat" message="messageHandler(event.message)"/>

	<!--Responsável por enviar as mensagens-->
	<mx:Producer id="producer" destination="chat"/>

	<mx:TextArea id="txtConversation" width="100%" height="100%"/>
	<mx:TextArea id="txtMessage" width="100%" height="100"/>

	<mx:ControlBar width="100%" horizontalAlign="right">
		<mx:Button label="Enviar" click="send()"/>
	</mx:ControlBar>

</mx:Application>

Nov 3

[ Adobe Flex ] Mudando o estilo visual dos Charts

Escrito por Erko Bridee em 1, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Adobe Flex, Air, api, app, AR, Artigo, as3, AUG, auto, back, bar, BI, Bindable, blog, browser, case, class, classe, classes, código, collection, Componente, Componentes, control, Controls, DataProvider, efeito, Estilo, exemplo, filter, Flex, Flex 3, Flexmania, for, framework, function, Google, Gráfico, html, ide, IE, if, image, int, Java, Java Magazine, Javascript, label, layout, live, MEF, mg, MXML, Number, O, on, Oracle, padrão, pt, Ria’s Geral, string, Stroke, Swiz Framework, TAT, try, UI, uint, Ved, web, XML, XMLList, XP @ 11 3rd, 2010 | via http://blog.erkobridee.com | Sem comentários

Algo legal no Flex é que eles nos disponibiliza gráficos, porém, sinceramente o estilo padrão dos gráficos com cores sólidas não me agrada muito, ao meu ver cansa os olhos, então resolvi mudar as cores solidas para um padrão em degrade, para suavizar as cores…

Obs.: tendo em mente que os componentes dos gráficos ainda são os mesmos no Flex 3 e 4 os códigos mxml a seguir serão do Flex 3.

Começando pelo gráfico de barras, para ter o seguinte resultado precisei:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
        	import code.StyleColumnChart;
 
            import mx.charts.chartClasses.IAxis;
 
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }
 
            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return dateFormatter.format(tempDate).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="dateFormatter" formatString="DD" />
    <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
 
    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/1/2007" open="40.29" close="39.58" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/27/2007" open="40.38" close="40.81" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:ColumnChart id="columnChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">
 
        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>
 
        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="August 2007"
                    labelFunction="categoryAxis_labelFunc" />
        </mx:horizontalAxis>
 
        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>
 
        <!-- series -->
        <mx:series>
            <mx:ColumnSeries
            		displayName="Open"
                    xField="@date"
                    yField="@open"
                    fill="{StyleColumnChart.orangeLinearGradient}"
                    stroke="{StyleColumnChart.orangeStroke}">
            </mx:ColumnSeries>
            <mx:ColumnSeries
            		displayName="Close"
                    xField="@date"
                    yField="@close"
                    fill="{StyleColumnChart.blueLinearGradient}"
                    stroke="{StyleColumnChart.blueStroke}">
            </mx:ColumnSeries>
        </mx:series>
 
        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>
    </mx:ColumnChart>
</mx:Application>

Obs.: esse código acima reaproveitei do respectivo post do blog.flexexamples.com

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.LinearGradient;
	import mx.graphics.Stroke;
 
	[Bindable]
	public class StyleColumnChart
	{
		public function StyleColumnChart() {}
 
		//----------------------------------------------------------------------
		// @BEGIN: LinearGradient color
 
		public static function linearGradientColor(colorDark:uint, colorLight:uint):LinearGradient {
			var linearGradient:LinearGradient = new LinearGradient();
			var arr:Array = [];
			arr.push(new GradientEntry(colorDark, 0.0, 0.8));
			arr.push(new GradientEntry(colorLight, 1.0, 0.6));
			linearGradient.entries = arr;
			return linearGradient;
		}
 
		public static function get redLinearGradient():LinearGradient {
			return linearGradientColor(0x990000,0xEE0000);
		}
 
		public static function get greenLinearGradient():LinearGradient {
			return linearGradientColor(0x008B00,0x00FF00);
		}
 
		public static function get blueLinearGradient():LinearGradient {
			return linearGradientColor(0x0066FF,0x00CCFF);
		}
 
		public static function get yellowLinearGradient():LinearGradient {
			return linearGradientColor(0xCAC333, 0xF5F30E);
		}
 
		public static function get orangeLinearGradient():LinearGradient {
			return linearGradientColor(0xFC9C00, 0xFCC048);
		}
 
		// @END: LinearGradient color
		//----------------------------------------------------------------------
		// @BEGIN: stroke color
 
		public static function strokeColor(color:uint):Stroke {
			return new Stroke(color,1);
		}
 
		public static function get redStroke():Stroke {
			return strokeColor(0x990000);
		}
 
		public static function get greenStroke():Stroke {
			return strokeColor(0x008B00);
		}
 
		public static function get blueStroke():Stroke {
			return strokeColor(0x0066FF);
		}
 
		public static function get yellowStroke():Stroke {
			return strokeColor(0xCAC333);
		}
 
		public static function get orangeStroke():Stroke {
			return strokeColor(0xFC9C00);
		}
 
		// @END: stroke color
		//----------------------------------------------------------------------
	}
}

A seguir segue um exemplo para gráfico de pizza:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
 
     import code.StylePieChart;
 
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Data:"IN", Value:2000},
        {Data:"OUT", Value:1000}
     ]);
 
    ]]>
  </mx:Script>
 
  <mx:Panel title="Pie Chart">
 
     <mx:PieChart id="myChart"
        dataProvider="{expenses}"
        showDataTips="true">
        <mx:series>
           <mx:PieSeries
                field="Value"
                nameField="Data"
                labelPosition="callout"
                fills="{StylePieChart.inOutFills}"/>
        </mx:series>
     </mx:PieChart>
 
     <mx:Legend dataProvider="{myChart}"/>
 
  </mx:Panel>
 
</mx:Application>

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.RadialGradient;
	import mx.graphics.SolidColor;
 
	[Bindable]
	public class StylePieChart
	{
		public function StylePieChart()	{}
 
		//----------------------------------------------------------------------
 
		public static function get inOutFills():Array {
			var gradients:Array = new Array();
 
			var fill:RadialGradient = null;
			var g1:GradientEntry = null;
			var g2:GradientEntry = null;
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0xCC3640);
			g2 = new GradientEntry(0x990000);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0x30BB32);
			g2 = new GradientEntry(0x009900);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			return gradients;
		}
 
		//----------------------------------------------------------------------
	}
}

Para achar as cores utilizei os itens descritos neste post: [Adobe AIR] Color Browser

Veja também:

Out 18

Upload de arquivos com Adobe Flex e Zend AMF

Escrito por Leonardo França em .NET, 1, 2009, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Adobe Flex, AMF, apache, api, app, AR, arte, Artigo, back, bar, BI, Bindable, boolean, carregar, catch, class, classe, comunicação, control, Controls, custom, Download, err, erro, error, event, EventListener, events, filter, flash, Flex, for, framework, function, Google, handle, html, ide, IE, if, image, int, Java, Javascript, label, library, lite, live, map, mg, MXML, O, on, PHP, procura, progress, pt, reference, Remoting, Ria’s Geral, RoR, server, spark, string, Tema, Teste, TextInput, try, UI, utils, Ved, Widget, Widgets, Wordpress, XML, XP, zend, Zend Amf, zendAMF, zendFramework @ 10 18th, 2010 | via http://www.leonardofranca.com.br | Sem comentários

O Zend AMF é uma implementação feita em PHP [bb] para se trabalhar com o protocolo de comunicação binário AMF(Action Message Format) fazendo parte do ZendFramework. Precisei implementar um sistema de upload de arquivos que fosse um pouco diferente do que normalmente é usado no Adobe Flash, sendo que essa funcionalidade precisava ser integrada no Zend AMF.

Pesquisando um pouco na net, achei a solução que foi mais simples do que eu imaginava baseada nesse artigo com algumas poucas adaptações.

Começaremos pelo nosso gateway que será usado como endpoint no Adobe Flex.

PLAIN TEXT

PHP:

<?php
require_once ‘Zend/Amf/Server.php’;
require_once ‘Zend/Amf/Exception.php’;
require_once ‘br/com/leonardofranca/vo/FileVO.php’;
require_once ‘br/com/leonardofranca/UploadZendAMF.php’;
 
$server = new Zend_Amf_Server();
$server->setProduction(false);
 
$server->setClass(‘UploadZendAMF’);
 
$server->setClassMap(‘FileVO’,"br.com.leonardofranca.vo.FileVO");
 
echo($server->handle());
?>

Agora o nosso VO com propriedades com nome do arquivo e os binarios.

PLAIN TEXT

PHP:

<?php
class FileVO
{
    public $_explicitType = ‘br.com.leonardofranca.vo.FileVO’;
    public $fileName;
    public $fileData;
    
    function __construct ()
    {}
    
    public function getFileName() 
    {
        return $this->fileName;
    }
 
    public function setFileName($fileName) 
    {
        $this->fileName = $fileName;
    }
 
    public function getFileData() 
    {
        return $this->fileData;
    }
 
    public function setFileData($fileData) 
    {
        $this->fileData = $fileData;
    }
}
?>

Agora nossa classe PHP que ser responsavél por efetudar o upload.

PLAIN TEXT

PHP:

<?php
class UploadZendAMF  
{
    public function __construct()
    {
      
    }
    
    public function upload(FileVO $data)
    {
        try 
        {
            $fileData = $data->getFileData();
            file_put_contents( ‘C:\apache\htdocs\images\’ . $data->getFileName(), $fileData);
            return true;    
        } 
        catch (Exception $e) 
        {
            throw new Exception($e->getMessage());
        }
    }
}
?>

Agora vamos a camada de visão usando o Adobe Flex, começamos com nosso VO.

PLAIN TEXT

ACTIONSCRIPT3:

package br.com.leonardofranca.vo
{
    import flash.utils.ByteArray;
 
    [Bindable]
    [RemoteClass(alias="br.com.leonardofranca.vo.FileVO")]
    public class FileVO
    {
        private var _fileName:String;
        private var _fileData:ByteArray;
        
        public function FileVO()
        {
        }
 
        public function get fileName():String
        {
            return _fileName;
        }
 
        public function set fileName(value:String):void
        {
            _fileName = value;
        }
 
        public function get fileData():ByteArray
        {
            return _fileData;
        }
 
        public function set fileData(value:ByteArray):void
        {
            _fileData = value;
        }
 
    }
}

Agora nosso mxml que carregará os bytes do arquivo para enviar para o Zend AMF.

PLAIN TEXT

MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <fx:Declarations>
        <!– Place non-visual elements (e.g., services, value objects) here –>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import br.com.leonardofranca.vo.FileVO;
            
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.remoting.mxml.RemoteObject;
            import mx.utils.ObjectUtil;
            
            private var ro:RemoteObject;
            private var fileRef:FileReference;
            private var fileTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg; *.jpeg");
            private var allTypes:Array = new Array(fileTypes);
 
            
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                ro = new RemoteObject();
                ro.destination = "nao faz diferença nenhuma usando com Zend AMF";
                ro.endpoint = "http://localhost:81/ZendAmf/teste_upload.php";
                ro.source = "br.com.leonardofranca.UploadZendAMF";
                ro.addEventListener(ResultEvent.RESULT, handlerResult);
                ro.addEventListener(FaultEvent.FAULT, handlerFault);
                
                btnProcurar.addEventListener(MouseEvent.CLICK, handlerUpload);
                btnSend.addEventListener(MouseEvent.CLICK, uploadVideos);
            }
            
            protected function handlerUpload(evt:MouseEvent=null):void
            {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT,selectHandler);
                //          fileRef.addEventListener(Event.COMPLETE,completeHandler);
                //          fileRef.addEventListener(ProgressEvent.PROGRESS,progressHandler);
                fileRef.browse(allTypes);
            }
            
            protected function selectHandler(evt:Event):void
            {
                txtFile.text = fileRef.name;
                fileRef.load();
            }
            
            protected function uploadVideos(evt:MouseEvent=null):void
            {
                var data:ByteArray = new ByteArray();
                fileRef.data.readBytes(data,0,fileRef.data.length);
                
                var vo:FileVO = new FileVO();
                vo.fileName = fileRef.name;
                vo.fileData = data;
                
                ro.upload(vo);
            }
            
            protected function handlerResult(re:ResultEvent):void
            {
                trace(ObjectUtil.toString(re.message.body));
                if(Boolean(re.message.body))
                {
                    Alert.show("Arquivo enviado com sucesso!","Sucesso!");
                }
                else
                {
                    Alert.show("Não foi possivel enviar o arquivo!","Error!");
                }
            }
            
            protected function handlerFault(fault:FaultEvent):void
            {
                Alert.show(fault.fault.faultString,"Error!");
            }
            
        ]]>
    </fx:Script>
    <mx:Form>
        <mx:FormItem label="Envio de arquivos" direction="horizontal">
            <s:TextInput id="txtFile"/>
            <s:Button id="btnProcurar" label="Procurar"/>
            <s:Button id="btnSend" label="Enviar"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

DOWNLOAD SOURCE

Set 29

Como foi o 1º #DevDay Curitiba

Escrito por Igor Musardo em .NET, 1, 4, 6, Adobe, Adobe Flex, Air, AR, Arquitetura, Asp.Net, Banco de Dados, BI, break, business, control, Controls, CRUD, css, Curitiba, dados, demo, Desenvolvedor, desenvolvedores, event, Evento, Excel, exemplo, Flex, for, geo, ide, IE, int, internet, JQuery, mg, Microsoft, Motivação, mvc, O, on, padrão, Palestra, Palestras, rest, RIA, Ria’s Geral, server, silverlight, Software, tag, TAT, Tech, TechEd, Tecnologia, UI, Vários, Ved, Visual Studio, WCF, web, window, windows, WPF, XP, zend @ 09 29th, 2010 | via http://www.igormusardo.com.br | Sem comentários

Sensacional!

É o melhor adjetivo para descrever como foi o 1º DevDay Curitiba, neste último sábado (25/09), tivemos um dia intenso de imersão em tecnologia Microsoft com palestrantes de altíssimo nível. Quase todos os palestrantes são MVP’s e palestraram esse ano no TechEd, maior evento organizado pela Microsoft na América Latina.

O auditório estava cheio de desenvolvedores ávidos pelo conteúdo das palestras.

O Thiago Zavaschi começou a maratona de palestras falando sobre Business Inteligence com dados Geoespaciais. Uma excelente palestra, com várias demos claras e simples!

Depois foi a minha vez de dar continuidade à imersão, contei como comecei a minha caminhada na plataforma Flex, e como aconteceu o meu primeiro contato com o WPF e Silverlight e principalmente como foi que eu abri os olhos para o Silverlight como uma plataforma realmente interessante para aplicações ricas de internet. Ao final da palestra fiz a demo de um aplicativo CRUD em Silverlight com WCF RIA Services do zero, incluindo a criação do banco de dados que você.

Tivemos uma pausa para o Coffee-break e o bate-papo.

Depois foi a vez do Djonatas Tenfen explicar para todos o que é o MVVM e quais os benefícios de se utilizar esse padrão de arquitetura em aplicações Silverlight.

Pausa para o almoço! no Mexicano!

Na volta do almoço o Rodolpho Carmo mostrou para todos como será a plataforma do Windows Phone 7 e como desenvolver um aplicativo em pouquíssimo tempo para o WP7. No final da palestra o Windows Phone 7 dançou o Ah! Muleque…

Victor Cavalcante subiu no palco logo após a palestra do Rodo e quebrou cada um dos conceitos por trás do ASP.NET WebForms comparando-o com a Matrix, pois os conceitos do WebForms simplesmente não são conceitos de Web, como por exemplo, Web não tem Estado, Web não tem Server Side Controls, etc. E nos apresentou a pílula Vermelha para conhecermos a verdade através do ASP.NET MVC + CSS + JQuery em uma palestra muito dinâmica e divertida.

E para fechar com chave de ouro o DevDay, não tinha ninguém melhor que o Giovanni Bassi. Com uma palestra extremamente provocadora, apresentando a verdade nua e crua que mexeu com vários desenvolvedores presentes fazendo-os cair na real sobre o que realmente é ser um Desenvolvedor de Software Profissional, quais as responsabilidades e obrigações de se desenvolver software! Sem dúvida foi uma palestra para a reflexão de todos.

Ao final do DevDay fizemos vários sorteios de mouse sem-fio, pen drives e uma mochila para Notebook.

Sem dúvida foi um dia sensacional!

Aguarde, pois mais DevDays virão por aí! Até o próximo…

Set 16

S:TextArea – recuperando um texto selecionado

Escrito por Erko Bridee em .NET, 1, 3d, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Air, api, AR, AUG, BI, blog, class, código, control, Controls, Desenvolvimento, DRE, exemplo, explorer, Flex, Flex 4, framework, function, git, Google, html, ide, IE, if, image, int, Java, Javascript, label, live, map, mg, NaN, Number, O, on, pt, Ria’s Geral, SDK, string, Swiz Framework, TAT, UI, Ved, XP @ 09 16th, 2010 | via http://blog.erkobridee.com | Sem comentários

Segue um trecho de código que exemplifica como recuperar um texto selecionado em um s:TextArea [flex 4 sdk] via código

^?View Code ACTIONSCRIPT3

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private function getSelectedText():void {
                var txt:String = "";
 
                var bs:int = ta.selectionAnchorPosition;
                var es:int = ta.selectionActivePosition;
 
                txt = ta.text.substring(bs, es);
 
                Alert.show(txt, "Selected Text");
            }
        ]]>
    </fx:Script>
 
    <s:TextArea
        id="ta"
        left="5" right="5"
        top="5" height="200">
        <s:text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque mauris malesuada neque aliquam convallis. Mauris accumsan neque eu turpis aliquam sodales. Maecenas rutrum pharetra odio et malesuada. Aliquam sed urna sem, ut consectetur augue. Aliquam ultrices, metus in semper imperdiet, erat lacus accumsan mi, dignissim varius justo justo id ipsum. Aenean sagittis lacinia metus a mollis. Nullam placerat sapien venenatis est congue posuere. Praesent quis risus blandit nisl volutpat dignissim. Ut iaculis sagittis nibh, in sodales nunc iaculis quis. Mauris ultricies, nisl at adipiscing fringilla, elit odio auctor orci, id mattis turpis magna nec augue. Morbi aliquet purus at lectus blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit volutpat varius. Mauris facilisis blandit ligula, sed rutrum neque ornare ut.</s:text>
    </s:TextArea>
 
    <s:Button
        y="213" right="10"
        label="show seleted text"
        click="getSelectedText()"/>

Veja também:

Set 2

Capturando imagem da webcam no Flex

Escrito por Gabriel Versallini em 1, 4, 6, Action Script, Adobe, app, AR, as3, auto, BI, Bindable, codec, collection, Componente, control, Controls, demo, Dica, encode, encoder, event, events, flash, Flex, function, html, ide, IE, if, image, Java, label, layout, MXML, NaN, O, on, pt, relatório, Relatórios, RIA, Ria’s Geral, string, web, WebCam, XML @ 09 2nd, 2010 | via http://www.versallini.com.br | Sem comentários

Fala, galera #soudev.

Estou preparando um post ensinando como criar relatórios no iReport e exibi-los no Flex através do componente xViewer ou Java (estou avaliando ainda), mas enquanto isso, segue uma dica de como capturar imagem da webcam.

[as3]

layout="absolute"
creationComplete="initCam()"
width="358" height="212">

import flash.media.Camera;

import mx.collections.*;
import mx.controls.*;
import mx.events.*;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
import mx.rpc.events.ResultEvent;

[Bindable]
private var imagemBase64:String;

[Bindable]
private var imagemWebcam:ImageSnapshot;

private function initCam():void {
var camera:Camera = Camera.getCamera();
Webcam.attachCamera( camera );
}

private function Capture():void {
imagemWebcam =ImageSnapshot.captureImage( Webcam, 0, new JPEGEncoder( 100 ));
imagemBase64=ImageSnapshot.encodeImageAsBase64( imagemWebcam );
foto.source = imagemWebcam.data;
foto.graphics.clear();
}

private function Limpar():void {
foto.unloadAndStop(false);
}

]]>

[/as3]

Veja a aplicação funcionando:

</p> <p>Seu navegador não suporta iframe, lamento!</p> <p>

Divirta-se.
Até a próxima!

Ago 25

Capturando uma imagem na WebCam e salvando no servidor

Escrito por Daniel Schmitz em 1, 2009, 4, 6, Adobe, AMF, amfphp, apache, app, AR, arte, Artigo, BI, botão, bug, class, classe, código, código fonte, Componente, control, Controls, DataProvider, demo, err, erro, error, event, events, Exemplos, firefox, flash, Flex, fonte, for, Formação, function, Gravação, ide, IE, if, image, imagens, int, itemRenderer, label, layout, library, lista, Messaging, mg, MXML, O, on, padrão, PHP, pt, Remoting, RIA, Ria’s Geral, RoR, server, servidor, spark, string, Teste, UI, uint, web, WebCam, XML @ 08 25th, 2010 | via http://flex.etc.br | 1 comentário

Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.

Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.

Pré requisitos

Wamp Server instalado
Biblioteca AMFPHP – http://www.amfphp.org/

Passos iniciais

Cria a pasta c:wampwwwFlexFoto
Crie o projeto FlexFoto. Atenção na parte de definição do Output Folder:

Copie a pasta amfphp do zip para c:wampwwwFlexFoto
O esquema de pastas fica como na figura a seguir:

Agora vamos configurar o services-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amf-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amf">
                <channels>
                    <channel ref="amf-endpoint"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="amf-endpoint"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="amfphp/gateway.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

E configuramos o services-config.xml nas propriedades do projeto Flex:

Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services

<?php
class HelloWorld
{
  function Say()
  {
    return "Hello World from amfphp";
  }
}

E no Flex, adicione o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

<fx:Declarations>
	<s:RemoteObject id="HelloWorld"
	                   destination="amf" source="HelloWorld">
		<s:method name="Say" result="OnSayResult(event)"/>
	</s:RemoteObject>
</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.rpc.events.ResultEvent;

		protected function OnSayResult(e:ResultEvent):void
		{
			mx.controls.Alert.show(e.result.toString());
		}
	]]>
</fx:Script>

<s:Button label="Hello World">
	<s:click>
		<![CDATA[
		HelloWorld.Say();
		]]>
	</s:click>
</s:Button>

</s:Application>

Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)

Configurando a WebCam

Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">

	<fx:Declarations>
		<s:RemoteObject id="Foto"
		               destination="amf" source="Foto">

		</s:RemoteObject>
	</fx:Declarations>

	<mx:VideoDisplay id="webcam"
				 	 width="160" height="120"
					 top="100"
					 left="100"
					 >
		<mx:creationComplete>
			<![CDATA[
				webcam.attachCamera(Camera.getCamera());
			]]>
		</mx:creationComplete>

	</mx:VideoDisplay>

	<s:Button label="Salvar!!" top="50" left="150">

	</s:Button>

</s:Application>

Salvando a imagem no servidor

Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:

<?php
class Foto
{
 function __construct()
 {

 }

 function Save($fotoAsString)
 {
	//obtém um id unico para o arquivo
	$nomeArquivo = uniqid();

	//configura o nome do arquivo
	$nomeImagem = "imagem/{$nomeArquivo}.jpg";

	//abre o arquivo. A opção w vai criá-lo, caso nao exista
	$arquivo = fopen($nomeImagem, 'w');

	//escreve no arquivo
	fwrite($arquivo, base64_decode($fotoAsString));

	return "ok";

 }
}

Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.

Exibindo as imagens gravadas no Flex

Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:

<s:List
	id="exibirImagens"
	top="10"
	left="150"
	right="10"
	bottom="10"
	width="530"
	height="400"
	>
	<s:layout>
		<s:TileLayout
			requestedColumnCount="5"
			requestedRowCount="8"
			horizontalGap="2"
			verticalGap="2"/>
	</s:layout>
	<s:itemRenderer>
		<fx:Component>
			<mx:Image source="{data}" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.

Para preencher esta lista, usamos o seguinte código:

protected function OnGetAll(event:ResultEvent):void
{
	exibirImagens.dataProvider = new ArrayList((event.result as Array));
}

Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.

Para finalizar, o codigo php do método GetAll():

function GetAll()
{
	//http://snipplr.com/view/742/read-images-of-directory/
	$folder = opendir("imagem");
	$pic_types = array("jpg");
	$index = array();

	while ($file = readdir ($folder)) {
		if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
		{
			array_push($index,"amfphp/services/imagem/$file");
		}
	}
	closedir($folder);	

	return $index;
}

O código php lê o diretório e retorna uma array com o caminho completo da imagem.

O resultado final é visto na tela abaixo: