Archive for agosto, 2009

Envio de e-mail em .NET

O envio de e-mails é uma tarefa comum do dia-a-dia. Nossa comunicação com colegas de trabalho, com clientes, parentes e amigos. É uma ferramenta assíncrona, que permite que vejamos e guardemos textos, imagens e outros arquivos aos quais precisaremos no futuro, ou algo divertido ou belo que gostamos e tenhamos vontade de manter.

Um dos usos muito comuns que temos para o e-mail é para feedbacks e comunicação com clientes. Empresas costumam destinar uma sessão dos seus sites para esse tipo de comunicação, onde preenchemos um pequeno cadastro, geralmente contendo apenas o nome de quem pretende entrar em contato, e-mail para retorno, uma lista de assuntos para escolhermos e a mensagem. Isto é mais útil e seguro do que simplesmente divulgar um e-mail para contato, levando-se em conta o fato dos milhões de bots que escaneiam a internet em busca de endereços de e-mail, para envio de spam. Baseado neste modelo que é quase padrão, criaremos uma página “fale conosco”, fazendo envio automático de e-mails em ASP.NET.

De início, crie um novo projeto web no Visual Studio 2008. Dê a ele o nome de EnviodeEmails, que  será também o nome do nosso projeto ASP.NET. Dentro desta solução, criaremos dois projetos, um será o projeto web, e o outro será onde teremos nossas regras, chamado de RegrasDeNegocio, com a classe Negocio. Por questões de desempenho e segurança (visto que teremos de mexer com nome de usuário e senha na conexão com o provedor de email), o código de manipulação de dados será efetuado em outra camada que não a de apresentação.

Projetos no Solution Explorer
Projetos no Solution Explorer

O .NET Framework  possui classes nativas específicas para envio de e-mail. Estas classes podem ser encontradas no namespace System.Net.Mail. Usaremos também o namespace System.Net para criar um objeto de credenciais de rede, necessário para autenticação no servidor de e-mail. Após esta breve explicação, mãos à obra.

Criei um formulário simples, com três caixas de texto (nome do remetente, email do remetente e mensagem, sendo esta última multiline). Uma dropdownlist com alguns itens que serão o assunto do e-mail, uma checkbox para caso o remetente queira receber uma cópia do e-mail, um label que exibirá uma mensagem após o envio do e-mail e o botão de envio. Coloquei também um script manager e um update panel, para dar um efeito visual instantâneo. Observe abaixo como ficou a tela:

Form ASP.NET com os controles já posicionados.
Form ASP.NET com os controles já posicionados.

Vejamos como fica o code-behind da nossa página, o arquivo faleconosco.aspx.cs:

Código da página ASP.NET

Código da página ASP.NET(clique para ampliar)

Observe que a nossa classe negócio possui um método abstrato, cujos parâmetros são: email do remetente, nome do remetente, assunto, mensagem e se deseja receber uma cópia ou não. A chamada a esse método é executada dentro de um bloco try-catch no botão de envio na tela, que captura qualquer erro que possa ocorrer, e exibe no label para o usuário uma mensagem caso haja algum problema no envio do e-mail, ou uma mensagem de confirmação caso haja sucesso no envio.

Visual da página após envio de email com sucesso.

Visual da página após envio de email com sucesso.

Vamos agora dar uma olhada no código da classe Negocio, onde está de fato o código para o envio de email:

Código da classe negócio, contento o método envio de e-mail.

Código da classe negócio, contento o método envio de e-mail(Clique para ampliar).

No código acima, utilizei o endereço de SMTP e a porta de conexão do Gmail. Este endereço e porta podem variar de acordo com o seu provedor de email.

Espero que tenham gostado. Dúvidas e sugestões, o artigo está aberto a comentários.

Abraços e keep coding!

Image – Efeito de transição

Olá! Hoje vou falar um pouco sobre objetos personalizados, para quem já precisou de um menu feito de imagens ai vai o exemplo de um componente que pode ajudar.  Ao colocar uma imagem como menu uma das coisas que vem a cabeça seria, “quando eu passo o mouse sobre ele continua estatica”, não seria melhor se eu pudesse trocar a imagem e de quebra produzir um efeito de transição. Este foi o meu problema por estes dias, então achei um exemplo na net e fiz um adaptação nele.

