O Nintendo Wii é um dos consoles mais populares da atualidade, com seu controle até então inovador para época de seu lançamento, se tornou um video game “para família” e para varias utilidades. Hoje o Nintendo Wii é usado em varias partes do mundo não somente para diversão, mas também em aréas como fisioterapia para recuperação de pacientes

Hoje o Nintendo Wii é usado em varias partes do mundo não somente para diversão, mas também em aréas como fisioterapia para recuperação de pacientes

Bom, sabemos que é possivel desenvolver em Flash para o Nintendo Wii, mas precisamos observar alguns detalhes primeiro. Vejamos a especificação do Flash Player para o Nintendo Wii que consta no Adobe Device Central CS5.

Especificação Flash Player no Nintendo Wii

Note que teremos que trabalhar com o Flash Player 7, mas no site da Nintendo consta que pode ser atualizado para o Flash Player 8, e o aplicativo rodará pelo browser do Wii, seu browser é uma versão do Opera feita exclusivamente para o Wii.
Wikipedia diz que o Flash Player foi atualizado para o Adobe Flash Lite 3.1, que corresponde ao Flash Player 8 com algumas features do Flash Player 9. Mas eu criei um arquivo Flash Player 9 com ActionScript 2.0 e funcionou, criei um arquivo Flash Player 9 com ActionScript 3.0 e não funcionou, criei um Flash Lite 3.1 e funcionou. Fiquei com Flash Player 9 e ActionScript 2.0 para meus testes.(System.capabilities.version mostra AFL 9,1,122,0)

Vamos fazer um primeiro exemplo para ver como fica o funcionamento do Flash Player com o Wii Remote.

• Crie um novo arquivo do tipo ActionScript 2.0 e logo em seguida, coloque o filme para compilar no Flash Player 8 ou 9. Ou pode fazer isso diretamente pelo Adobe Device Central CS5, que deixa tudo configurado para você, inclusive com o tamanho ideial para rodar no navegador do Wii.
• O objetivo desse exemplo é avaliar o funcionamento dos botões do Wii Remote, criaremos um simbolo do tipo MovieClip.
• Insira o seguinte código no MovieClip para que nosso simbolo possa ser arrastado pelo Wii Remote:
  PLAIN TEXT
  ACTIONSCRIPT:

  1. onClipEvent(mouseDown)
  2. {
  3.     this.startDrag();
  4. }
  5. onClipEvent(mouseUp)
  6. {
  7.     this.stopDrag();
  8. }

Pelo que pude perceber, somente nos eventos de mouse que podemos utilizar no Nintendo Wii, não foi possivél usar os outros botões e o direcional pad.
Você pode testar o exemplo abrindo a seguinte URL no navegador do Wii http://www.leonardofranca.com.br/wii ou veja no video abaixo.

Apesar da limitação de só usar eventos do mouse, dá pra fazer aplicativos bem interessantes em Flash para Nintendo Wii. Deixo um link com alguns games para Nintendo Wii feitos em Flash.
http://www.eiksoft.com/wii/index.htm

Para saber mais:
Documentação ActionScript 2.0

Aproveite e compre seu Nintendo Wii
Nintendo Wii com Jogo Wii Sports

Para mostrar a evolução do Flex 4 em relação a efeitos, vamos criar este exemplo que relaciona diversos conceitos tais como States, seqüência de efeitos e transições. A idéia é criar uma tela de login agradável ao usuário, sem abusar muito.

Clique aqui para ver este exemplo em funcionamento

Inicialmente vamos rever alguns conceitos importantes:

States

O uso de states ficou muito fácil no Flex 4. Eles mudaram completamente em relação ao Flex 3. Por exemplo, criamos os states:

<s:states>
	<s:State name="normal"/>
	<s:State name="login"/>
	<s:State name="logado"/>
</s:states>

E após criar estas states, podemos relacioná-los da seguinte forma:

<s:BorderContainer 

	width="200"
	width.normal="80"
	height="150"
	right="50"
	y.normal="-120"
	y.logado="-120"
	y.login="10"
