Flex Mania é um evento que será realizado totalmente on-line, onde vários palestrantes vão falar dos mais variados assuntos sobre desenvolvimento web e design.

Participe.

Bem, e as novidade não são poucas….muita coisa melhorou e muitas outras coisas foram acrescentadas nesta nova versão. Depois da publicação de um artigo meu em inglês no thetechlabs foi acordada também a publicação aqui no blog da sua versão em Português e aqui vai.

Neste artigo vamos discutir alguns pontos desta nova versão do antigo Flex Builder agora chamado Flash Builder, heis os pontos aqui discutidos:

• Criando um novo Projecto.
• Namespaces
• Temas e Skins
• Novidades a nivel do Action Script & MXML
• Wizard de código e Serviços
• Ligações de dados; Exemplo PHP (+ ZendFramework)
• Interacção com dados
• Documentação AS3
• Unit Tests
• Interacção com o Flash Catalyst
• Notas finais

Mas antes de começar a alongar-me na introdução vamos dar uma vista de olhos na IDE que à primeira vista parecer quase igual, mas na realidade só é tão igual ao Flex Builder 3 até criar-mos um primeiro projecto. À primeira vista apenas se sobressai um novo painel ao fundo, onde podem ver 2 tabs Data/Services e Network Monitor que são nova nesta versão, e acreditem que se tornam muito uteis. Vejam então a tão falata IDE: (cliquem para ver maior).

