Programação On-Line: novembro 2010

domingo, 28 de novembro de 2010

Usando o componente reCaptcha (Demonstração)

Demonstração simples de como se utiliza o componente reCaptcha do Google.

Encontre mais informações do controle no endereço abaixo:

http://www.google.com/recaptcha/captcha

terça-feira, 23 de novembro de 2010

Usando o SyntaxHighlighter em ASP.NET

Saudações, pessoal!

Recentemente precisei exibir algumas linhas de código em linguagem C# em uma página ASP.NET. Pesquisando em alguns sites da web, encontrei uma biblioteca escrita em JavaScript (com algumas pitadas de CSS) chamada SyntaxHighlighter.

A biblioteca foi criada em 2004 e é mantida por Alex Gorbatchev no site abaixo: http://alexgorbatchev.com/SyntaxHighlighter/

O foco do artigo é exibir uma sintaxe em linguagem C#, mas ela abrange inúmeras outras linguagens conhecidas por todos. Segue uma listagens de todas as linguagens e seus respectivos scripts:

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

A imagem abaixo ilustra o nosso projeto em tempo de execução.

Para renderizar o SyntaxHighlighter no WebForm utilizamos um controle do tipo Literal, além da tag <pre class="brush: csharp;">Código fonte aqui</pre> para obter o resultado final.

O código fonte está disponível no link abaixo.

SyntaxHighlighter.rar

Até mais!

domingo, 21 de novembro de 2010

Obtendo as últimas notícias do Terra

E aí, pessoal!

É um contexto, em que a informação é de extrema utilidade, que tal permitir que nossa aplicação apresente notícias atualizadas em tempo real? Pois é, a idéia desse artigo, é utilizar os feeds RSS do portal Terra (mais especificamente, sobre os assuntos de tecnologia) e carregar um Repeater com um DataTable previamente alimentado com XML.

Antes de mais nada, veja como ficará nossa aplicação ASP.NET.

Pois bem, abra o Visual Studio (usaremos a versão 2008 Professional Edition no escopo deste artigo) e crie um novo projeto do tipo Web Site com o nome RssTerra.

Adicione um controle Repeater na página Default.aspx e altere o template (aba Source) adicionando algumas tags conforme as linhas abaixo:

<asp:Repeater ID="Repeater1" runat="server">

<a href="<%# DataBinder.Eval(Container.DataItem, "link") %>" target="_blank">

<%# DataBinder.Eval(Container.DataItem, "titulo") %>

</a><br />

<%# DataBinder.Eval(Container.DataItem, "data") %><br />

<%# DataBinder.Eval(Container.DataItem, "descricao") %><br />

</ItemTemplate>

</SeparatorTemplate>

</asp:Repeater>

Fazendo algumas pequenas alterações pra melhorar a aparência, confira o código HTML completo da página Default.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Terra - RSS - Tecnologia</title>

</head>

<div>

<h2>Últimas notícias de tecnologia do Terra</h2>

<p>Desenvolvido por Tecla - Programação On-Line</p><br />

<asp:Repeater ID="Repeater1" runat="server">

<a href="<%# DataBinder.Eval(Container.DataItem, "link") %>" target="_blank">

<%# DataBinder.Eval(Container.DataItem, "titulo") %>

</a><br />

<%# DataBinder.Eval(Container.DataItem, "data") %><br />

<%# DataBinder.Eval(Container.DataItem, "descricao") %><br />

</ItemTemplate>

</SeparatorTemplate>

</asp:Repeater>

</div>

</form>

</body>

</html>

Após a alteração no Repeater, veja o formato da exibição das notícias na aba Design da página.

A aparência da aplicação está pronta, só nos resta criar a rotina em linguagem C# para obter os dados do Terra através do arquivo XML. Perceba que iremos extrair os elementos do XML e alimentar o DataTable.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml;

using System.Data;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

this.LerRssTerra();

}

/// <summary>

/// Método utilizado para ler o rss de tecnologia do site TERRA

/// </summary>

private void LerRssTerra()

