itemRenderer - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Nov 23

Quase tudo certo para Dominando Flex Mobile

Escrito por Daniel Schmitz em 1, 2.0, 4, 6, Adobe, Adobe Air, Adobe Flex, Air, Android, AR, Arquitetura, BI, builder 4, C#, class, Componente, Componentes, exemplo, Exemplos, flash, flash builder, Flash Builder 4, Flex, for, IE, image, int, Introdução, itemRenderer, lista, lite, Livro, Livros, mg, mobile, NaN, Notícias, O, on, Outros, prova, RIA, Ria’s Geral, S+S, SQLite, Tecnologia, UI @ 11 23rd, 2011 | via http://flex.etc.br | 1 comentário

Está quase tudo preparado para o lançamento do ebook Dominando Flex Mobile no dia 29 de novembro. Como prometido, o livro será lançado no mesmo dia que o Flash Builder 4.6 for lançado, que deve ser provavelmente agora no dia 29. Se houver atrasos perante a Adobe, nós atrasamos aqui também.

O ebook conterá 165 páginas. O preço será R$ 25,00. O formato será PDF, e vou testar o formato EPUB. Todos os exemplos do livro foram testados no Galaxy Tab com Android 2.2 e Adobe Air 3.0.

O que irei abordar:

Introdução ao Adobe Flex
Conhecendo o Flash Builder 4.6
Arquitetura Flex Mobile, principalmente views
Listas e ItemRenderers
Componentes Flex Mobile
Swiz para Flex Mobile
SQLite
Swiz + SQLite
Integração com dispositivo (Gestos, Acelerômetro, GPS etc)

O que não irei abordar:

Android/iOs Market
Native Extensions

Estes dois tópicos serão outros livros, pois dependem da tecnologia. A idéia é criar um “Flex Mobile para programadores Android”, contendo o Market e Native Extensions.

Jul 27

Qual a diferença entre Application, Component, Module, ItemRenderer e Skin ?

Escrito por Daniel Schmitz em 1, 2.0, app, aprender flex, AR, C#, Componente, DataGrid, exemplo, Flex, Flex 4, for, Formulário, Geral, int, itemRenderer, lista, MXML, O, on, RIA, Ria’s Geral, S+S, server, spark, swf, tag, TextInput, UI, XML @ 07 27th, 2011 | via http://flex.etc.br | Sem comentários

O nosso leitor Sandro André nos fez uma pergunta muito boa para quem está começando a aprender Flex, veja:

“queria tirar uma dúvida, o que é e para que server MXML APPLICATION, MXML MODULE, MXML COMPONENT,? MXML ITEM RENDERER, E MXML SKIN?”

Fiz uma resposta rápida, mas seria interessante adicionarmos mais informações através dos comentários. Conto com vocês!

MXML Application: É a aplicação principal, que “vira” um arquivo SWF
na compilação.

MXML Module: É um módulo, um pedaço da aplicação principal, que também? ”vira” um SWF, mas é dependente de um MXML Application

MXML Component: É um componente que é adicionado ao MXML
Application/Module. Geralmente uma tela, um formulário, um Panel, um
DataGrid.

MXML Item Renderer: É uma renderização personalizada de um item de uma? lista. Uma lista pode ser um Spark List, Um datagrid, um combobox,
etc.

MXML Skin: É a forma como um componente pode ser desenhado. Por
exemplo, um combo box é formado por um Spark TextInput e um Spark
Button. A skin pode mudar essa forma.

Fev 25

Alterando o layout do componente Dashboard – Parte 2

Escrito por Pablo Souza em 1, 2009, 4, 6, Adobe, app, AR, arte, back, bar, blog, browser, class, classe, código, Componente, Componentes, components, control, DataProvider, DRE, Flex, Flex 4, for, ide, IE, if, image, itemRenderer, label, layout, library, lite, mg, MXML, O, on, rest, RIA, Ria’s Geral, RTW, Scroll, skins, spark, state, Stroke, TAT, try, UI, Widget, window, XML, XP @ 02 25th, 2011 | via http://rectius.com.br/blog | Sem comentários

No post anterior vimos como mudar a posição dos componentes PodWindow utilizando apenas o container PodManager. Hoje vou mostrar como você pode alterar a aparência da aplicação e do componente PodWindow aplicando as técnicas de skinning do Flex 4.

