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

Dez 31

Dica Flex – Como embedar assets de um arquivo SWF

Escrito por Pablo Souza em 1, 3d, 4, 6, Adobe, AR, BI, Bindable, Botões, class, classe, código, custom, Dica, exemplo, flash, Flex, for, html, IE, if, label, O, on, Orientação, Orientação a Objetos, Pessoal, pt, RIA, Ria’s Geral, swf, TAT, UI @ 12 31st, 2010 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é para aqueles que querem embedar assets de arquivos SWF. O Flex permite que façamos esse trabalho de forma simplificada, utilizando apenas a metadata “Embed“, especificando qual o símbolo a ser embedado. Para dar um exemplo prático, digamos que você criou uma série de assets no Flash, como ícones e botões customizados, e agora deseja utilizá-los no seu aplicativo Flex.

Veja o código abaixo:

No exemplo embedamos 2 símbolos de um arquivo SWF chamado “MyAssets.swf” e vamos utilizá-los como ícones dos nossos botões.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx:Script>

        <![CDATA[ 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class; 



        ]]>

    </mx:Script> 



    <mx:Button id="salvar" label="Salvar" icon="{BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{BUTTON_EDITAR}" />

O código acima funciona perfeitamente mas não é a forma mais clara de fazer esse trabalho. Utilizando um conceito da orientação a objetos chamado divisão de responsabilidades, vamos refatorar nosso pequeno exemplo, criando uma nova classe que vai encapsular nossos assets, movendo para ela nossas propriedades estáticas. Veja o código da classe a seguir:

1
2
3
4
5
6
7
8
    public class MyAssets

    {

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class;

    }

Para utilizá-la faça:

1
2
    <mx:Button id="salvar" label="Salvar" icon="{MyAssets.BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{MyAssets.BUTTON_EDITAR}" />

Para saber mais sobre como embedar assets acesse:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60546-7fff.html

Espero que tenham gostado e até a próxima pessoal!

Dez 30

Feliz Ano Novo, Flex, Java e IPhone

Escrito por Felipe Borella em 1, Aplicativos, AR, Artigo, Artigos, blog, Flex, for, Formação, int, iphone, Java, map, mapa, noticia, novidade, Novidades, O, on, Outros, Pessoal, Ria’s Geral, UI @ 12 30th, 2010 | via http://www.fborella.com.br/blog/ | Sem comentários

Bom Dia!

É com grande satisfação que venho por meio deste post desejar um Ótimo Feliz Ano Novo a todos que acompanharam de alguma maneira o meu trabalho no decorrer deste ano (2010 que ja esta indo embora).
Também quero deixar aqui “noticiado” que começo a partir do dia 02/01/2011 desenvolver aplicativos integrados entre Flex, Java e Iphone com mapas e outros. Essas oportunidades podem ser únicas então resolvi mete a cara!
Também este ano consegui o grau de formação da faculdade, ou seja, terei mais tempo para blogar e fazer artigos que futuramente serão publicados Novidades virão para 2011 pessoal.

Boas Festas

Felipe o/

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!

Dez 30

Retrospectiva 2010

Escrito por Fabio da Silva em 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, Adobe, Adobe Flex, Air, AIR 2.0, Animações, AR, as3, BI, blog, Blogs, consultoria, control, cs4, Desenvolvedor, Desenvolvimento, e-genial, egenial, empresas, Engnatv, eval, Feevale, flash, Flex, Flex 3, Flex 4, for, framework, Google, Hibernate, html, IE, int, Java, jogo, Jogos, JPA, mg, mysql, O, on, online, Outros, PHP, produtividade, produto, prototipação, pt, rest, RIA, Ria’s Geral, site, Software, Swiz Framework, Tecnologia, Treinamento, treinamentos, tv, UI, UX, Ved, web @ 12 30th, 2010 | via http://fabiophx.blogspot.com | Sem comentários

Além dos treinamentos de AS3 com Flash e Adobe Flex (3 e 4) na Alfamídia e Adobe Flex (3 e 4) na TargetTrust este ano de 2010 trouxe inúmeras oportunidades e desafios profissionais.

Alguns treinamentos in company:

Animações com ActionScript 3 no Flash CS4 para professores e alunos do projeto Engnatv na faculdade Feevale. Mais detalhes aqui.
Flex 3 e 4 na Azul Tecnologia em Fortaleza – CE. Mais detalhes aqui.
Flex 4 para a Braskem na Alfamídia.
Flex 4 na BSInfo em Bento Gonçalves – RS.
Convite do Igor Costa para um treinamento de Flex 4 em Florianópolis – SC como instrutor substituto da RIACycle.

Também fiz alguns treinamentos:

AIR 2.0 Essencial pela RIACycle ministrado pelo Igor Costa.
Planejamento, Prototipação e Execução de um projeto Flex/Swiz Framework e PHP/MySQL online pela e-Genial ministrado pelo Fábio Vedovelli.
PHP 5 e Produtividade em Java com JPA e Hibernate na TargetTrust.

Entre outros:

Lançamento do Flex 4 e o seu uso na Sadig na nova geração de produtos.
Convite da Gabriela para substituí-la em algumas cadeiras de AS3 para jogos que ela ministra na faculdade Feevale.

E neste mês de dezembro aceitei um novo desafio, o de prestar consultoria e desenvolvimento (PHP e Flex) na Ouro Moderno, empresa desenvolvedora de treinamentos interativos e também de software para empresas de treinamento para controlar alunos e treinamentos realizados.