/>

A parte em negrito define a propriedade y do componente, de acordo com o state ativado. No Flash Builder, você pode digitar a propriedade e em seguida inserir um ponto, surgirá o state para que você possa escolher, conforme a figura a seguir.

Desta forma fica fácil definir os states da sua aplicação, principalmente se você não estiver no modo design (no Flex 3 era muito complexo alterar states no modo texto).

Transitions

Transições estão diretamente ligadas aos states. Sempre que você quiser usar efeitos em conjunto com states, deverá usar transitions. Na transition, você cria o efeito. Veja o exemplo a seguir:

<s:transitions>
	<s:Transition>
		<s:Parallel>
			<s:Sequence>
				<s:Resize target="{caixa}"/>
				<s:Move target="{caixa}"/>
			</s:Sequence>
			<s:Fade targets="{[btnLogarOk,btnLogar,
					btnSair,lblHello]}"/>
		</s:Parallel>
	</s:Transition>
</s:transitions>

No exemplo acima, a tag <s:Transition> relaciona qualquer mudança de state na aplicação. Pode-se usar as propriedades toState e fromState para definir states específicos. Na definição da transition, criamos um efeito em paralelo (Parallel) seguido de um efeito em série (Sequence). O target destes efeitos estão relacionados ao componente cujo o id é “caixa”. O efeito Fade possui a propriedade targets, define os botões que sofrerão efeito de Fade.

Em relação ao artigo anterior (Efeitos no Flex 4 – Move, Fade, Parallel, Easing, Bounce), repare que não definimos propriedades para os efeitos. Ou seja, não usamos xTo ou yFrom, nem alphaFrom ou alphaTo. Quem define essas propriedades é o próprio componente (na verdade é o trigger do efeito em relação ao componente…), na mudança de states. Ou seja, se em um determinado state um botão está visivel, e em outro state não está mais, o efeito será realizado.

Exemplo Completo

O código a seguir representa a união de todos estes conceitos:

<?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">

	<s:creationComplete>
		<![CDATA[
		currentState='normal';
		]]>
	</s:creationComplete>

<s:states>
	<s:State name="normal"/>
	<s:State name="login"/>
	<s:State name="logado"/>
</s:states>

<s:transitions>
	<s:Transition>
		<s:Parallel>
			<s:Sequence>
				<s:Resize target="{caixa}"/>
				<s:Move target="{caixa}"/>
			</s:Sequence>
			<s:Fade targets="{[btnLogarOk,btnLogar,
					btnSair,lblHello]}"/>
		</s:Parallel>
	</s:Transition>
</s:transitions>

	<fx:Declarations>
	</fx:Declarations>

	<s:BorderContainer
		id="caixa"
		cornerRadius="5"
		backgroundColor="#eeeeee"
		borderColor="#aaaaaa"

		width="200"
		width.normal="80"
		height="150"
		right="50"
		y.normal="-120"
		y.logado="-120"
		y.login="10"
		>

		<s:Button  id="btnLogar"
				   label="Logar"
				   bottom="5"
				   right="5"
				   includeIn="normal"
				   click="{this.currentState='login'}"
				   />

		<s:Button id="btnLogarOk"
				  label="Ok"
				  bottom="5"
				  right="5"
				  includeIn="login"
				  click="{this.currentState='logado'}"
				  />

		<s:Button id="btnSair"
				  label="Sair"
				  bottom="5"
				  right="5"
				  includeIn="logado"
				  click="{this.currentState='normal'}"
				  />

		<s:Label id="lblHello"
				  text="Ola Fulano"
				  bottom="5"
				  left="5"
				  includeIn="logado"
				  />

		<s:Label top="10" left="10"
				 text="Email:"/>

		<s:TextInput top="25" left="10" right="10"
				 text=""/>

		<s:Label top="60" left="10"
				 text="Senha:"/>

		<s:TextInput top="75" left="10" right="10"
					 text=""/>

	</s:BorderContainer>

</s:Application>

