Tutorial de Introducción a Silverlight

Hola Gente, cómo están?

Antes que nada, les comento que hace un tiempo agregué un contador de visitas a la página y me sorprendió la cantidad de gente que entra.

No es WOW! Pero entra mucho más de lo que yo imaginaba. Me gustaría que además me dejaran su comentario acerca de si les gustó, les sirvió o si necesitan alguna ayuda con otro tema.

Disulpen mi demora al actualizar pero estas épocas siempre vienen atareadas.

Hoy les dejo un pequeño tutorial de cómo empezar con Silverlight. Es todo práctico, si quieren ver teoría les sugiero que busquen fuentes oficiales de Microsoft.

Es algo muy sencillo, pero que les puede servir para aquello que quieren empezar con Silverlight.

Let's work!

Primero y antes que nada crearemos nuestro proyecto. Yo por comodidad elijo el lenguaje C#.

Seleccionamos Aplicación de SIlverlight. De nombre le pondremos "MiPrimerSilverlight".

Optamos por la versión 3 de Silverlight y dejamos marcada la opción para generar automáticamente una página para hostear nuestra animación Silverlight.

Bueno, una vez creado nuestro proyecto podrán ver el código que ha generado VS en nuestra Page.xaml. Debe ser similar al siguiente:

<UserControl x:Class="MiPrimerSilverlight_cs.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">

</Grid>

</UserControl>

Si observan ese código verán dos elementos. Un UserControl y una grilla Grid. Bien, para este ejemplo reemplacemos la gilla por el siguiente elemento:

<Canvas x:Name="LayoutRoot" Background="White>

</Canvas>
Este elemento, no es más que un lienzo que va a contener a nuestra animación.

Ahora agreguaremos tres elementos a nuestra animación. Primero dos botones:

<Button x:Name="btnComenzar" Canvas.Top="10" Canvas.Left="250" Content="Comenzar" Click="btnComenzar_Click" />

<Button x:Name="btnParar" Canvas.Top="40" Canvas.Left="250" Content="Detener" Click="btnParar_Click" />
Observen las propiedades que hemos seteado para nuestros botones.

Canvas.Top determina la distancia del botón respecto del Top de nuestro lienzo.
Canvas.Left determina la distancia del botón respecto de la izquierda de nuestro lienzo.

En sí, estas son propiedades del método, que se aplican de manera indirecta a nuestros botones. No entraré mucho en detalle, para más info pueden consultar documentación de Silverlight.

Ahora incluímos nuestro tercer elemento dentro del lienzo. Un círculo.

<Ellipse x:Name="pelota" Fill="Red" Canvas.Top="10" Canvas.Left="100" Height="50" Width="50" />
Hasta acá nuestra animación luciría así.



Ok, pero esto no se mueve no?

Vamos a comenzar con la animación propiamente dicha.

Primeramente, para ello, crearemos nuestra sección de recursos de la animación si? Entonces agregamos las etiquetas:

<UserControl.Resources>

</UserControl.Resources>
Y qué pondremos en ella? Bueno, aquí deberíamos detenernos un ratito a pensar qué es una animación.
Cuando pensamos en animación, pensamos en algo moviéndose, o cambiando de color, ect. Es decir, cambiar las propiedades de un objeto, dentro de un período de tiempo.
Bien ahora pensemos en cómo funciona una animación. Basicamente, en una línea de tiempo no? Y esa línea de tiempo la podemos dividir en pequeñas celdas o fotogramas, en cada uno de los cuales ocurren movimientos y/o acciones.
Teniendo en mente que estos fotogramas, uno al lado de otro forman básicamente la animación, dentro de una o más líneas de tiempo, podemos completar nuestros recursos.

Primeramente agregamos nuestra "línea de tiempo" (nuevamente les recomiendo que para mayores detalles se remitan a la documentación de Silverlight, estos son simples ejemplos)

<Storyboard x:Key="bounce">

</Storyboard>
Una vez agregado nuestro Stodyboard, agregaremos en él nuestra primer animación o fotograma como hablamos anteriormente, en este caso por ser una de las más comunes optamos por una DoubleAnimation

<DoubleAnimation Storyboard.TargetName="pelota"
Storyboard.TargetProperty="(Canvas.Top)"
To="250" From="10" Duration="0:0:2" />
Ok, otra vez observemos las propiedades que hemos seteado.

Storyboard.TargetName determina el objeto que se modificará
Storyboard.TargetProperty determina la pripiedad que cambiará de dicho objeto
From indica el valor que obtendrá esta propiedad al comenzar el fotograma
To indica el valor que obtendrá esta propiedad al terminar el fotograma
Duration determina la duración en HH:MM:SS

Miremos también que a Storyboard.TargetProperty le hemos puesto un valor entre paréntesis. Esto es por, como mencioné anteriormente, es una propiedad "indirecta".