A todos os envolvidos meus sinceros agradecimentos.

E deixo também aqui o meu desejo de um Feliz e Próspero 2011 para todos.

Que venha novos desafios.

Dez 29

Flex SetFocus

Escrito por Felipe Borella em .NET, 1, AR, blog, catch, código, Componente, DRE, err, firefox, flash, Flex, for, IE, Java, Javascript, O, on, procura, pt, Ria’s Geral, try, UI @ 12 29th, 2010 | via http://www.fborella.com.br/blog/ | Sem comentários

Estava eu a tempos procurando um código eficiente para setar o foco na minha aplicação, pois tinha um Formulario de Login em cima do meu index e simplesmente não tinha cristo, após o código abaixo, funcionou na hora. O post original se encontra em
aqui

Código:

navigateToURL(new URLRequest("javascript:try{ document.getElementById('index').focus(); void(0); }catch(err){}"), "_self");
nomedoseucomponente.setFocus();

Felipe o/

Dez 29

Este já foi, agora que venha 2011!!!

Escrito por redeRIA em Notícias, Ria’s Geral @ 12 29th, 2010 | via http://rederia.net | Sem comentários

Bom, caros amigos, depois de um ano bem intenso, chegou a hora do descanso, que apesar de dever ser mais tempo apenas vou conseguir esquecer por completo o flex, flash, php, java, as3, red5 e derivados durante apenas uns dias.

Amanhã estou de partida para um dos países que já por 3 vezes estive para visitar, mas que só agora vou finalmente… falo-vos da Suiça. Vai valer descanso, descoberta e acima de tudo o recarregar de baterias para o novo ano.

Neste novo ano que vai começar já bem envolvente com trabalho, mas é para isso que cá estamos!!

Bom, no ano passado defini alguns objectivos para este ano que está a acabar, e o principal deles foi iniciar-me no java, coisa que finalmente consegui…então para este ano novo, quero aperfeiçoar-me em java, mas não só, quero também dar hipótese a algumas tecnologias / ambientes diferentes como postgress, oracle, java, FMS, c#, etc’s… e claro, continuar a sério com o flex 4 que também conto em tirar a certificação da adobe.

Agora só me resta desejar-vos um novo ano cheio de sucesso, trabalho, saúde e alegria!!

Que venha 2011!!

Abraço!!

Dez 29

Dica Flex – Criando bordas arredondadas com a classe Rect no Flex 4

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, blog, class, classe, comunidade, exemplo, Flex, IE, image, layout, library, mg, MXML, O, on, RIA, Ria’s Geral, spark, Stroke, try, UI, XML @ 12 29th, 2010 | via http://rectius.com.br/blog | Sem comentários

O exemplo abaixo mostra uma das maneiras de criar bordas arredondadas utilizando a classe spark.primitives.Rect. Além disso, devido à perguntas recorrentes na comunidade Flex, mostramos como deixar a borda de outra cor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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">



    <s:layout>

        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />

    </s:layout>



    <s:Rect width="200" height="200" radiusX="5" radiusY="5">

        <s:stroke>

            <s:LinearGradientStroke weight="2">

                <s:GradientEntry color="0x000000"

                                 alpha="0.50"/>

                <s:GradientEntry color="0x000000"

                                 alpha="0.75" />

            </s:LinearGradientStroke>

        </s:stroke>

    </s:Rect>



</s:Application>

Espero que tenham gostado. Baixe aqui o projeto de exemplo.

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).

Dez 28

Adobe Certified Expert!

Escrito por Mauro Martins em .NET, 1, 3d, 4, 6, Adobe, Adobe Certified Expert, AR, bar, BI, Blazeds, blog, certificação, class, Componente, Desenvolvimento, Design, Design Pattern, Design Patterns, development, email, event, Experiências, facebook, Flash / Flex, Flex, Flex 2, Flex 4, Flex4, for, framework, gmail, Google, html, ide, IE, if, image, linkedin, Links e sugestões, live, map, mg, O, on, Partilha, pattern, PHP, Ria’s Geral, Software, TAT, Twitter, UI, XP @ 12 28th, 2010 | via http://imauro.com/blog/ | Sem comentários

Olá a todos!

Para os mais distraídos, há cerca de uma semana coloquei, do lado direito do blog, um logótipo do qual me orgulho muito. É o logótipo que é atribuído a todos os profissionais que possuem o título de Adobe Certified Expert.

Esta certificação deu-se, depois de ter completado, com sucesso, o exame da Pearson Vue sobre Flex 4.

Em termos de partilha de experiência, posso-vos dizer que o exame é difícil e que toca em bastantes pontos do desenvolvimento nesta plataforma.

As questões que nos são colocadas no exame vão desde o simples nome de uma propriedade de um componente, passando por casos de utilização ou não de certos tipos de design patterns, até a questões sobre BlazeDS, Adobe Live Cycle e consequentemente questões sobre model-driven development.

No meu caso, quando achei que estava na hora de obter a certificação, marquei logo o exame e dediquei cerca de dois meses a estudar a plataforma / framework e todos os seus pequenos detalhes. De forma a estar mais confortável no exame, comprei o software Attest 3 que tenta simular o ambiente de exame real e que se revelou essencial para o resultado final.

Esta foi, sem dúvida, a forma ideal de acabar 2010

Qualquer dúvida que tenham e esclarecimento que precisem sobre as certificações de Adobe Certified Expert, coloquem-nas aqui que tentarei responder o melhor que sei!

Bom 2011, Mauro.