Clique aqui para ver este exemplo em funcionamento

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?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>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?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>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?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>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?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>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

Atenção: antes de começar, saiba que este texto foi escrito por uma designer com “alguma” experiência em aplicações para web – uma pessoa que programa (modéstia à parte) bem e que tem um mestrado em ergonomia. Este texto mostra as mudanças em um projeto motivadas pelo compromisso da nossa personagem de aderir às “regras” do design de interfaces. Este foi o primeiro aplicativo para mobile que ela projetou, e é assim que ela se sente:

Vamos deixar então que nossa designer conte como foi…

Design de interfaces para mobile (no Brasil)

Conheci, ano passado, três caras que estavam a fim de desenvolver aplicativos para celular. Acho que formamos um excelente time, pois reunimos experiência e conhecimento técnico. Além disso, temos alguém no grupo com um “feeling para negócios” (sorry, Marco, não sei descrever de outra forma), o que é pré-condição para engrenar. Depois de muitas reuniões (do Marco), conseguimos vender um projeto, cujo briefing descrevo: criar um aplicativo para ser usado em eventos. As funcionalidades oferecidas são:

• Receber avisos dos organizadores (por exemplo: alteração na agenda).
• Receber avisos promocionais dos patrocinadores.
• Fazer perguntas aos palestrantes.
• Trocar cartões de visita virtuais.
• Enviar convites para meetings dentro da área do evento.

O rationale é: pessoas que vão a eventos têm interesses comuns, mas nem sempre se conhecem – aliás, muitos vão a estes eventos para se conhecerem.  Porém, o sistema de crachás de identificação tem dois problemas: algumas pessoas simplesmente não os usam e é constrangedor ficar lendo o crachá dos outros. O aplicativo seria uma forma de fazer com que as apresentações fossem mais eficientes, permitindo que os participantes escolham com quem querem manter contato.

A restrição explícita: deve funcionar na maior parte dos aparelhos. Minha restrição explícita: deve ser boa usabilidade. Lógico.

Claro, eu nunca havia feito nada para mobile, mas tinha uma idéia de mais algumas restrições:

• Interação pelas teclas de direção; seleção pela tecla do meio. Sem touch.
• Otimizar a transmissão de dados. Toda vez que você envia ou recebe dados, vê uma mensagem desagradável avisando da conexão. Isso, mais importante do que o custo em reais, gera desconfiança: “porque estou toda a hora sendo avisado disso?”.

Ok, vamos para o Balsamiq (que só tem iPhone como modelo, mas abstrai, ok?) ver como fica. Veja aí como eu desenhei a área das “Perguntas”.

Para você entender meu raciocínio, vou colocar o processo em forma de diálogo: eu e um Balde de Água Fria.

Eu – Vamos usar tabs, certo? Isso permite que o usuário veja em que sessão ele está. Quando ele quiser fazer “perguntas” (por isso o título, entende?), escolhe a palestra e clica nela (com o botão do meio). Isso faz com que ele veja a tela da direita: ali ele pode enviar uma pergunta para o palestrante.

Balde de Água Fria – Hummm, mas ele também pode enviar respostas para enquetes e a avaliação da palestra. Você sabia disso desde o início, não foi idéia do cliente na última hora.

Eu – Certo. Quem sabe então a gente coloca uma barra de botões?

BAF – Não cabe… Muito texto nos labels…

Eu – Vamos colocar uns ícones…

BAF – Esses ícones do Balsamiq são uma caca…

Eu – É eu sei. Mas a gente vê uns legais depois…

BAF – Ok, mas você está com um problema de coerência…

Eu – O QUÊ? DE COERÊNCIA?

BAF – Pois é… Você está usando tabs para alternar entre telas. E sua barra de botões tem o mesmo comportamento. Além disso, na tela de “Convites recebidos”, por exemplo, você está usando uma barra de botões com ícones para operar sobre um dado (o cartão de apresentação). Quer dizer que em uma área a barra de botões troca de tela e na outra ela sinaliza operações possíveis sobre um dado.

