Inspirado no Tour de Flex, Adobe lança o Tour de ColdFusion, um aplicativo AIR, com exemplos de uso de todas as funcionalidades ColdFusion.

Please upgrade your Flash Player

TourDeCF.air. Requires Adobe AIR.

…

O Windows Live Essentials Beta (também conhecido como Wave 4) já está disponível para download em http://explore.live.com/windows-live-essentials-beta. Esse download foi anunciado ontem no blog do Windows Live Team.

Para quem não sabe, o Windows Live Essentials é o pacote que agrupa as seguintes aplicações: Messenger, Photo Gallery, Movie Maker, Mail, Live Writer, Family Safety, Sync (substituto do atual Mesh). Mais informações podem ser obtidas em http://windowslivepreview.com/essentials/sync/.

Eu já fiz meu download mas ainda não instalei. Assim que instalar eu posto aqui as minhas impressões.

Já é notícia um pouco velha (do dia 15/Junho) mas eu achei que valia a pena postar aqui por conta da sua importância e pelo fato de pouca gente conhecer. Michael Scherotter (@synergist) postou uma atualização do Analytics Framwork para Silverlight 4. Para quem não conhece, o Analytics Framework é uma coleção de apis, Behaviors e Actions para integração de aplicações Silverlight e WPF com ferramentas de analytics e trends (como Google Analytics por exemplo).

O framework suporta nativamente uma série de serviços (Google Analytics, Nedstat, Omniture, Webtrekk, etc para citar alguns) e pode ser facilmente extendido. Se você deseja monitorar a utilização da sua aplicação Silverlight deve considerar o uso desse framework.

Alguns dos pontos mais interessantes desse framework estão listados abaixo:

• Suporta aplicações OOB
• Funciona mesmo se a aplicação estiver rodando offline (as métricas são salvas e serão enviadas para o servidor quando estiver online)
• Suporta o uso de mais de um serviço de analytics ao mesmo tempo
• Não afeta a performance da aplicação
• Pode ser totalmente configurado no Blend pois é implementado como uma série de Behaviors
• Suporta testes A/B
• Suporta protótipos SketchFlow
• Está integrado no Microsoft Silverlight Media Framework

Para mais informações acesse:

• http://blogs.msdn.com/b/synergist/archive/2010/06/15/microsoft-silverlight-analytics-framework-updated-for-silverlight-4.aspx
• http://msaf.codeplex.com/
• http://live.visitmix.com/MIX10/Sessions/CL24 (apresentação feita no MIX10)
• https://www112.livemeeting.com/cc/microsoft/view?id=H9494W (Using the Microsoft Silverlight Analytics Framework)
• https://www112.livemeeting.com/cc/microsoft/view?id=MRGR8S (Building Components for MSAF)

Para finalizar o CRUD criado ao logo da semana, iremos implementar o delete de registros.

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex
• Parte 3 – Exibindo os dados no DataGrid
• Parte 4 – Alterando dados

Para deletar um registro, precisamos inicialmente criar um botão que tem o mesmo comportamento do botão editar, ou seja, ele fica disponível somente se uma linha do DataGrid estiver selecionada. Isso é feito com o seguinte código:

<s:Button label="Apagar" top="10" left="150"
	  enabled="{dg.selectedIndex!=-1}">
<s:click>
	<![CDATA[
	RemotePessoas.Delete(dg.selectedItem.id);
	]]>
</s:click>
</s:Button>

Veja que agora chamamos o método Delete do PHP, que está implementado a seguir:

function Delete($idPessoa)
{
	$this->db->delete("pessoas", "id = {$idPessoa}");
	return true;
}

Para finalizar, precisamos atualizar o DataGrid assim que o registro for deletado. Isso é feito da seguinte forma:

<fx:Declarations>
<mx:RemoteObject id="RemotePessoas"
		 destination="zend"
		 source="Pessoas">

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

	<mx:method name="GetAll"
		   result="OnGetAll(event)"/>

	<mx:method name="Delete"
		   result="OnDelete(event)"/>

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