Comece criando uma nova classe skin para a aplicação em com.rectius.examples.view.assets.AdvancedPodExampleSkin, conforme o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    <s:Rect id="backgroundRect"
            left="0" right="0" top="0" bottom="0">
        <s:fill>
            --- @private
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
            -->
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha="1" color="#9EC993" />
                -- Second color is the outside -->
                <s:GradientEntry alpha="1" color="#5F9653" />
            s:RadialGradient>
        s:fill>
    s:Rect>
?
    <s:Path
        data="   m 0 0
        l 1600 0
        l 0 100
        c -300 -25 -300 50 -1600 50
        z">
        <s:fill>
            <s:RadialGradient>
                -- First color is the inside -->
                <s:GradientEntry alpha=".6" color="#75A06A" />
                -- Second color is the outside -->
                <s:GradientEntry alpha=".6" color="#4B7343" />
            s:RadialGradient>
        s:fill>
    s:Path>
?
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        s:layout>
        --- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"/>
    s:Group>
?
s:Skin>

Agora altere a classe skin da sua application:

<?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"
   xmlns:components="com.rectius.examples.pod.components.*"
   xmlns:view="com.rectius.examples.view.*"
   skinClass="com.rectius.examples.view.assets.AdvancedPodExampleSkin"
   width="100%" height="100%">
?
    <s:Group
        left="0" right="0"
        top="0" height="30"
        clipAndEnableScrolling="true">
        <s:Rect left="0" right="0"
                top="0" bottom="0">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry
                        color="#858585" ratio=".2" />
                    <s:GradientEntry color="#676767"  />
                s:LinearGradient>
            s:fill>
        s:Rect>
        <s:Label
            text="rDashboard"
            fontWeight="bold" color="0xCCCCCC"
            left="5" verticalCenter="0" />
        <s:List
            id="podMinimizedList" left="100" verticalCenter="0"
            skinClass="com.rectius.examples.pod.assets.skins.PodListMinimizedSkin"
            itemRenderer="com.rectius.examples.pod.assets.itemrenderer.PodListItemRenderer"
            dataProvider="{podManager.minimizedPods}">
            <s:layout>
                <s:HorizontalLayout
                    paddingBottom="3" paddingLeft="2"
                    paddingTop="3" paddingRight="2" />
            s:layout>
        s:List>
    s:Group>
?
    <components:PodManager id="podManager"
        skinClass="com.rectius.examples.pod.assets.skins.PodManagerHorizontalSkin"
        left="10" right="10" top="40" bottom="15">
?
        <components:firstElements>
            <view:ChartProfit
                width="100%" height="100%"
                title="Profit"/>
            <view:ChartExpenses
                width="100%" height="100%"
                title="Expenses" />
        components:firstElements>
?
        <components:secondElements>
            <view:ChartWidget
                width="100%" height="100%"
                title="Widget"/>
        components:secondElements>
?
    components:PodManager>
?
s:Application>

Rode a aplicação. O resultado deverá ser esse:

Em seguida vamos crar a classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin para o componente PodWindow:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodWindow")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="maximized" />
        <s:State name="minimized" />
        <s:State name="default" />
        <s:State name="inactiveWithControlBar" stateGroups="inactiveGroup" />
        <s:State name="inactive" stateGroups="inactiveGroup" />
        <s:State name="disabled" />
        <s:State name="normal" />
    s:states>
?
    --- drop shadow can't be hittable so it stays sibling of other graphics @private-->
    
?
    
                    <s:Label
                        id="titleDisplay"
                        maxDisplayedLines="1"
                        left="9" right="36"
                        top="1" bottom="0"
                        minHeight="30"
                        verticalAlign="middle"
                        fontWeight="bold" color="0xE6E6E6" />
?
                    --- layer 4: moveArea -->
                    --- @copy spark.components.TitleWindow#moveArea -->
                    <s:Group id="moveArea"
                        left="0" right="45"
                        top="0" bottom="0"
                        buttonMode="true"/>
?
                    <s:Button
                        id="minimizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMinimizeButtonSkin"
                        width="15" height="15"
                        right="25" top="7" />
?
                    <s:Button
                        id="maximizeButton"
                        buttonMode="true"
                        skinClass="com.rectius.examples.pod.assets.skins.PodWindowMaximizeButtonSkin"
                        skinClass.maximized="com.rectius.examples.pod.assets.skins.PodWindowRestoreButtonSkin"
                        width="15" height="15"
                        right="7" top="7" />
?
            s:Group>
?
            --- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group
                id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0"
                clipAndEnableScrolling="true">
            s:Group>
