logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Nov 16

Spring 3.1 RC1 – @Configuration

Escrito por DClick Team em 1, 2.0, 4, 6, action, app, AR, auto, bar, BI, blog, busca, C#, case, class, classe, classes, código, components, configuração, err, erro, error, exemplo, for, framework, Google, IE, if, int, Java, lite, map, mudanças, mvc, NaN, O, on, Plugin, refresh, rest, RIA, Ria’s Geral, RoR, S+S, Sem categoria, Spring, SpringFramework, string, Sun, super(), tag, TAT, Teste, Twitter, UI, uint, web, XML @ 11 16th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Twitter!


Spring @Configuration


O que há de novo



Para habilitar certas funcionalidades do Spring que envolvem AOP, era preciso escrever tags XML como por exemplo context:component-scan para especificar os pacotes em que o Spring pode buscar por beans anotados com @Component, @Repository ou @Service.
Na versão 3.1 foram disponibilizadas as mesmas funcionalidades via anotação. São elas:

1
2
3
4
5
6
7
8
org.springframework.context.annotation.Configuration
org.springframework.context.annotation.ComponentScan
org.springframework.context.annotation.EnableLoadTimeWeaving
org.springframework.context.annotation.EnableAspectJAutoProxy
org.springframework.scheduling.annotation.EnableScheduling
org.springframework.scheduling.annotation.EnableAsync
org.springframework.transaction.annotation.EnableTransactionManagement
org.springframework.web.servlet.config.annotation.EnableWebMvc



Vamos abordar o caso básico, pois o resto é bem similar.


@ComponentScan



Caso você ainda não esteja familiarizado com as configurações por anotaçãoo, vamos ao básico.
Comece criando uma classe que representará seu container de beans, e a anote com @configuration:

1
2
3
4
@Configuration
public class TestConfiguration



Nesta classe estarão os beans que o container irá instanciar e deixar a nossa disposição.
Para iniciar o container vamos criar um test (JUnit 4) que instancia o contexto:

1
2
3
4
5
6
7
8
9
10
11
public class ConfigurationTestCase

@Test
public void testConfigurationBeans()

AnnotationConfigApplicationContext ctx = new AnnotationConfigApplicationContext();
ctx.register(TestConfiguration.class);
ctx.refresh();


}



Aqui criamos um container do tipo AnnotationConfigApplicationContext e registramos nossa classe de configuração nele. Repare que é possível registrar mais classes, e portanto disponibilizar mais beans no container.
Agora vamos criar nosso bean de teste:

1
2
3
4
5
6
7
8
9
10
11
12
13
public class GenericBean

private String testProperty;

public GenericBean(String testProperty)
super();
this.testProperty = testProperty;

public String getTestProperty()
return testProperty;

}



Vamos criar os métodos em nossa classe de configuração que instanciam nosso bean de duas maneiras diferentes:

1
2
3
4
5
6
7
8
9
@Bean(name = “testBean”)
public GenericBean genericTestBean()
return new GenericBean(“test”);

@Bean(name = “otherBean”)
public GenericBean genericOtherBean()
return new GenericBean(“other”);



Repare que a única diferença entre os dois é a String que passamos como parâmetro.
Agora que temos 2 beans diferentes em nosso container, vamos criar os testes para verificar o comportamento do Spring. Abaixo da inicialização do contexto, vamos adicionar as seguintes linhas:

1
2
3
4
5
6
7
8
9
GenericBean testBean = ctx.getBean(“testBean”, GenericBean.class);

Assert.assertNotNull(testBean);
Assert.assertEquals(“test”, testBean.getTestProperty());

GenericBean otherBean = ctx.getBean(“otherBean”, GenericBean.class);

Assert.assertNotNull(otherBean);
Assert.assertEquals(“other”, otherBean.getTestProperty());



Aqui estamos garantindo que nossos dois beans diferentes estarão no contexto como esperado.
Antes de rodar o teste, será necessário adicionar a dependência do CGLib ao seu projeto. Caso você esteja usando o maven, basta adicionar a seguinte dependência>