BAF – E não é só isso. Olhando bem, parece que você também tem um problema de consistência.

Eu – O QUÊ? DE CONSISTÊNCIA?

BAF – Sim. Veja a tela “Perguntar”. Aqui você usa texto no botão. Afinal, é texto ou ícone?

Eu – P*** m***, é verdade.

Eu – Ah, já sei! Vamos fazer assim, ô:

EU – Quando o usuário clicar na palestra para fazer uma pergunta (ou enquete ou avaliação), as tabs vão mudar de label, e para ele voltar, é só clicar na tab bem à esquerda que diz “<<”.

BAF – Nossa… Você realmente se preocupa com a coerência. O problema foi mesmo resolvido, afinal agora você só tem tabs. Só que agora você tem dois níveis de hierarquia que parecem ser um só. Além disso, você alterou o comportamento esperado de um componente (o tab).

Eu – P*** m***, HIERARQUIA e MUDANÇA DE COMPORTAMENTO? Dá um descanso, BAF!

BAF – Sorry, mas você pediu par eu ser chato…

Eu – Tá bom.

Eu – Olha só, podemos usar janelas modais! Quando o usuário for enviar a pergunta, por exemplo, uma nova janela será aberta. A gente pode deixar o que está atrás meio transparente, com um blur, sabe? Aí o usuário saberia que foi para outro nível de edição.

BAF – Entendo. Assim você não muda o comportamento dos tabs e preserva a hierarquia.

Eu – Isso mesmo. Sabia que você iria entender.

BAF - Como fica quando houver três níveis de hierarquia?

Eu – Não haverá.

BAF – Você sabe que não deve dizer isso…

Eu – Vá à merda, BAF.

BAF – Ok. Você sabe que a luminosidade pode atrapalhar a leitura destas janelas com transparência, não sabe?

Eu – Vá à merda, BAF.

E esta é a história da primeira versão do layout no Balsamiq. Algum tempo depois, o João (nosso desenvolvedor-java-rulez) fez a seguinte observação:

João – Sabe, Gabi, essa tela de buscar aqui está complicada de navegar… Acho que tem problemas de usabilidade… O usuário tem que clicar várias vezes até chegar no botão de buscar. Daí eu consertei isso colocando um menuzinho-aqui-assim.

OK, PARA TUDO.

BAF, COMO É QUE VOCÊ NÃO ME AVISOU???

BAF – Bem, não me dei conta disso.

EU – Mas “menu”? O usuário não tem como ver o que tem no menu. Depois, ele precisa DESPERDIÇAR um clique só par ver o que tem no menu. E se o menu tiver mais de um nível, ele vai ter que desperdiçar outros cliques só pra inspecionar o menu. ISSO NÃO PODE!

BAF – Pois é, é muito ruim, eu sei. Mas sabe que o João está certo? Dá uma olhada nessa tela aqui.

BAF – Imagina que a pessoa está no primeiro item da lista, ok? E que ela quer enviar um cartão de apresentação. Quantos cliques ela tem que dar?

Eu – Nove para chegar até “Networking” e um para selecionar. Que m****.

Eu – É… Acho que estou negligenciando as softkeys… Vou fazer o seguinte: usar a softkey da esquerda para abrir um menu, e a da direita para outras ações.

Eu – Tipo assim: o usuário pode continuar navegando com os direcionais e selecionando os itens da lista (tela da esquerda). Quando ele clicar numa palestra, ele vai para a tela que está à direita. Ali eu vou usar um título com breadcumbs, pra mostrar onde ele está e de onde ele veio (só que não pode ser feio que nem esse do Balsamiq!). E nas softkeys tem o menu (na esquerda) e um botão, quando necessário (na direita). E para minimizar essa coisa de desperdiçar cliques inspecionando o menu, vamos tentar usar as mesmas opções sempre que possível, ok?

BAF – É, agora parece bom.

Eu – Vamos ver o que os guris acham.

E AÍ, GURIS, O QUE VOCÊS ACHAM?