O código abaixo e do componente que eu chamei de ImageMenu, com o efeito de transição já personalizado, ele trabalha com os states do Flex o que neste caso ajuda muito, este componente também usa o glow para criar um segundo efeito ao clicar na imagem. Para o glow, pode trocar a cor usada conforme a necessidade.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="init()" creationPolicy="all" >

 <mx:Script>
 <![CDATA[
public var upImage:String; //Imagem padrão
 [Bindable]
public var overImage:String; //Imagem para efeito do mouse
public var fncClick:Function; //Função usada para o click do mouse
public var boEfeitoClick:Boolean = true;  //Flag para controle do efeito glow do click do mouse
private function init():void{
    up.source = upImage; //Coloca a imagem padrão 

    //Adicioniona os eventos a imagem
    addEventListener(MouseEvent.ROLL_OVER, mouseRollOver);
    addEventListener(MouseEvent.ROLL_OUT, mouseRollOut);
    addEventListener(MouseEvent.CLICK, mouseClick);

    //Executa o efeito ao iniciar.
    mouseRollOver(null);
    mouseRollOut(null);
}
private function mouseRollOver(e:MouseEvent):void{
 if(boEfeitoClick)
     currentState = 'overState';
    else
     currentState = 'overState2';
}
  private function mouseRollOut(e:MouseEvent):void{
    currentState = '';
}

private function mouseClick(e:MouseEvent):void{
 if(fncClick != null)
     fncClick();
}
 ]]>
</mx:Script>
<mx:Glow id="glowImage" duration="400"
    alphaFrom="1.0" alphaTo="0.3"
    blurXFrom="0.0" blurXTo="50.0"
    blurYFrom="0.0" blurYTo="50.0"
    color="0x8b9094"/>
<mx:Glow id="unglowImage" duration="400"
    alphaFrom="0.3" alphaTo="0.0"
    blurXFrom="50.0" blurXTo="0.0"
    blurYFrom="50.0" blurYTo="0.0"
    color="0x8b9094"/>
<mx:states>
 <!--O primeiro estado usa o efeito glow para o click no mouse-->
    <mx:State name="overState">
        <mx:RemoveChild target="{up}"/>
        <mx:AddChild relativeTo="{this}">
         <mx:Image source="{overImage}" id="imgOver"
           mouseDownEffect="{glowImage}"
           mouseUpEffect="{unglowImage}"/>
        </mx:AddChild>
    </mx:State>
    <!--No estado 2 não usa o efeito glow, o flag boEfeitoClick é que controla -->
    <mx:State name="overState2">
        <mx:RemoveChild target="{up}"/>
        <mx:AddChild relativeTo="{this}">
         <mx:Image source="{overImage}" id="imgOver2"/>
        </mx:AddChild>
    </mx:State>
</mx:states>
<!--Ao mudar de um estado para o outro executa o efeito de transição-->
<mx:transitions>
    <mx:Transition fromState="*" toState="overState">
     <mx:Fade duration="500" alphaFrom="0" alphaTo="1" target="{imgOver}"/>
    </mx:Transition>
    <mx:Transition fromState="overState" toState="*">
     <mx:Fade duration="200" alphaFrom="0" alphaTo="1" target="{up}"/>
    </mx:Transition>
     <mx:Transition fromState="*" toState="overState2">
     <mx:Fade duration="500" alphaFrom="0" alphaTo="1" target="{imgOver2}"/>
    </mx:Transition>
    <mx:Transition fromState="overState2" toState="*">
     <mx:Fade duration="200" alphaFrom="0" alphaTo="1" target="{up}"/>
    </mx:Transition>
 </mx:transitions>
  <!--Imagem usada para troca-->
<mx:Image id="up"/>
</mx:Canvas>

O código abaixo é um exemplo de como utilizar o componente:

<componentes:ImagemMenu id="imgNome" upImage="../imagens/ImagemPadrao.png"
     overImage="../imagens/ImagemMouseOver.png"
     fncClick="{imgNome_click}"/>

Por enquanto e só, até++.

PRADO para PHP 5: Active Controls (AJAX)

Olá pessoal! Este é o segundo post da série sobre o framework PRADO para PHP 5. Se você chegou aqui diretamente, leia o primeiro post, pois estenderemos o projeto iniciado ali.

No primeiro projeto, implementamos um formulário simples que utiliza o método postback para o envio de requisições ao servidor web. O inconveniente desse método é o recarregamento da página inteira para que a exibição do resultado do processamento seja possível.

Uma forma melhor de obter o mesmo resultado, sem a desagradável atualização da página toda, é utilizar o método callback, que por sua vez se utiliza da tecnologia AJAX (Asynchronous Javascript and XML), capaz de atualizar apenas a região da página efetivamente alterada.

Quem desenvolve para a web sabe que trabalhar com AJAX pode ser penoso, principalmente se lidarmos diretamente com Javascript e XMLHTTPRequest. Felizmente, o Prado nos dá uma grande ajuda neste ponto, encapsulando as requisições AJAX em seus próprios componentes. E o que é melhor: em muitos casos, não é necessário sequer mexer com o Javascript!

Como assim? Vejamos como isso funciona na prática. Para começar, vamos fazer uma cópia de nosso projeto olamundo e renomeá-la como olamundo-2.0.

No arquivo /protected/pages/Home.page, vamos trocar os controles TTextBox, TButton e TLabel pelos seus “irmãos ativos”: TActiveTextBox, TActiveButton e TActiveLabel:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″>
<title></title>
</head>
<body>
<h1>Olá, mundo!</h1>
<com:TForm>
Qual é o seu nome? <com:TActiveTextBox ID=“txtNome” />&nbsp;
<com:TActiveButton ID=“btnEnviar” Text=“Enviar” OnClick=“Page.btnEnviarClick” />
<br />
<com:TActiveLabel ID=“lblCumprimento” />
</com:TForm>
</body>
</html>

Essa é toda a alteração necessária neste arquivo.

No arquivo /protected/pages/Home.php, vamos acrescentar apenas uma linha ao início do arquivo, antes da declaração da classe:

<?php

Prado::using(‘System.Web.UI.ActiveControls.*’);

class Home extends TPage {

public function btnEnviarClick($sender, $param) {
$this->lblCumprimento->Text = “Olá, “ . $this->txtNome->Text . “!”;
}

}

?>

Como os controles ativos, por padrão, não são carregados automaticamente pelo PRADO, aquela linha serve para dizer ao framework que queremos utilizá-los. E isso é tudo. Você poderá ver o novo projeto em ação aqui e, se tiver olhos atentos, perceberá que a tela não “pisca” mais antes da exibição da saudação.

Para os mais “cismados”, e também para deixar nosso usuário ciente do que está acontecendo nos bastidores, vamos fazer um novo upgrade do projeto, agora para a versão olamundo-2.1. Acrescentaremos um notificador de atividade que será exibida na página enquanto a requisição AJAX vai e volta: uma div vermelha contendo o texto “Aguarde…”.

Vamos mexer no /protected/pages/Home.php:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″>
<title></title>
<!– STYLE acrescentado –>
<style>
#notif {
background-color:#F00;
color: #FFF;
position:absolute;
visibility:hidden;
}
</style>
</head>
<body>
<!– DIV acrescentada –>
<div id=“notif”>Aguarde…</div>
<h1>Olá, mundo!</h1>
<com:TForm>
Qual é o seu nome? <com:TActiveTextBox ID=“txtNome” />&nbsp;
<!– Propriedades ClientSide Acrescentadas –>
<com:TActiveButton ID=“btnEnviar” Text=“Enviar” OnClick=“Page.btnEnviarClick”
ClientSide.OnLoading=“$(’notif’).style.visibility=’visible’”
ClientSide.OnLoaded=“$(’notif’).style.visibility=’hidden’” />
<br />
<com:TActiveLabel ID=“lblCumprimento” />
</com:TForm>
</body>
</html>