GeSHi Error: GeSHi could not find the language text (using path C:Program Fileswampwwwblogwp-contentpluginsig_syntax_hilitegeshi) (code 2)



Pronto, com isso temos o suficiente pra deixar a barra do JUnit verde. Vamos agora adicionar o @ComponentScan.
Em nossa classe de configuração (poderia ser qualquer outra registrada no contexto) adiciona a seguinte anotação:

1
2
3
@Configuration
@ComponentScan(“br.com.dclick.tentativas.configuration.beans”)
public class TestConfiguration



No meu caso meu bean está dentro do pacote br.com.dclick.tentativas.configuration.beans e portanto basta eu alterá-lo adicionando o seguinte código:

1
2
3
4
5
6
7
8
@Component(“componentBean”)
public class GenericBean

private String testProperty;

public GenericBean()
this.testProperty = “component”;



Dessa forma posso criar mais um teste e verificar que o bean está vindo corretamente:

1
2
3
4
GenericBean componentBean = ctx.getBean(“componentBean”, GenericBean.class);

Assert.assertNotNull(componentBean);
Assert.assertEquals(“component”, componentBean.getTestProperty());



Rode o teste e deixa o JUnit feliz.
A única coisa a se ter cuidado aqui, é que com @ComponentScan, você não pode mapear o diretório da própria classe de configuração.

Demais Configurações



Daqui em diante basta anotar suas classes de configuração com as configurações que você deseja ativar, como por exemplo @EnableAsync que permite que os beans rodem de maneira assíncrona com a anotação @Async.

Brinque um pouco com as outras anotações. Acredito que vale o esforço, pois esse tipo de configuração permite abandonar um pouco os arquivos XML e tornam mais fácil o refactor dos beans, afinal teremos erros de compilação com as mudanças de código.

Por enquanto é isso, qualquer dúvida mande nos comentários que responderei assim que possível.

Por @Gust4v0_H4xx0r

Set 21

Flex SDK 4.6 a caminho + Dominando Flex Mobile também

Escrito por Daniel Schmitz em .NET, 1, 4, 6, Adobe, app, AR, auto, BI, builder 4, C#, Componente, Componentes, components, control, Controls, custom, Design, developer, flash, flash builder, Flash Builder 4, Flex, Flex 4, for, html, ide, IE, if, image, layout, Livro, mg, mobile, NaN, O, on, platform, pt, RIA, Ria’s Geral, S+S, SDK, TAT, try, tv, UI, XP @ 09 21st, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Hoje temos o pre release do Flex SDK 4.6, e como já era esperado, com diversas melhorias no Mobile. Como vocês sabem, o livro Dominando Flex Mobile está pela metade. Eu parei no meio e disponibilizei o conteúdo justamente pela falta de componentes e agora isso será suprido. Ou seja, vou voltar agora e terminar o Flex Mobile.

Alguns novos componentes ? (copiado na cara dura daqui) :

SplitViewNavigator

A new top-level application component specifically designed for the tablet experience. With only a few lines of code, manage the layout of multiple views and have them adapt automatically based on device orientation.

CallOutButton

A versatile component that pops over existing content and can contain text, components or even entire views.

SpinnerList

This popular tablet component is an adaption of the existing List component. It not only has a new look, but also gives options like recirculating content and a position based selection model.

DateSpinner

A highly flexible component that is not only locale-aware, but provides multiple out-of-the-box configurations to fit most date/time entry needs.

Text Enhancements

Flex 4.6 solves the problem of cross-device text input. Flex exposes the native text-editing controls on EVERY platform—this enables the developer to customize the keyboard and the user to experience the native UI of common operations like selection, copy/paste and spelling checking.

ToggleSwitch

This simple and much-requested control is now available in Flex 4.6.

Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle


