Alternativa ao Flex Builder/ Apache Flex/ Flash Builder 4.5/ Flex/ Flex Builder 4/ Notícias/ Open-source

Modo visual do Flash Builder feito em Javascript

first-shot

Quando a Adobe decidiu arrancar sem dó o modo visual do Flash Builder muita gente esperniou como um bebê por que isso era uma mão na roda, já que a plataforma em sí por todos esse anos foi conhecida como RAD (Rapid Application Development), uma IDE que fizesse o arrastar e soltar e gerar código ao mesmo tempo seria fantástico do ponto de vista quem depende dela, acho que é por esse motivo que muita gente não sai do Visual Studio, te deixa muito confortável. Em fim!

Ontem eu fiquei curioso, o Janderson , havia me mostrado o Layoutit que é um projetinho bem bacana que te ajuda a criar interfaces para a Web usando o Twitter Bootstrap, é uma mão na roda para prototipar páginas de forma rápida e sem escrever código.

Como eu ando tão atarefado entre jogo multi-player( vai demorar um pouco para sair), e o cycle.JS, dificil arranjar tempo para hackear você mesmo.

Dificil? Se é! Da próxima vez que eu ver uma IDE com essa função vou trata-la de forma mais respeitosa, por que montar um troço desse com tamanha qualidade é um trabalho absurdo e consome seu precioso tempo entre as teclas CTRL+F5.

E esse foi o resultado da operação depois de 72 horas desenvolvendo:

first-shot

Você pode rodar ele direto do seu navegador, seja no iPad, Android, Windows, Mac, Linux, só requerer que você tenha o Chrome instalado.

Quem quiser já começar a testar [button link=”/projetos/apacheflexuibuilder” color=”#7ec115″ size=”3″ style=”1″ dark=”0″ radius=”5″ target=”blank”]Testar Agora[/button]

Bugs, falhas, reportem direto no Github, esse é um típico projeto que te deixo livre para fazer um Fork, modificar, refazer e colocar ele adiante.

Dedicado ao pessoal da comunidade Flex, Flex-Brasil, Flex-dev, Janderson, Erko.

Flash Builder 4.5/ Flex/ Flex 3 para Flex 4/ Flex 4.5

Flex 3 para Flex 4.5 – Datagrid

Wow, que mudança; Imagine você acostumado com o Datagrid do Flex 3.x e de repente você se depara com o novo Datagrid do Flex 4.5.1. Se você tem pleno conhecimento do Flex, você terá um esforço médio de 10%, agora se você pega o Flex de vez em quando, perceberá de início que mudou 50%, que sá 100%.

Veja o diagrama do novo Datagrid.

datagrid-spec-diagram

Algumas mudanças bem acentuadas estão:

  • A classe Datagrid não é uma subclass do List ou ListBase
  • Todos os itens criados para o Datagrid são declarativos, ou seja você não tem aquela chatisse de sobrescrever vários métodos como era necessário no Flex 3.x
  • itemClick, DropEnable, DragEnable, AllowMultiSelection entre outras propriedades não existem mais, você tem que fazer na unha via Actionscript 3.0
  • Scrollbars eram parte integrante da estrutura de Halo, ou seja ele variava de acordo com o Height de cada item e a posição sempre era baseada nisso, no novo Datagrid a posição sempre é alterada quando há scrolling, você tem proveito do Smooth Scrolling por exemplo.
  • Não há suporte a estilos como era feito no Datagrid do Flex 3, nesse caso eles forçam você a adotar mesmo Skins para os itens, no caso se você quiser aplicar estilos, será necessário usar o styleName onde você quer aplicar as mudanças.
  • Tooltips nos dados agora são dataTips, a grande vantagem disso é que você pode usar igual aos MX Charts, showDatatips é uma propriedade que você pode exibir todos.
  • Leia todas as mudanças aqui na especificação do novo componente.

Agora sabendo dessas pequenas mudanças, vamos ver alguns exemplos práticos que no dia-a-dia você vai lutar contra.

Datagrid Simples e preenchido

 
<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:DataGrid showDataTips="true" x="312" y="108" requestedRowCount="4">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

Drag and Drop desabilitados por padrão, implementados manualmente.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initApp(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.graphics.ImageSnapshot;
 
			import spark.components.Grid;
			import spark.components.gridClasses.CellPosition;
			import spark.events.GridEvent;
			import spark.primitives.BitmapImage;
			import spark.primitives.Rect;
 
 
			private var item:Object;
			private var gost:BitmapImage;
 
			protected function initApp(event:FlexEvent):void
			{
				tabela.addEventListener(GridEvent.GRID_MOUSE_DOWN,dragItens,false,1,true);
				tabela2.addEventListener(GridEvent.GRID_MOUSE_UP,releaseItem,false,1,true);
			}
 
			protected function dragItens(event:GridEvent):void
			{
				// pega o item selecionado e arrasta
				item = tabela.selectedItem;
 
				// cria um fantasma do item selecionado
				var posX:Number = tabela.mouseX;
				var posY:Number = tabela.mouseY;
 
				gost = new BitmapImage();
				//var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(event.currentTarget.grid,null,null,null,
				//	new Rectangle(tabela.x,event.currentTarget.rowHeight,tabela.width,event.currentTarget.rowHeight));
				var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(event.currentTarget.grid,null,null,null,
					new Rectangle(posX,posY,tabela.width,26));
				gost.source = new Bitmap(imageBitmapData);
				gost.x = mouseX - 50;
				gost.y = mouseY - 50;
				this.addElement(gost);
				stage.addEventListener(MouseEvent.MOUSE_MOVE,moveGost,false,3,true);
				stage.addEventListener(MouseEvent.MOUSE_UP,removeGost,false,4,true);
 
			}
			protected function moveGost(e:MouseEvent):void
			{
				if(gost != null){
				gost.x = mouseX -50;
				gost.y = mouseY -50;
				}
			}
			protected function removeGost(event:Event):void
			{
				// TODO Auto-generated method stub
				if(gost !=null)
				{
					this.removeElement(gost);
					gost = null;
				}
			}
 
			protected function releaseItem(event:GridEvent):void
			{
 
					tabela2.dataProvider.addItem(item);
 
					item = null;
			}
 
 
		]]>
	</fx:Script>
	<s:DataGrid id="tabela" x="44" y="99" width="348" height="286" requestedRowCount="4"
				showDataTips="true">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
	<s:DataGrid id="tabela2" x="433" y="99" width="383" height="286" requestedRowCount="4">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

