Flex 4 + Reuso e reaproveitamento de telas feitas

Assuntos Gerais
#1

Pessoal, estou começando a estudar Flex, utilizando o Flesh Builder 4 e o BlazeDS 4 para integração com Java.

Basicamente eu tenho 2 dúvidas:

  1. Como (ou qual componente usar) criar um “modal” em Flex, um modal que seja usado para um CRUD por exemplo?

  2. Como reutilizar as páginas já prontas?
    Exemplo:

Minha aplicação terá por exemplo 10 telas de cadastro.

Digamos que todos estes formulários compartilham dos seguintes itens:
Labels: Nome, Endereço (Rua, bairro, cep, número, cidade, estado) e seus respectivos inputs.
Botões: Novo Cadasto, Editar Cadastro, Salvar Cadastro e Excluir Cadastro.

É um exemplo simples, a aplicação real talvez tenha mais cadastros. A idéia é: como utilizar de forma a escrever menos código possível (menos telas) e otimizar o tempo de desenvolvimento.

Bom, como eu poderia criar uma tela “base” com estes dados citados e reutilizar estas telas? De forma que por exemplo, em um cadastro específico entre estes 10 que citei, eu gostaria de realizar algumas operações a mais nos métodos de salvar, editar, novo e excluir. Seria apenas esta a diferença.

Uma outra coisa, atualmente utilizo facelets, e me ajuda muito a desenvolver a forma “orientada a objetos” do facelets. No caso, eu queria ter idéia de como utlizar este formulário basico que citei acima e criar um novo arquivo mxml, que extenda este formulário básico e acrescente alguns campos novos. Teria como?

Obrigado.

#2

Não que eu seja muito experiente em Flex, mas para reaproveitamento, vc poderia usar herança…

#3

Então cara, para tela modal, geralmente eu utilizo o TitleWindow.

Já para reaproveitar telas, tentei fazer um exemplo aqui, vamos ver se é mais ou menos isso que você precisa.Não sei se é a melhor maneira
de fazer isto, mas aparentemente deu certo.

1 - Montei um application que servirá como base para as outras telas.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” width=“468” height=“342”>
<mx:Button x=“141” y=“176” label=“Button” />
<mx:TextInput x=“100” y=“66” id=“txtcodigo”/>
<mx:TextInput x=“100” y=“120” id=“txtnome”/>
<mx:Label x=“48” y=“68” text=“Código”/>
<mx:Label x=“55” y=“122” text=“Nome”/>
<mx:Label x=“109” y=“10” text=“Cadastro” fontSize=“27”/>

</mx:Application>

2 - Crie um outro application, e coloque o código abaixo:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” creationComplete=“init()”>

<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;
		import mx.controls.TextInput;
		
		public function init():void
		{
			var tela:TelaBase = new TelaBase();
			var txt:TextInput = new TextInput();
			txt.x = 50;
			
			tela.addChild(txt);
			PopUpManager.addPopUp(tela,this);
		}
		
		
	]]>
</mx:Script>

</mx:Application>

  • Observe que no creationcomplete, o método init será inicializado.Este método por sua vez, cria uma tela à partir da tel base
    ( var tela:TelaBase = new TelaBase(); ), após isto, um TextInput é criado via código-fonte, e adicionado à tela através do método addChild()

Bom, é isso cara, espero que seja útil.
Falow.

#4