?
        s:Group>
?
    s:Group>
?
s:Skin>

Modifique o componente PodWindow para setar a nova classe skin com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin:

<?xml version="1.0" encoding="utf-8"?>
<components:PodWindow
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="com.rectius.examples.pod.components.*"
    skinClass="com.rectius.examples.pod.assets.skins.PodWindowAdvancedSkin"
    width="100%" height="100%">
components:PodWindow>

O resultado final será esse:

Your browser does not support iframes.

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

Dez 30

Dica Flex – Disparando eventos customizados do ItemRenderer com Flex 4

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, BI, blog, boolean, botão, class, classe, classes, código, components, custom, DataGrid, DataProvider, demo, Dica, dispatch, dispatchEvent, event, EventListener, Evento, Eventos, events, exemplo, flash, Flex, for, function, handle, ide, IE, int, itemRenderer, label, library, lista, LOB, MXML, O, on, problema, problemas, pt, RIA, Ria’s Geral, spark, string, tag, TAT, UI, uint, XML, XP @ 12 30th, 2010 | via http://rectius.com.br/blog | Sem comentários

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">

        <mx:columns>

            <mx:DataGridColumn headerText="Nome" dataField="nome" />

            <mx:DataGridColumn

                headerText="Ação" dataField="nome"

                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />

        </mx:columns>

    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          focusEnabled="true">



    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata> 



    <fx:Script>

        <![CDATA[

            import br.com.rectius.itemRendererExample.event.UsersEvent;



            protected function lblData_clickHandler(event:MouseEvent):void

            {

                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);

                dispatchEvent(excluirEvent);

            }

        ]]>

    </fx:Script>



    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"

              label="Excluir" click="lblData_clickHandler(event)" />



</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void

            {

                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);

            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event

{

    import flash.events.DataEvent;



    public class UsersEvent extends DataEvent

    {

        public static var EXCLUIR_EVENT:String = "ExcluirEvent";



        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable, data);

        }

    }

}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!

Set 30

Formatar Data no DataGrid Flex

Escrito por Felipe Borella em 1, AR, Componente, Componentes, DataGrid, Dica, Flex, for, IE, itemRenderer, label, O, on, Ria’s Geral, string, tag @ 09 30th, 2010 | via http://www.fborella.com.br/blog/ | 2 comentários

E ai rapaziada, mais uma dica massa de como formatar a data no seu DataGrid flex sem usar componentes de terceiros e mil e uma voltas com funções e etc.

Adicione na sua sia um DateFormatter

Ex:

<mx:DateFormatter id="dateFormat" formatString="DD/MM/YYYY"/>

Depois na sua DataGridColumn faça isso

<mx:DataGridColumn headerText="Data Nascimento:" width="100" dataField="dtNascimento">
	<mx:itemRenderer>
		<mx:Component>
			<mx:Label text="{outerDocument.dateFormat.format(data.dtNascimento)}"/>
		mx:Component>
	mx:itemRenderer>
mx:DataGridColumn>

Felipe!

Ago 30

Os 45 tutoriais de Adobe Flex mais procurados

Escrito por Igor Musardo em .NET, 1, 2009, 3d, 4, 6, abas, Accordion, Actionscript, Adobe, Adobe Flex, AR, as3, AUG, BI, blog, bug, class, classe, cliente, Componente, Curso, custom, dados, Data Binding, DataGrid, Debug, degrafa, Design, Dica, dynamic, email, encode, encoder, Estilo, externalInterface, facebook, flash, Flex, Flex 3, Flex Builder, for, Formulário, Formulários, galeria, Google, Google Maps, Gráfico, how-to, html, ide, IE, if, image, imagens, int, interface, internet, Introdução, itemRenderer, Java, Javascript, jogo, JQuery, lista, map, maps, MXML, mysql, NaN, O, on, photoshop, PHP, player, procura, pt, RIA, Ria’s Geral, rss, tag, TAT, Tech, Tema, Tutoriais, Tutorial, UI, web, Webservice, Widget, window, windows, XML @ 08 30th, 2010 | via http://www.igormusardo.com.br | Sem comentários

Está procurando alguns tutoriais de Adobe Flex? O blog Design Your Way separou 45 tutoriais muito bacanas para Adobe Flex, eu separei os que eu achei mais interessantes e relevantes.

Aproveite e bons estudos!

01º Flex MP3 Player

02º XML Básico com Flex 3

03º Criando uma galeria 3D do Flickr com Flex e Awaya3D