Existe um mar de possibilidades, provavelmente eu volte a falar mais do DataGrid do Flex 4.5 por aqui. Fique ligado nas mudanças.

AIR 2.7/ AIR Mobile/ Android/ Flash Builder/ Flash Builder 4.5/ Flex/ Flex Mobile Framework

Flex 4.5.1 SDK e Flash Builder 4.5.1 com suporte a iOS

E viva! o Flash Builder 4.5.1 agora dá suporte a publicar sua aplicação Flex para plataforma iOS. Embora ela tenha lançado esse suporte o Flash Builder 4.1 já havia suporte para projetos com Actionscript 3.0 puro.

Esse novo lançamento vem fomentar mais ainda o mercado e ajudar a entregar aplicações ao tablet da Apple e também ao iPhones. Antes desse lançamento já era possível fazer via linha de comando com o último SDK 4.5. Porém é um baita rodeio para você fazer compliar.

Com os wizards do Flash Builder 4.5.1 para ios, a coisa ficou bem mais fácil. Para quem já tem o Flash 4.5 registrado baixe gratuitamente aqui o update.

Dica importante, para quem está publicando apps em Flex para iOS, não usem o AIR 2.6 SDK que é o padrão dessa versão. Leiam esse documento para que vocês possam utilizar o AIR 2.7 que está 4x mais rápido do que a atual versão suportada no SDK.

Outra dica para quem está publicando para o Blackberry Playbook, leiam esse release no Blog da RIM.

Quem é ligado como eu nos released notes sobre bugs existentes e já conhecidos, leia aqui. Nele você também encontra informações como usar o Flash Builder no Linux.

Flash Builder 4.5/ Flex/ Flex 4.5

Corretor ortográfico em aplicações Flash/Flex/AIR

Já pensou em ter uma aplicação que possa corrigir erros ortográficos em alguns aplicativos, por exemplo, aplicações de edição de textos públicos, licitatórios, organizadores de documentos virtuais, edição de textos, em fim uma gama de aplicações são pertinentes ao assunto. E A Adobe tem há algum tempo uma biblioteca gratuita que você pode usar para adicionar essa funcionabilidade ao seu aplicativo.

A Squiggly, além de gratuita ela se baseia em dicionário público e open-source que é bastante utilizado nos navegadores Chrome, Firefox e a suite de office open-source Open-Office. Tem alguns bugs conhecidos, mais nada que lhe impeça de criar essa função em seu aplicativo.

