Olá pessoal! Primeiramente quero desejar a todos um Feliz 2012! Espero que esse ano seja de muito sucesso para você desenvolvedor! O primeiro post de 2012 é sobre algo de 2011 (ironia do destino ). Foi publicado no Youtube a gravação da minha palestra na Android Conference 2011 sobre Gerenciamento de Memória em dispositivos Android. [...]
Você designer, que ama Photoshop e já está em um nível bacana, já deve ter feito algum tutorial e postado em algum Blog, site, ou em alguma rede social… é a nossa natureza, querer compartilhar algumas técnicas, mas o grande problema é que isso é trabalhoso, e logo as pessoas param de faze-lo.
Agora, imagine você poder compartilhar o passo a passo de uma atividade sua no Photoshop sem dor de cabeça, sem ter que fazer nada, somente alguns cliques. Isso mesmo, poder ter algo escrito mostrando tudo que você fez no Photoshop sem ter que se matar em descrever todos os ? passos.
A Adobe maravilhosamente criou o Tutorial Builder (Adobe Labs), um plugin simples para Photoshop mas no mínimo, muito, mas muito poderoso.
A idéia consiste no seguinte, você baixa o plugin, instala e ele abre como Panel do Photoshop.
Após instalar, basta ir em Window > Extensions > Tutorial Builder.
Vai abrir essa janelinha bacana que você pode ver na imagem abaixo:
Uma vez aberto você clicando em Start vai (obviamente) iniciar a gravação, que no final, pasmem, vai gerar um arquivo html com o XML prontinho mostrando todos os passos do que você fez dentro do Photoshop, e não só isso, em alguns casos com links onde vai abrir no Photoshop a ação utilizada… #sensacional
Ele também pode guardar a imagem original e fazer uma comparação com a imagem final, você pode optar se quer ou não essa função e então começar a atividade.
Vamos supor, fiz um button… perceba que no panel do Tutorial Builder fica escrito: CAPTURING… Ele está gravando as ações (Não, não é como um Action).
Terminou? Basta clicar em Done, ele vai perguntar se você quer salvar o Tutorial gerado.
Você vai então salvar o seu PSD
E agora a parte interessante, vai configurar o título e os detalhes que deseja que apareça no seu Tutorial.
Aí é só alegria, o seu tutorial está criado.
“Espera aí Eduardo, onde está o link para baixar essa maravilha? E como vai ficar o resultado final?”
Você pode ver aqui em:
http://labs.adobe.com/technologies/tutorialbuilder
Caso tenha sobra alguma dúvida, assista ao vídeo da Adobe no link indicado, ele explica visualmente como proceder.
Mas acredito que não terá dificuldades, é muito simples de usar, super intuitivo, e uma verdadeira maravilha para nós que queremos compartilhar técnicas de PS.
Espero que tenham gostado, e vamos usar, pois é usando que fará com que a Adobe aprimore mais e mais esse plugin.
Neste sábado ministrei a palestra “Flash Builder for PHP” no café com tom.
O código fonte do projeto está neste endereço:? http://dl.dropbox.com/u/6740457/TreinaTom1607-FlashBuilderPHP.zip
A gravação está neste endereço: ( em breve )
Olá pessoal!
Já está disponível a gravação da minha palestra sobre Adobe Flex e Playbook aonde eu abordei os componentes QNX exclusivos para a plataforma da Blackberry.
Para assistir a gravação, clique aqui, para assistir as outras gravações, clique aqui.
Quero agradecer novamente a todos que estiveram presentes na minha palestra!
Um forte abraço!
Sockets
Através do namespace System.Net.Sockets, o Windows Phone provê suporte a uma implementação gerenciada de sockets, permitindo que desenvolvedores possam ter um controle rigoroso ao acesso a redes, com esse recurso temos disponível um conjunto de API’s de alto nível, permitindo que o desenvolvedor crie aplicativos que interagem com um cliente utilizando de serviços existentes de TCP.
Existem muitas funcionalidades onde esse recurso pode ser utilizado, como pode exemplo, para criar aplicativos de FTP, e-mail e Chat, com sockets é possível criar aplicativos mais sofisticados e ricos, podendo utilizar de TCP (Transmission Control Protocol) ou UDP (User Datagram Protocol).
Existem duas formas de acessar a câmera no Windows Phone, através das API´s do próprio sistema operacional ou através dos recursos já existentes do Silverlight 4, com as APIs do Windows Phone você tem imagens de alta resolução, além de controle do auto foco, acesso ao modo do flash, entre outros recursos, já com os recursos do Silverlight 4 webcam API, você tem facilidade de gravar vídeos e áudios em arquivos, se você já possui códigos em alguma aplicação Silverlight, você poderá aproveita-los com poucas ou nenhuma modificação quanto ao acesso a webcam.
É possível ter um controle bem flexível da câmera fotográfica do smartphone, através do Windows Phone podemos ter um controle do auto foco da câmera, gerenciar o flash utilizado, acionar a captura da imagem, além de uma série de eventos que podemos utilizar através do Microsoft.Devices.PhotoCamera, no código XAML a representação da câmera pode ser feito através do recurso VideoBrush do Silverlight.
Notifications é um poderoso recurso que o Windows Phone implementou de maneira bem interessante, com ele podemos enviar e receber informações para o Windows Phone 7, essas mensagens são enviadas para um serviço da Microsoft, e o serviço online envia para o smartphone, podendo receber a mensagem em seu projeto. Você poderá obter a mensagem recebida e manipular as informações, existem três tipos de Notifications, o tipo RAW, Toast e Tile, resumidamente o primeiro permite receber informações diretamente em sua aplicação, o segundo permite receber um aviso no topo da tela do Windows Phone, a aplicação receberá a notificação mesmo que a sua aplicação não esteja em execução no momento. Já o tipo Tile, é uma notificação nos Tiles que ficam na tela principal do Windows Phone e pode ser acionado quando apertamos o botão Start do aparelho. Na versão Mango, temos mais recursos disponíveis para essas notificações, a notificação do tipo Toast agora pode receber um determinado link que vai para determinado local em sua aplicação e ainda pode passar parâmetros que você pode utilizar para ler e realizar alguma tarefa, dando mais poder para as notificações no Windows Phone, as notificações do tipo Tile também foram incrementadas, agora é possível utilizar um Tile com dois lados e que mude periodicamente ou ainda ter tiles secundários para a mesma aplicação.
Figura 1. Fundo do Tile
Performance é um dos assuntos mais importantes quando estamos criando aplicativos em geral, principalmente quando a aplicação vai ser executada em dispositivos com recursos limitados, como é o caso de smartphones, com a versão Mango temos agora uma ferramenta que analisa o perfil da sua aplicação, possibilitando analisar e medir através de gráficos , diversos recursos utilizados.
A ferramenta é totalmente integrada com o Visual Studio, para iniciar o uso do recurso , basta carregar a sua aplicação e no menu Debug, localizar e clicar na opção “Start Windows Phone Performance Analysis”, Figura 2, e clicar em Launch Application, em seguida você executa a rotina que deseja monitorar em seu aplicativo e clica em Stop Profiling, um arquivo com extensão SAP será criado, a cada processo de analise, um arquivo é criado, e você poderá manter um histórico para futuras analises de melhorias. Dentre as informações que a ferramenta apresenta, estão os frame rates, que são os números de renderização da tela do telefone, expressada em frames por segundo (fps), a porcentagem de uso da CPU do telefone, o uso da memória do aplicativo medido em megabytes, a utilização de Storyboards e imagens carregadas, por fim temos um indicativo de quando os eventos do garbage collections foram acionados durante o monitoramento. Se você selecionar um determinado período, o Visual Studio apresentará informações detalhadas sobre diversos pontos do aplicativo.
Figura 2. Performance Analysis
Figura 3. Analise detalhada da aplicação
O emulador também sofreu algumas melhorias, duas delas são muito interessantes , como a possibilidade de testar no emulador os sensores de acelerômetro, Figura 4, e localização. Agora podemos simular através do emulador a leitura desses sensores, não precisando ter um equipamento físico para poder criar uma aplicação, basta você utilizar o mouse que o emulador vai responder conforme a ação esperada pelo aparelho real. No caso da utilização de recursos de localização, você ainda conta com uma barra de ferramentas com controles de busca, inclusão de indicativos de localização e gravação da localização, o emulador ainda contém alguns outros recursos que talvez sejam disponibilizados na versão final, como a possibilidade de adicionar gravações referente as simulações.
Figura 4. Emulador
O namespace Microsoft.Phone.Info fornece informações sobre o equipamento, na versão anterior, era utilizado a classe DeviceExtendedProperties para obter alguns dados sobre o equipamento, na versão Mango essa tarefa passa a ser realizada por DeviceStatus, você pode obter informações como o total de memória, a versão do hardware e o nome do fabricante do equipamento. Através do PowerSource, podemos verificar se o dispositivo está funcionando com bateria ou conectado a uma fonte de alimentação externa. Outro recurso disponível é a possibilidade de verificar se existe ou não um teclado físico no smartphone através da propriedade IsKeyboardPresent.
Existem dois tipos de persistências no Windows Phone 7, o Transient Data e o Persistent Data, você pode manipular informações através de Isolated Storage, um recurso que permite registrar e recuperar informações no próprio aparelho, essa forma de persistência de dados é chamada de “Persistent Data”, ou armazenar informações na memória, Transient Data, sua aplicação pode manipular esses dados conforme o seu ciclo de vida, porém na versão mango uma nova forma de Persistent Data foi adicionada, o local Database.
Agora temos a possibilidade de utilizar uma base de dados local em uma aplicação, antes da disponibilização das ferramentas betas da versão mango para desenvolvedores e da documentação oficial, falava-se que uma versão do SQL CE estaria disponível para ser utilizada, porém em sua documentação oficial a base de dados é citada somente como local database, uma versão própria do Windows Phone, um grande diferencial de produtividade está no suporte ao LINQ to SQL para operações em base de dados.
O local database permite armazenar dados relacionais dentro de um ambiente residente no Isolated Storage, por estar dentro do Isolated Storage, ele somente pode ser acessado pela aplicação correspondente, e roda somente no processo do aplicativo, não sendo executada com um serviço continuo, a manipulação de dados locais são acessados apenas através de LINQ to SQL, não tendo suporte ao Transact-SQL.
Os Launchers e Choosers são APIs que acessam alguns recursos do sistema operacional, eles disponibilizam recursos complexos deixando transparentes para que o desenvolvedor através de API´s, os Launchers são tarefas que somente são iniciadas pela sua aplicação, teoricamente, você não tem nenhum tipo de retorno da API, somente você pode inicia-los , passando os parâmetros que ela vai utilizar para realizar a tarefa. Já os Chooser também iniciam uma tarefa, mas a principal diferença é que os Choosers retornam algum dado que você poderá trabalhar em sua aplicação, um exemplo seria o EmailAddressChooserTask, com ele podemos apresentar ao usuário a lista de e-mails cadastrados no aparelho, quando um e-mail é selecionado, podemos obter essa informação e utilizar para enviar um e-mail através de um Launcher chamado EmailComposeTask, que não retorna nenhuma informação,dessa forma algumas tarefas que poderiam ser bem complexas são facilitas com os Launchers e Choosers. Na versão Mango temos novos Launchers and Choosers adicionados as API´s são eles:
Address Chooser Task : Inicia a lista de contatos da aplicação e permite a seleção.
Game Invite Task : API utilizada em jogos aprovados no Xbox Live que permite convidar jogadores para uma partida multi-player em um Game.
Save Ringtone Task : Permite gravar um arquivo MP3 ou WMA na lista de ringtones do sistema operacional.
Bing Maps Task : Inicia o Bing Maps, permitindo setar a propriedade center com uma posição geográfica.
Bing Maps Directions Task : Inicia o Bing Maps permitindo informar e receber informações sobre dois pontos.
O Windows Phone 7 chegou trazendo uma nova plataforma de desenvolvimento para dispositivos móveis, a Microsoft utilizou o que existe de mais moderno para criar o seu sistema operacional, dando suporte as melhores práticas de desenvolvimento e integração com aplicativos, a versão Mango contém mais de 500 novos recursos e confirma o investimento da Microsoft em sua plataforma mobile.
Chegamos ao episódio número 20!
Este episódio comentamos especialmente o Top 10 que o Pete Brown publicou na semana passada. A gravação está bacana e esperamos que gostem!
Links de referência deste podcast:
Cadastre e receba o podcast diretamente no seu Ipod, Zune, Mp3 player, etc:
O XAMLCast no Twitter: @xamlcast
Até o próximo!
Abraços,
Kelps, Roberto Sonnino e Rodrigo Kono
Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.
Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.
e
Agora vamos configurar o services-config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amf-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amf">
<channels>
<channel ref="amf-endpoint"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="amf-endpoint"
class="mx.messaging.channels.AMFChannel">
<endpoint uri="amfphp/gateway.php"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
E configuramos o services-config.xml nas propriedades do projeto Flex:
Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services
<?php
class HelloWorld
{
function Say()
{
return "Hello World from amfphp";
}
}
E no Flex, adicione o seguinte código:
<?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:RemoteObject id="HelloWorld"
destination="amf" source="HelloWorld">
<s:method name="Say" result="OnSayResult(event)"/>
</s:RemoteObject>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
protected function OnSayResult(e:ResultEvent):void
{
mx.controls.Alert.show(e.result.toString());
}
]]>
</fx:Script>
<s:Button label="Hello World">
<s:click>
<![CDATA[
HelloWorld.Say();
]]>
</s:click>
</s:Button>
</s:Application>
Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)
Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:
<?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:RemoteObject id="Foto" destination="amf" source="Foto"> </s:RemoteObject> </fx:Declarations> <mx:VideoDisplay id="webcam" width="160" height="120" top="100" left="100" > <mx:creationComplete> <![CDATA[ webcam.attachCamera(Camera.getCamera()); ]]> </mx:creationComplete> </mx:VideoDisplay> <s:Button label="Salvar!!" top="50" left="150"> </s:Button> </s:Application>
Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:
<?php
class Foto
{
function __construct()
{
}
function Save($fotoAsString)
{
//obtém um id unico para o arquivo
$nomeArquivo = uniqid();
//configura o nome do arquivo
$nomeImagem = "imagem/{$nomeArquivo}.jpg";
//abre o arquivo. A opção w vai criá-lo, caso nao exista
$arquivo = fopen($nomeImagem, 'w');
//escreve no arquivo
fwrite($arquivo, base64_decode($fotoAsString));
return "ok";
}
}
Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.
Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:
<s:List
id="exibirImagens"
top="10"
left="150"
right="10"
bottom="10"
width="530"
height="400"
>
<s:layout>
<s:TileLayout
requestedColumnCount="5"
requestedRowCount="8"
horizontalGap="2"
verticalGap="2"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<mx:Image source="{data}" />
</fx:Component>
</s:itemRenderer>
</s:List>
No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.
Para preencher esta lista, usamos o seguinte código:
protected function OnGetAll(event:ResultEvent):void
{
exibirImagens.dataProvider = new ArrayList((event.result as Array));
}
Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.
Para finalizar, o codigo php do método GetAll():
function GetAll()
{
//http://snipplr.com/view/742/read-images-of-directory/
$folder = opendir("imagem");
$pic_types = array("jpg");
$index = array();
while ($file = readdir ($folder)) {
if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
{
array_push($index,"amfphp/services/imagem/$file");
}
}
closedir($folder);
return $index;
}
O código php lê o diretório e retorna uma array com o caminho completo da imagem.
O resultado final é visto na tela abaixo:
Este foi o título da palestra que ministrei no Flex Mania 2010 no dia 8 de Julho de 2010 à convite do meu chará Igor Costa.
Abordei esse tema pois o mesmo esta em destaque em grandes corporações e sei que vários desenvolvedores possuem dúvidas em como construir Dashboard, bem quais os tipos de Dashboard existentes. E como Flex é a grande vedete na construções de Dashboard, devido sua dinamicidade e beleza intrínseca, nada melhor do que mostrar na prática como construir um Dashboard em Flex integrado com ASP.NET MVC.
Mais de 250 pessoas estiveram online na palestra, o que gerou um bate-papo muito interessante ao final da palestra no momento de perguntas e respostas.
Se você não pode comparecer, veja agora a gravação da palestra que o Igor Costa disponibilizou no site do Flex Mania 2010.
Disponibilizei os slides da palestra no Slideshare.
E os arquivos fontes que demonstrei durante a palestra estão disponíveis para download aqui.
Baixe e fique a vontade para estudar, perguntar, elogiar e/ou criticar!
Infelizmente eu perdi a gravação desta aula. Depois de muito procurar, encontrei apenas o video (sem áudio), numa pasta temp nas profundezas do Windows. Bem, faça o seu melhor para acompanhar. =D Aula4 View more presentations from Fabio Vedovelli. Curso Básico de Programação – Aula 4 from Fabio Vedovelli on Vimeo.
Para quem perdeu minha palestra no Flexmania 2010, falando de Grails + Flex, pode assistir sua gravação em http://experts.na3.acrobat.com/p67616118/. Além disso, se encontra abaixo os slides que utilizei no evento.
Ainda estou devendo um tutorial sobre o assunto e prometo que, assim que possível, farei um post sobre isso.