Olá, pessoal esse é uns dos primeiros POST’s que estarei fazendo aqui na FlexDev sobre Silverlight e tecnologias .NET, meu nome é Rodrigo da Silva Brito e trabalho na flexdev desde abril de 2009, comecei a trabalhar com desenvolvimento de sistemas em 2004 na TreinaSoftware, trabalhava com Visual Basic 6, MySQL e o grande e famoso Microsoft Access. Em 2006 comecei a estudar .NET e C#, me apaixonei por C# e estou até hoje nessa caminhada de estudos. No momento estou terminando o bacharelado em ASTI (Análise de Sistemas e Tecnologias da Informação) pelo Centro Paula Souza – FATEC Ourinhos, e escrevendo a minha monografria sobre frameworks de persistência. Possuo um blog do qual estou ressuscitando, você pode acessá-lo através do seguinte endereço http://rodrigobrito.wordpress.com. Agora vamos ao que interessa!

Para começarmos você vai precisar ter instalado em sua máquina o Microsoft Visual Studio 2010. Neste artigo estarei utilizando a versão Premium, precisaremos também do Microsoft Silverlight 4 Tools for Visual Studio 2010 que é um pré requisito para desenvolver aplicações em Silverlight 4 e aplicações Ria Services através do Visual Studio 2010. Precisaremos também do Microsoft Expression Blend® 4 Release Candidate (RC).

1. Inicie o Microsoft Visual Studio 2010

2. No menu File passe o mouse sobre New, e então selecione New Project

3. A caixa de diálogo New Project será exibida

4. Em Installed Templates no lado esquerdo da janela selecione Visual C# e então selecione Silverlight. Selecione Silverlight Application e verifique se na caixa de seleção superior está selecionado o .NET Framework 4. Em Name colocaremos o nome de nossa aplicação no caso FirstSilverlightApplication e então click em OK.

5. Na caixa de diálogo New Silverlight Application desselecione Host the Silverlight application in a new Web site e em Silverlight Version verifique se Silverlight 4 está selecionado e então click em OK.

6. Após clicado em OK você terá uma tela como esta.

Criando Controles

Os controles podem ser adicionados a aplicação usando o ToolBox do Visual Studio ou editando o texto XAML diretamente no editor XAML.

1. Selecione o controle TextBlock e o arraste a MainPage.xaml.

A. Altere a propriedade Text do controle para Contatos.

B. Altere o tamanho da fonte do controle para 14, através da propriedade FontSize.

C. Deixe a fonte em negrito através da propriedade FontWeight selecionando Bold.

2. Selecione o controle Border e o arraste a MainPage.xaml, altere a propriedade CornerRadius para 5.

3. Arraste o controle Grid para dentro do controle Border, então resete as propriedades Height e Width do Grid.

4. Arraste controles TextBlock e TextBox para dentro do controle Grid de forma que a página fique conforme a figura abaixo.

Como você já deve ter percebido, todas as mudanças feitas através da ToolBox Properties são refletidas instantaneamente no código XAML. Veja abaixo o código XAML referente ao controles TextBlock e TextBox que adicionamos dentro do grid.

 <Grid>
         <TextBlock Height="20" HorizontalAlignment="Left" Margin="6,9,0,0" VerticalAlignment="Top" Width="74" Text="Nome:" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,6,0,0" Name="txtNome" VerticalAlignment="Top" Width="282" />
         <TextBlock Text="Empresa:" Height="20" HorizontalAlignment="Left" Margin="6,37,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Cargo:" Height="20" HorizontalAlignment="Left" Margin="6,66,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="E-mail:" Height="20" HorizontalAlignment="Left" Margin="6,94,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Telefone:" HorizontalAlignment="Left" Margin="6,123,0,107" Width="74" TextAlignment="Right" />
         <TextBlock Text="Observações:" Height="20" HorizontalAlignment="Left" Margin="0,149,0,0" VerticalAlignment="Top" Width="80" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,35,0,0" Name="txtEmpresa" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,64,0,0" Name="txtCargo" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,92,0,0" Name="txtEmail" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,121,0,0" Name="txtDDI" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="133,121,0,0" Name="txtDDD" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="180,121,0,0" Name="txtTelefone" VerticalAlignment="Top" Width="188" />
         <TextBox Height="95" HorizontalAlignment="Left" Margin="86,149,0,0" Name="txtObservacoes" VerticalAlignment="Top" Width="282" />
 </Grid>