..............
protected function OnDelete(event:ResultEvent):void
	{
		GetAll();
	}

Com isso conseguimos deletar os registros que criamos.

Você pode baixar o código fonte completo aqui.

Conclusões

O desenvolvimento de sistemas, seja ele em flex ou não, sempre está passível de erros. Este crud apresentado possui
diversas melhorias que podem ser feitas e fica como “dever de casa” para você. Fique a vontade em criticar o código,
é assim que se aprende (e não copiando/colando)…

Esta série de artigos marcou minha despedida das férias, que tirei exclusivamente para trabalhar em casa. Foi muito
proveitoso, muito bom. Quero mais !! To pensando em virar freela !! Tem algum trabalho ae??

Publiquei mais uma behavior no Expression Gallery hoje. Dessa vez foi uma behavior bem simples que serve para mudar o estado de full screen da aplicação. Essa behavior é do tipo Action, ou seja, você pode escolher qual trigger vai dispará-la. A trigger padrão que o Blend coloca é a EventTrigger, mas qualquer outra trigger pode ser utilizada.

A behavior também tem um segunda propriedade que serve para definir que a aplicação deve continuar em full screen caso perda o foco. Esse comportamento é uma das novidades do Silverlight 4 e pode ser usado, por exemplo, para deixar um vídeo rodando em fullscreen em um monitor enquanto trabalhamos no outro.

O código usado para realizar essas tarefas é muito simples, como pode ser visto abaixo:

Seguem abaixo os links:

• Página com exemplo no Expression Gallery : http://gallery.expression.microsoft.com/en-us/FullScreenAction
• Projeto no Codeplex : http://cnzklibrary.codeplex.com/

O projeto do Codeplex onde está essa behavior vai continuar recebendo adições como essa. Tenho várias outras behaviors que estou planejando migrar pra lá assim como bibliotecas de controles e helpers que também terão versões para WPF e ASP.NET quando fizer sentido.

O conceito taoísta de “Wu Wei” indica o conhecimento de quando agir e quando não agir. É também o nome e a descrição da filosofia por detrás do tema de uma coluna de hoje, Wu Wei.

O Tema Wu Wei

Wu Wei é um tema muito bonito, mas quisemos ter a certeza de que tem muitas funcionalidades. Começando pelo topo, temos menus drop-down que usam a funcionalidade de Menus Personalizáveis, em Aparência ? Menus e um cabeçalho personalizável. Pode especificar a sua própria imagem de cabeçalho e ainda esconder o texto completamente.

Menus Wu Wei

No final da página temos áreas de widgets totalmente opcionais. Para manter as coisas simples, estas áreas estão desligadas por omissão. Vá a Aparência ? Widgets e adicione os seus próprios widgets a qualquer uma das três áreas de rodapé.

Widgets opcionais de rodapé

Wu Wei vem também com um esquema alternativo de cores, mais escuro.

O esquema de cores mais escuro

A activação destas cores é simples. Vá Aparência ? Opções do Tema, seleccione a opção apropriada e clique em Guardar. A escolha entre os dois esquemas de cores é que pode ser difícil…

O tema oferece ainda controlo completo sobre o fundo, em Aparência ? Fundo. A escolha dos esquemas de cores funciona bastante bem com esta opção.

Desenhado por Jeff Ngan, Wu Wei está já disponível no WordPress.com e para sites WordPress.org, no Directório de Temas do WordPress.org.

Nesta 4a parte iremos aprender a editar os dados que foram inseridos.

Outras partes do tutorial:

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex
• Parte 3 – Exibindo os dados no DataGrid

Agora vamos editar um registro que está no grid. Inicialmente temos que criar um botão “editar” , conforme o código a seguir:

<s:Button label="Editar" top="10"
       left="300"
       enabled="{dg.selectedIndex!=-1}">
  <s:click>
	<![CDATA[
	var p:PessoaForm = new PessoaForm();
	p.idPessoa = dg.selectedItem.id;
	PopUpManager.addPopUp(p,this,true);
	PopUpManager.centerPopUp(p);
	]]>
  </s:click>