[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Mar 14

Metadata Exclude

Escrito por DClick Team em 1, 4, Actionscript, Adobe, AR, auto, blog, class, classe, Componente, components, Desenvolvedor, efeito, Estilo, event, Evento, exemplo, flash, flash builder, Flex, for, function, git, IE, if, image, int, mg, mudanças, MXML, O, on, processo, rest, RIA, Ria’s Geral, spark, TAT, TextInput, Twitter, UI, Ved, XML @ 03 14th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Twitter!

Continuando com a nossa série de posts sobre metadatas, dessa vez foi falar da metadata exclude. Essa metadata tem como principal objetivo esconder uma propriedade, efeito, evento ou estilo de um componente quando adicionado via MXML.

A metadata exclude não tem nenhuma utilidade quando estamos criando nosso componente sem utilizar nenhum outro componente como base, pois caso nosso objetivo seja esconder uma propriedade basta utilizarmos um modificador de acesso diferente de public, e caso seja esconder um efeito, evento ou estilo, basta não adicionar as metadatas Effect, Event ou Style.

Mas enfim, vamos a um exemplo prático.

No nosso exemplo, vamos extender a classe TextInput para criar uma nova caixa de texto chamada CPFInput. A CPFInput apenas limitará o usuário a digitar os valores entre 0 e 9, pontos e traços.

Criando a classe CPFInput.

PLAIN TEXT
CODE:

  1. package
  2. {
  3. ? ? import spark.components.TextInput;
  4. ? ?
  5. ? ? public class CPFInput extends TextInput
  6. ? ? {
  7. ? ? ? ? public function CPFInput()
  8. ? ? ? ? {
  9. ? ? ? ? ? ? super();
  10. ? ? ? ? ? ? this.restrict = “0-9.\-”;
  11. ? ? ? ? }
  12. ? ? }
  13. }

Criamos a nossa classe CPFInput e criamos uma restrição para digitar apenas os valores necessários.

Utilizando a nossa classe.


Quando vamos utilizar a classe CPFInput, ainda é possivel determinar um valor para a propriedade restrict. Caso haja mudanças nessa propriedade a nossa classe irá perder todo o sentido, e não será mais útil no contexto aplicado. Para evitar isso vamos adicionar a metadata Exclude.

Utilizando a metadata.

PLAIN TEXT
CODE:

  1. package
  2. {
  3. ? ? import spark.components.TextInput;
  4. ? ?
  5. ? ? [Exclude(name="restrict", kind="property")]
  6. ? ? public class CPFInput extends TextInput
  7. ? ? {
  8. ? ? ? ? public function CPFInput()
  9. ? ? ? ? {
  10. ? ? ? ? ? ? super();
  11. ? ? ? ? ? ? this.restrict = “0-9.\-”;
  12. ? ? ? ? }
  13. ? ? }
  14. }

Em sintaxe: [Exclude(name="nome da propriedade, evento, efeito ou estilo", kind="property,event,effect,style")]
Nesse passo, adicionamos a metadata Exclude para esconder a propriedade restrict.

Verificando as mudanças.


Agora não é mais possível ver a propriedade restrict quando utilizamos o componente via MXML.

Informações adicionais.

Apesar da metadata Exclude “esconder” a propriedade, o que o Flash Builder faz é simplesmente removê-la do auto-complete, caso o desenvolvedor digite a propriedade e atribua um valor a ela, o processo funcionará normalmente. Isso acontece pois não temos como alterar o modificador de acesso da propriedade, e somente “mascarar” o seu acesso.

Mar 13

Metadata DefaultProperty

Escrito por DClick Team em 2009, 4, 6, Actionscript, Adobe, app, AR, blog, class, classe, Componente, Componentes, components, DataProvider, exemplo, Flex, function, ide, IE, if, int, layout, library, MXML, NaN, O, on, padrão, pt, RIA, Ria’s Geral, spark, tag, TAT, Twitter, UI, XML, XP @ 03 13th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Uma das grandes vantagens de utilizar o MXML é ter a facilidade de compor os componentes através da utilização de tags e atributos. Basicamente todo arquivo MXML segue a estrutura:

PLAIN TEXT
CODE:

  1. “valor”>
  2. ? ?
  3. ? ? ? ?
  4. ? ?

Entender essa estrutura é simples, estamos setando novos valores para as propriedades do nosso componente base. Em exemplo prático temos:

PLAIN TEXT
CODE:

  1. “http://ns.adobe.com/mxml/2009″
  2. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  3. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
  4. ? ?
  5. ? ? ? ?
  6. ? ?
  7. ? ?
  8. ? ?
  9. ? ?

Saber que uma instância da classe VerticalLayout está sendo atribuída a propriedade layout da classe Application é fácil, mas onde estamos atribuindo a instância da classe Group uma vez que ela não segue a estrutura base do MXML?

Para facilitar a utilização dos componentes no MXML, a Adobe criou a metadata DefaultProperty que, assim como o nome diz, determina uma propriedade a ser utilizada como padrão no MXML caso não haja sua especificação na composição do componentes, isso explica como conseguimos atribuir uma instância da classe Group em uma determinada propriedade da classe Application sem a necessidade de declará-la.

Vamos então criar um exemplo funcional de um componente com a metadata DefaultProperty?

Utilizando a metadada.

PLAIN TEXT
CODE:

  1. package
  2. {
  3. ? ? import spark.components.DropDownList;
  4. ? ?
  5. ? ? [DefaultProperty("prompt")]
  6. ? ? public class NewDropDownList extends DropDownList
  7. ? ? {
  8. ? ? ? ? public function NewDropDownList()
  9. ? ? ? ? {
  10. ? ? ? ? ? ? super();
  11. ? ? ? ? }
  12. ? ? }
  13. }

Em sintaxe: [DefaultProperty("propriedade")]
No exemplo estou extendendo a classe DropDownList e apenas determinando que sua propriedade default é a propriedade prompt.

Utilizando a Classe DropDownList.

PLAIN TEXT
CODE:

  1. ? ?
  2. ? ? ? ? Selecione um item
  3. ? ?

Na classe DropDownList precisamos abrir a tag da propriedade prompt antes de atribuir o seu valor.

Utilizando a Classe NewDropDownList.

PLAIN TEXT
CODE:

  1. ? ? Selecione um item

Na nossa classe recém criada não precisamos abrir a tag da propriedade, pois avisamos o compilador que nossa propriedade padrão é o prompt, logo, qualquer valor atribuído diretamente a tag do componente base será direcionado a propriedade padrão.

Não posso deixar de comentar que a metadata DefaultProperty adicionada na classe NewDropDownList sobrescreveu a DefaultProperty dataProvider que ele herda da classe SkinnableDataContainer, logo muito cuidado na hora de utilizar essa metadata em componentes extendidos!

Mar 7

TextArea com Linhas.

Escrito por Felipe Borella em 1, 2009, 4, 6, Adobe, app, AR, back, bar, Blend, blog, Blogs, boolean, break, chrome, class, classe, classes, Componente, components, control, err, event, EventListener, events, exemplo, flash, Flex, fonts, for, function, gc, html, ide, IE, if, int, internet, label, layout, library, MXML, NaN, Number, O, on, override, pt, Ria’s Geral, Scroll, spark, state, string, strings, Stroke, TAT, UI, UML, update, XML, XP @ 03 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários
Felipe Borella
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Daeee galera!
Esse port é para mostra um Skin bacana que catei na internet.
Original em http://flexdevtips.blogspot.com/2010/07/spark-textarea-with-line-numbers.html

Vamos ao Skin:

xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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:fb="http://ns.adobe.com/flashbuilder/2009"
			 creationComplete="created(event)"
			 alpha.disabled="0.5"
			 blendMode="normal">
?
	<fx:Metadata>
		[CDATA[
		[HostComponent("spark.components.TextArea")]
		]]>
	fx:Metadata>
?
	<fx:Script fb:purpose="styling">
		private var lineBreakChanged:Boolean;
?
		private var paddingChanged:Boolean;
?
		private var verticalAlignChanged:Boolean;
?
		/* Define the skin elements that should not be colorized.
		For text area, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["background", "scroller"];
?
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array {
			return exclusions;
		}
?
		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
		static private const contentFill:Array = ["bgFill"];
?
		/**
		 *  @private
		 */
		override public function get contentItems():Array {
			return contentFill
		}
		;
?
		/**
		 *  @private
		 */
		override protected function commitProperties():void {
			super.commitProperties();
?
			if (lineBreakChanged) {
				updateStringStyle("lineBreak");
				lineBreakChanged = false;
?
				if (textDisplay != null) {
					if (getStyle("lineBreak") == "explicit") {
						if (textDisplay.percentWidth == 100) {
							textDisplay.width = NaN;
						}
					} else if (textDisplay.percentWidth != 100) {
						textDisplay.percentWidth = 100;
					}
				}
			}
			if (paddingChanged) {
				updatePadding();
				paddingChanged = false;
			}
			if (verticalAlignChanged) {
				updateStringStyle("verticalAlign");
				verticalAlignChanged = false;
			}
		}
?
		/**
		 * @private
		 */
		override protected function initializationComplete():void {
			useChromeColor = true;
			super.initializationComplete();
		}
?
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			if (getStyle("borderVisible") == true) {
				border.visible = true;
				shadow.visible = true;
				background.left = background.top = background.right = background.bottom = 1;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 1;
			} else {
				border.visible = false;
				shadow.visible = false;
				background.left = background.top = background.right = background.bottom = 0;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 0;
			}
?
			borderStroke.color = getStyle("borderColor");
			borderStroke.alpha = getStyle("borderAlpha");
?
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
?
		/**
		 *  @private
		 */
		private function updatePadding():void {
			if (!textDisplay)
				return;
?
			// Push padding styles into the textDisplay
			var padding:Number;
?
			padding = getStyle("paddingLeft");
			if (textDisplay.getStyle("paddingLeft") != padding)
				textDisplay.setStyle("paddingLeft", padding);
?
			padding = getStyle("paddingTop");
			if (textDisplay.getStyle("paddingTop") != padding)
				textDisplay.setStyle("paddingTop", padding);
?
			padding = getStyle("paddingRight");
			if (textDisplay.getStyle("paddingRight") != padding)
				textDisplay.setStyle("paddingRight", padding);
?
			padding = getStyle("paddingBottom");
			if (textDisplay.getStyle("paddingBottom") != padding)
				textDisplay.setStyle("paddingBottom", padding);
		}
?
		/**
		 *  @private
		 */
		private function updateStringStyle(styleName:String):void {
			if (!textDisplay)
				return;
?
			// Push style into the textDisplay
			var style:String;
?
			style = getStyle(styleName);
			if (textDisplay.getStyle(styleName) != style) {
				textDisplay.setStyle(styleName, style);
			}
		}
?
		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void {
			var allStyles:Boolean = !styleProp || styleProp == "styleName";
?
			super.styleChanged(styleProp);
?
			if (allStyles || styleProp.indexOf("lineBreak") == 0) {
				lineBreakChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("padding") == 0) {
				paddingChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
				verticalAlignChanged = true;
				invalidateProperties();
			}
		}
	fx:Script>
?
	<fx:Script>
		[CDATA[
			import mx.events.FlexEvent;
?
			/**
			 * @private
			 */
			private static const focusExclusions:Array = ["textDisplay"];
?
			/**
			 *  @private
			 */
			override public function get focusSkinExclusions():Array {
				return focusExclusions;
			}
?
			protected function created(event:FlexEvent):void {
				updateLineNumbers(event);
				hostComponent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateLineNumbers, false, 0, true);
			}
?
			private var _lines:int = 0;
?
			private function updateLineNumbers(event:Event):void {
				var lines:int = textDisplay.mx_internal::textContainerManager.numLines;
				if (lines != _lines) {
					var old:int = _lines;
					this._lines = lines;
					var diff:int = lines - old;
					var linesString:String;
					var i:int;
					if (diff > 0) {
						linesString = lineNumbersLabel.text;
						for (i = old + 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					} else {
						linesString = "";
						for (i = 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					}
					lineNumbersLabel.text = linesString;
				}
			}
		]]>
	fx:Script>
?
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	s:states>
?
	
	
	<s:Rect id="border"
			bottom="0"
			left="0"
			right="0"
			top="0">
		<s:stroke>
			
			<s:SolidColorStroke id="borderStroke"
								weight="1"/>
		s:stroke>
	s:Rect>
?
	
	
	
		
			
			
		
	
?
	
	
	
		
			
		
	
?
	
	
		
			
				
			
			
			
				
					
				
			
			
				
					
				
			
		
?
		
			
			
		
	
?

E ao Uso do mesmo no componente

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" width="100%" height="100%">
	<fx:Declarations>
?
	fx:Declarations>
?
	<s:TextArea width="400" height="200" skinClass="br.com.fborella.SkinTextArea">
	s:TextArea>
s:Application>

Lembre-se de colocar o arquivo no seu pacore e ajustar o mesmo no skinClass

Exemplo:

Abraço

Felipe

Mar 6

TraceTarget – Usando a API de Log do Flex

Escrito por DClick Team em 1, 2009, 4, 6, Actionscript, Adobe, api, app, Apresentação, AR, arte, BI, bug, class, classe, classes, Componente, components, control, custom, Debug, demo, Desenvolvimento, Diversos, encode, err, erro, error, esporte, event, events, exemplo, filter, filtra, flash, Flex, Flex Data Services, for, Formação, function, handle, HTTPService, IE, if, instalação, int, interface, library, lista, live, LOB, Messaging, MXML, O, on, padrão, player, problema, problemas, pt, rest, RIA, Ria’s Geral, RoR, rss, SDK, Sem categoria, servidor, spark, string, strings, TAT, Twitter, UI, XML, XP @ 03 6th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Neste post vou explicar como usar a API de Log para mostrar os logs de execução da aplicação e também como usar o componente TraceTarget, que é muito útil para poder recuperar as informações das chamadas para o servidor, facilitando a resolução de problemas.

No Flex temos duas opções para recuperar informações ou logs de execução de uma aplicação. Uma primeira maneira e a mais utilizada, é usar a função global trace(”) para mostrar informações no console do FlashBuilder. Essa abordagem sempre requer que a aplicação esteja sendo executada em modo de debug, o que exige a instalação de um FlashPlayer versão de debug. Lógico que para o ambiente de desenvolvimento isso não é um problema, já que a instalação do FlashBuilder já inclui a versão correta do FlashPlayer versão debug. Mais e quando a aplicação está em produção, ou seja, quando não contamos com a versão de debug do FlashPlayer? Ai que entra a segunda opção.Na segunda opção vamos usar a API de Logging do Flex, que vai nos permitir delegar para uma classe a função de logar informações, seja usando o trace(”), primeira abordagem, ou até mesmo customizando a forma de apresentação. Esta abordagem também nos permite controlar o que é exibido, utilizado categorias e nível de log.

A API de Logging do Flex é muito simples de ser usada. Toda vez que queremos usa-la, estaremos envolvendo duas partes:

  1. O Logger, que possui os meios para enviar informações em diversos níveis (all, debug, info, warn, error e fatal) em uma determinada categoria para o Log Target. O Logger sempre irá implementar a interface ILogger, iremos utilizar a classe mx.logging.LogLogger, que já vem no SDK;
  2. O Log Traget, que será responsável por registrar a informação usando o trace(”) ou outra implementação. Iremos utilizar a classe mx.logging.targets.TraceTarget.

Para ficar mais fácil de entender como usar a API, vamos imaginar que queremos logar quando a aplicação é pré-inicializado, inicializado e criado.Inicialmente iremos usar a função global trace(”) e depois usar as classes de Log.

Ler o resto…

Fev 28

Mudando o Skin do ButtonBar a partir de um FXPL

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, app, AR, arte, Artigo, bar, BI, blog, botão, Botões, Catalyst, class, Componente, Componentes, components, DataProvider, demo, Documentação, Download, Eclipse, flash, flash builder, Flex, for, html, ide, IE, if, image, label, layout, library, menu, mg, MXML, O, on, platform, pt, reference, RIA, Ria’s Geral, safari, screen, Screencast, screencasts, Sem categoria, skins, spark, tag, TAT, Twitter, UI, vs, XML, XP, zend @ 02 28th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

post que explica como exportar o fxpl de um “menu wizard” no catalyst. Neste post você vai ver como importar o arquivo fxpl, criar um skin para o ButtonBar, modificar e aplicar o skin criado pelo Eduardo no novo skin do ButtonBar.

Para quem ainda não viu o screencast do Beck sobre skins, vale a pena conferir. Neste screencast o Beck foca bastante no skin do Button, e mostra as regras básicas para se criar um skin. Como o post do Eduardo fala sobre um ButtonBar, irei focar neste componente.

Antes de mais nada, vamos olhar a documentação do ButtonBar:



Pela documentação fica claro que o skin default do ButtonBar (spark.skins.spark.ButtonBarSkin) é composto por 4 partes, sendo 3 delas as partes que representam botões do ButtonBar, o primeiro botão (firstButton), os botões do meio (middleButton) e o último botão (lastButton). Vamos usar os botões que o Eduardo criou para mudar os skins dos botões.

  1. Faça o download do arquivo fxpl disponibilizado pelo Eduardo.
  2. Importe o fxpl no FlashBuilder

  3. Após importar o arquivo, podemos ver a criação de um projeto library, que contém todos os componentes criados no Catalyst e também todos os assets necessários. Vamos nos atentar a 3 arquivos no projeto, Step1ToggleButton que vai ser o firstButton, o Step2ToggleButton que vai representar o middleButton e o Step3ToggleButton que vai ser o lastButton.


  4. Após importado, vamos criar o skin do ButtonBar.



  5. Agora vamos trocar os skins dos botões do WizzardButtonBarSkin que criamos no passo 4, usando os skins criado pelo Eduardo.

  6. 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
    27
    28
    29
    30
    31
    xml version=“1.0″ encoding=“utf-8″?>
    “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″>
    ? ?
    ? ? ? ?
    ? ?

    ? ?
    ? ? “{vs}”
    ? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBar”
    ? ? />
    ? ?
    ? ? “vs”>
    ? ? ? ? “Step1″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 1″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ? ? ? “Step2″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 2″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ? ? ? “Step3″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 3″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ?

    ? ?


  7. Agora é só utilizar o novo skin e ver o resultado. Lembre-se de importar a biblioteca no seu projeto Flex.

  8. 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
    27
    28
    29
    30
    “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″>
    ? ?
    ? ? ? ?
    ? ?

    ? ?
    ? ? “{vs}”
    ? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBarSkin”
    ? ? />
    ? ?
    ? ? “vs”>
    ? ? ? ? “Step1″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 1″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ? ? ? “Step2″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 2″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ? ? ? “Step3″>
    ? ? ? ? ? ?
    ? ? ? ? ? ? ? ? text=“Wizard step 3″ />
    ? ? ? ? ? ?

    ? ? ? ?

    ? ?

    ? ?



  9. Para finalizar, vamos arrumar o espaço entre os botões do ButtonBar. Para fazer isso é simples, é só editar o Skin que criamos no passo 4, e diminuir o gap do layout de -1 para -31, como segue:

  10. 1
    2
    3
    4
    5
    “dataGroup” width=“100%” height=“100%”>
    ? ? ? ?
    ? ? ? ? ? ? “-31″/>
    ? ? ? ?



    A arte final fica assim:


Agora voce já sabe como criar um skin para o ButtonBar e como você pode criar uma biblioteca de componentes usando o arquivo fxpl exportado do Catalyst.

Fev 28

Componente de Destaque – Flex 4

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, Air, app, AR, back, BI, blog, boolean, class, classe, Componente, Componentes, components, control, Destaque, efeito, exemplo, Flex, Flex Components, function, fundo, IE, if, int, interface, library, MXML, O, on, painel, pt, Ria’s Geral, spark, TAT, Twitter, UI, UX, XML @ 02 28th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”>
  6. ? ?
  7. ? ? ? ?
  8. ? ?
  9. ? ?

3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com.dclick.components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

PLAIN TEXT
ACTIONSCRIPT:

  1. package
  2. {
  3. ? ? /**
  4. ? ?? * @author Bruno Sales
  5. ? ?? * Created: 28/02/2011
  6. ? ?? */
  7. ? ? import br.com.dclick.components.zoom.IZoomItem;
  8. ? ?
  9. ? ? import spark.components.Panel;
  10. ? ?
  11. ? ? public class PanelZoom extends Panel implements IZoomItem
  12. ? ? {
  13. ? ? ? ? public function PanelZoom()
  14. ? ? ? ? {
  15. ? ? ? ? ? ? super();
  16. ? ? ? ? }
  17. ? ? ? ?
  18. ? ? ? ? public function useBackgroundZoomContainer():Boolean
  19. ? ? ? ? {
  20. ? ? ? ? ? ? return false;
  21. ? ? ? ? }
  22. ? ? }
  23. }

4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”
  6. ? ? ? ? ? ?? ? xmlns:local=“*”>
  7. ? ?
  8. ? ? ? ?
  9. ? ?
  10. ? ?
  11. ? ? width=“200″ height=“200″/>
  12. ? ?

6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!

Fev 28

Componente de Destaque – Flex 4

Escrito por DClick Team em 1, 2009, 4, 6, action, Actionscript, Adobe, Air, app, AR, back, BI, blog, boolean, class, classe, Componente, Componentes, components, control, Destaque, efeito, exemplo, Flex, Flex Components, function, fundo, IE, if, int, interface, library, MXML, O, on, painel, pt, Ria’s Geral, spark, TAT, Twitter, UI, UX, XML @ 02 28th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários
DClick Team
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”>
  6. ? ?
  7. ? ? ? ?
  8. ? ?
  9. ? ?

3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com.dclick.components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

PLAIN TEXT
ACTIONSCRIPT:

  1. package
  2. {
  3. ? ? /**
  4. ? ?? * @author Bruno Sales
  5. ? ?? * Created: 28/02/2011
  6. ? ?? */
  7. ? ? import br.com.dclick.components.zoom.IZoomItem;
  8. ? ?
  9. ? ? import spark.components.Panel;
  10. ? ?
  11. ? ? public class PanelZoom extends Panel implements IZoomItem
  12. ? ? {
  13. ? ? ? ? public function PanelZoom()
  14. ? ? ? ? {
  15. ? ? ? ? ? ? super();
  16. ? ? ? ? }
  17. ? ? ? ?
  18. ? ? ? ? public function useBackgroundZoomContainer():Boolean
  19. ? ? ? ? {
  20. ? ? ? ? ? ? return false;
  21. ? ? ? ? }
  22. ? ? }
  23. }

4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.

PLAIN TEXT
ACTIONSCRIPT:

  1. xml version=“1.0″ encoding=“utf-8″?>
  2. “http://ns.adobe.com/mxml/2009″
  3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
  4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx”
  5. ? ? ? ? ? ?? ? xmlns:zoom=“br.com.dclick.components.zoom.*”
  6. ? ? ? ? ? ?? ? xmlns:local=“*”>
  7. ? ?
  8. ? ? ? ?
  9. ? ?
  10. ? ?
  11. ? ? width=“200″ height=“200″/>
  12. ? ?

6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2795 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com