Formatar XML com XSL usando Dot Net

Nesse artigo utilizei Visual C# 2010 Express, Framework 4.0 e para o aplicativo teste fiz um console application.

Com o advento de integração, SOA, Web Services, cada dia mais temos que adaptar o conteúdo de nossos dados com agilidade, no meu caso eu atuo em uma empresa na qual temos vários parceiros comerciais que consomem nosso catálogo de produtos, e a forma de integração que temos é com o uso de XML, bom para acelerar o desenvolvimento do XML para cada parceiro, nós criávamos um XML para cada um, só que isso não era feito de forma automática, a codificação de cada XML era feita individualmente, os objetos eram reutilizados, mas ai tivemos problemas com performance, pois a consulta era feita em tempo real, ou seja, os parceiros concorriam com os clientes que navegavam no site, o XML demorava para ser carregado, quando era necessário efetuar algum filtro por categoria, gênero, marca etc, isso era feito na aplicação, ou seja, o catalogo era carregado inteiro e filtrado através de um delegate, quando eram poucos parceiros, poucos clientes, tudo bem, mas 1 ano depois com muito mais acessos o negócio ficou ruim, e é isso que vou mostrar como fazer aqui, como esse problema foi resolvido, os passos foram:

  1. Não acessar mais o banco diretamente, mas sim um XML base;
  2. Efetuar a formatação dos dados baseado em um XSL e não mais fazer isso na codificação;
  3. Colocar os critérios dentro do XSL ao invés de fazer na aplicação ou em query.

O que é um arquivo XSL e para que serve

Segundo a Wikpedia “XSL Transformations, ou XSLT (eXtensible Stylesheet Language for Transformation – linguagem extensível para folhas de estilo de transformações), é uma linguagem de marcação XML usada para criar documentos XSL que, por sua vez, definem a apresentação dos documentos XML nos browsers e outros aplicativos que a suportem.” ou seja, serve para formatar a saída de dados do XML

Fonte: http://pt.wikipedia.org/wiki/XSLT

Agora que estamos alinhados com o cenário vamos começar.

XML Base

Isso é algo muito tranquilo, foi criado um JOB que gera um XML em uma pasta visível pela aplicação com todo catálogo de produtos, para esse estudo vamos usar o exemplo abaixo:

[sourcecode language=”xml”]
<?xml version="1.0"
encoding="utf-8" ?>
<catalogo>
<item>
<Sku>500135</Sku>
<Descricao><![CDATA[Bola de Tênis Wilson Championship ]]></Descricao>
<CodigoCategoria>102</CodigoCategoria>
<Categoria>RACKET</Categoria>
<CodigoMarca>15</CodigoMarca>
<Marca>WILSON</Marca>
</item>
<item>
<Sku>500139</Sku>
<Descricao><![CDATA[Haltere Ferro Centauro MeioKg]]></Descricao>
<CodigoCategoria>107</CodigoCategoria>
<Categoria>BODY </Categoria>
<CodigoMarca>999</CodigoMarca>
<Marca>FORTE</Marca>
</item>
<item>
<Sku>500140</Sku>
<Descricao><![CDATA[Halteres Ferro Centauro 1 Kg]]></Descricao>
<CodigoCategoria>107</CodigoCategoria>
<Categoria>BODY </Categoria>
<CodigoMarca>999</CodigoMarca>
<Marca>FORTE</Marca>
</item>
<item>
<Sku>500141</Sku>
<Descricao><![CDATA[Halteres Ferro Centauro 2Kg]]></Descricao>
<CodigoCategoria>107</CodigoCategoria>
<Categoria>BODY </Categoria>
<CodSubGrupo>34</CodSubGrupo>
<Marca>FORTE</Marca>
</item>
<item>
<Sku>500142</Sku>
<Descricao><![CDATA[Halteres Ferro Centauro 3kg]]></Descricao>
<CodigoCategoria>107</CodigoCategoria>
<Categoria>BODY </Categoria>
<CodigoMarca>999</CodigoMarca>
<Marca>FORTE</Marca>
</item>
<item>
<Sku>500143</Sku>
<Descricao><![CDATA[Halteres Ferro Centauro 4Kg]]></Descricao>
<CodigoCategoria>107</CodigoCategoria>
<Categoria>BODY
</Categoria>
<CodigoMarca>999</CodigoMarca>
<Marca>FORTE</Marca>
</item>
</catalogo>
[/sourcecode]

XSL’s

Bom, o XSL pode ficar ao gosto de cada um, eu vou colocar dois exemplos aqui, o primeiro nos dará a seguinte saída do XML Base:

[sourcecode language=”xml”]
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method=’xml’ indent=’yes’ version=’1.0′ encoding=’UTF-8′ standalone=’yes’ cdata-section-elements=’NOME’/>
<xsl:template match="/">
<produtos>
<xsl:for-each select="catalogo/item[CodigoCategoria=’102′ and CodigoMarca=’999′]">
<PRODUTO>
<SKU>
<xsl:value-of select="Sku"/>
</SKU>
<NOME>
<xsl:value-of select="Descricao"/>
</NOME>
<CATEGORIA>
<xsl:value-of select="Categoria"/>
</CATEGORIA>
</PRODUTO>
</xsl:for-each>
</produtos>
</xsl:template>
</xsl:stylesheet>
[/sourcecode]

O segundo nos dará a saída abaixo:

[sourcecode language=”xml”]
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method=’xml’ indent=’yes’ version=’1.0′ encoding=’UTF-8′ standalone=’yes’ cdata-section-elements=’NOME’/>
<xsl:template match="/">
<produtos>
<xsl:for-each select="catalogo/item[CodigoCategoria=’102′]">
<ITEM>
<CODIGO>
<xsl:value-of select="Sku"/>
</CODIGO>
<DESCRICAO>
<xsl:value-of select="Descricao"/>
</DESCRICAO>
</ITEM>
</xsl:for-each>
</produtos>
</xsl:template>
</xsl:stylesheet>
[/sourcecode]

Esses arquivos devem ser criados em um local que a aplicação posso lê-los.

Agora vamos entender algumas tag’s do XSL:

Aqui é feita a declaração do XSL, a versão e qual namespace (xmlns) é utilizado, a tag deve ser fechada

[sourcecode language=”xml”]
<xsl:stylesheet version="1.0" xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>">
[/sourcecode]

A saída do arquivo é definida aqui, o método/formato (method), a versão do formato (version), a codificação (encoding) e as tags que terão a saída com CDATA (cdata-section-elements).

[sourcecode language=”xml”]
<xsl:output method=’xml’ version=’1.0′ encoding=’UTF-8′ cdata-section-elements=’NOME’/>
[/sourcecode]

Nesse momento o nó raiz é escolhido para trabalhar, a tag deve ser fechada.

[sourcecode language=”xml”]
<xsl:template match="/">
[/sourcecode]

Tudo o que não estiver usando o prefixo xsl será escrito da mesma forma como estiver no XSL. Vamos ver o loop agora

Aqui é o começo do loop

[sourcecode language=”xml”]
<xsl:for-each select="catalogo/item">
[/sourcecode]

E aqui é o seu final

[sourcecode language=”xml”]
</xsl:for-each>
[/sourcecode]

Tudo o que estiver entre essas tag’s será repetido até que todos os nós tenha sido lidos.

Para escrever os valores que estão no XML basta usar a tag value-of e no atributo select colocar o campo que deseja conforme o exemplo

[sourcecode language=”language=”]
<xsl:value-of select="Sku"/>
[/sourcecode]

Adicionando critérios no XSL

Assim como em uma query é possível adicionar critérios em XSL, basta adicioná-los conforme o código abaixo na tag for-each, no primeiro exemplo o XSL trará apenas os produtos com o campo CodigoCategoria igual a 102, no segundo exemplo, todos com CodigoCategoria igual a 102 e o CodigoMarca igual 999.

[sourcecode language=”xml”]
<xsl:for-each select="catalogo/item[CodigoCategoria=’102′]">
<xsl:for-each select="catalogo/item[CodigoCategoria=’102′ and CodigoMarca=’999′]">
[/sourcecode]

Usando XSL para formatar o XML

O Dot Net Framework nos dá suporte para trabalhar com arquivos XML através do Namespace System.Xml e para trabalhar com XSL com o Namespace System.Xml.Xsl

Vamos utilizar a classe XslCompiledTransform para formatar o XML com nosso XSL, essa classe é um processador de XSL e XSLT, ela é a sucessora da classe XslTransform, e segundo a MSDN oferece ganhos de performance com relação a classe antiga (e obsoleta na versão 4.0 do Dot Net Framework)

Uma das sobrecargas do construtor do XslCompiledTransform recebe um XmlReader, então carreguei o XSL dentro de um XmlReader e criei o objeto do XslCompiledTransform, o método Transform de nosso objeto XslCompiledTransform tem uma sobrecarga que recebe o xml base, uma lista de argumentos de Xslt que será passado como nulo e um objeto que terá o resultado da transformação, nesse caso é passado um StringWriter, pronto, agora o objeto StringWriter tem o XML carregado conforme as definições do XSL, tudo bem simples,

Código

Aqui está todo o código utilizado para a aplicação funcionar corretamente.

[sourcecode language=”csharp”]
using System;
using System.Xml;
using System.Xml.Xsl;
using System.IO;
namespace GeradorXmlParceiro
{
class Program
{
static string caminhoXmlBase = @"C:\XmlBase\XmlBase.xml";
static string caminhoXsl = @"C:\Xsl\Xsl1.xsl";
static string caminhoXmlFormatado = @"C:\XmlTransformado\XmlTransformado.xml";
static void Main(string[] args)
{
CriarXmlComXsl();
}

static void CriarXmlComXsl()
{
XmlDocument xml = new XmlDocument();
xml = FormartarXmlBaseParaFormatoComXsl(caminhoXsl);
xml.Save(caminhoXmlFormatado);
}

static XmlDocument FormartarXmlBaseParaFormatoComXsl(string caminhoXsl)
{
XmlDocument xml = new XmlDocument();
XslCompiledTransform xsl = new XslCompiledTransform();
XmlDocument xmlBase = ObterXmlBase();
try
{
XmlReader reader = XmlReader.Create(caminhoXsl);
xsl.Load(reader);
StringWriter writer = new StringWriter();
xsl.Transform(xmlBase, null, writer);
xml.LoadXml(writer.ToString());
}
catch (Exception ex)
{
throw new Exception("Ocorreu um erro ao efetuar a transformação do XML.", ex.InnerException);
}
return xml;
}

static XmlDocument ObterXmlBase()
{
XmlDocument xml = new XmlDocument();
try
{
xml.Load(caminhoXmlBase);
}
catch (Exception ex)
{
throw new Exception("Ocorreu um erro ao carregar o XML.", ex.InnerException);
}
return xml;
}
}
}
[/sourcecode]

É isso ai! Espero que esse artigo posso contribuir para o crescimento da comunidade! Até a próxima!

Referências

http://www.w3schools.com/xsl/

http://www.w3schools.com/xml/

http://msdn.microsoft.com/en-us/library/system.xml.xsl.xslcompiledtransform.aspx

Grupos de discussão Imasters

O Imasters mais uma vez saiu na frente criando alguns grupos de discussão que incluem os principais articulistas dos portais, atualmente estão com os grupos “Coletivo WordPress”, “Coletivo APIs Públicas” e “Coletivo Mobile Dev”, os links podem ser conferidos aqui http://www.imasters.com.br/coletivos.

Vejam a notícia de destaque no site que está em http://imasters.com.br/noticia/21330/desenvolvimento/imasters-cria-biblioteca-gratuita-de-integracao-com-cpanel.

 

Abs e até a próxima.

Redimensionando imagens com Dot Net

Com o uso das bibliotecas System.Drawing e System.Drawing.Imaging podemos redimensionar imagens há um tamanho bem menor sem praticar perder a qualidade.

Primeiro pegue uma imagem grande e de boa resolução, no meu caso vou usar uma imagem de 900×900 e vou redimensioná-la para os tamanhos 400×400, 250×2500, 120×120 e 48×48.

Criei um novo projeto do tipo Console Application no Visual Studio 2010, adicionei referência à biblioteca System.Drawing e no método Main adicionei o seguinte código:

List<string> enderecosDeImagens = new List<string>();

enderecosDeImagens = Imagem.ObterImagensNaoRedimensionadas();

List<Resolucao> resolucoes = new List<Resolucao>();

resolucoes.Add(Resolucao._400x400);
resolucoes.Add(Resolucao._250x250);
resolucoes.Add(Resolucao._120x120);
resolucoes.Add(Resolucao._48x48);

Imagem.RedimensionarArquivos(enderecosDeImagens, resolucoes);

Nesse código foi criada uma lista de string’s que conterá os endereços das imagens não redimensionadas, uma lista do tipo resolução, e depois passamos por paramêtro os endereços das imanges e as resoluções que queremos ter. Apreveite para criar o Enum Resolucao

public enum Resolucao
{
_48x48 = 48,
_120x120 = 120,
_250x250 = 250,
_400x400 = 400
}

Crie uma classe static chamada Imagem, adicione o método ObterImagensNaoRedimensionadas que retornorá uma lista de string, o método RedimensionarArquivos que será void, o método CriarPastas que será void, o método RedimensionarArquivo que será booleano, o método SalvarImagem que será void eo método ObterInformacaoDeCodificacao que retornará um ImageCodecInfo.

ObterImagensNaoRedimensionadas

List<string> imagensNaoRedimensionadas = new List<string>();

imagensNaoRedimensionadas = System.IO.Directory.GetFiles(@”D:\Artigos\Images\img\900×900″).ToList();

return imagensNaoRedimensionadas;

RedimensionarArquivos

CriarPastas(resolucoes);

Dictionary<string, bool> arquivosRedimensionados = new Dictionary<string, bool>();

foreach (string enderecoDoArquivo in enderecosDosArquivos)
{
foreach (Resolucao resolucao in resolucoes)
{
if (RedimensionarArquivo(enderecoDoArquivo, resolucao))
{
arquivosRedimensionados.Add(string.Format(“{0} – {1}”, enderecoDoArquivo, resolucao), true);
}
else
{
arquivosRedimensionados.Add(string.Format(“{0} – {1}”, enderecoDoArquivo, resolucao), true);
}
}
}

CriarPastas

foreach (Resolucao resolucao in resolucoes)
{
string pasta = string.Format(@”D:\Artigos\Images\img\{0}x{0}”, (int)resolucao);

if (System.IO.Directory.Exists(pasta) == false)
{
System.IO.Directory.CreateDirectory(pasta);
}
}

RedimensionarArquivo

bool resultado = true;

try
{
Bitmap imagemAtual = new System.Drawing.Bitmap(enderecoArquivo);

Bitmap ImagemRedimensionada = new System.Drawing.Bitmap((int)resolucao, (int)resolucao);

using (Graphics g = Graphics.FromImage((Image)ImagemRedimensionada))
{
g.DrawImage(imagemAtual, 0, 0, (int)resolucao, (int)resolucao);
}

System.IO.FileInfo fi = new System.IO.FileInfo(enderecoArquivo);

string destino = string.Format(@”D:\Artigos\Images\img\{0}x{0}\{1}”, (int)resolucao, fi.Name);

Imagem.SalvarImagem(destino, ImagemRedimensionada, 85L);
}
catch (Exception ex)
{
throw ex;
}

return resultado;

SalvarImagem

// Encoder parameter for image quality
EncoderParameter qualidade =
new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality);

// Jpeg image codec
ImageCodecInfo jpegCodec = ObterInformacaoDeCodificacao(“image/jpeg”);

if (jpegCodec == null)
return;

EncoderParameters parametrosDeCodificacao = new EncoderParameters(1);
parametrosDeCodificacao.Param[0] = qualidade;

img.Save(path, jpegCodec, parametrosDeCodificacao);

ObterInformacaoDeCodificacao

// Get image codecs for all image formats
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();

// Find the correct image codec
for (int i = 0; i < codecs.Length; i++)
{
if (codecs[i].MimeType == mimeType)
{
return codecs[i];
}
}

return null;

 

Repeater dentro de Repeater (DataList dentro de DataList ou GridView dentro de GridView)

Imagine a seguinte situação: você tem uma lista de um determinado objeto e cada objeto dessa lista tem uma propriedade. Essa propriedade é uma lista de um determinado objeto e você precisa popular um Repeater.

Vamos dar nomes aos objetos: suponha que você tenha uma lista de professores e cada professor tem seus alunos, bem, alguns irão dizer que é fácil, cada vez que o Repeater fizer um ItemDataBound basta fazer um busca novamente no banco de dados e listar o resultado. Como sempre me deparo com essa situação e vira e mexe algum me pergunta se essa é a melhor maneira de fazer resolvi escrever um artigo.

É muito simples, se a sua coleção já vem populada, basta você passar essa lista de objetos para o outro controle dentro do seu Repater (nesse caso outro Repeater), e isso será feito a cada ItemDataBound.

Classes

Temos as seguintes classes:

/// <summary> /// Classe mãe /// </summary> public abstract class Pessoa { private string _nome = string.Empty; public string Nome { get { return _nome; } set { _nome = value; } } public Pessoa() { } } /// <summary> /// Professor implementa Pessoa /// </summary> public class Professor : Pessoa { private string _materia = string.Empty; public string Materia { get { return _materia; } set { _materia = value; } } /// <summary> /// Um professor tem uma lista de alunos /// </summary> private System.Collections.Generic.List<Aluno> alunos = new System.Collections.Generic.List<Aluno>(); public System.Collections.Generic.List<Aluno> Alunos { get { return alunos; } set { alunos = value; } } public Professor(string nome, string materia, System.Collections.Generic.List<Aluno> alunos) { Nome = nome; Materia = materia; Alunos = alunos; } } /// <summary> /// Aluno implementa Pessoa /// </summary> public class Aluno : Pessoa { private string _turma = string.Empty; public string Turma { get { return _turma; } set { _turma = value; } } public Aluno(string nome, string turma) { Nome = nome; Turma = turma; } }

WebForm