Foram acrescentados um estilo (para configurar a DIV com fundo vermelho, posicionamento absoluto e sem visibilidade inicial), a DIV propriamente dita e configuradas duas novas propriedades do componente TActiveButton: ClientSide.OnLoading e ClientSide.OnLoaded. A primeira propriedade contém um código Javascript (finalmente!) a ser executado quando a requisição é despachada para o servidor e a segunda o código para quando a resposta chegar. Em nosso projeto, a lógica é simples: enviou a requisição, exibe a DIV; a resposta chegou, oculta a DIV. O resultado disso? Veja aqui.

Os mais atentos vão notar que, nas duas linhas Javascript foi utilizado o atalho $(’notif’) ao invés do longo e tedioso document.getElementById(’notif’). Isso porque o PRADO também não tem a intenção de reinventar a roda, e, ao contrário, incorpora algumas das melhores soluções desenvolvidas por terceiros. No caso do Javascript, o PRADO já traz consigo o Prototype (de onde vem o atalho $) e o script.aculo.us, entre outros.

Fico por aqui com este post, esperando ter sido didático na minha exposição. Para terminar, zipei as três versões do olamundo, juntamente com o PRADO, e fiz upload aqui, para facilitar. Para quem tem uma instalação PHP 5, basta descompactar num diretório acessível pelo seu servidor web.

Um abraço, e até a próxima!

PRADO: (não apenas mais um) framework para o PHP 5

Olá, pessoal! Este é o meu primeiro post aqui no devFranca. O objetivo dele é apresentar o framework PHP com o qual trabalho, e que acho bastante interessante para o desenvolvimento de aplicações web. Não deixe de comentar após a leitura. :)

Há cerca de três anos, percebi que as aplicações estavam migrando para a web, e a partir dessa constatação decidi mudar meu foco de desenvolvimento. Até então, meu trabalho consistia em desenvolver programas para desktop, e minha ferramenta favorita era o Delphi (embora eu já tivesse trabalhado também com o VB). Eu não era nenhum estrangeiro nas terras do desenvolvimento web, tendo já trabalhado por quatro anos com o ASP, e conhecia, portanto, as limitações dessa plataforma.

Como simpatizante das tecnologias opensource, escolher o PHP foi a decisão natural. Naquele momento, eu iria iniciar um projeto PHP do zero, e percebi que reinventar a roda não seria inteligente nem produtivo. Foi daí que parti em busca de um framework, uma caixa de ferramentas mais ou menos prontas, que me poupasse o esforço de codificar muita coisa “na unha”.


Read more

Seja bem vindo!

Como diria nosso companheiro Nelson Borges: “Ao infinito e além!”

As vésperas do nosso primeiro e grande evento recebemos mais um integrante valioso para comunidade, este integrante é o Sr. Fausto Goncin ou somente goncim. Ele é Bacharel da 1ª turma de Ciência da Computação da Unifran. Com grande bagagem em SGBD (Sistemas de Gerenciamento de Bancos de Dados), dentre eles MS SQL, MySQL e Firebird, desenvolve aplicações para a web em ASP e PHP utilizando o framework PRADO. Pra quem não conhece este framework o nosso companheiro goncin vai falar bastante sobre ele.

Seja bem vindo!!!

1º Encontro DevFranca

É com muita euforia que anuncio o primeiro encontro da comunidade DevFranca.

Nosso objetivo é evangelizar a comunidade de desenvolvedores da região sobre conceitos e as boas práticas de desenvolvimento de software, através de um canal de duas vias entre os palestrantes e os participantes.

Confira a programação:

DATA
Dia 29/08/2009 das 09:00h as 16:45h

LOCAL
Universidade de Franca - Teatro Central
Av Doutor Armando Salles de Oliveira, 201 - Parque Universitário
Franca – SP

PÚBLICO ALVO
Estudantes de tecnologia da Informação e profissionais da área de tecnologia.