5. Aumente o tamanho da página “Height” e arraste dois controles Button, botões Salvar e Cancelar. Altere as suas propriedades Content e Name respectivamente.

Imagem da página criada:

Código XAML completo da página:

Nos próximos artigos de Silverlight estaremos complementando essa pequena aplicação, iremos criar o Grid para a listagem de contatos, botões de inclusão, edição e deleção. Utilizaremos WCF para acesso aos dados.

O WCF para quem não conhece é um poderoso framework para a criação de aplicações orientadas a serviço.

Até o próximo artigo!

Esta semana eu estava dando uma olhada na grade do curso de Frontend da Egenial que vai começar neste sábado. Lendo sobre o curso veio novamente aquela lembrança de como o mercado, principalmente brasileiro, é fraco em produtos agradáveis de serem usados.

Por exemplo, eu não conheço nada semelhante ao Shopify em português, muito menos algo como o Basecamp. Que existem concorrentes brasileiros existem, mas por que todos são extremamente inferiores e conseguem até gerar ódio dos usuários?

Não entendo e nem quero entender nada de design

Muitos desenvolvedores criam seus projetos, abrem empresas, montam startups ou entregam produtos para clientes sem ter a consciência que talvez o seu código suado não tenha valor nenhum.

Alegando o contrário, você vai dizer que fez a analise do que era necessário, possui testes, empregou as melhores tecnologias, conversou com o cliente em todas as etapas e agora está tudo exatamente como combinado.

Porém existe uma coisa que a grande maioria das pessoas da área de TI não se preocupa. A interface, ou seja, como será usado seu sistema.

Amor a primeira vista

Em um produto material (não virtual) várias coisas contam, por exemplo a textura, como as coisas funcionam, a matéria prima empregada, como foi empregada, os encaixes e etc. O contato com o produto é físico e apenas por tocar um produto você consegue dizer se ele é uma porcaria ou não e se tem utilidade ou não.

No caso de produtos virtuais esse contato não existe e o mais próximo que temos da situação acima é contato com a interface do sistema.

Agora imagine o seu código lindo e maravilhoso embrulhado em telas cinzas e com 50 campos de formulário sem nenhuma lógica ou explicação?

Qual reação o usuário terá? Com um único olhar ele vai entender isso tudo como uma grande porcaria que é obrigado a usar pois faz parte do seu cotidiano. Quantas vezes você não vê pessoas reclamando que é uma falha no sistema? A grande maioria das vezes são apenas dificuldades que esta pessoa está tendo para entender como as coisas devem fluir naquele emaranhado de botões e campos.

Pensar como as telas vão ser desenvolvidas, quais são os passos lógicos que o usuário deve tomar, quais telas devem existir e quais não devem é sim parte do trabalho do desenvolvedor.

Para entregar um produto de real qualidade para quem vai usar seu sistema todos os dias é necessário que todas as pessoas da equipe entendam que a interface e o design são no mínimo 50% do produto e que o usuário deve abrir seu sistema e se sentir confortável. É assim que você se sente ao ligar seu Macbook ou seu iPhone. Você também não usa seu Gmail com medo de fazer uma bobeira por não saber onde está clicando. No seu produto não deve ser muito diferente.

Você não precisa se tornar um exímio desenhista e criar logos e ícones mas você precisa ter o censo crítico para identificar que seu produto é uma porcaria ou uma maravilha. Também deve ser capaz de conversar com os designers da sua equipe de igual para igual se aquela barreia que existe na maioria das empresas.

Design de UI NÃO É ARTE!

Design de software é quase nada de trabalho artístico e muito, mas muito, trabalho racional. Se ainda está relutante se deve entender algo sobre design ou não eu recomendo fortemente este vídeo para você entender porque um negrito em local é mais importante que um itálico:

<object height=”360″ width=”540″><param /><param /><param /><embed src=”http://vimeo.com/moogaloop.swf?clip_id=6702766&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=b30000&amp;fullscreen=1″ height=”360″ width=”540″></embed></object>

Por onde começo?

Com tudo isto em mente, se tornar um “Devgner” (como costuma dizer Lee Brimelow) é extremamente complexos (se ainda não viu o vídeo acima veja logo).

Voltando ao começo deste post, este curso de Frontend é algo que venho sugerindo ao pessoal da Egenial e conversando com eles a bastante tempo por todos estes motivos acima. Recomendo que você comece fazendo os seus softwares melhores através deste primeiro passo com o curso.

Se você ainda não leu CRUD com Flex e Zend_AMF – Parte 1, leia agora

Agora que nossa conexão foi estabelecida, podemos começar a adicionar registros. Esta é a nossa primeira tarefa, e para isso precisamos criar um formulário de entrada de dados. Geralmente os formulários de entrada de dados são feitos em uma popup, e vamos seguir esta regra, ok?

Crie um novo MXML Component, chamado: PessoaForm.mxml, conforme a imagem a seguir:

O código inicial deste componente está a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="300" height="150"
		   title="Pessoa"
		   close="{PopUpManager.removePopUp(this)}"
		   >
<s:layout>
	<s:VerticalLayout/>
</s:layout>

<fx:Declarations>
	<!-- Place non-visual elements
	(e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;

		import spark.components.PopUpAnchor;
	]]>
</fx:Script>

<mx:Form width="100%" height="100%">
	<mx:FormItem label="Nome:" width="100%">
		<s:TextInput id="nome" width="100%"/>
	</mx:FormItem>
	<mx:FormItem label="Email:" width="100%">
		<s:TextInput id="email" width="100%"/>
	</mx:FormItem>
</mx:Form>

<s:controlBarContent>
	<s:HGroup horizontalAlign="right" width="100%">
		<s:Button id="btnOk" label="OK"/>
		<s:Button id="btnCancelar"
				  label="Cancelar"
				  click="{PopUpManager.removePopUp(this)}"/>
	</s:HGroup>
</s:controlBarContent>

</s:TitleWindow>

Neste código criamos um form com dois campos, mais os botões ok e cancelar. Até aqui nada de mais. O botão cancelar remove o popup, pois este TitleWindow será um popup.

Voltando à aplicação principal, temos que criar o botão que irá abrir este TitleWindow. Alterando o código da aplicação (Parte 1), temos:

<?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>
<mx:RemoteObject id="RemotePessoas"
				 destination="zend"
				 source="Pessoas">

	<mx:method name="TesteConexao"
			   result="OnTestConexaoOk(event)"/>

</mx:RemoteObject>
</fx:Declarations>

<fx:Script>
	<![CDATA[
	import forms.PessoaForm;

	import mx.controls.Alert;
	import mx.managers.PopUpManager;
	import mx.rpc.events.ResultEvent;
	public function OnTestConexaoOk(event:ResultEvent):void
	{
		Alert.show(event.result.toString());
	}
	]]>
</fx:Script>	

<s:Button label="Adicionar Pessoa" top="10" left="10">
<s:click>
	<![CDATA[
		var p:PessoaForm = new PessoaForm();
		PopUpManager.addPopUp(p,this,true);
		PopUpManager.centerPopUp(p);
	]]>
</s:click>
</s:Button>

</s:Application>

O botão “Adicionar Pessoa” da aplicação principal abre uma popup, exibindo o formulário abaixo:

Agora podemos voltar ao código do formulário e adicionar a funcionalidade de “adicionar pessoa”. Para isso usamos o RemoteObject. O código do arquivo PessoaForm.mxml fica assim:

...
<fx:Declarations>

 <mx:RemoteObject id="pessoaRemote"
		 destination="zend"
		 source="Pessoas"
		 showBusyCursor="true"
		 >

	<mx:method name="Inserir"
	   result="OnInserir(event)"
	   fault="OnFault(event)"
	   />

  </mx:RemoteObject>