{

XmlDocument xmlDoc = new XmlDocument();

xmlDoc.Load("http://rss.terra.com.br/0,,EI12879,00.xml");

DataTable dt = CriarDataTable();

XmlNodeList noXml = xmlDoc.SelectNodes("/rss/channel/item");

foreach (XmlNode no in noXml)

{

dt.Rows.Add(no["title"].InnerText,

DateTime.Parse(no["pubDate"].InnerText).ToString(),

no["description"].InnerText,

no["link"].InnerText);

}

Repeater1.DataSource = dt;

Repeater1.DataBind();

}

/// <summary>

/// Retorna a estrutura de um DataTable para alocar os elementos do xml

/// </summary>

/// <returns>DataTable</returns>

private DataTable CriarDataTable()

{

DataTable dt = new DataTable();

dt.Columns.Add("titulo", typeof(string));

dt.Columns.Add("data", typeof(string));

dt.Columns.Add("descricao", typeof(string));

dt.Columns.Add("link", typeof(string));

return dt;

}

Feito isso, vamos executar nossa aplicação web. Pressione a tecla F5 ou clique no menu Debug > Start Debugging. Se tudo correr bem, o resultado será o mesmo da primeira imagem do artigo.

Até a próxima!

sábado, 20 de novembro de 2010

Usando o IFrame em ASP.NET - 2

Salve, pessoal.

Para os apaixonados por controles nativos do HTML, que tal utilizar o IFrame como um mini-browser para navegar em páginas externas no escopo da aplicação? Lembro bem que já publicamos um vídeo sobre o assunto e está disponível na seção Videos > ASP.NET.

Pois é, o exemplo é muito simples e não requer muito esforço para conseguir um resultado satisfatório. Veja um screenshot do resultado do artigo.

Para definir o layout da página, precisamos criar uma estrutura usando alguns DIVs pré-configurados em folhas de estilo (CSS). Vamos direto ao ponto!

Código fonte do arquivo styles.css:

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif;text-align:center}

p{margin:0 10px 10px}

a{padding:5px; text-decoration:none; color:#000000;}

div#header{background-color:#F3F2ED;}

div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}

div#container{text-align:left}

div#content p{line-height:1.4}

div#navigation{background:#F6F0E0; height: 508px;}

div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}

div#navigation li{margin-bottom:5px;}

div#extra{background:#CCC8B3;}

div#footer{background:#BFBD93;}

div#footer p{margin:0;padding:5px 10px}

div#container{width:900px;margin:0 auto}

div#content{float:right;width:700px}

div#navigation{float:left;width:200px}

div#extra{clear:both;width:100%}

Código fonte HTML da página Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Free Css Layout</title>

</head>

<body>

<div id="header"><h1>Usando IFrame em ASP.NET</h1></div>

</div>

<p><strong>Meus Links</strong></p>

<ul>

<li><a href="Default.aspx?url=g1">Globo</a></li>

<li><a href="Default.aspx?url=fsp">Folha de São Paulo</a></li>

<li><a href="Default.aspx?url=tra">Terra</a></li>

<li><a href="Default.aspx?url=inf">Info OnLine</a></li>

</ul>

</div>

<p align="center"><a href="http://sites.google.com/site/programacaoonline">Programação On-Line</a></p>

</div>

</body>

</html>

Para concluir, segue o código em linguagem C# para permitir a navegação das páginas externas.

public partial class _Default : System.Web.UI.Page

{

public string sUrl = "";

protected void Page_Load(object sender, EventArgs e)

{

if (!string.IsNullOrEmpty(Request.QueryString["url"]))

this.ValidaUrl(Request.QueryString["url"]);

}

private void ValidaUrl(string p)

{

switch (p)

{

case "g1":

sUrl = "http://www.globo.com";

break;

case "fsp":

sUrl = "http://www.folha.com";

break;

case "tra":

sUrl = "http://www.terra.com";

break;

case "uol":

sUrl = "http://www.uol.com";

break;

case "inf":

sUrl = "http://www.infoexame.com";

break;

}

Pegue o código fonte no link abaixo:
UsandoIFrame.rar

Até mais!