Agora que já conhecemos nossas classes vamos para a implementação disso em uma página. Primeiro vamos criar um Repeater na página e, dentro dele, criaremos um segundo repeater, como no exemplo abaixo:

<asp:Repeater ID="ProfessorRepeater" runat="server" OnItemDataBound="ProfessorRepeater_ItemDataBound"> <ItemTemplate> Professor: <%# Eval("Nome") %> <br /> Matéria: <%# Eval("Materia") %> <br /> Alunos: <asp:Repeater ID="AlunoRepeater" runat="server"> <HeaderTemplate> <table> <tr style="font-weight: bold"> <td> Nome</td> <td> Curso</td> </tr> </HeaderTemplate> <FooterTemplate> </table> </FooterTemplate> <ItemTemplate> <tr style="background-color: Gray"> <td> <%# Eval("Nome") %> </td> <td> <%# Eval("Turma")%> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr style="background-color: Silver"> <td> <%# Eval("Nome") %> </td> <td> <%# Eval("Turma") %> </td> </tr> </AlternatingItemTemplate> </asp:Repeater> </ItemTemplate> <SeparatorTemplate> <hr /> </SeparatorTemplate> </asp:Repeater>

Atente para o detalhe que o repeater AlunoRepater está escrevendo as propriedades Nome (que vem de Pessoa) e turma (que é da classe Aluno).

Bom, mas isso não irá funcionar dessa maneira. Vejamos no code behind da página como é a implementação disso.

Code Behind

No PageLoad os objetos são criados e populados.