Bueno, casi hemos terminado, quedaría ahora asignar acciones a los eventos de los botones para poder ver nuestra animación.
Hasta ahora nuestro código luciría así:

<UserControl x:Class="MiPrimerSilverlight_cs.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<DoubleAnimation Storyboard.TargetName="pelota"
Storyboard.TargetProperty="(Canvas.Top)"
To="250" From="10" Duration="0:0:2" />
</Storyboard>
</UserControl.Resources>

<Canvas x:Name="LayoutRoot" Background="White">
<Button x:Name="btnComenzar" Canvas.Top="10" Canvas.Left="250" Content="Comenzar" Click="btnComenzar_Click" />

<Button x:Name="btnParar" Canvas.Top="40" Canvas.Left="250" Content="Detener" Click="btnParar_Click" />

<Ellipse x:Name="pelota" Fill="Red" Canvas.Top="10" Canvas.Left="100" Height="50" Width="50" />
</Canvas>
</UserControl>
Ahora procederemos a modificar el CodeBehind de nuestra animación de Silverlight.

Primero, en el evento del botón btnComenzar agregamos un objeto de tipo Storyboard y lo instanciamos obteniendo el que creamos anteiormente.
Teniendo este objeto ya, podemos llamar a su método Begin para comenzar la animación

private void btnComenzar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;

sb.Begin();

}
Haciendo algo casi igual, escribimos el evento del botón btnParar para detener nuestra animación:

private void btnParar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;
sb.Pause();
}
Bueno, con esto ya hemos finalizado, nuestro CodeBehind debe lucir así:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MiPrimerSilverlight_cs
{
public partial class Page : UserControl
{
bool isstarted = false;
public Page()
{
InitializeComponent();
}

private void btnComenzar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;

sb.Begin();

}

private void btnParar_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = this.Resources["bounce"] as Storyboard;
sb.Pause();
}
}
}

Eso es todo mis amigos, un ejemplo en demasía simple, pero lindo para comenzar.

Pronto traeré una pequeña modificación de este código para obtener otros resultados.

Queda en ustedes también continuar experimentando en base a esto.

Saludos. Espero sus coments!

ItextSharp - Escribiendo PDF en .Net

La semana pasada tuve que trabajar en una aplicación que generara un reporte en formato PDF, con datos obtenidos de una BBDD.

Es algo muy útil y práctico.

A continuación les dejo una explicación de cómo pueden generar archivos PDF desde .Net utilizando la biblioteca itextsharp que la pueden usar en forma gratuita.

Let's go!

Primero, añadimos a nuestro proyecto una referencia a esta biblioteca (este paso no lo voy a explicar ya que es muy sencillo, si alguien no sabe como hacerlo que me pregunte).

Ahora agregamos a nuestro código:

using iTextSharp.text;
using iTextSharp.text.pdf;
using iTextSharp.text.xml;

namespace PDFApp
{
public class Query
{
public static XmlDocument ExecuteQuery(SqlCommand cmd, ref SqlTransaction trans)
{
if( cmd == null )
throw new ArgumentNullException("cmd", "El comando no puede ser null.");
if( trans == null )
throw new ArgumentNullException("trans", "La transaccion no puede ser null.");

XmlNode xmlrow = null;
XmlReader xmlreader = null;
XmlDocument xmldoc = null;
xmldoc = new XmlDocument();
xmldoc.LoadXml("");
xmlreader = cmd.ExecuteXmlReader();
xmlrow = xmldoc.ReadNode(xmlreader);
while ( xmlrow != null )
{
xmldoc.DocumentElement.AppendChild(xmlrow);
xmlrow = xmldoc.ReadNode(xmlreader);
}
xmlreader.Close();
return xmldoc;
}
public static XmlDocument ExecuteQuery(SqlCommand cmd, SqlConnection conn)
{
XmlDocument xmldoc = null;
SqlTransaction trans = null;
if ( conn != null )
{
if ( conn.State != ConnectionState.Open )
{
conn.Open();
}
cmd.Connection = conn;
}
else
{
throw new ArgumentNullException("cmd", "El comando no puede ser null.");
}
trans = cmd.Connection.BeginTransaction();
xmldoc = new XmlDocument();
xmldoc.LoadXml("");
try
{
cmd.Transaction = trans;
xmldoc = ExecuteQuery(cmd, ref trans);
trans.Commit();
}
catch (Exception ex)
{
trans.Rollback();
throw ex;
}
return xmldoc;
}
}


Y ahora ponemos lo siguiente en el código del evento de un botón de nuestra página.

Document document = new Document(PageSize.A4, 90f, 50f, 90f, 60f);
try
{
XmlDocument Doc = new XmlDocument();
SqlConnection cnx = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=BASEDEDATOS;Data Source=SERVIDORSQL");

//Este es un ejemplo que toma datos de una tabla personas,
//Es muy importante poner "for xml raw !!!
SqlCommand cmd = new sqlcommand("select * from personas for xml raw");

cmd.Connection = cnx;
Doc = Query.ExecuteQuery(cmd, cnx);

// Configuración del documento PDF

string FullPathOut = "c:\\SalidaPDF.pdf";
PdfWriter.getInstance(document, new filestream(fullpathout, filemode.create));

// Fonts y colores

Font font_celdas = FontFactory.getFont(FontFactory.HELVETICA, 8, Font.NORMAL);
Font font_titulo_tabla = FontFactory.getFont(FontFactory.HELVETICA, 9, Font.BOLD,
new Color(255,255,255));
Color color_negro = new color(0, 0, 0);
document.Open();
Table table = new Table(3);
table.BorderWidth = 0;
table.BorderColor = color_negro;
table.Padding = 1;
table.Spacing = 1;
Cell titulo = new cell(new Phrase("Datos de la tabla", font_titulo_tabla));
titulo.Header = true ;
titulo.BackgroundColor = color_negro;
titulo.Colspan = 3;
table.addCell(titulo);
table.addCell(new Phrase("Nombre", font_celdas));
table.addCell(new Phrase("Num. Documento", font_celdas));
table.addCell(new Phrase("Teléfono", font_celdas));
table.endHeaders();
foreach(xmlelement elem in Doc.SelectNodes("/ROOT/row"))
{
table.addCell(new Phrase(Elem.GetAttribute("Columna1"), font_celdas));
table.addCell(new Phrase(Elem.GetAttribute("Columna2"), font_celdas));
table.addCell(new Phrase(Elem.GetAttribute("Columna3"), font_celdas));
}
document.Add(table);
}

catch (XmlException xex)
{
throw new Exception(xex.Message);
}
catch (DocumentException de)
{
throw new Exception(de.Message);
}
catch (IOException ioe)
{
throw new Exception(ioe.Message);
}
finally
{
document.Close();
}
}
}
}