04º Usando a classe TextRange

05º Construindo um ItemRenderer para TileList

06º Rotacionando a ViewStack em forma de Cubo

07º Drag Drop simples no Flex

08º Cursor customizado no Flex

09º Como fazer gráficos no Flex

10º Visualizador de imagens em miniaturas no Flex

11º Jogo da Velha em Flex com Degrafa

12º Formulários no Flex

13º Sistema de Login em Flex com PHP

14º Pegando informações de músicas do WebService da Amazon com o Adobe Flex

15º Instalando e usando o Google Maps no Flex

16º Galeria de imagens com o componente Accordion e XML no Flex

17º Interação entre Flex e Javascript

18º Múltiplos uploads com JQuery e Flex ou Flash

19º Desenvolvendo janelas em Flex ou Flash para o Adobe Photoshop

20º Criando um cliente Digg em Flex

21º Introdução ao Data Binding

22º Data Grid com XML

23º Usando Flex, PHP e Json para modificar dados no MySQL

24º Trabalhando com o Debugger no Adobe Flex Builder

25º Criando um relógio de contagem regressiva em Flex

26º Transmitindo dados entre Flex e PHP usando Json

27º Criando um leitor de Feeds (RSS) em Flex

28º Como criar um gráfico de Bolhas em Flex

29º Usando Item Renderes

30º Criando um formulário de email em Flex com PHP

31º Criando grandes listas dinâmicas em Flex

32º Encodificador assincrono de JPEG

33º Criando seu jogo de aventura no Adobe Flex

34º Mudando o identificador de seleção de uma Lista no Flex

35º Criando um player customizado do You Tube em Adobe Flex

36º Criando uma lista de contatos usando Flex e XML

37º Criando um album de fotos do Facebook em Flex

38º Modificando o estilo da linha selecionada na Data Grid

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:

Código fonte

Abr 25

Usando Shared Objects no Flex

Escrito por Luis Messias em .NET, 1, 3d, 4, 6, action, Actionscript, Adobe, api, app, AR, back, BI, Bindable, blog, browser, busca, camp, class, classe, cliente, collection, comunicação, Cookie, dados, DataGrid, DataProvider, Desenvolvedor, desenvolvedores, Dica, email, err, erro, error, event, events, exemplo, Exemplos, flash, Flex, for, function, gc, Geral, html, ide, IE, if, int, itemRenderer, label, layout, lista, mg, MXML, NaN, O, on, padrão, pt, redeRIA, RIA, Ria’s Geral, RoR, servidor, site, string, tag, TAT, Tema, TextInput, UI, uint, update, utils, ValidationResultEvent, Ved, vs, XML, XP, zend @ 04 25th, 2010 | via http://blog.luismessias.com | Sem comentários

Funcionalidade muito utilizada em sites, a qual é o armazenamento de dados no cookie do browser, esta função é muito utilizada para salvar as preferências de usuários como: login, email, ultimo acesso entre outras informações.
No Flex isso também é possível podendo ser até mais poderoso do que as formas atuais, para fazer isso você deve utilizar o SharedObject.

A função do Shared Objects (ShO) é armazenar dados localmente, funcionando como um cookies do browser. Assim você pode armazenar dados e chamá-los durante a sessão atual ou em outra futura sessão. Contudo estes dados não podem ser acessados por outra aplicação Flex mais sim apenas pela aplicação criadora.

Shared Objects vs Cookies

É comum desenvolvedores confundirem ShO com cookies.
Os cookies que aderem ao padrão RFC 2109 geralmente têm as seguintes características:

• Eles podem expirar, e geralmente é feito isso no final da sessão por default.
• Podem ser desabilitados pelos clientes.
• Há um limite de 300 cookies sendo no Maximo 20 por site.
• Um cookie tem o espaço de armazenamento de 4 kb.
• Há a possibilidade de serem considerados como arquivos maliciosos.
• Há uma comunicação entre cliente e servidor para armazenamento dos dados.

Shared Object tem as seguintes características:

• Eles não expiram por default.
• Por padrão o seu limite de armazenamento é de 100 kb.
• Eles podem armazenar dados simples como: String, Date, Array ….
• A aplicação pode indicar locais específicos para o armazenamento dos dados.
• Não há transmissão e comunicação entre o cliente e o servidor para a busca e armazenamento dos dados.

Com a classe SharedObject é possível realizar qualquer manipulação dos dados que ficarão armazenados no cliente. Esta possui os seguintes métodos:

• clear() – Limpa permanentemente todos os dados contidos no Shared Object.
• flush() – Grava os dados do ShO no cliente.
• getLocal() – Retorna uma instancia do ShO no cliente, caso não exista o mesmo cria uma.
• getSize() – Retorna o tamanho em Bytes do ShO no cliente. Uma observação o tamanho default é de 100kb, contudo isto pode ser alterado para mais.

Na prática:
Criando uma lista de contatos.

Criar uma classe chamada ShareObjectHelper a qual irá realizar a manipulação dos dados do Shared Object, tais como: incluir, remover e listar.
Esta é uma classe bem simples no qual será usado um ArrayCollection para armazenar todos os dados que armazenarão dos contatos que o usuário incluiu.

package {
	import mx.collections.ArrayCollection;
	import flash.net.SharedObject;
 
	public class SharedObjectHelper {
 
		private var _sharedObject:SharedObject;
		private var _dpSharedObject:ArrayCollection;
		private var _nomeArquivoSharedObject:String;
 
		/**
		 * Construtor
		 */
		public function SharedObjectHelper(valor:String) {
			inicializaHelper(valor);
		}
 
		/**
		 * @private
		 * Responsavel por recuperar a instancia do SharedObject baseado no
		 * parametro.
		 *
		 */
		private function inicializaHelper(valor:String):void {
			_dpSharedObject = new ArrayCollection();
			_nomeArquivoSharedObject = valor;
			_sharedObject = SharedObject.getLocal(_nomeArquivoSharedObject);
 
			if (getObjects()) {
				_dpSharedObject = getObjects();
			}
		}
 
		/**
		 * Retorna todos um array de dados que está armazendo no SharedObject
		 * @return ArrayCollection
		 */
		public function getObjects():ArrayCollection {
			return _sharedObject.data[_nomeArquivoSharedObject];
		}
 
		/**
		 * Adiciona um dado ao array de dados.
		 * @param Object
		 */
		public function addObject(o:Object):void {
			_dpSharedObject.addItem(o);
			updateSharedObjects();
		}
 
		/**
		 * @private
		 * Vincula o array de dados a um SharedObject.
		 */
		private function updateSharedObjects():void {
			_sharedObject.data[_nomeArquivoSharedObject] = _dpSharedObject;
			_sharedObject.flush();
		}
	}
 
}

<?xml version="1.0"?>
<mx:Application xmlns:local="*" xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="init()" backgroundColor="#ffffff"
				layout="vertical" 
				backgroundGradientAlphas="[1.0, 1.0]" 
				backgroundGradientColors="[#D3D3D3, #E7E7E7]" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			import mx.validators.ValidationResult;
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;
			import flash.net.SharedObject;
 
			[Bindable]
			public var dpContatos:ArrayCollection = new ArrayCollection();
 
			public var shoHelper:SharedObjectHelper;
 
			/**
			 * @private
			 * Inicializa a classe SharedObjectHelper e ja cria/recupera
			 * instancia de um objeto SharedObject.
			 */
 
 
			private function init():void {
				shoHelper = new SharedObjectHelper("contatos");
 
				if (shoHelper.getObjects()) {
					dpContatos = shoHelper.getObjects();
				}
 
			}
 
			/**
			 * @private
			 * Adiciona um contato na lista de contatos e executa o addObject da classe
			 * sharedObjectHelper.
			 */
			private function addContato():void {
				if(valNome.validate().type == ValidationResultEvent.VALID){
					/* Cria um objeto dinamico com os atributos dos fomularios */
					var objInsert:Object = {nome: txtNome.text, apelido: txtApelido.text};
					shoHelper.addObject(objInsert);
 
					dpContatos = shoHelper.getObjects();
 
					/* Limpa os campos do formularios */
					txtNome.text = '';
					txtApelido.text = '';
				}
			}
 
			/**
			 * @private
			 * Remove um contato do DataGrid e da lista de contatos do SharedObejct
			 */
			public function removeContato():void {
				if (dgContatos.selectedIndex > -1) {
					dpContatos.removeItemAt(dgContatos.selectedIndex);
				}
			}
 
		]]>
	</mx:Script>
	<mx:StringValidator id="valNome" source="{txtNome}" property="text" 
		required="true" requiredFieldError="Campo Obrigatório"
		triggerEvent="''"/>
 
	<mx:Panel title="Contatos" layout="vertical" horizontalAlign="center" width="400">
 
 
		<mx:Form width="100%">
			<mx:FormItem label="Nome" width="100%">
				<mx:TextInput id="txtNome" width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Apelido" width="100%">
				<mx:TextInput id="txtApelido" width="100%"/>
			</mx:FormItem>
			<mx:Button id="b2" label="Salvar" click="addContato()"/>
		</mx:Form>
 
		<mx:DataGrid id="dgContatos" dataProvider="{dpContatos}" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
				<mx:DataGridColumn headerText="Opções" width="80" textAlign="center">
					<mx:itemRenderer>
						<mx:Component>
							<mx:Button label="Excluir" width="8" click="outerDocument.removeContato()"/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>
 