No ecrã principal podem também encontrar alguns links que são muito uteis, principalmente para quem está a iniciar no Flash Buider, têm também um link para o Tour de Flex que até foi actualizado com alguns elementos do Flex 4, vale a pena ver. De resto, tudo igual apenas com a excepção do logotipo do eclipse ao lado direito, que parece dar relevo à excelente e versatil plataforma eclipse….(…)
Leia o resto de Flash Builder 4; Uma análise mais a sério! (2,995 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
Sem comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Analise, as3, Flash Builder 4, Flex 4, Gumbo, PHP, spark, Tutorial, zendFramework

A empresa Component Art está promovendo um competição de aplicações em silverlight com um premio em dinheiro para o melhor aplicativo, o site oficial é : http://www.componentart.com/community/competition2009/.Clique Aqui para conhecer as regras.

Para aqueles que vivem na correria em projetos, como eu segue uma lista de vários componentes para flex, para mim facilitou a vida pois ficar caçando na internet realmente e uma coisa muito chata fora o tempo perdido. Espero que ajude.

DisplayShelf Component - http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/ Um componente que pode ser entendido como uma aula sobre alguns pontos bem interessantes do flex, como o Matrix, Item renderer, masking, bitmap manipulation, etc… o resultado final dos 2 exemplos é muito bom!!

ASDIA - http://code.google.com/p/asdia/ Uma libraria para desenhar diagramas de dados na nossa aplicaçao flex.

Flex Book – http://www.quietlyscheming.com/blog/components/flexbook/ Um componente que simula um livro, que pode conter qualquer outro componente, folheado pagina a pagina, é uma maneira bem original de mostrar conteudo na nossa aplicação.

FlexFM - http://flexfm.us/about/ Um componente que permite que o flex se ligue directamente ao FileMaker (sistema de base de dados)

Ramdom Walk Component – http://www.quietlyscheming.com/blog/components/randomwalk-component/ Um componente que cria um menu conhecido como Walk. Um optimo exemplo de menu pratico.

FlexUnit – http://code.google.com/p/as3flexunitlib/wiki/Welcome Fornece uma pequena framework para testar o nosso aplicativo, bem como as suas librarias.

FishEye Component - http://www.quietlyscheming.com/blog/components/fisheye-component/ Um componente e explorador, que cria o efeito fishEye visto em tantos menus como até o proprio menu tipo mac.

ASSql – http://code.google.com/p/assql/ Um conjunto de classes que permite que uma aplicação AIR faça chamadas directas a uma base de dados MySql.

Animated Drag & Drop – http://www.quietlyscheming.com/blog/components/animated-dragtile-component/ Um exemplo de uma grande utilidade, principalmente educativa. Demonstra a utilização de propriedades drag & drop em elementos menos usados.

Metaphile – http://code.google.com/p/metaphile/ Uma libraria que permite ler e escrever os “cabeçalhos” (metadata) nos ficheiros audio (ID3), video ou até swf, que até podem incluir imagens, titulos, etc…

Flex Calendar – http://code.google.com/p/flexcalendar/ Embora não muito profissional, esta libraria pode ser extensa e usade de uma forma bem util.

Interactive Calendar – http://www.quietlyscheming.com/blog/components/interactive-calendar/ Mais um calendário, mas este muito mais interactivo, que basicamente serve de agenda em que podem ser apresentados varios calendários de varios utilizadores, muito util quando hà necessidade de guardar agendas partilhadas…

Flexedtoolkit - http://code.google.com/p/flexedtoolkit/ Um conjunto de librarias e componentes que podem facilmente ser usados e que são de grande utilidade, tais como AutoRefresh, ClientIdleTimeout, customAlerts ou customGrid.

Datagrid Search – http://www.preterra.com/flexsamples/gridsearch/gridsearch.html Um exemplo de como utilizar um sistema para procurar algo numa datagrid e colorir as linhas que apresentam essa palavra procurada.

Landscape Zoomer – http://www.quietlyscheming.com/blog/components/landscape-zoomer/ Um componente que permite ampliar imagens a partir das suas miniaturas, utiliza no exemplo a API do flickr para obter as imagens.

Interactive ToolTip – http://www.meutzner.com/blog/index.cfm/2008/2/20/A-PersistentInteractive-Tooltip-in-Flex Um tooltop personalizado com um botão para mais informações. Simples mas muito util.

Dual Slider Component – http://www.meutzner.com/blog/index.cfm/2006/7/26/Dual-Slider-Component Um componente muito util, que permite usar um slider para escolher 2 valores, ou algo compreendido entre 2 valores.

Flex Chart Range Selector - http://www.stretchmedia.ca/blog/index.cfm/2007/3/9/Flex-Chart-Range-Selector–Google-Financeish / Muitas vezes os nossos graficos são demasiado extensos, este componente permite visualizar apenas parte do grafico, tendo em baixo uma miniatura total do grafico que nos permite escolher a area a visualizar. Actualizado em: http://www.stretchmedia.ca/blog/index.cfm/2007/3/12/Chart-Range-Selector–Take-Two

FlexLib - http://code.google.com/p/flexlib/ Pouco mais hà a falar, a tão conhecida libraria de componentes flex. Reune componentes como: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

Flex Debug Component – http://www.mikenimer.com/index.cfm/2006/7/5/FlexDebugPanel Um debugger para o flex, permite observar variados dados em tempo de execução.

JAM – Just ActionScript & MXML – http://www.onflex.org/code/ Um depósito de algum código bem util em ActionScript e MXML. Pode encontrar alguns exemplos de packages e componentes.

SpringGraph Flex Component – http://mark-shepherd.com/blog/springgraph-flex-component/ Um componente bem original, que apresenta uma forma de apresentação de dados num grafico com elementos unidos entre eles.

Yahoo Astra Flex – http://developer.yahoo.com/flash/astra-flex/ Um conjunto de componentes para o flex de uma grande utilidades. Contem componentes como AutoCompleteManager, ColorPlaneAndSliderPicker, ColorSliderPicker, DropDownColorPicker, IPv4AddressInput, TimeInput, ou TimeStepper

AS3Crypto – http://code.google.com/p/as3crypto/ Um motor de encriptação que suporta os mais variados sistemas de encriptação.

AS3MailLib – http://code.google.com/p/as3maillib/ Uma libraria que permite ligar a um servidor de email usando o protocolo SMTP ou POP3.

FleXtense – http://www.flextense.net/ Gera automaticamente as classes AS3 que servem de comunicação para Web Serviçes.

Audio Visualization Component – http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1034708 Cria um equalizer de barras, linhas ou area de acordo com a variação do spectrum do som.

Sand Mail – http://sourceforge.net/projects/sandmanmail/ Mais um cliente de email (IMAP) feito em flex + php SSR 2 – Super Simple Remote – http://blog.rubyamf.org/?p=102 Uma libraria em Action Script para ligar o flash/flex a objectos remotos.

FlexibleTasks – http://www.weberdesignlabs.com/flexibletask/FlexibleTasks.html Um sistema blog/CMS feito totalmente em flex, com o código fonte disponivel.

Spell Check Component – http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1401019 Um componente que fornece correcção ortográfica ao nosso aplicativo. Com certeza, um deles será util para você utilizar na sua rotina diária de desenvolvimento.

Dica de: Silva Developer

Ontem criei um post falando sobre um problema que tive no itemRenderer com imagens veja o post http://www.bindable.com.br/blog/problema-de-itemrenderer-com-imagens. Na época a única solução que havia encontrado foi a do post, mas o Mario Junior ontem me apontou uma solução mais elegante e proposta na documentação da Adobe http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_7.html, implementei no meu exemplo e funcionou perfeitamente.

A alteração consiste em setar a minha imagem não no creationCompleter e sim dando um override no método “set data”, veja como ficou o código:

<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
							    import mx.events.FlexEvent;
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
 
								override public function set data(value:Object):void
								{
								    super.data = value;
									if(value != null)
									{
										if(value.titulo == "imagem1")
										{
											img.source = Img1;
											img.toolTip = value.titulo;
										}
										else
										if(value.titulo == "imagem2")
										{
											img.source = Img2;
											img.toolTip = value.titulo;
										}
										else
										if(value.titulo == "imagem3")
										{
											img.source = Img3;
											img.toolTip = value.titulo;
										}
 
									}
									else
									{
										img.visible=false;
									}
									 dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
 
								}
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"  autoLoad="true" creationComplete="init()" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>

Obrigado a todos pelas considerações.

Até a próxima.

Você que possui qualquer tipo de licença do Flex Builder 3, pode solicitar um serial para utilizar o Flash Builder Beta 4

Começaram a aparecer os primeiros testes do uso de Flash/Flex no Android. Segue o vídeo.

Abraços e que venha o FP10 para mobile.

Olá Pessoal,

Foi lançada hoje a nova versão do Eclipse, a 3.5 codinome Galileo.
Para baixar basta acessar a página de downloads.

Grande abraço.

Durante anos brigamos com um navegador cheio de bugs e fora dos padrões, o que nos custa milhares em horas de trabalho para deixar tudo compatível com o Internet Explorer 6. Quem sai mais prejudicado? Os visitantes, por terem um serviço medíocre por limitações de compatibilidade!

O problema é que a Microsoft não aprende e está trazendo o mesmo problema para o Outlook (o atual já é um pouco assim), eles confirmaram os planos de usar a engine do Word para páginas HTML ao invés de usar Webstandard.

Então será impossível fazer até um layout simples para newsletters funcionar de forma compatível com vários clientes de email.

Participe do protesto abaixo postando em seus twitters (texto retirado do site (http://fixoutlook.org/):

“Microsoft have just confirmed they plan on using the crippled Word rendering engine to display HTML emails in Outlook 2010.

This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position and no background images. Not to mention the long list of bugs and quirks that break the simplest of layouts.

Outlook 2010 is still in beta and Microsoft have confirmed they want to hear your feedback on this decision. It’s time for the email marketing and design community to rally together and encourage Microsoft to embrace web standards before it’s too late.

What’s the best way to do that? Twitter of course.

Visit fixoutlook.org to see how you can help and what the community is saying right now.”

Antes de tudo, quero dar as boas vindas a você que está visitando este blog, nós da Bindable que queremos compartilhar um pouco de nossos desafios, fique a vontate.

Neste post vou falar sobre um problema que assombra muitos programadores de flex, e compartilhar uma solução que encontrei.

Vamos ao problema: quando se usa um itemRenderer em um AdvancedDataGrid ou um DataGrid com uma coluna que tem que imagens, no evento do scrollbar as imagens se misturam não sendo condizente com o dataProvider. O primeiro passo para resolver o problema é saber reproduzir o mesmo, e é isso que vamos fazer nessa etapa:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="200"  layout="absolute" creationComplete="init()">
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var colletionData:ArrayCollection = new ArrayCollection();
 
		/**
		 * Evento é executado quando a Applicação está completa
		 * Inicializa a coleção de dados
		 * */
		private function init():void
		{
			colletionData =new ArrayCollection([{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem2', descricao:'conteudo com a imamge 2'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'},
							{titulo:'imagem1', descricao:'conteudo com a imamge 1'},
							{titulo:'imagem3', descricao:'conteudo com a imamge 3'}]
							);
			gridDados.dataProvider = colletionData;
		}
	]]>
</mx:Script>
 
	<mx:DataGrid id="gridDados" dataProvider="{colletionData}" width="400" height="200" x="0" y="0">
		<mx:columns>
			<mx:DataGridColumn headerText="Titulo Imagem" dataField="titulo" width="120"/>
			<mx:DataGridColumn headerText="Descrição" dataField="descricao" width="120"/>
			<mx:DataGridColumn headerText="Imagem"   width="80">
				<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
 
								/**
								 * Seta no creationComplete a imagem referênte ao data
								 * que veio do dataProvider
								 *
								 * Esse evento só ocorre uma vêz na criação do objeto
								 * */
								public function init():void
								{
									if(data != null)
									{
										if(data.titulo == "imagem1")
										{
											img.source = Img1;
											img.toolTip = data.titulo;
										}
										else
										if(data.titulo == "imagem2")
										{
											img.source = Img2;
											img.toolTip = data.titulo;
										}
										else
										if(data.titulo == "imagem3")
										{
											img.source = Img3;
											img.toolTip = data.titulo;
										}
									}
									else
									{
										img.visible=false;
									}
								}
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"  autoLoad="true" creationComplete="init()" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Como você pode ver, eu crie um itemRenderer que o data define qual imagem será exibida, o resultado disso é:

Veja que os três primeiros itens são da “imagem 1″, como um passe de mágica se você mexer no scrollbar, irá notar que as imagens mudaram, mas perceba que o data continua o mesmo, veja a coluna “Titulo Imagem”.

Agora que já sabemos como reproduzir o problema, vamos a solução que encontrei:

Para resolver esse problema, foi necessário fazer um bindable inline na tag imagem como mostra o itemRenderer a baixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

			<mx:itemRenderer>
					<mx:Component>
						<mx:Box verticalAlign="middle" horizontalAlign="center">
						<mx:Script>
							<![CDATA[
								/**
								 * Embeda as 3 imagens que serão utilizada no exemplo
								 * */
 
								[Embed('imagem1.png')] private var Img1:Class;
								[Embed('imagem2.png')] private var Img2:Class;
								[Embed('imagem3.png')] private var Img3:Class;
 
							]]>
						</mx:Script>
							<mx:Image id="img" width="20" height="20"
								source="{data.titulo == 'imagem1'?Img1:data.titulo == 'imagem2'?Img2:data.titulo == 'imagem3'?Img3:''}"
								toolTip="{data.titulo}"
								autoLoad="true" />
						</mx:Box>
					</mx:Component>
				</mx:itemRenderer>

O arquivo final foi:

Se você mexer no scrollBar agora, verá que o problema não mais acontece.
 

Espero ter contribuído.

Autor:Claudio Araujo