Espero que les sirva! En la próxima continuaré con este tema!

Saludos!

Pasar datos por método POST a terceros

Bueno, un problema que se me presentó trabajando con Asp.net fue en un sitio que tenía que pasar por método POST ciertos datos a una página de pagos electrónicos.

La forma más práctica de pasar datos entre páginas aspx con el método POST es la que se detalla en esta página de forma sencilla:

NetCodigo.webinfo.es

Ahora, esto en el caso que yo describo no sirve, ya que no soy yo quien maneja los datos en la página destino, sino un tercero que espera que se los mande por POST.

Para solucionar esto escribí la siguiente clase, si alguno de ustedes se les presenta el mismo problema no tienen más que copiar/pegar el siguiente código (y después leerlo, obviamente jeje)


using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

/// <summary>
/// Esta clase genera los formularios para mandar por post los datos a otras páginas
/// </summary>
public class RemotePost
{
    System.Collections.Specialized.NameValueCollection _Inputs = new System.Collections.Specialized.NameValueCollection();
    string _Url = "";
    string _Method = "post";
    string _FormName = "form1";<

    /// <summary>
    /// Devuelve o setea la url del medio de pago
    /// </summary>
    public string Url
    {
        get {return _Url;}
        set {_Url = value;}
    }

    /// <summary>
    /// Agrega inputs hidden al formulario
    /// </summary>
    /// <param name="name"></param>
    /// <param name="value"></param>
    public void Add(string name, string value)
    {
        _Inputs.Add(name,value);
    }
  
    /// <summary>
    /// Imprime en el cliente el formulario de compra
    /// </summary>
    public void Post()
    {
        System.Web.HttpContext.Current.Response.Clear();
        System.Web.HttpContext.Current.Response.Write("");
        System.Web.HttpContext.Current.Response.Write(String.Format("< html >< head >< /head >< body onload="\" >", _FormName));
        System.Web.HttpContext.Current.Response.Write(String.Format("<center><form target="\" name="\" method="\" action="\">", _FormName, _Method, Url));

        for (int i = 0; i < _Inputs.Keys.Count; i++)
        {
            System.Web.HttpContext.Current.Response.Write(String.Format("<input name="\" type="\" value="\">", _Inputs.Keys[i], _Inputs[_Inputs.Keys[i]]));
        }
        System.Web.HttpContext.Current.Response.Write("</form></center></body></html>")
    }
}



Bien, ¿y cómo se usa esto?

protected void Button1_Click(object sender, EventArgs e)
{
RemotePost myremotepost = new RemotePost();
myremotepost.Url = "URL DE DESTINO";
myremotepost.Add("NombreItem", "ValorItem");
myremotepost.Add("NombreItem2", "ValorItem2");
myremotepost.Add("NombreIntem3", "ValorItem3");
myremotepost.Post();
}


Espero que esto les pueda servir! Cualquier duda consulten!

Espero sus comentarios!

Saludos!