</mx:Application>

Mar 25

ItemRenderer, Image, DataGrid Flex

Escrito por Felipe Borella em 1, 4, 6, Adobe, app, AR, back, BI, Bindable, break, case, código, collection, control, Controls, dados, DataGrid, DataProvider, Download, Flex, fonte, for, function, ide, IE, image, itemRenderer, layout, mudanças, MXML, O, on, processo, pt, RIA, Ria’s Geral, tag, TAT, UI, XML, XP @ 03 25th, 2010 | via http://www.fborella.com.br/blog/ | Sem comentários

Então ja que estamos com tempo vou publicar algo que precisei fazer ( algo tipo tramitação de processos etc ) aonde podem variar o status ( ) . Vamos ao código que me explico mais facil lembrando que chegando em casa vou colocar os fontes disponiveis e inclusive colocar aqui para rodar a aplicação.

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="100%" height="200" backgroundColor="#333333">
	<mx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
			/*
			 * A = bolinha verde
			 * B = bolinha vermelha
			 * c - bolinha azul
			 * G = default
			 */
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {nome:'Felipe', sobrenome:'Borella', status: 'A'},
                {nome:'Lucas', sobrenome:'Catani', status: 'B'},
                {nome:'Joao', sobrenome:'Silva', status: 'C'},
                {nome:'Julio', sobrenome:'Borella', status: 'G'},
                {nome:'Diego', sobrenome:'Mangoni', status: 'A'}
            ]);
?
		]]>
	mx:Script>
	<mx:DataGrid id="dgDados" dataProvider="{initDG}" width="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome" width="100"/>
			<mx:DataGridColumn headerText="Sobrenome" dataField="sobrenome" width="100"/>
			<mx:DataGridColumn headerText="Status" dataField="status" width="50"/>
			<mx:DataGridColumn headerText="Permissao" width="50">
				<mx:itemRenderer>
					<mx:Component>
			            <mx:Image horizontalAlign="center" width="24" height="24"
			            		source="{imagem.source}" creationComplete="alteraImagem();">
						<mx:Script>
							[CDATA[
								import mx.controls.Image;
								[Bindable]
								public var imagem:Image = new Image();
?
								public function alteraImagem():void
								{
									switch (data.status)
									{
										case 'A':
											imagem.source='nav_plain_green.png';
											break;
?
										case 'B':
											imagem.source='nav_plain_red.png';
											break;
?
										case 'C':
											imagem.source='nav_plain_blue.png';
											break;
										default:
											imagem.source='nav_plain_blue.png';
									}
								}
							]]>
						mx:Script>
			            mx:Image>
			        mx:Component>
			    mx:itemRenderer>
			mx:DataGridColumn>
		mx:columns>
	mx:DataGrid>
mx:Application>
 							]]>

fiz um Switch para comparar o que esta no status do arrayCollection e conforme o status ele troca a cor das bolinhas. Use sua criatividade melhore e se usar comente.

download aqui

ps – (fiz algumas mudanças mas a logica permanece a mesma)

Abraço!
Felipe!

Fev 23

Flex Datagrid: salvar valor modificado por um item renderer

Escrito por Ved em AR, checkBox, checkboxes, DataGrid, DataProvider, explicação, Flex, for, Formação, ide, itemRenderer, Motivação, O, Ria’s Geral, screen, Screencast, tag, UI, XP @ 02 23rd, 2010 | via http://www.vedovelli.com.br | Sem comentários

Eu ia gravar um screencast mas não rolou motivação. Então, como o moço que me pediu essa explicação tava na urgência, decidi fazer um projeto e mandar para ele (não se acostumem).
Clique aqui para baixar o projeto.

É algo muito simples e serve para manipular o dataProvider ao marcar/desmarcar os checkboxes no dataGrid, deixando a informação [...]

« Entradas anteriores |