</s:Button>

Neste botão, usamos a propriedade enabled ligada ao DataGrid, para que o botão esteja ativado somente se uma linha do DataGrid estiver selecionada. No click do botão, criamos a o popup e passamos o id da pessoa para ele. Quando o formulário terminar de carregar, ele irá se encarregar de pegar os dados.

Porque não passar diretamente nome e email para o formulário? Porque geralmente o formulário contém mais campos do que as colunas do DataGrid. Neste caso não seria possivel passar estes campos. O ideal sempre é passar o ID e pegar os dados novamente, mesmo porque os dados podem até ter sido alterados por outra pessoa.

O formulário PessoaForm.mxml conterá modificações para aceitar a edição de dados. As alterações estão em negrito

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

<s:creationComplete>
<![CDATA[

	if (idPessoa != null)
		pessoaRemote.GetById(idPessoa);

]]>
</s:creationComplete>

<fx:Declarations>

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

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

	<mx:method name="GetById"
			   result="OnGetById(event)"
			   fault="OnFault(event)"
			   />

	<mx:method name="Alterar"
			   result="OnAlterar(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;

	public var idPessoa:String;

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

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

	protected function OnGetById(event:ResultEvent):void
	{
		nome.text = event.result.nome;
		email.text = event.result.email;
	}

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

]]>
</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:click>
			<![CDATA[

			if (idPessoa != null)
				pessoaRemote.Alterar(idPessoa,nome.text,email.text);
			else
				pessoaRemote.Inserir(nome.text,email.text);
			]]>
		</s:click>
	</s:Button>
	<s:Button id="btnCancelar"
			  label="Cancelar"
			  click="{PopUpManager.removePopUp(this)}"/>
</s:HGroup>
</s:controlBarContent>

</s:TitleWindow>

Para preparar o formulário para edição, é preciso criar uma variável de controle, que aqui chamamos de idPessoa. Através desta variável sabemos se estamos inserindo ou alterando um registro

A classe Pessoas no php também sobre modificações, conforme o código a seguir:

<?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();
}

function Alterar($idPessoa,$nome,$email)
{
	$data = array("nome"=>$nome,"email"=>$email);
	$this->db->update("pessoas",$data,"id={$idPessoa}");
	return true;
}

function GetAll()
{
	return $this->db->fetchAll("select * from pessoas");
}

function GetById($idPessoa)
{
	return $this->db->fetchRow("select * from pessoas where id = {$idPessoa}");
}

}

Agora só falta deletar o registro, que será feito no próximo artigo da série.

O nosso mais recente tema é Andrea, com um layout minimal, duas colunas e um esquema de cores de um azul pouco comum.

Clique para ver o slideshow.

Apesar de o aspecto ser simples à primeira vista, uma vez que o experimentar, vai dar-se conta da sus flexibilidade. Gosto muito deste tema pela sua elegância e pelas suas opções de personalização, e penso que irá gostar também.

O tema inclui duas opções de visualização. Por omissão a largura é flexível: a coluna principal alarga-se ou encolhe-se conforme o tamanho da janela do seu browser. O tema é suficientemente inteligente para ajustar não só a largura da coluna como também a das suas imagens para garantir que encaixam correctamente.

A opção alternativa é de largura fixa e mais estreita, para dar ao seu site um aspecto mais controlado. Para activar esta opção visite Aparência?Opções do Tema.

Andrea está cheio de opções de personalização, incluindo Menus Personalizáveis, Fundos Personalizáveis e ainda Cabeçalhos Personalizáveis.*

Desenhado por Lucian Marin, Andrea está já disponível em WordPress.com e para sites WordPress.org no Directório de Temas WordPress.org.