protected void Page_Load(object sender, EventArgs e) { Page.Title = "Repeater dentro de Repeater (DataList dentro de DataLista ou GridView dentro de GridView)"; // lista de alunos que será atribuída aos professores List<Aluno> alunosEpaminondas = new List<Aluno>(); alunosEpaminondas.Add(new Aluno("Alan", "Sistemas da Informação")); alunosEpaminondas.Add(new Aluno("Fabio", "Ciência da Computação")); alunosEpaminondas.Add(new Aluno("Marcelo", "Desenvolvimento de Sistemas Web")); // Só para não falar que os professores tem os mesmos alunos List<Aluno> alunosAdolfo = new List<Aluno>(); alunosAdolfo.Clear(); alunosAdolfo.Add(new Aluno("Carol", "Análise de Sistemas")); alunosAdolfo.Add(new Aluno("Bruno", "Banco de Dados")); // lista de professores List<Professor> professores = new List<Professor>(); professores.Add(new Professor("Epaminondas", "Gestão de Projetos", alunosEpaminondas)); professores.Add(new Professor("Adolfo", "Programação Orientação a Objetos", alunosAdolfo)); ProfessorRepeater.DataSource = professores; // define o DataSource do repeater como a lista de objetos professores ProfessorRepeater.DataBind(); }

No controle ProfessorRepeater, no evento ItemDataBound que o controle AlunoRepeater é populado, veja como é simples fazer a conversão do item do repeater que é passado.

protected void ProfessorRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e) { // verifica se o item é do tipo ItemType ou AlternatingItem, se não for retorna e não continua o processamento if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem) return; // verifica se o objeto AlunoRepeater existe dentro do item if (e.Item.Controls.Contains((Repeater)e.Item.FindControl("AlunoRepeater"))) { // cria um objeto Repeater e define-o como o objeto AlunoRepeater do item Repeater alunoRepeater = (Repeater)e.Item.FindControl("AlunoRepeater"); // converte o item (linha do repeater) para um professor e define a propriedade Alunos como DataSource do repeater alunoRepeater.DataSource = ((Professor)e.Item.DataItem).Alunos; alunoRepeater.DataBind(); } }

Super simples e tranqüilo, não há segredos nisso. A grande sacada é não ter que conectar ao banco novamente apenas obter os outros objetos. É possível utilizar isso também na criação de menus, para exibir a notas fiscais e seus itens, pedidos e seus itens etc. Aí vai depender da necessidade de cada projeto.

Até a próxima!

Upload de imagem com recorte usando Jquery e asp.net

Quem nunca quis disponibilizar, em sua aplicação, a possibilidade de o usuário subir uma imagem e recortá-la, como vários sites já fazem? Dei uma pesquisada, estudei sobre o System.Drawing,  jquery e resolvi compartilhar aqui o que consegui. Veja só.

Bibliotecas

A primeira coisa a ser feita aqui é baixar alguns arquivos, faça o download do jquery e dojcrop.

Namespaces

Inclua os seguintes namespaces em sua página:

  • System.IO
  • System.Drawing
  • System.Drawing.Imaging
  • System.Drawing.Drawing2D

O namespace System.Drawing sera utilizado com apelido SD

Formulário

Adicione três controles do tipo Panel no formulário, conforme a tabela abaixo:

ID Visible
UploadPanel True
ImagemOriginalPanel False
ImagemRecortadaPanel False

Dentro do UploadPanel adicione os controles dessa forma:

Tipo ID Text Visible
FileUpload ArquivoFileUpload N/A True
Button UploadButton Upload True
Label ErroLabel “” False

Dentro do ImagemOriginalPanel adicione os controles como mostrado:

Tipo ID Text
Image OriginalImage N/A
Button RecortarButton Recortar
HiddenField XHiddenField N/A
HiddenField YHiddenField N/A
HiddenField WHiddenField N/A
HiddenField HHiddenField N/A

Dentro do ImagemRecortadaPanel adicione o seguinte controle:

Tipo ID Text
Image ImagemRecortadaImage N/A

O código da sua página deve estar bem parecido com este:

    <form id="form1" runat="server">         <asp:Panel ID="UploadPanel" runat="server">             <asp:FileUpload ID="ArquivoFileUpload" runat="server"/>             <asp:Button ID="UploadButton" runat="server" Text="Upload" />         </asp:Panel>         <asp:Panel ID="ImagemOriginalPanel" runat="server" Visible="false">             <asp:Image ID="OriginalImage" runat="server" />             <asp:Button ID="RecortarButton" runat="server" Text="Recortar" />             <asp:HiddenField ID="XHiddenField" runat="server" />             <asp:HiddenField ID="YHiddenField" runat="server" />             <asp:HiddenField ID="WHiddenField" runat="server" />             <asp:HiddenField ID="HHiddenField" runat="server" />         </asp:Panel>         <asp:Panel ID="ImagemRecortadaPanel" runat="server" Visible="false">             <asp:Image ID="ImagemRecortadaImage" runat="server" />         </asp:Panel>

Estrutura do site

Adicione uma pasta com o nome imagens ao site.

Arquivos das bibliotecas

Adicione os seguintes arquivos no site:

  • jquery.min.js
  • jquery.Jcrop.js
  • jquery.Jcrop.css

HTML

Inclua as referências para os arquivos na sua página.

<script src="jquery.min.js" /></script> <script src="jquery.Jcrop.js" /></script> <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />

Aplicando o Jcrop

Inclua as seguintes funções na sua página:

        jQuery(document).ready(function(){             jQuery('#OriginalImage').Jcrop({                 onSelect: marcaPontos             });         });         function marcaPontos(c) {             jQuery('#XHiddenField').val(c.x);             jQuery('#YHiddenField').val(c.y);             jQuery('#WHiddenField').val(c.w);             jQuery('#HHiddenField').val(c.h);         };               

É realmente muito simples. Jcrop foi aplicado ao controle OriginalImage que está dentro de ImagemOriginalPanel, e um handler foi adicionado ao evento de selecionar a imagem. Isso acontecerá quando o usuário tiver acabado de selecionar a área da imagem que deseja manter. O handler chamada a função marcaPontos, que define os valores dos campos XHiddenField, HiddenField, WHiddenField e HHiddenField passando as coordenadas.

Code Behind

O código abaixo irá pegar o caminho físico da pasta imagens e guardá-lo na variável pasta, declare-o no começo da classe da página.

string pasta = HttpContext.Current.Request.PhysicalApplicationPath + "imagens\\";

No evento click do botão upload adicione o seguinte código:

    protected void UploadButton_Click(object sender, EventArgs e) { bool extensaoPermitida = false; bool arquivoGravado = false; if (ArquivoFileUpload.HasFile) { string extensaoArquivo = Path.GetExtension(ArquivoFileUpload.FileName); string[] extensoesPermitidas = { ".png", ".jpg", ".gif", ".jpeg" }; for (int i = 0; i < extensoesPermitidas.Length; i++) if (extensoesPermitidas[i] == extensaoArquivo) extensaoPermitida = true; if (extensaoPermitida) { try { ArquivoFileUpload.PostedFile.SaveAs(pasta + ArquivoFileUpload.FileName); arquivoGravado = true; } catch (Exception ex) { ErroLabel.Text = "Ocorreu um problema na tentativa de salvar o arquivo." + ex.ToString(); ErroLabel.Visible = true; arquivoGravado = false; } } else { ErroLabel.Text = string.Format("Tipo de arquivo inválido. Tipo aceitos {0}.", extensoesPermitidas.ToString()); ErroLabel.Visible = true; } if (arquivoGravado) { ImagemOriginalPanel.Visible = true; OriginalImage.ImageUrl = "imagens/" + ArquivoFileUpload.FileName; Session["arquivo"] = ArquivoFileUpload.FileName; } } }

No evento click do botão recortar adicione o seguinte código:

   protected void RecortarButton_Click(object sender, EventArgs e) { string nomeArquivo = Session["arquivo"].ToString(); int eixoX = Convert.ToInt32(XHiddenField.Value); int eixoY = Convert.ToInt32(YHiddenField.Value); int largura = Convert.ToInt32(WHiddenField.Value); int altura = Convert.ToInt32(HHiddenField.Value); byte[] recorte = Recortar(pasta + nomeArquivo, largura, altura, eixoX, eixoY); using (MemoryStream ms = new MemoryStream(recorte, 0, recorte.Length)) { ms.Write(recorte, 0, recorte.Length); using (SD.Image imagemRecortada = SD.Image.FromStream(ms, true)) { string salvarEm = pasta + "crop" + nomeArquivo; imagemRecortada.Save(salvarEm, imagemRecortada.RawFormat); ImagemOriginalPanel.Visible = false; ImagemRecortadaPanel.Visible = true; ImagemRecortadaImage.ImageUrl = "imagens/crop" + nomeArquivo; } } }

Crie um método do tipo void conforme abaixo.

  private byte[] Recortar(string nomeAbsolutoArquivo, int largura, int altura, int eixoX, int eixoY) { try { using (SD.Image imagemOriginal = SD.Image.FromFile(nomeAbsolutoArquivo)) { using (SD.Bitmap bitmap = new System.Drawing.Bitmap(largura, altura)) { bitmap.SetResolution(imagemOriginal.HorizontalResolution, imagemOriginal.VerticalResolution); using (SD.Graphics grafico = SD.Graphics.FromImage(bitmap)) { grafico.SmoothingMode = SmoothingMode.AntiAlias; grafico.InterpolationMode = InterpolationMode.HighQualityBicubic; grafico.PixelOffsetMode = PixelOffsetMode.HighQuality; grafico.DrawImage(imagemOriginal, new System.Drawing.Rectangle(0, 0, largura, altura), eixoX, eixoY, largura, altura, SD.GraphicsUnit.Pixel); MemoryStream ms = new MemoryStream(); bitmap.Save(ms, imagemOriginal.RawFormat); return ms.GetBuffer(); } } } } catch (Exception ex) { throw ex; } }

Agora é só colocar tudo para rodar. Não é um bicho de sete cabeças, a questão é juntar tudo.

Referências

 

Espero que esse artigo sirva para agregar conhecimento à comunidade. Até a próxima.

Reproduzindo mp3 no .NET com C#

Este é meu primeiro artigo. É um artigo simples com intenção de demonstrar como reproduzir MP3 no .NET com C# utilizando um componente pronto.

Os links para baixar os arquivos e as referências estão no fim do artigo.

Nessa aplicação, foram utilizados Visual Studio 2008 (pode ser Visual Studio 2005 ou compátivel e Framework .Net 2.0.

1º Registre o componente mp3p.ocx

No Prompt do MS-DOS com o comando regsvr32.exe mp3p.ocx.

2º Adicione as seguintes refêrencias ao projeto

  • AxInterop.MP3PLib.dll
  • Interop.MP3PLib.dll
  • XAUDIO.dll

3º Adicione o controle “MP3P Control” à barra de ferramentas

Clique na barra de ferramentas com o botão direito, clique em “Choose Items” na caixa de dialogo “Choose Toolbox Items”, clique em “Browse…”, selecione o arquivo mp3p.ocx (que já deve ter sido registrado no seu computador) e clique em “OK”.

4º Adicione o componente para o formulário

5º Adicione 3 botões ao formulário: Abrir, Tocar e Parar

No code behind do formulário. No botão Abrir, implemente o seguinte código:

private void AbrirButton_Click(object sender, EventArgs e)
{
axMp3P1.OutputClose();
OpenFileDialog openFileDialog = new OpenFileDialog();
openFileDialog.Filter = "Arquivos WAV(*.wav) | Arquivps MP3(*.mp3)";
if (openFileDialog.ShowDialog() == DialogResult.OK)
axMp3P1.InputOpen(openFileDialog.FileName);
}
No botão Tocar implemente o seguinte código
private void TocarButton_Click(object sender, EventArgs e)
{
axMp3P1.Play();
}
No botão Parar implemente o seguinte código
private void ParaButton_Click(object sender, EventArgs e)
{
axMp3P1.Stop();
}

Referências

http://www.codeproject.com/KB/audio-video/cswavplay.aspx?df=100&forumid=13779&exp=0&fr=26&select=736865

http://social.msdn.microsoft.com/forums/en-US/csharpgeneral/thread/3dbfb9a3-4e14-41d1-afbb-1790420706fe

http://www.dlldll.com/xaudio.dll_download.html 

http://www.c-sharpcorner.com/UploadFile/electricfarm/PlayMP311172006160247PM/PlayMP3.aspx

MP3 player com DirectX

Ao menos uma vez você já deve ter tentando executar um MP3 utilizando .NET. Você vai lá e adiciona um objeto SoundPlayer do namespace System.Media, utilizando o método Play() e… não é possível executar o arquivo, pois o SoundPlayer não suporta o MP3.

Vamos usar o DirectX para nos auxiliar com isso, então, baixe o DirectX Software Development Kit no site do Microsoft, são apenas 443 MB.

No meu caso, eu tive que executar um mp3 em um dashboard de Call Center. O cliente queria colocar um telão no Call Center e, toda vez que o nível de atendimento estava abaixo do mínimo aceitável, o sistema tinha que tocar uma sirene. Bom, fizemos um esquema para ler wav, mas nossa vontade era fazer com mp3! Coisas de desenvolvedor… Bem, fizemos, mas não foi para produção, não deu tempo. Mas não importa – a questão é que o DirectX vai nos ajudar com o nosso MP3.

Requisitos

  • Windows XP com framework 2.0 ou superior
  • DirectX SDK 2006 ou  superior
  • Visual Studio 2005 ou compatível

Criando o projeto Windows Forms Application

Agora com o DirectX SDK, crie um novo projeto do tipo Windows Forms Application, com o nome que você achar melhor. Não vou mostrar aqui com usar o OpenFileDialog, isso fica para outro artigo.

Adicione as referências

Vá ao menu “Project”, clique em “Add Reference”, na aba “.NET”, adicione as referências “Microsoft.DirectX” e “Microsoft.DirectX.AudioVideoPlayback”.

Adicione o caminho do mp3

Dê um clique duplo no formulário. No método Form_Load, crie uma variável do tipo string com o nome musica e sete o valor dela como o caminho para o seu arquivo mp3 (pois é, um arquivo mp3!!!! Hehe).

Adicione objeto Microsoft.DirectX.AudioVideoPlayback.Audio

Adicione um objeto do tipo Áudio (Microsoft.DirectX.AudioVideoPlayback.Audio) com o nome áudio. Instancie áudio como um novo Áudio e passe como parâmetro o objeto música no construtor.

Execute “Play”

Agora execute o método “Play” do objeto áudio.

Código fonte

Abaixo estão os códigos-fonte em VB.NET e C#:

VB.NET

Imports Microsoft.DirectX.AudioVideoPlayback Public Class Form1 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim musica As String = "C:\Documents and Settings\oscar\Meus documentos\Minhas músicas\Top Gun - Danger Zone.mp3" Dim audio As Audio audio = New Audio(musica) audio.Play() End Sub End Class

C#

using System; using System.Windows.Forms; using Microsoft.DirectX.AudioVideoPlayback; namespace DirectXPlayer {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();         }         private void Form1_Load(object sender, EventArgs e)         {             string musica = @"C:\Documents and Settings\oscar\Meus documentos\Minhas músicas\Top Gun - Danger Zone.mp3";             Audio music;             music = new Audio(musica);             music.Play();         }     } }