</fx:Declarations>

...

<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

import spark.components.PopUpAnchor;

protected function OnInserir(event:ResultEvent):void
{
	PopUpManager.removePopUp(this);
}

protected function OnFault(event:FaultEvent):void
{
	Alert.show(event.message.toString(), "ERROR");
}

]]>
</fx:Script>

....

<s:Button id="btnOk" label="OK">
	<s:click>
	<![CDATA[
		pessoaRemote.Inserir(nome.text,email.text);
	]]<
	</s:click>
</s:Button>

As mudanças no código são relativas ao RemoteObject, que possui o método inserir, disparado pelo click do botão. O método inserir deve ser criado no arquivo pessoas.php, conforme o código a seguir:

<?php
class Pessoas
{
	var $db;

	function __construct()
	{
		$this->db = new Zend_Db_Adapter_Pdo_Mysql(array(
		'host'     => '127.0.0.1',
		'username' => 'root',
		'password' => '',
		'dbname'   => 'flexcrud'
		));
	}

	function TesteConexao()
	{
		return "OK";
	}

	function Inserir($nome,$email)
	{
		$data = array('nome'=>$nome,'email'=>$email);
		$this->db->insert('pessoas',$data);
		return $this->db->lastInsertId();
	}

}

Neste momento já podemos testar a aplicação. Caso dê algum erro, verifique o log de erros em c:wamplogsapache_error.log. Mas olhando o código do arquivo pessoas.php, podemos notar que ele tem um problema. Os parâmetros de conexão estão dentro da classe pessoas. Fiz isso de propósito, para mostrar que temos que ter uma visão crítica do nosso código, sempre que possível. Já imaginou termos 10 classes e cada uma delas tem as configurações do banco de dados? E se estas configurações mudarem?? Precisaremos alterar as 10 classes.. (eu acho que isso da justa causa hehe).

Para resolver o problema, podemos usar um pouco de orientação a objetos. Vamos criar uma classe chamada “Base”, que contém essa configuração, e fazer a classe Pessoas herdar de Base. Veja:

base.php:

<?php
class Base
{
	var $db;

	function __construct()
	{
		$this->db = new Zend_Db_Adapter_Pdo_Mysql(array(
		'host'     => '127.0.0.1',
		'username' => 'root',
		'password' => '',
		'dbname'   => 'flexcrud'
		));
	}
}

Agora a classe Pessoas fica assim:

<?php
include("base.php");

class Pessoas extends Base
{
	function __construct()
	{
		parent::__construct();
	}

	function TesteConexao()
	{
		return "OK";
	}

	function Inserir($nome,$email)
	{
		$data = array('nome'=>$nome,'email'=>$email);
		$this->db->insert('pessoas',$data);
		return $this->db->lastInsertId();
	}

}

Desta forma, conseguimos usar a variável $this->db em qualquer classe que herde da classe Base. No próximo artigo da série, iremos criar um datagrid para ver os dados que estão sendo inseridos. Aguardem!!

• Código misto, isto é, código Flex 3 (Halo / MX) juntamente com código Flex 4 (Spark). Isto é informado em Project > Properties > Flex Build Path > Library path > Component set = MX + Spark (default). O tema default é o Spark, o que na minha opinião é mais agradável, mais clean.
• Migração. Aqui o esforço é maior e deve ser bem analisado. O Flex Team fez um grande refactoring para separar os códigos de layout (skin) do core dos objetos.

• Código misto, isto é, código Flex 3 (Halo / MX) juntamente com código Flex 4 (Spark). Isto é informado em Project > Properties > Flex Build Path > Library path > Component set = MX + Spark (default). O tema default é o Spark, o que na minha opinião é mais agradável, mais clean.
• Migração. Aqui o esforço é maior e deve ser bem analisado. O Flex Team fez um grande refactoring para separar os códigos de layout (skin) do core dos objetos.