Actualização: Um leitor astuto reparou que o tamanho máximo para a largura flexível deveria ser 1280 pixels—o que está correcto. Actualizámos o layout para mais 80 pixels de largura, o que quer dizer que as imagens da coluna principal podem ter até 1000 pixels de largura e que a imagem de cabeçalho deverá ser de 1270 x 260 pixels.

Pessoal, trago-lhes boas novas…

Nos dias 29, 30 (junho) e 01 (julho) das 19:00 às 22:30h, na FAESA Av. Vitória, ministrarei o Silverlight HandsOn Lab para os participantes do programa Microsoft SOL.

O objetivo do treinamento é capacitar seus participantes à utilizarem a tecnologia Silverlight para desenvolver aplicações completas ou simplesmente adicionar um novo recurso à aplicação já existente.
O curso abrange todo o fluxo de concebimento de uma aplicação, iniciando com seu planejamento e prototipagem, passando pelos principais recursos disponíveis na plataforma em paralelo com seu desenvolvimento e finaliza com a implantação da mesma, seja em um novo website ou agregando-a em um website já existente.

Pra quem ainda não conhece, o programa Microsoft SOL foi elaborado com o objetivo de ajudar as Startups – novas empresas na área de tecnologia da informação – no desenvolvimento e na expansão acelerada de software no Brasil.

Os empreendedores ao ingressarem no Microsoft SOL terão a oportunidade de conhecer os benefícios das novas tecnologias através de ferramentas e recursos especialmente selecionados pela Microsoft, além de avaliar as possibilidades de incorporá-las a seus projetos.

Outros benefícios oferecidos pelo SOL são: acesso gratuito a licenças de softwares Microsoft, cursos, conta Premium na MSDN.

Participando do programa, você, empreendedor, conquista vantagens competitivas únicas para alcançar destaque e credibilidade no mercado de TI.

Se quiser saber mais sobre o programa acesse o site: www.microsoftsol.com.br

Se você já é participante do SOL e gostaria de presenciar o evento, clique aqui ou no banner para realizar sua inscrição:

Nesta 3a parte do tutorial iremos exibir os dados que estão sendo gravados no formulário para inserir pessoas.

Outras partes do tutorial:

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex

Agora vamos exibir os dados que foram adicionados na parte 2. Precisamos criar um dataGrid com as colunas nome e email, e fazer a comunicação com o PHP para obter os dados. O Datagrid é feito através do seguinte código:

<mx:DataGrid id="dg" width="400" height="200" top="50" left="10">
 <mx:columns>
	<mx:DataGridColumn dataField="id" visible="false"/>
	<mx:DataGridColumn dataField="nome" headerText="Nome"/>
	<mx:DataGridColumn dataField="email" headerText="Email"/>
 </mx:columns>
 <mx:creationComplete>
	<![CDATA[
	GetAll();
	]]>
 </mx:creationComplete>
</mx:DataGrid>

Veja que chamamos o método GetAll no CreationComplete do DataGrid. Este método está descrito a seguir:

<fx:Declarations>
 <mx:RemoteObject id="RemotePessoas"
				 destination="zend"
				 source="Pessoas">

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

	<mx:method name="GetAll"
			   result="OnGetAll(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());
	}

	public function GetAll():void
	{
		RemotePessoas.GetAll();
	}

	protected function OnGetAll(event:ResultEvent):void
	{
		dg.dataProvider = event.result;
	}

]]>
</fx:Script>

O método GetAll() irá chamar o método GetAll() do php, que está descrito a seguir:

<?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();
	}

	function GetAll()
	{
		return $this->db->fetchAll("select * from pessoas");
	}

}

O método GetAll() do PHP usa a instância de db para realizar um select, através do método fetchAll. O resultado de fetchAll é retornado pelo php e o método OnGetAll no flex é executado, onde setamos o dataprovider do DataGrid. Para finalizar, precisamos criar um botão que irá atualizar o dataGrid. Isso é facilmente feito pelo código a seguir:

<s:Button label="Atualizar" top="10" left="150">
 <s:click>
  <![CDATA[
  GetAll();
  ]]>
 </s:click>
</s:Button>