E cá entre nós, praticamente 50% dos sistemas não tem um corretor ortográfico em campos como comentários adicionais, preenchimento de dados específicos como descrição de produtos, e acaba afetando, ou vai dizer que todo o texto que seu sistema controla é feito pelo Word?

Vamos lá fazer um exemplo.

Passo 1 – Criar um projeto
Passo 2 – Baixar o SWC do Squiggly.
Passo 3 – Adicionar o SWC’s do Squiggly no diretório lib de seu projeto. Os SWCs você vai encontrar direto na pasta libs do arquivo .zip que você baixou. Veja como ficou o meu abaixo.
squiggly

Agora, o resto é fácil. Veja um exemplo abaixo que criei. Lembre-se estou usando o Flex 4.5, funciona com Flash, AIR 2.0+ e em projetos Actionscript 3.0 puro. No .zip que você baixar vai encontrar vários exemplos.

Publicador

<?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:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Ok, até ai tudo bem, o problema agora é o seguinte, por padrão o Squiggly trás apenas o idioma en_US, para o corretor, o que nos faz pesquisar no Google e tentar achar outros idiomas, já que é gratuito e eu mencionei OpenOffice, então facilmente eu consigo esse dicionário em pt_BR. Ah! achei.

Com o dicionário em mãos, eu vou criar a seguinte estrutura em meu projeto.

squiggly_pt_br

Veja que tem a estrutura en_US, pt_BR dentro da pasta dictionaries, essas pastas por padrão estão dentro do pacote que você baixou do squiggly. Você vai encontrar ela (en_US) dentro da pasta src.

Agora o que você precisa fazer é mapear essa nova biblioteca que você adicionou(pt_BR) ao AdobeSpellingConfig.xml que está no projeto, ele tem o atual código.

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
</spellingConfig>

Troque por essa:

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
  <languageResource language="Português Brasil" languageCode="pt_BR" ruleFile="dictionaries/pt_BR/pt_BR.aff" dictionaryFile="dictionaries/pt_BR/pt_BR.dic"/>
</spellingConfig>

Adicione quantos idiomas você quiser. Agora voltamos ao código de nossa aplicação.

Eu peguei o código e apliquei as dependências do Squiggly. Então, veja como ficou.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="startMeuCorretor(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import com.adobe.linguistics.spelling.SpellUI;
			import com.adobe.linguistics.spelling.framework.ResourceTable;
			import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 
			import mx.events.FlexEvent;
 
			protected function startMeuCorretor(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				var dicionarios:ResourceTable = new ResourceTable();
			//opcional	dicionarios.setResource("en_US", {rule:"dicionaries/en_US/en_US.aff", dict:"dicionaries/en_US/en_US.dic"});
				dicionarios.setResource("pt_BR", {rule:"dicionaries/pt_BR/pt_BR.aff", dict:"dicionaries/pt_BR/pt_BR.dic"});
				SpellingConfiguration.resourceTable = dicionarios;
 
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%" creationComplete="SpellUI.enableSpelling(campoTitulo, 'pt_BR');"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300" creationComplete="SpellUI.enableSpelling(campoCorpoTexto,'pt_BR')">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Resultado final:

squiggly_post

Com isso, basta publicar sua aplicação com todas as dependências de dicionários e arquivos e sua aplicação estará pronta para corrigir os assassinos de palavras portuguesas.

Aproveita, é simples, legal de implementar. Até o próximo post.

Flash Builder/ Flash Builder 4.5/ Flex/ Flex para Gerentes

Criando aplicações Flex com o SAP netweaver gateway

O futuro do Flex não está reservado apenas ao mundo Mobile, com quase todas as vagas preenchidas para o próximo curso e lançamento da RIACycle(www.riacycle.com/flexmobile) a Adobe recentemente anunciou uma parceria inédia com a SAP.

A SAP é amplamente utilizada no mercado global de grandes corporações, repito, GIGANTES corporações usam o SAP.

No SaPPhire Now, principal evento da SAP, a Adobe lançou um protocolo de integração junto ao netweaver gateway que é também um produto novo da SAP para navegação e consumo dos dados que são gerados pelo NetWeaver , versão 7.0.2 acima, que já possui suporte ao gateway.



See how to build a simple Flex tablet application using SAP data accessed through the SAP NetWeaver Gateway. (9:58)

Vale muito a pena você assistir o video abaixo onde mostra a integração já nativa no Flash Builder Premium para uma nova release que sai em Junho, já com tal recurso. Visite também a página no Adobe Labs falando sobre essas aplicações Flex e SAP netweaver.