Referências

http://msdn.microsoft.com/en-us/directx/aa937788.aspx
http://msdn.microsoft.com/en-us/directx/default.aspx
http://msdn.microsoft.com/en-us/aa937791.aspx

Como você pode ver, não é uma situação tão difícil. Espero que tenha agregado conhecimento. Até a próxima.

Integração com redes sociais usando .NET

Primeiro, vamos definir o que é uma rede social:

Uma rede social é uma estrutura social compostapor pessoas (ou organizações, territórios, etc.) – designadas como nós – que estão conectadas por um ou vários tipos de relações (de amizade, familiares, comerciais, sexuais, etc.), ou que partilham crenças, conhecimento ou prestígio – Wkipedia

Do meu ponto de vista, vejo as ferramentas de networking como Facebook e Linkedin com redes sociais também.

Encurtando URL

Para encurtar a URL utilizaremos o serviço do site tinyurl.com, é muito simples, basta passar chamar a URL http://tinyurl.com/api-create.php, passando o parâmetro url com o caminho completo da sua url, ou seja, ficaria assim, se fôssemos implementar:

http://tinyurl.com/api-create.php?url=SUA_URL

Pré-requisitos

  • .Net Framework 2.0 ou superior
  • Visual Studio 2005 ou compatível

Projeto

Crie um novo Website, na Default.aspx adicione os seguintes controles:

Tipo ID
TextBox UrlTextBox
Button GerarUrlsButton
LinkButton OrkutLinkButton
LinkButton TwitterLinkButton
LinkButton FacebookLinkButton
Label UrlLabel

 

O código da página ficará semelhante com o código abaixo:

<asp:TextBox ID="UrlTextBox" runat="server"></asp:TextBox> <asp:Button ID="GerarUrlsButton" runat="server" Text="Gerar URL's" OnClick="GerarUrlsButton_Click"> </asp:Button> <br /> <asp:LinkButton ID=" OrkutLinkButton" runat="server" Text="Orkut"></asp:LinkButton> <br /> <asp:LinkButton ID="TwitterLinkButton" runat="server" Text="Twitter"></asp:LinkButton> <br /> <asp:LinkButton ID="FacebookLinkButton" runat="server" Text="Facebook"></asp:LinkButton> <br /> asp:Label ID="UrlLabel" runat="server"></asp:Label>

Namespaces

Inclua os seguintes namespaces na sua página:

  • System.Net
  • System.IO
  • System.Text

Code Behind

Eu fiz um método que busca a url resumida no tinyurl, dessa maneira basta apenas adicioná-la a um link.

  /// <summary> /// Devolve a url resumida /// </summary> /// <param name="url">url completa</param> /// <returns>url resumida</returns> protected string ObterUrlCurta(string url) { try { if (!url.ToLower().StartsWith("http") && !url.StartsWith("ftp")) { url = "http://" + url; } WebRequest request = WebRequest.Create("http://tinyurl.com/api-create.php?url=" + url); WebResponse response = request.GetResponse(); string urlCurta = string.Empty; using (StreamReader reader = new StreamReader(response.GetResponseStream())) { urlCurta = reader.ReadToEnd(); } // se tudo der certo, devolve a url resumida return urlCurta; } catch (Exception) { // se ocorrer erro devolve a mesma url return url; } }

Para obter a url do Facebook eu utilizei o seguinte código:

 /// <summary> /// Devolve a url resumida do Facebook /// </summary> /// <param name="urlParaCompartilhar">url que será compartilhada</param> /// <param name="tituloPagina">título da página</param> /// <returns>url resumida do facebook</returns> public string ObterUrlFacebook(string urlParaCompartilhar, string tituloPagina) { StringBuilder url = new StringBuilder(string.Format("http://www.facebook.com/sharer.php?u={0}&t={1}", ObterUrlCurta(urlParaCompartilhar), tituloPagina)); return url.ToString(); }

Para obter a url do Twiiter eu utilizei o seguinte código:

 /// <summary> /// Devolve a url resumida do Twitter /// </summary> /// <param name="urlParaCompartilhar">url que será compartilhada</param> /// <param name="tweet">mensagem/tweet</param> /// <param name="usuarioTwitter">por quem ou qual canal</param> /// <returns>url resumida do twitter</returns> public string ObterUrlTwitter(string urlParaCompartilhar, string tweet, string usuarioTwitter) { StringBuilder url = new StringBuilder(string.Format("http://twitter.com/home?status={0} {1}", ObterUrlCurta(urlParaCompartilhar), tweet)); if (usuarioTwitter != string.Empty) url.Append(string.Format(" - por (@{0})", usuarioTwitter)); return url.ToString(); }

E para o Orkut, utilizei o seguinte código:

 /// <summary> /// Devolve a url resumida do Orkut /// </summary> /// <param name="urlParaCompartilhar">url que será compartilhada</param> /// <param name="tituloPagina">título da página</param> /// <returns>url resumida do orkut</returns> public string ObterUrlOrkut(string urlParaCompartilhar, string tituloPagina) { StringBuilder url = new StringBuilder(string.Format("http://promote.orkut.com/preview?nt=orkut.com&tt={0}&du={1}", ObterUrlCurta(urlParaCompartilhar), tituloPagina)); return url.ToString(); }

No evento onclick do botão GerarUrlsButton, adicione o seguinte código:

/// <summary> /// Gera url's para os links /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GerarUrlsButton_Click(object sender, EventArgs e) { // limpa os atributos link orkut OrkutLinkButton.Attributes.Clear(); // adiciona o evento onclick chamando a função javascript abrirPagina e passa o parâmetro url OrkutLinkButton.Attributes.Add( "onclick", string.Format( "abrirPagina('{0}');", ObterUrlOrkut( UrlTextBox.Text, "Teste Orkut"))); TwitterLinkButton.Attributes.Clear(); TwitterLinkButton.Attributes.Add( "onclick", string.Format( "abrirPagina('{0}');", ObterUrlTwitter( UrlTextBox.Text, "Teste Twitter", "seu_usuario_twitter_ou_outro"))); FacebookLinkButton.Attributes.Clear(); FacebookLinkButton.Attributes.Add( "onclick", string.Format( "abrirPagina('{0}');", ObterUrlFacebook( UrlTextBox.Text, "Teste Facebook"))); UrlLabel.Text = UrlTextBox.Text; UrlTextBox.Text = string.Empty; }

Muito simples e bem legal, a possibilidade de o visitante ou cliente do site poder compartilhar o conhecimento e gerar conteúdo em redes sociais é muito boa, desde que seu site seja bom, ou sua empresa realmente preste um bom serviço.

Mais uma vez espero que esse artigo contribua para a comunidade.

Referências

Postando no Twitter com .NET

Olá, pessoal! Após um tempo sem escrever, volto aqui com um assunto bem bacana, integração com redes sociais. Vamos dar uma olhada em como usar uma API que o Twitter disponibiliza e uma API do site Migre.me para mandarmos as mensagens “via API” com a URL encurtada. Podemos fazer isso com aplicações web e desktop.

Vamos lá!

Web

Crie um novo website e, no code behind da página Default.aspx, adicione os seguintes usings/imports:

  • System.Net;
  • System.IO;
  • System.Xml;
  • System.Web

C#

  • using System.Net;
  • using System.IO;
  • using System.Xml;
  • using System.Web;

VB.NET

  • Imports System.Net
  • Imports System.IO
  • Imports System.Xml
  • Imports System.Web

Agora, na página Default.aspx, adicione os seguintes controles:

ID Tipo
EmailTextBox TextBox
SenhaTextBox TextBox TextMode=Password
ByTextBox TextBox
UrlTextBox TextBox
MensagemTextBox TextBox
PostarButton Button Text=Postar

Seu código deve ter ficado parecido com este:

            <table>

                <tr>

                    <td>

                        E-mail

                    </td>

                    <td>

                        <asp:TextBox ID="EmailTextBox" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        Senha

                    </td>

                    <td>

                        <asp:TextBox ID="SenhaTextBox" runat="server" TextMode="Password"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        Mensagem

                    </td>

                    <td>

                        <asp:TextBox ID="MensagemTextBox" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        URL

                    </td>

                    <td>

                        <asp:TextBox ID="UrlTextBox" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        By

                    </td>

                    <td>

                        <asp:TextBox ID="ByTextBox" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td colspan="2">

                        <asp:Button ID="PostarButton" runat="server" Text="Postar" OnClick="PostarButton_Click" />

                    </td>

                </tr>

            </table>

Migre.Me

Nesse momento iremos fazer nossa aplicação conversar com a API do migre.me. Vamos usar a API que retorna um XML.

No Code Behind, crie uma função que retorna uma string chamada CreateMigreMeUrl, que recebe três parâmetros também do tipo string, denominadas by, url, message, conforme os exemplos abaixo:

C#

    public string CreateMigreMeUrl(string by, string url, string message)

    {

        string retorno = string.Empty;

        // essa url será acessada pelo nosso sistema para gerar a url encurtada

        string urlMigreMe = string.Format("http://migre.me/api.xml?url={0}", url);

         // o WebClient é classe que irá "baixar" o retorno da URL do Migre.me

        WebClient client = new WebClient();

 // O Stream irá ler o retorno do WebClient

        Stream stream = client.OpenRead(urlMigreMe);

         // O XmlTextReader é utilizado para receber os dados do Stream

        XmlTextReader xmlReader = new XmlTextReader(stream);

         // Nesse momento é feita uma busca pelo nó do XML que contém no valor o texto "http://migre.me/", assim que o texto é encontrado a variável retorno é montada

        while (xmlReader.Read())

        {

            if (xmlReader.NodeType == XmlNodeType.Text)

            {

                if (xmlReader.Value.ToLower().Contains("http://migre.me/"))

                {

                    retorno = string.Format("{0} {1} {2}", message, xmlReader.Value, by);

                }

            }

        }

        return retorno;

    }

VB.NET

   Public Function CreateMigreMeUrl(ByVal by As String, ByVal url As String, ByVal message As String)

        Dim retorno As String = String.Empty

        Dim urlMigreMe = String.Format("http://migre.me/api.xml?url={0}", url)

        Dim client As New WebClient

        Dim stream As Stream

        stream = client.OpenRead(urlMigreMe)

        Dim xmlReader As New XmlTextReader(stream)

        While xmlReader.Read

            If xmlReader.NodeType == XmlNodeType.Text  Then

                If xmlReader.Value.ToLower().Contains("http://migre.me") Then

                    retorno = String.Format("{0} {1} {2}", message, xmlReader.Value, by)

                End If

            End If

        End While

        Return retorno

    End Function

Twitter

Agora faremos a função que será responsável por postar nosso tweet. É bastante simples: crie uma função do tipo void chamada PostTweet, que recebe três parâmetros do tipo string, denominados username, password e tweet.

C#

    public static void PostTweet(string username, string password, string tweet)

    {

        try

        {

// Os dados do usuário são "Codificados" nesse momento

            string user = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username + ":" + password));

            // a variável byte recebe a saída do post

            byte[] bytes = System.Text.Encoding.UTF8.GetBytes("status=" + tweet);

            // Inicializa o HttpWebRequest

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml");

// Define o método como POST

            request.Method = "POST";

            // se verdadeiro espera respostas para requisições POST. O valor padrão é true.

            request.ServicePoint.Expect100Continue = false;

            // adiciona o cabeçalho de autenticação da API do Twitter

            request.Headers.Add("Authorization", "Basic " + user);

            // Definie o cabeçalho

            request.ContentType = "application/x-www-form-urlencoded";

            // Tamanho do buffer

            request.ContentLength = bytes.Length;

// Pega o retorno

            Stream reqStream = request.GetRequestStream();

// Escreve o retorno

            reqStream.Write(bytes, 0, bytes.Length);

// Fecha a requisção

            reqStream.Close();

        }

        catch (Exception ex)

        {

            // As exceções devem ser tratadas aqui

        }

    }

VB.NET

    Public Sub PostTweet(ByVal username As String, ByVal password As String, ByVal tweet As String)

        Try

            Dim user As String = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username + ":" + password))

            Dim bytes() As Byte = System.Text.Encoding.UTF8.GetBytes("status=" + tweet)

            Dim request As HttpWebRequest

            request = HttpWebRequest.Create("http://twitter.com/statuses/update.xml")

            request.ServicePoint.Expect100Continue = False

            request.Headers.Add("Authorization", "Basic " + user)

            request.ContentType = "application/x-www-form-urlencoded"

            request.ContentLength = bytes.Length

            Dim reqStream As Stream = request.GetRequestStream()

            reqStream.Write(bytes, 0, bytes.Length)

            reqStream.Close()

        Catch ex As Exception

            'As exceções devem ser tratadas aqui

        End Try

    End Sub

No evento, click no botão postar adicione o seguinte código:

C#

PostTweet(EmailTextBox.Text, SenhaTextBox.Text, CreateMigreMeUrl(ByTextBox.Text, UrlTextBox.Text, MensagemTextBox.Text));

VB.NET

PostTweet(EmailTextBox.Text, SenhaTextBox.Text, CreateMigreMeUrl(ByTextBox.Text, UrlTextBox.Text, MensagemTextBox.Text))

Referências

http://migre.me/api-migreme/

http://dev.twitter.com/

Com isso, finalizamos o desenvolvimento dessa integração, basta agora utilizarmos um usuário válido para postar alguma coisa no Twiiter.

Espero que isso tenha agregado valor a vocês.

Um grande abraço e até a próxima.

Sacadas Bacanas de Digital!