PALESTRAS

  • Apresentação
    Inicio: 09:00h
    Fim: 09:30h
  • Patterns and Practices .NET – Nelson Borges
    Inicio: 09:30h
    Fim: 10:45h
  • PHP Orientado a Objetos com JQuery  – Dheyson Wildny
    Inicio: 11:00h
    Fim: 12:30h
  • Manutenção Rápida de Websites Dinâmicos usando JSP – Gustavo Santos
    Inicio: 13:45h
    Fim: 15:00h
  • Aplicações Ricas Para a Internet com Silverlight e Flex – Vinícius Sandim
    Inicio: 15:15h
    Fim: 16:45h

VALOR
1kg de alimento não perecível.

Fala sério pessoal, é uma grande oportunidade de ampliar o seu conhecimento e ainda fazer uma boa ação. =D

Flex Builder 3 para Flash Builder 4 e Flex 4 SDK

Olá, para aqueles que ainda não tiveram a oportunidade de ver a ferramenta que é usada para desenvolver em Flex SDK, é o Flex Builder 3 e já está mudando de nome, agora irá se chamar Flash Builder 4 (codinome gumbo) já saiu o beta 1 do Flash Builder 4.

Hoje você que já desenvolve em Flex pode escolher usar Flex Builder 3 plugin no Eclipse ou o proprio console que trabalha em cima do Flex SDK 3 . A partir de agora o Flash Builder 4 poderá ser usado com plugin do Eclipse também e como console isolado trabalhando em cima do Flex 4 SDK, tudo parece uma jogada de marketing da Adobe, que quer promover o nome Flash Builder para o lado comercial ou seja este é pago, enquanto que o Flex 4 SDK continua a ser gratuito. Bem marketing a parte parece que a nova ferramenta tem bastante integração com outras ferramentas da Adobe, tal como o Flash, mais em especial o Flash Catalyst que e uma ferramenta para design de interfaces, o que parece ser um grande passo para separar designers de programadores.

Para aqueles que já usam o Flex Builder 3 como eu, já podem ir testando o Flash Builder Beta 1 é dar sua opinião para melhorá-lo, vou pesquisar um pouco mais e depois posto mais novidades, segue abaixo o link do projeto para exemplos, tutoriais e downloads:

http://labs.adobe.com/technologies/flashbuilder4/tutorials/

Passando parametros via post no Flex

Olá, para aqueles que estão acostumados com jsp, php, asp e bastante comum o uso de passagem de parâmetros via post, no caso do Flex  e mais comum o uso de web services, serviços http, e remote object. Estava criando um exemplo simples em Flex e não estava querendo usar o fluorine para integrar com o .net, até porque era uma página so, coisa muito simples, então acabei chegando em uma solução bem simples que lembra um pouco os tempos que eu trabalhava com jsp. Para aqueles que tem uma página que recebe parametros via post com este exemplo poderá usar o flex para realizar este procedimento.

Codigo Flex, chamada de uma página que recebe parametros via post:

private function chamaPaginaPost():void{
    var cabecalho:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
    var url:String = "http://localhost/MinhaPagina.aspx";
    var requisicao:URLRequest = new URLRequest(url);

    var variaveis:URLVariables = new URLVariables();
    variaveis.codigo = 1;
    variaveis.nome = "José da Silva";

    requisicao.requestHeaders.push (cabecalho);
    requisicao.data = variaveis;
    navigateToURL(requisicao, "_blank");
}

Logo abaixo o exemplo da página aspx com C# que receber os parâmetros via post, esta pagina poderia ser em uma php, asp ou outra qualquer.

protected void Page_Load(object sender, EventArgs e)
{
    string codigo;
    string nome;

    try
    {
        codigo = Convert.ToString(Request.Params["codigo"]);
        nome = Convert.ToString(Request.Params["nome"]);

        Response.Write("Código: " + codigo + "<br/>");
        Response.Write("Nome: " + nome);
    }
    catch (Exception ex)
    {
       Response.Write("Erro" + ex.Message);
    }

}

Espero que tenha sido útil, até++.