La Liga SilverlightLa Liga Silverlight | La Liga Silverlight

WCF Ria Services V1.0 para Silverlight 4.- Eliminar un registro de la Base de Datos (Parte 9)

Jorge Levy — Sat, 19 May 2012 00:44:17 +0000

Para terminar con el tema de acciones CRUD con datos por medio de WCF Ria Services en Silverlight, en este post hablaremos del último tema pendiente, eliminar un registro.

Nuevamente la recomendación es leer al menos los dos post previos en el tema para comprender de mejor manera las acciones de editar un registro y de agrear uno nuevo; ya que estaremos reutilizando los conceptos expuestos.

Eliminando el registro

Bajo la misma dinámica que hacer las cosas de la manera más facil, para eliminar un registro necesitaremos de solo dos lineas de código; o tres, en el caso de pedir la confirmación de la acción.

Agregamos un nuevo botón que nos permita eliminar el registro que actualmente se tiene seleccionado en el grid.

Y en la acción del click, escribiremos el código donde indicaremos que al DataView del Domain Data Source le removeremos el registro actual que podemos obtener desde el mismo DataView utilizando la propiedad CurrentItem y haciendo el cast al tipo de objeto que contiene. Y, como ya lo sabemos, tendremos que enviar los cambios a nuestro servicio wcf para que estos sean replicado a la base de datos. Adicionalmente agregaremos una ventana de confirmación de la acción que permitirá al usuario pensar dos veces sobre la acción a realizar.

private void btnRemove_Click(object sender, RoutedEventArgs e)
{
    if (System.Windows.Browser.HtmlPage.Window.Confirm("Estas seguro de querer eliminar el producto"))
    {
        productDomainDataSource.DataView.Remove(
            productDomainDataSource.DataView.CurrentItem as Product);
        productDomainDataSource.SubmitChanges();
    }
}

Cerrando el tema

Si bien, el tema de WCF Ria Services da para mucho más, con temas como validaciones desde el modelo o desde la misma vista, el indicador de actividad, entre muchos otros; con este post podremos decir que hemos cerrado los temas básicos sobre WCF Ria Services para Silverlight.

Gracias y saludos…

WCF Ria Services V1.0 para Silverlight 4.- Agregar un nuevo registro hacia la Base de Datos (Parte 8)

Jorge Levy — Fri, 18 May 2012 22:53:48 +0000

En nuesto post pasado, pudimos ver cómo editar los datos que se presentan en nuestra aplicación silverlight (lado del cliente), pero aún más importante cómo es que se hace la actualización de estos cambio en la base de datos. Si no has leido este post, te recomiendo lo leas, ya que utilizaremos la información mostrada en este siguiente post.

Nuestro siguiente tema abordará el conceto de agregar un nuevo registro, pero además se mostraran un par de puntos a considerar cuando se está agregando un registro.

Agregando un nuevo registro al cliente

Para agregar un nuevo registro solo basta escribir un par de lineas de código, en donde básicamente lo que se hace es crear un nuevo objecto del tipo de datos que vamos a insertar y este se agrega al DomainDataSource que contiene los datos.

Para insertar el código del que hablabamos, en nuestra vista incluiremos un botón que nos permita indicar a la aplicación que queremos agregar un nuevo registro.

Y será en el evento del click donde escribiremos las lineas de creación del objecto del nuevo producto, añadiendolo a los elementos del DataView de nuestro Domain Data Source.

private void btnAddNew_Click(object sender, System.Windows.RoutedEventArgs e)
{
    WcfRiaServices.Web.Models.Product newProduct = new Web.Models.Product();
    productDomainDataSource.DataView.Add(newProduct);
}

Con esto lo que estamos haciendo es agregar un nuevo elemento al Domain Data Source, quién es el encargado de contener los datos de lado del cliente. Y, al igual que cuando queremos editar un elemento, necesitamos replicar este cambio a nuestro servicio que será el que haga la actualización en la base de datos. Como a estas alturas ya tenemos nuestro botón de ‘Guardar Cambios’ esta parte ya la tenemos cubierta.

Algunas consideraciones extras

Debido a que la tabla de Productos tiene algunos campos que no pueden ser nulos, además de que a estas alturas no tenemos ningun tipo de validación ni en nuestro modelo ni al momento de guardar los cambios. Sugiero al momento de crear el nuevo objeto, inicializar las propiedades que así lo requieran

private void btnAddNew_Click(object sender, System.Windows.RoutedEventArgs e)
{
    WcfRiaServices.Web.Models.Product newProduct = new Web.Models.Product();
    newProduct.rowguid = System.Guid.NewGuid();
    newProduct.SafetyStockLevel = 1000;
    newProduct.ReorderPoint = 500;
    newProduct.DiscontinuedDate = System.DateTime.Now;
    newProduct.ModifiedDate = System.DateTime.Now;
    newProduct.SellEndDate = System.DateTime.Now;
    newProduct.SellStartDate = System.DateTime.Now;
    productDomainDataSource.DataView.Add(newProduct);
}

Siguientes post…

Ya solo nos falta revizar como eliminar un registro para poder terminar con el tema de CRUD, permitiendonos así continuar con temas como validaciones o el indicator de acción (Busy Indicator)

Gracias y saludos

Jugando con el ApplicationBar en los elementos de una App Panorama

Jorge Levy — Wed, 02 May 2012 18:00:53 +0000

Publicado por LucioMSP en abril 28, 2012

Hola amigos, el día de hoy les quiero compartir un pequeño tutorial sobre como manipular el ApplicationBar en todos los ítems que agreguemos en una aplicación estilo Panorama, es decir, hacer que se muestre el ApplicationBar solo en ciertos elementos de la Aplicación en Panorama y es que me encontré con varios problemas cuando quise realizar esto, ya que no encontré ningún material que me explicara al 100% lo que quería, además de que varias personas me comentaban que no se podía, o que no sabían, es por eso que quiero darlo a conocer. Parte 1

http://luciomsp.wordpress.com/2012/04/28/jugando-con-el-applicationbar-en-los-elementos-de-una-app-panorama/

Crear y manipular un menú contextual en Silverlight

Amin Espinoza — Wed, 18 Apr 2012 16:20:47 +0000

Una funcionalidad básica de prácticamente cualquier aplicación de escritorio es el uso del clic derecho para el común despliegue de un menú contextual, una funcionalidad que extraño mucho en las páginas web, afortunadamente en Silverlight podemos aprovechar la posibilidad de usar esta herramienta.

Comienza por crear una nueva solución, después, al hacerlo, crea una nueva carpeta llamada Controles, ahí por último crea un nuevo UserControl llamado MenuContextual, al terminar, tu proyecto deberá verse de la siguiente manera.

Ahora en ese UserControl llamado Menu Contextual, coloca el siguiente XAML.








[/sourceode]

Nada complejo, simplemente un rectángulo de fondo y dos TextBlock que servirán como opciones. Cada uno de estos últimos tiene un manejador de eventos igual, este evento debes colocarlo en tu code behind.

[sourcecode lang='csharp']private void txtOpcion_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.Visibility = Visibility.Collapsed;
}

Listo, ese es el menú, ahora solo compila el proyecto para poder hacer reconocible el control que acabas de crear, al haberlo hecho ve a tu MainPage y primero coloca el siguiente XAML.

Ahora reemplaza el tag del Grid que se llama “contContextual” con el siguiente XAML.

Así simplemente le colocas al grid un manejador para el evento MouseRightButtonDown y ahora lo último, colócate en el codeBehind para el evento generado y ahí escribe el siguiente código.

private void contContextual_MouseRightButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
e.Handled = true;
double izquierda = e.GetPosition(contContextual).X;
double arriba = e.GetPosition(contContextual).Y;
ctrlMenu.Margin = new Thickness(izquierda, arriba, 0, 0);
ctrlMenu.Visibility = Visibility.Visible;
}

La primera línea le indicará a tu aplicación que debe cancelar la conducta preestablecida para ese control, es decir, que deje de desplegar el menú contextual de Silverlight, después, por medio del manejador de eventos, podrás utilizar un método para obtener las coordenadas X e Y de tu puntero, para finalmente enviar esos valores al margen de tu control y hacerlo visible.

De este muy sencilla manera es como puedes crear y desplegar un menú contextual dentro de Silverlight.

Puedes descargar el código fuente aquí.

Silverlight RIA Services y Windows Azure TableStorage

RicardoPons — Thu, 29 Mar 2012 08:02:56 +0000

Un escenario común al trabajar en Silverlight y SQL Server es utilizar RIA Services para realizar operaciones CRUD, RIA services ofrece muchas ventajas, pero una vez más al pensar en la nube debemos replantear cual es la mejor solución para minimizar costos de nuestra implementación .

Una alternativa es usar TableStorage de Windows Azure para realizar estas operaciones.

Para lograr esto necesitamos tener instalados los siguientes componentes:

Windows Azure SDK

La última version de RIA Services.

Teniendo todo listo podemos comenzar.

1.- Creamos un nuevo proyecto de silverlight con RIA Services habilitado.

2.- Agregamos un nuevo proyecto Cloud de Windows Azure en limpio.

3.-En nuestro proyecto Cloud de Windows Azure agregamos nuestro WebRole que ya existe en nuestra solución.

4.- En nuestro proyecto Web agregamos un Domain Services en Blanco .

5.-Necesitamos agregar a nuestro proyecto Web las siguientes referencias:

System.Data.Services.Client
Microsoft.WindowsAzure.ServiceRuntime
Microsoft.WindowsAzure.StorageClient
Microsoft.ServiceModel.DomainServices.WindowsAzure

Con esto hemos preparado nuestro entorno para poder trabajar con TableStorage y RIA Services.

TableEntity

Como ya sabemos TableStorage ofrece muchas ventajas una de ellas es que ofrece un número practicamente ilimitado de tablas y registros , además que ofrece una forma estructurada de almacenamiento de nuestra información.

Algo que debemos recordar es que cada registro deben tener obligatoriamente 3 propiedades PartitionKey,RowKey,Timestamp, la combinacion de estas 3 propiedades forman una unica llave que identifica nuestro registro.

Para simplificar este trabajo nosotros podemos hacer uso de la clase TableEntity , esta clase incluye ya estas propiedades.

Ejemplo:

 public class Producto:TableEntity
    {

        Public string Nombre {get;set;}
        public int Precio {get;set;}
    }

Lo que sigue es crear el DataContext para el Table Storage esto lo logramos gracias a la clase TableEntityContext

 public class ProductosDataContext:TableEntityContext
    {
        public ProductosDataContext():base(RoleEnvironment.GetConfigurationSettingValue("Conexion"))
        {

        }

        public TableEntitySet < Producto >  MisProductos
        {
            get
            {
                return base.GetEntitySet();
            }
        }
    }

Por ultimo necesitamos agregar diversos metodos a nuestro Domain Service.

 [EnableClientAccess()]
    public class DomainService1:TableDomainService
    {

        public IQueryable getMisProductos()
        {
            return this.EntityContext.MisProductos;
        }

        public void AgregarProducto(Producto producto)
        {
            this.EntityContext.MisProductos.Add(producto);
        }
        public void EliminarProducto(Producto producto)
        {
            this.EntityContext.MisProductos.Delete(producto);
        }
        public void ActualizarProducto(Producto producto)
        {
            this.EntityContext.MisProductos.Update(producto);
        }
    }

Con esto nostros podemos fácilmente realizar operaciones CRUD con RIA Services y Table Storage.

Puedes descargar el código fuente Aquí

Cambiando la apariencia de un DataGrid automáticamente en un lapso de tiempo

Rodrigo Díaz Concha — Sat, 17 Mar 2012 05:49:59 +0000

El día de hoy hicieron una pregunta muy interesante en el grupo de La Liga Silverlight en Facebook. Aquí la pongo textual:

“AYUDA!!!
Tengo un DataGrid en Silverlight con los siguientes campos {idhorario, horainicio, horafin, dia, idseccion}.
necesito que los campos {horainicio y horafin}, cambien de color en una Hora indicada, me explico, tengo una materia de 12:00 a 2:00pm, y son las 1:00pm en mi reloj, que estos campos aparezcan en otro COLOR… o que llamen la atencion de alguna manera.
COMO HAGO ESTO???”

Se me ocurren unas 3 o 4 maneras para resolver esto, pero decidí irme por la que creo yo la más eficiente: usar la característica de enlace en los setters de los estilos, disponible a partir de Silverlight 5.

¡Manos a la obra!

El Proyecto

Iniciaremos creando un proyecto regular de Silverlight 5 llamado Horarios usando la plantilla de Silverlight Application.

Clase Materia

La primera tarea será modelar la clase para cada materia. A esta clase la llamaremos Materia. A continuación podrán observar la implementación completa:

Puedes leer el artículo completo en esta dirección

Diplomado de desarrollo de aplicaciones para Windows Phone 7.1–Latinoamérica

Rodrigo Díaz Concha — Wed, 14 Mar 2012 16:11:19 +0000

Los invito cordialmente a que se inscriban al Diplomado de desarrollo de aplicaciones para Windows Phone 7.1, impulsado por Microsoft México para todo el mundo! Completamente gratuito, con una duración de 4 semanas.

El diplomado está diseñado para perfil de desarrolladores con un mínimo de 6 meses de experiencia en el lenguaje C# que quieran conocer todo el proceso de desarrollo de aplicaciones para Windows Phone.

Conocer las características de hardware principales de Windows Phone
Diseñar aplicaciones con el lenguaje de diseño Metro
Desarrollar aplicaciones bajo los componentes de Silverlight
Aprovechar la experiencia de navegación de Windows Phone dentro de aplicaciones
Almacenar datos para acceder a ellos desde tu aplicación
Diferenciar entre el distinto uso de comunicaciones y redes
Usar las diferentes APIs del teléfono
Hacer uso del multitasking
Publicar tus aplicaciones en el marketplace de Windows Phone

Iniciaremos el curso el día Lunes 26 de Marzo. Te invitamos a conocer la página del diplomado donde podrás ver el video informativo que explica la metodología del curso para que inicies el diplomado de manera puntual.

Para entrar a la página del curso haz clic aquí.
Para tu inscripción formal, entra a nuestra página de registro aquí.
Únete al grupo de Facebook y de Twitter para mantenerte siempre informado y colabora con la comunidad.

Una vez enviado el registro, tendrás que validar tu inscripción a través de un correo electrónico que recibirás, de otra manera no quedarás inscrito.

Nota: Ten en consideración que los correos que recibirás de este diplomado vendrán del dominio: ti-capacitacion.com por lo que te pedimos revises con tu departamento de TI o en tu correo electrónico que no se bloqueé ningún correo proveniente de este dominio.

Pasos a seguir

He resumido los pasos que debes seguir si estás interesado en este diplomado:

¡Los esperamos!

Consumir servicios web ASP.NET y WCF en Silverlight (Parte 4)

Amin Espinoza — Sat, 18 Feb 2012 07:23:57 +0000

Este artículo es la cuarta parte de una mini serie que intenta enseñarte como crear, publicar y ahora consumir servicios web, el primer artículo habla de la base de datos que has estado usando, puedes ver aquí como crear servicios web ASP.NET y aquí como crear servicios WCF.

Creo que la mejor manera de manejar ambos servicios anteriormente creados es en una sola aplicación, para ahorrar la parte del diseño te dejo una imagen guía.

Pero para ahorrar aún mas, puedes descargar aquí el proyecto de inicio.

Ya con el proyecto inicial, en Visual Studio, da clic derecho sobre tu proyecto y selecciona la opción de “Agregar referencia de servicio”.

En el cuadro de diálogo, comienza con el servicio web ASP.NET, recuerda la URL, algo así como “http://localhost/ServicioASP/Service1.asmx” y después presiona “Go”, deberás ver algo así.

Después de presionar “Ok”, repite la misma operación pero ahora con la liga del servicio WCF.

Hasta aquí, como puedes ver, el procedimiento es exactamente el mismo para ambos tipos de servicios, la diferencia comenzará de aquí en adelante, vamos primero a declarar cada uno de los objetos de los servicios.

//servicioASP
ServicioDatosASP.Service1SoapClient servicioASP = new ServicioDatosASP.Service1SoapClient();

//servicioWCF
ServicioDatosWCF.Service1Client servicioWCF = new ServicioDatosWCF.Service1Client();

Como puedes ver, la diferencia es grande desde aquí, el protocolo de servicio de ASP.NET es SOAP, cuando en WCF utilizas un cliente sin ese protocolo, en los manejadores de eventos para consultar información, tendrás las diferentes líneas.

Consultar Información

Para el servicio ASP.NET necesitas crear primero una clase, de la siguiente forma.

public class NombreContacto
{
public string Nombre { get; set; }
public string Apellidos { get; set; }
public string Telefono { get; set; }
public string Email { get; set; }
}

Y ya con la clase creada, poder usar un evento clic para poder consultar al servicio web.

private void btnObtenerContactosASP_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioASP.MostrarTodosLosContactosCompleted += new EventHandler(servicioASP_MostrarTodosLosContactosCompleted);
servicioASP.MostrarTodosLosContactosAsync();
}

void servicioASP_MostrarTodosLosContactosCompleted(object sender, ServicioDatosASP.MostrarTodosLosContactosCompletedEventArgs e)
{
if (e.Error == null)
{
List listaContactos = new List();
foreach (string entidad in e.Result)
{
NombreContacto contacto = new NombreContacto();
contacto.Nombre = entidad.Split('|')[1];
contacto.Apellidos = entidad.Split('|')[2];
contacto.Telefono = entidad.Split('|')[3];
contacto.Email = entidad.Split('|')[4];
listaContactos.Add(contacto);
}

dgDatosASP.ItemsSource = listaContactos;
}
}

Por el lado de WCF tendrás lo siguiente.

private void btnObtenerContactosWCF_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioWCF.MostrarTodosLosContactosCompleted += new EventHandler(servicioWCF_MostrarTodosLosContactosCompleted);
servicioWCF.MostrarTodosLosContactosAsync();
}

void servicioWCF_MostrarTodosLosContactosCompleted(object sender, ServicioDatosWCF.MostrarTodosLosContactosCompletedEventArgs e)
{
if (e.Error == null)
{
dgDatosWCF.ItemsSource = e.Result;
}
}

¿Como ves? Una gran diferencia ¿no es así? Bueno, también debes considerar que por el lado de XAML hay una diferencia con los DataGrid que estás usando.

Este es el DataGrid que estamos usando para el servicio web ASP.NET.

Este es el DataGrid que estamos usando para el servicio WCF.

Si lo pongo en palabras sencillas, la lista que recibimos del servicio WCF es la misma lista que alimenta al DataGrid, solo que al hacer un enlazado de datos le estarás diciendo a que columna debe ir que información.

Insertar Información

Para hacer esta operación los métodos requeridos son los siguientes, primero vamos con el servicio web ASP.NET.

private void btnIngresarASP_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioASP.InsertarNuevoContactoCompleted += new EventHandler(servicioASP_InsertarNuevoContactoCompleted);
servicioASP.InsertarNuevoContactoAsync(txtNombreNuevoASP.Text, txtApellidosNuevoASP.Text, txtTelefonoNuevoASP.Text, txtCorreoNuevoASP.Text);
}

void servicioASP_InsertarNuevoContactoCompleted(object sender, ServicioDatosASP.InsertarNuevoContactoCompletedEventArgs e)
{
if (e.Error == null)
{
txtNombreNuevoASP.Text = string.Empty;
txtApellidosNuevoASP.Text = string.Empty;
txtTelefonoNuevoASP.Text = string.Empty;
txtCorreoNuevoASP.Text = string.Empty;
MessageBox.Show("Tu nuevo contacto ha sido agregado");
}
}

En el caso del servicio WCF, será de la siguiente forma.

private void btnIngresarWCF_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioWCF.InsertarContactoCompleted += new EventHandler(servicioWCF_InsertarContactoCompleted);
ServicioDatosWCF.Contacto nuevoContacto = new ServicioDatosWCF.Contacto();
nuevoContacto.Nombre = txtNombreNuevoWCF.Text;
nuevoContacto.APELLIDOS = txtApellidosNuevoWCF.Text;
nuevoContacto.TELEFONO = txtTelefonoNuevoWCF.Text;
nuevoContacto.EMAIL = txtCorreoNuevoWCF.Text;
servicioWCF.InsertarContactoAsync(nuevoContacto);
}

void servicioWCF_InsertarContactoCompleted(object sender, ServicioDatosWCF.InsertarContactoCompletedEventArgs e)
{
if (e.Error == null)
{
txtNombreNuevoWCF.Text = string.Empty;
txtApellidosNuevoWCF.Text = string.Empty;
txtTelefonoNuevoWCF.Text = string.Empty;
txtCorreoNuevoWCF.Text = string.Empty;
MessageBox.Show("Tu nuevo contacto ha sido agregado");
}
}

Actualizar información

Para poder modificar elementos de nuestros contactos lo primero que debes hacer es manejar el manejador para el evento SelectionChanged de los respectivos DataGrid.

En el caso de ASP.NET te debe quedar así.

private void dgDatosASP_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
contactoElegidoASP = new NombreContacto();
contactoElegidoASP = dgDatosASP.SelectedItem as NombreContacto;
txtNombreModificarASP.Text = contactoElegidoASP.Nombre;
txtApellidosModificarASP.Text = contactoElegidoASP.Apellidos;
txtTelefonoModificarASP.Text = contactoElegidoASP.Telefono;
txtCorreoModificarASP.Text = contactoElegidoASP.Email;
}

Y en el caso de WCF será así.

private void dgDatosWCF_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
contactoElegidoWCF = new ServicioDatosWCF.Contacto();
contactoElegidoWCF = dgDatosWCF.SelectedItem as ServicioDatosWCF.Contacto;
txtNombreModificarWCF.Text = contactoElegidoWCF.Nombre;
txtApellidosModificarWCF.Text = contactoElegidoWCF.APELLIDOS;
txtTelefonoWCF.Text = contactoElegidoWCF.TELEFONO;
txtCorreoModificarWCF.Text = contactoElegidoWCF.EMAIL;
}

Y en el caso del evento clic de los respectivos botones, te debe quedar de la siguiente manera.

Para el evento del botón de ASP.

private void btnModificarASP_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioASP.ActualizarContactoCompleted += new EventHandler(servicioASP_ActualizarContactoCompleted);
servicioASP.ActualizarContactoAsync(contactoElegidoASP.ID, txtNombreModificarASP.Text, txtApellidosModificarASP.Text, txtTelefonoModificarASP.Text, txtCorreoModificarASP.Text);
}

void servicioASP_ActualizarContactoCompleted(object sender, ServicioDatosASP.ActualizarContactoCompletedEventArgs e)
{
if (e.Error == null)
{
txtNombreModificarASP.Text = string.Empty;
txtApellidosModificarASP.Text = string.Empty;
txtTelefonoModificarASP.Text = string.Empty;
txtCorreoModificarASP.Text = string.Empty;
MessageBox.Show("Tu registro ha sido actualizado");
}
}

Y para el evento del botón WCF.

private void btnModificarWCF_Click(object sender, System.Windows.RoutedEventArgs e)
{
servicioWCF.ActualizarContactoCompleted += new EventHandler(servicioWCF_ActualizarContactoCompleted);
servicioWCF.ActualizarContactoAsync(contactoElegidoWCF);
}

void servicioWCF_ActualizarContactoCompleted(object sender, ServicioDatosWCF.ActualizarContactoCompletedEventArgs e)
{
if (e.Error == null)
{
txtNombreModificarWCF.Text = string.Empty;
txtApellidosModificarWCF.Text = string.Empty;
txtTelefonoWCF.Text = string.Empty;
txtCorreoModificarWCF.Text = string.Empty;
MessageBox.Show("Tu registro ha sido actualizado");
}
}

¡Listo! De esta manera podrás comenzar a hacer grandes aplicaciones, hay muchas “best practices” que debes considerar aquí, en este caso los fines son meramente didácticos, ya solo te falta a ti encontrar la opción de borrar elementos para que puedas comenzar con la base mas importante para poder crear aplicaciones empresariales de la manera mas sencilla posible.

Si tienes alguna duda o error con tu aplicación, puedes descargar el código aquí.

Ya lo sabes, si aún así te estás trabando en algo, solo escríbelo en los comentarios, con gusto veremos cuales son los problemas.

Crear y publicar una aplicación WCF (Parte 3)

Amin Espinoza — Sat, 18 Feb 2012 07:23:12 +0000

En la primer entrada de esta mini serie de artículos comenzamos a ver las bases para crear una base de datos que utilizaríamos, en la segunda entrada vimos como crear y publicar un servicio web ASP.NET, ahora la idea es hacer exactamente lo mismo pero con una aplicación WCF para abarcar diferentes escenarios.

Así que vamos a comenzar por crear la aplicación WCF

Escoge la opción de WCF Service Application, recuerda en esta ocasión escoger el Framework 4.

La estructura de tu proyecto quedará de la siguiente manera.

La clase IService.cs nos servirá como interfaz de nuestro proyecto, es decir, aquí será en donde coloquemos las funciones públicas que permitiremos que puedan ser accedidas vía web. La clase Service1.svc.cs será la encargada de colocar toda la funcionalidad requerida de nuestro servicio, por ahora esas dos clases son las que nos interesan. Para continuar da clic derecho en tu proyecto y selecciona la opción Add>New Item, ahí en la sección Data elige Linq to SQL Classes.

La pantalla en blanco te servirá para comenzar a crear tu modelo de datos simplemente arrastrando tus tablas (para esto debiste haber creado ya una conexión a tu base de datos desde tu pestaña de Server Explorer).

Ya con tu modelo creado y tu tabla agregada, entonces podremos comenzar a crear los mismos tres métodos que vimos en el artículo anterior, comenzaremos en la clase Service1.svc.cs creando las operaciones.

Para empezar podrás notar que la clase hereda las propiedades de la clase IService1, es por ello que trabajan de una forma muy vinculada.

Como mencioné en el artículo anterior, en el servicio web ASP.NET mostré una forma de hacerlo completamente diferente, pero aclaro que de esta manera también podría ser hecho, mi intención es demostrar la forma mas antigua y básica que hay así como la que a mi gusto no solo es la mas nueva, sino que la mas sencilla.

Lo primero que debemos hacer es declarar un objeto de tipo ModeloDatosDataContext, esta clase puede variar de acuerdo a como nombraste a tu modelo anterior y será justamente eso, un contexto, un comunicador entre tus tablas inlcuidas dentro de tu modelo y tus operaciones. La sintaxis es la siguiente.

ModeloDatosDataContext contexto;

Consultar información

Este método nos dará toda la información de nuestros contactos.

public List MostrarTodosLosContactos()
{
contexto = new ModeloDatosDataContext();
List listaResultado = (from l in contexto.Contactos
select l).ToList();
return listaResultado;
}

Creamos un método que nos regresará una lista del mismo tipo de la clase que necesitamos obtener, de esta forma y utilizando una sentencia LINQ muy sencilla obtendrás todos los registros.

Insertar registros

Este método nos dará la posibilidad de insertar nuevos registros en nuestra tabla.

public bool InsertarContacto(Contacto nuevoContacto)
{
contexto = new ModeloDatosDataContext();
contexto.Contactos.InsertOnSubmit(nuevoContacto);
contexto.SubmitChanges();
return true;
}

Esto es sumamente sencillo, utilizando el argumento recibido, el método InsertOnSubmit de la clase Contactos de nuestro modelo se encargará de agregar la nueva entidad y mantenerla en espera de poder ser ingresada y le método SubmitChanges termina la operación insertando los datos en la tabla correspondiente.

Actualizar registros

Este método nos dará la posibilidad de modificar a los registros que ya tenemos, ya sea en uno solo o en todos sus atributos.

public bool ActualizarContacto(Contacto contactoActualizado)
{
contexto = new ModeloDatosDataContext();
ModeloDatosDataContext contextoOriginal = new ModeloDatosDataContext();

Contacto contacto = (from c in contextoOriginal.Contactos
where c.ID == contactoActualizado.ID
select c).Single();

contexto.Contactos.Attach(contactoActualizado, contacto);
contexto.SubmitChanges();
return true;
}

Aquí debido a utilizaremos un contexto para consultar nuestra información, simplemente debemos crear un objeto del mismo tipo para que uno pueda consultar y el otro se pueda encargar de ingresar la información, la mecánica es la misma que en el método de inserción, pero utilizarás el método Attach junto a sus dos parámetros requeridos.

Ya que tenemos los tres métodos que estarás utilizando, vete ahora a tu clase IService.cs y aquí debes crear los contratos para permitir a tus métodos ser operaciones accesibles desde la web. Tu clase debe quedar de la siguiente forma.

[ServiceContract]
public interface IService1
{
[OperationContract]
List MostrarTodosLosContactos();

[OperationContract]
bool InsertarContacto(Contacto nuevoContacto);

[OperationContract]
bool ActualizarContacto(Contacto contactoActualizado);

}

Ya teniendo todo esto listo, presiona F5 para ejecutar tu servicio (ten la pestaña de IService1.cs en pantalla) y el resultado será así.

Selecciona la ruta remarcada en la imagen de arriba y lo que obtendrás será esta pantalla.

La primer diferencia que notarás con respecto a los servicios ASP.NET es que estos no exponen los métodos que contienen, la única forma de poder acceder a ellos es mediante un cliente, y eso es justamente lo que haremos, detén la ejecución y ahora ejecuta de nuevo, pero con la clase Service1.svc.cs en primer plano, de esta manera ejecutarás de manera automática una aplicación llamada WCF Test Client, que te permitirá ver tus métodos y trabajar con ellos.

Si todo está en orden, entonces podrás publicar tu aplicación. El proceso es exactamente el mismo que en el artículo anterior, para no redundar en la información puedes ver la sección “Publicar mi servicio en IIS”, pero hay una diferencia al momento de convertir tu carpeta en aplicación.

Cuando aparece el cuadro de diálogo de “Agregar aplicación”, en este caso deberás cambiar el Grupo de aplicaciones con el que publicarás, en lugar de utilizar DefaultAppPool selecciona ASP.NET v4.0 como se ve en la imagen.

Si ya tienes tu carpeta virtual lista, sigue el mismo procedimiento que en el servicio web ASP.NET para publicar vía Visual Studio 2010. Cuando tu servicio web haya sido satisfactoriamente publicado, ve a un explorador y escribe una dirección con los siguientes términos http://NombreDeTuServidor/NombreDeTuCarpetaVirtual/NombreDeTuServicio.svc en mi caso el resultado quedó como “http://servidoramin/ServicioWCF/Service1.svc”.

¡Listo! Tenemos la segunda liga de acceso a nuestros dos servicios, esta liga, junto a la anterior las estaremos utilizando en el siguiente artículo, al consumir datos de nuestros servicios web en una aplicación de Silverlight.

Puedes descargar la aplicación aquí.

Crear y publicar un servicio web ASP.NET (Parte 2)

Amin Espinoza — Sat, 18 Feb 2012 07:22:20 +0000

En la primer entrada de esta mini serie de artículos relacionados vimos la introducción de la manera de como podemos vincular bases de datos con Silverlight, vamos a continuar con los servicios web ASP.NET.

Crea un nuevo proyecto en Visual Studio, de tipo Web Service Application ¡Aguas! Debes haber seleccionado el Framework 3.5.

Al aparecer el proyecto generado obtendrás una pantalla como la siguiente.

Como puedes ver el método lleva antes el prefijo [WebMethod] y es público, debes considerar estos dos elementos para poder hacer tu método accesible desde la web, y es aquí en donde nos encargaremos de crear tres métodos, uno de consulta, uno de edición y uno de actualización (el de borrar quedará de tarea ¿Te late?).

Antes de continuar, debo aclarar algo muy importante, seré un tanto injusto al crear estos servicios comparados con los WCF pero quiero hacerlo de la forma mas básica para que de paso puedas cubrir una gama mas amplia de tecnologías, pero para calmar mi conciencia debo decirte que puedes mezclar tecnologías sin problemas.

Lo primero que insertaremos aquí será un método privado que nos permitirá el acceso a nuestra cadena de conexión.

private string cadenaConexion()
{
string cadena = "Data Source=SERVIDORAMIN;Initial Catalog=Directorio;Integrated Security=True;";
return cadena;
}

Consultar información

Este método nos dará toda la información de nuestros contactos.

[WebMethod]
public List MostrarTodosLosContactos()
{
List listaClientes = new List();
SqlConnection conexion = new SqlConnection(cadenaConexion());
SqlDataAdapter adaptador;
string Consulta = "SELECT * FROM Contacto";
DataTable datos = new DataTable();

adaptador = new SqlDataAdapter(Consulta, conexion);
adaptador.Fill(datos);

foreach (DataRow registros in datos.Rows)
{
listaClientes.Add(registros["ID"].ToString() + "|" + registros["Nombre"].ToString() + "|" + registros["APELLIDOS"].ToString() +
"|" + registros["TELEFONO"].ToString() + "|" + registros["EMAIL"].ToString());
}

return listaClientes;
}

Creamos una lista de tipo string y por medio de los datos que obtenemos de la consulta vamos llenando la lista, así de simple.

Insertar registros

Este método nos dará la posibilidad de insertar nuevos registros en nuestra tabla.

[WebMethod]
public int InsertarNuevaFecha(string Nombre, string Apellidos, string Telefono, string Email)
{
string cadenaActualizar = "INSERT INTO Contacto (Nombre, APELLIDOS, TELEFONO, EMAIL) values (@nombre, @apellidos, @telefono, @email)";
int t = 0;
using (SqlConnection conexion = new SqlConnection(cadenaConexion()))
{
SqlCommand comando = new SqlCommand(cadenaActualizar, conexion);
conexion.Open();
comando.Parameters.AddWithValue("@nombre", Nombre);
comando.Parameters.AddWithValue("@apellidos", Apellidos);
comando.Parameters.AddWithValue("@telefono", Telefono);
comando.Parameters.AddWithValue("@email", Email);
t = comando.ExecuteNonQuery();
conexion.Close();
}
return t;
}

Como puedes ver, lo que hacemos es simplemente recibir los parámetros y en base a ellos insertar un nuevo elemento en nuestra tabla, como es obligatorio que TODOS los métodos accesibles desde web regresen un valor, en este caso regresamos el valor de las operaciones realizadas.

Actualizar registros

Este método nos dará la posibilidad de modificar a los registros que ya tenemos, ya sea en uno solo o en todos sus atributos.

[WebMethod]
public int ActualizarContacto(string ID, string Nombre, string Apellidos, string Telefono, string Email)
{
string cadenaActualizar = "UPDATE Contacto SET Nombre=@nombre, APELLIDOS=@apellidos, TELEFONO=@telefono, EMAIL=@email WHERE (ID =" + ID + ")";
int t = 0;
using (SqlConnection conexion = new SqlConnection(cadenaConexion()))
{
SqlCommand comando = new SqlCommand(cadenaActualizar, conexion);
conexion.Open();
comando.Parameters.AddWithValue("@nombre", Nombre);
comando.Parameters.AddWithValue("@apellidos", Apellidos);
comando.Parameters.AddWithValue("@telefono", Telefono);
comando.Parameters.AddWithValue("@email", Email);
t = comando.ExecuteNonQuery();
conexion.Close();
}
return t;}

Aquí de una forma muy parecida al método anterior recibimos todos los argumentos y con la sentencia SQL actualizamos los datos en función de su campo ID.

Bien, si ya tienes los métodos completados y ejecutas tu servicio web, el resultado será muy similar a esto.

Vamos a hacer una pequeña prueba y seleccionar el método MostrarTodosLosContactos, veras una pantalla así.

Si pruebas en los otros dos métodos notarás que te piden que llenes información, esto es debido a los parámetros que los métodos necesitan para poder operar de manera adecuada. En el caso del método que usamos, presiona el botón Invocar y tu resultado debe ser este.

Así es, nada mas que un XML que nos estará regresando la información que le solicitamos. Hasta aquí ya tenemos nuestro servicio web realizado, pero para que Silverlight pueda consumirlo, deberemos publicarlo en nuestro IIS, así que vamos para eso.

Publicar mi servicio en IIS

En la ruta C:\inetpub\wwwroot (debes tener instalado IIS para esto), crea una nueva carpeta.

Ya con la carpeta creada, vete al administrador de tu equipo. (Presiona la tecla de Windows + R y escribe el comando compmgmt.msc), selecciona al administrador de IIS, expande los nodos de la derecha hasta llegar a la posición de la siguiente imagen.

Al seleccionar la opción marcada te aparecerá una ventana como la de abajo, solo da clic en aceptar.

Y ahora verás que tu antigua carpeta se verá de la siguiente forma.

Ahora podremos regresar a Visual Studio y seleccionar en el menú de “Build” la opción de “Publish Service”.

En el cuadro de diálogo escoge la opción de File System en la opción de Publish method y en la de Target Location presiona el botón de “Examinar” (el de los tres puntitos pues).

Al presionar el botón de examinar, tendrás en pantalla ahora la siguiente ventana (si no te apareció es porque no estás corriendo tu Visual Studio en modo administrador), ahí simplemente selecciona la carpeta que acabas de crear.

Tu cuadro de diálogo inicial quedará de la siguiente forma.

Solo basta que presiones “Publish” y veas en la esquina inferior izquierda y en tu ventana de Output los siguientes mensajes.

Ya que tienes ese letrero, puedes escribir la url de tu sitio con la siguiente secuencia http://NombreDeTuServidor/NombreDeTuCarpeta/NombreDeTuServicio, en mi caso quedó así “http://localhost/ServicioASP/Service1.asmx”.

¡Listo! Ya tienes tu servicio web publicado. En el artículo cuatro de esta serie te mostraré como consumir este servicio web en tu aplicación, por ahora solo prueba los métodos, estos deben funcionar exactamente igual que en tu aplicación en modo de desarrollo ahora que ya esta en modo productivo.

Descarga aquí el código de ejemplo.

Crear y consumir servicios web en Silverlight (Parte 1)

Amin Espinoza — Sat, 18 Feb 2012 07:21:11 +0000

Cuando desarrollas una aplicación en la mayoría de los casos es necesario que para su correcto funcionamiento deba obtener su información desde una fuente en específico, puedes hacerlo desde una fuente RSS con un archivo XML o un archivo JSON, pero si tu necesidad va mas allá y debes consumir tu información desde una base de datos, tus opciones se limitan a una sola posibilidad, consumir un servicio web.

Los servicios web no son nada mas que intermediarios entre la aplicación Silverlight y la base de datos, dado que Silverlight se ejecuta en el “lado cliente” no le es posible estar en contacto con la base de datos, la cual se encuentra en el “lado servidor”, dado que el servicio web se encuentra alojado en el servidor, puede acceder a la base de datos, solicitar la información y enviarla a nuestra aplicación, si lo vemos en un diagrama, el resultado si lo quieres ver de la forma mas básica es algo como esto.

Bien, ya habiendo explicado de esta forma el funcionamiento, puedo comenzar a entrar en materia, hay dos tecnologías principales para poder crear un servicio web bajo el entorno Microsoft, y lo encierro en ese campo para descartar otras plataformas, como Java y PHP que son muy recurridas para esta funcionalidad también (y que Silverlight puede consumir sin problema).

Las dos tecnologías que te menciono son los servicios web ASP y WCF, ambos tienen características particulares que los hacen únicos, vamos viendo cuales pueden ser.

Servicios ASP.NET

Son los primeros que aparecieron, en la actualidad no fueron incluidos como parte del Framework 4.0 de .NET para dar paso a sus sucesores (WCF), pero aún puedes incluirlos dentro de una solución como parte de esta (a mí no me late hacerlo, siempre he optado por tener el servicio web en una solución y la aplicación en otra, al menos en entornos productivos). La razón por la que debas utilizarlos obedece sencillamente a que el servidor donde vas a publicar tu servicio web aún no cuenta con el Framework 4.0 pues de lo contrario la mejor recomendación será usar un servicio WCF.

Servicios WCF

Son la nueva herramienta para intercambio de información, abismalmente mas equipados con herramientas y funcionalidades, tantas que son considerados como aplicaciones, es decir, aplicaciones orientadas a servicios, fueron creados efectivamente para reemplazar a los servicios ASP.NET y dotarlos de mejor funcionalidad, enseguida veremos cuales son.

Para comenzar a hacer pruebas lo primero que debes hacer es crear una base de datos, nada del otro mundo, simplemente crea una tabla que contenga los siguientes datos.

Recuerda que el campo ID debe tener la propiedad de Identidad. Ya que tengas la tabla completa, ahora llénala con unos cuantos registros.

Esta tabla será la misma que utilizaremos en ambos servicios, así que ya podemos dejar de lado a SQL, y comenzar con la creación de los servicios. Así que tu escoges hacia donde ir ahora.

Parte 2.- Crear y publicar un servicio web ASP.NET

Parte 3.- Crear y publicar un servicio WCF

Parte 4.- Consumir mis servicios web en una aplicación Silverlight

Uso y creación de Behaviors en Silverlight

Amin Espinoza — Mon, 13 Feb 2012 01:29:05 +0000

Las conductas (o behaviors en inglés) son una de esas funcionalidades que he visto que muy pocos utilizan y que en lo personal se me hacen una herramienta sumamente potente, reutilizable y muy fáciles de dominar, por eso me animé a escribir sobre ellas.

Para empezar creo que lo mejor es definir que es lo que pueden hacer o para que fueron hechas ¿no crees? Bueno, pues las conductas tienen un fin muy sencillo, hacerte la vida fácil al momento de implementar funcionalidad específica en tus controles, veamos un ejemplo para poder entenderlo mejor.

Utilizar una conducta de forma básica

Comienza por crear un nuevo proyecto en Expression Blend (si, aquí es en donde trabajaremos en esta ocasión), y vamos a colocar un rectángulo en la pantalla, para quedar de la siguiente manera.

Utilizar las conductas no es nada del otro mundo, solo necesitamos presionar el botón de “Assets” para poder escribir el nombre de una conducta, la primera por la que comenzaremos se llama “MouseDragElementBehavoir”, el resultado de tu pantalla debe ser algo así.

Solo debes arrastrarla hasta el control en cuestión para que en tu pestaña de objetos puedas ver esto.

De esta forma el resultado es un control arrastrable por toda la interfaz, dando funcionalidad de una forma muy práctica.

Utilizar una conducta con parámetros

Hay algunas conductas previamente creadas que necesitan el uso de algunos argumentos para poder funcionar, para que veas como es esto, vamos a implementar en nuestro mismo rectángulo una conducta que requiere cierta configuración, pero antes deberemos crear una animación para el control, por lo que vamos a usar un nuevo control, para dejar intacto al anterior y al nuevo es al que le pondremos una nueva animación.

Crea la animación que gustes, al final el XAML que llevamos hasta ahora es algo así.

Y de nuevo vas a llamar una conducta, ahora usaremos “Control Storyboard Animation”.

Al haber arrastrado esta conducta dentro de tu control, en la pestaña de propiedades aparecerán los argumentos que debemos poder utilizar.

Como puedes ver, aquí al implementar la conducta debes poder establecerle ciertos elementos, al final, tu resultado puede ser algo como esto.

Si lo ves por XAML el resultado deberá ser así.

La gran ventaja que tienes al implementar animaciones es que simplemente te ahorras muchísimo tiempo y además código por el lado de C#, entonces hasta aquí hemos visto como puedes usarlas en tu favor, pero como buen desarrollador no quedarás satisfecho con esto, sino que irás queriendo crear nuevas conductas de acuerdo a tus necesidades.

Crear tus propias conductas

Vamos a brincarnos a Visual Studio 2010, lo primero que debemos hacer es crear una clase por separado y después agregar la referencia System.Windows.Interactivity.

Una vez teniendo la clase “MiConducta” necesitamos crear la referencia al ensamblado que acabamos de llamar.

using System.Windows.Interactivity;

Ahora si, con el ensamblado y la referencia, modifica la línea que declara la clase de la siguiente forma

public class MiConducta : TargetedTriggerAction

De esta forma la clase que recién acabas de crear heredará de la clase TargetedTriggerAction y a su vez, tendrá la funcionalidad por medio de su constructor para un rectángulo (aclaro que si modificas esta funcionalidad, puedes hacerla sin problema para cualquier elemento que necesites, solo por ejemplo escogí al rectángulo).

Después vamos a declarar tres objetos que nos servirán para la funcionalidad de nuestra conducta.

Shape elementoObjetivo;
Brush color1;
Brush color2 = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));

Y ahora, gracias a la herencia que acabamos de asignar, podremos utilizar un método sobrecargado que se llama Invoke, este es el método que se desencadena al momento de llamar a la conducta dentro de nuestro XAML, y debe quedarte así.

protected override void Invoke(object parameter)
{
elementoObjetivo = (Shape)this.AssociatedObject;
color1 = (Brush)elementoObjetivo.Fill;
elementoObjetivo.MouseLeftButtonDown += elementoObjetivo_MouseLeftButtonDown;
elementoObjetivo.MouseLeftButtonUp += elementoObjetivo_MouseLeftButtonUp;
}

Como puedes ver, estamos utilizando dos manejadores para cuando nuestro objeto en cuestión sea utilizado, los dos manejadores tendrán lo siguiente.

void elementoObjetivo_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
elementoObjetivo.Fill = color1;
}

void elementoObjetivo_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
elementoObjetivo.Fill = color2;
}

Si compilas tu aplicación, ya podrás comenzar a utilizar tu nueva conducta desde Expression Blend.

Conclusión

Crear conductas es una forma genial de ahorrar muchas líneas de código para personalizar tus controles, pueden quitarle a los diseñadores los problemas de interactuar con código y lo mejor es que pueden ser reutilizables si las creas como una biblioteca de clases, así que comienza a entretenerte con esta gran funcionalidad de Silverlight.

Puedes descargar el código desde aquí.

Desplegando un ChildWindow en objetos Window en Silverlight 5

Rodrigo Díaz Concha — Tue, 17 Jan 2012 16:33:41 +0000

Silverlight 5 cuenta con muchas características enfocadas principalmente a la construcción de aplicaciones de negocio, una de ellas es la creación de Ventanas de Sistema.

Sin embargo, si necesitas mostrar un ChildWindow dentro de una ventana creada dinámicamente, el comportamiento que obtendrás tal vez no es el esperado, y es que el ChildWindow se mostrará en la raíz de la aplicación (comunmente MainPage) y no en la ventana nueva en donde estás ejecutando el código.

Por ejemplo, en la siguiente figura la aplicación crea la ventana de la izquierda…

…pero al crear el objeto ChildWindow dentro de la ventana en donde esperas que se despliegue:

Este comportamiento no es el esperado ¿cierto?

En este artículo explicaré cómo puedes obligar que el ChildWindow se dibuje adecuadamente en la ventana que le corresponda.

Puedes leer el artículo completo aquí

Día 31: Promoviendo tu aplicación

Amin Espinoza — Sat, 31 Dec 2011 18:05:16 +0000

Esta es una traducción de Day 31: Promoting Your App, puedes encontrar el artículo aquí en su versión original en inglés.

Hacer que los usuarios encuentren tu aplicación puede parecer como algo que está fuera de tus manos, pero estás equivocado. Hay muchas cosas que puedes hacer para manejar la atención hacia tu aplicación. Esta sección se enfoca en algunas de las mejores prácticas que deberías utilizar para cada aplicación que crees.

La primera semana es vital

A menos de que tu aplicación se convierta en una gran sensación, es altamente posible que la primer semana de tu aplicación en el marketplace será en donde veas el más alto número de descargas diarias. Obtener exposición en la categoría “Nuevo” es una oportunidad muy buena y necesitas asegurarte de que estás manejando esto en una forma que hará a tu aplicación brillar por mucho mas que solo unos días. Al final, tu meta es catapultarla desde la categoría Nuevo a la categoría Top Apps. Los cuatro o cinco días que tienes que esperar para que tu aplicación sea aprobada podrían ser aprovechados para ejecutar una estrategia para hacer pública la expectativa de tu aplicación.

Enlazar a tu aplicación

Cuando ingresas tu aplicación por primera vez en el Marketplace, incluso antes de que la aplicación sea aprobada, tienes ya asignado un “deep link” que puedes usar para dirigir a las personas hacia tu aplicación usando una dirección web ordinaria. Aquí está el ejemplo del enlace a una de mis aplicaciones, MathMaster:

http://www.windowsphone.com/es-MX/apps/f08521cd-1cff-df11-9264-00237de2db9e

Este enlace te lleva a una página que intentará abrir Zune en la máquina del usuario, y después redireccionarlo a la página de tu aplicación en el Marketplace. Este enlace no funcionará a menos que tu aplicación haya sido aprobada. Recomendamos usar este link cada vez que puedas, especialmente en el sitio personalizado que creaste para tus aplicaciones. Estás planeando hacer eso ¿No es así?

Crear un portal web para tus aplicaciones

Una cosa importante que deberías haber aprendido al pasear por el Marketplace en el Día 27 de la serie original de Windows Phone fue que tu habilidad para discutir acerca de tus aplicaciones en el Marketplace es muy limitada. Unos cuantos pantallazos y aproximadamente 2,000 caracteres es todo lo que tienes. Al crear un sitio web para tus aplicaciones, creas muchas nuevas oportunidades para ti mismo.

1. Puedes crear conexiones reales con tus usuarios. El Marketplace de Windows Phone no te da ninguna indicación de quienes son tus usuarios. Un sitio web te permite interactuar con tus fans.

2. Puedes dar un monto de información muy enriquecido acerca de tu aplicación, incluyendo videos y otro contenido promocional que pueda hacer a tu aplicación mas atractiva.

3. Puedes relacionar a tus aplicaciones. El Marketplace no siempre hace un gran trabajo al promocionar tus otras aplicaciones a clientes potenciales, así que has que tu sitio web permita que eso suceda.

4. Tu aplicación ahora es detectable por gente que ni siquiera esta buscando activamente en el Marketplace.

5. Este sitio web no tiene que ser exactamente un sitio web por completo. No hay nada malo con crear una página en Facebook o cualquier otra red social que puedas personalizar. La idea final de este proceso es proveer un destino para tus fans, así ellos pueden pasar la voz acerca de tu genial aplicación.

Si quieres ver una plantilla genial para crear una página personalizada para tu aplicación, checa esta plantilla de Windows Phone en CodePlex. Es una página personalizable que se ve genial, usa pantallazos de tu aplicación, permite a tus usuarios dar comentarios y les da muchas formas de aprender mucho mas de tu aplicación. Aquí hay un pantallazo de la plantilla.

Crear un video de guía para tu aplicación

Uno de los elementos importantes de tu sitio web debe ser incluir un video guía de tu aplicación. Las capturas de pantalla en el Marketplace son buenas, pero permitirle al usuario ver la experiencia total en una forma controlada nos dará siempre mucha mas información. Nuestra recomendación es utilizar un programa de captura de pantallas como TechSmith’s Camtasia. Camtasia hace muy fácil no solo capturar video desde el emulador, sino editar los resultados, agregar música de fondo y colocar información de introducción antes y después del video. Hay probablemente bastantes herramientas que harán esto por ti, pero en nuestra experiencia, Camtasia es la herramienta perfecta para el trabajo. Puedes ver un ejemplo de mi aplicación de MathMaster en YouTube aquí.

Puedes ver el video aquí.

Diviértete haciéndolo. En tu video puedes agregar un mayor nivel de interés a tu aplicación que las capturas de pantalla nunca podrán. Ahora que nos hemos enfocado en sitios web y videos, vamos a discutir cosas que puedes hacer dentro de tu aplicación para ayudar a promoverla.

Generar opiniones de tu aplicación

Las opiniones pueden ser un factor decisivo entre si tu aplicación tiene o no las descargas que estás buscando. Desafortunadamente, no hay un mecanismo para recordarle a los usuarios que comenten tu aplicación. Necesitas hacer esto por ti mismo. Recomendamos hacerlo como una adición agradable en tu aplicación en lugar de hacerlo una molestia para tu usuario.

Una idea que recomendamos es hacer un logro dentro de tu aplicación. Un poco de diversión sorprenderá y enganchará al usuario. Dale puntos por leer los créditos de la aplicación. Dale mas por usarla mas de 10 veces. Agregar logros a cualquier aplicación, encontrarás que tus usuarios estarán regresando mas y mas a ella. Quizá también desbloquees una pieza específica de funcionalidad que de otra manera no estaría disponible cuando opinen en tu aplicación.

Una segunda idea es contar el número de veces que tu usuario ha lanzado tu aplicación y pídele en la segunda, quinta y décima ocasión que opine tu aplicación. Pídelo gentilmente. No querrás molestarlo, pero si quieres su opinión. Puedes incluso usar la MarketplaceReviewTask para llevarlos directamente a la página de opiniones de tu aplicación.

Grandes opiniones generan mas tráfico. Comúnmente, una opinión de una estrella puede ser tan valiosa como una escrita. El promedio de evaluación (1-5) es desplegada donde quiera que este tu aplicación, así un alto rango comúnmente genera mas tráfico. Hacer que tus usuarios dejen una opinión tendrá un efecto positivo en los rangos de descarga de tu aplicación.

Cruzar tus aplicaciones entre ellas

Dentro de tu aplicación, puedes dar un lugar donde el usuario puede encontrar información acerca de tu compañía, contactos de soporte y otra información como el número de la versión. En este lugar, o ciertamente en una ubicación mas prominente, tienes una oportunidad para promover las otras aplicaciones que has creado. Usa tus íconos. Usa los deep links o el lanzador MarketplaceDetailTask. Da una forma sencilla para tu usuario para encontrar y descargar las ofertas que tienes de tus otras aplicaciones.

Si realmente te quieres poner imaginativo, crea un archivo XML en tu servidor web que contenga toda la información acerca de tus aplicaciones y consúmelo en tus aplicaciones para crear la lista de todas tus aplicaciones. De esta forma, cuando agregues una nueva aplicación a tu catálogo, no tendrás que actualizar todas tus aplicaciones, solo hacer esta promoción “cruzada”.

En resumen

Hay muchísimas cosas que necesitas hacer para tener a tu aplicación lista, después de que has terminado tu aplicación. Asegúrate que has considerado tu estrategia de promoción antes de presionar el botón final de “Ingresar” en tu aplicación. Crear una comunidad alrededor de tu aplicación solo ayudará a hacer crecer a tu audiencia, porque los usuarios entusiastas son también evangelistas poderosos de tu esfuerzo.

Si te has tomado este tiempo para crear una nueva aplicación sorprendente para Windows Phone, necesitas estar seguro de que va a tener el impacto potencial que estas esperando. Enfocarte en monetizar, promocionar y opinar es tan importante como tu aplicación misma.

Este es el artículo final de esta serie. Espero que la hayas disfrutado tanto como nosotros lo hemos hecho al escribirla. Muchas gracias por leer todos los post.

Día 30: Base de datos local

Amin Espinoza — Sat, 31 Dec 2011 16:39:13 +0000

Esta es una traducción de Day 30: Local Database, puedes encontrar el artículo aquí en su versión original en inglés.

¿Qué es una base de datos local?

En la versión original de Windows Phone 7, podíamos salvar información pero tomaba cierto código especial o utilizar bases de datos de terceros como SterlingDB para tener un repositorio de información relaciona que algunas aplicaciones necesitan. Esto limitó algunos tipos de aplicaciones que algunos desarrolladores pudieron producir para los usuarios.

En Windows Phone Mango, los desarrolladores aún cuentan con el almacenamiento aislado para mantener información e información almacenada para sus aplicaciones pero ahora tenemos SQL CE como un elemento de almacenamiento relacional para crear aplicaciones aún mejores para Windows Phone.

Como otras soluciones de bases de datos para el Windows Phone original, la base de datos nativa de SQL CE creada en Mango tiene su información almacenada en el almacenamiento aislado del dispositivo. Puedes aprender mas acerca del almacenamiento aislado aquí. Microsof tampoco creó nuevas formas de trabajar con la información en el teléfono y en su lugar implementó LINQ a SQL para todas las operaciones de las bases de datos. LINQ a SQL es usado para hacer todas la funciones para la aplicación cuando se trate de manejar la información incluyendo crear la información, llenar la base de datos, obtener información u finalmente guardar y borrarla.

Un buen tutorial de LINQ para SQL esta aquí en MSDN.

Ajustar una base de datos local para tu aplicación de mango

Como todos los puntos de inicio para Windows Phone 7, empezaremos creando un proyecto de Windows Phone Databound Application dentro de Visual Studio 2010.

Pudimos haber comenzado con una aplicación sencilla de Windows Phone, pero me gustan los elementos adicionales que te dan para permitir que tu aplicación tenga mejores patrones de diseño como Model-View-ViewModel (MVVM).

A continuación actualizaremos el MainPage del proyecto para permitir que la información sea agregada a la sabes de datos. Nuestra información de ejemplo estará coleccionando ideas que todos tenemos y necesitamos recordar. No iremos a gran detalle acerca del diseño del MainPage pero aquí está el XAML para obtener la apariencia para nuestro colector de ideas.

x:Class=”Dia_30_BaseDatosLocal.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″
d:DataContext=”{d:DesignData SampleData/MainViewModelSampleData.xaml}”
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”
SupportedOrientations=”Portrait” Orientation=”Portrait”
shell:SystemTray.IsVisible=”True”>

Grid.Row=”0″ Margin=”12, 0, 12, 0″ Width=”440″>

FontFamily=”{StaticResource PhoneFontFamilyLight}” GotFocus=”txtNuevaIdea_GotFocus”/>

Día 29: Globalización

Amin Espinoza — Thu, 29 Dec 2011 19:52:11 +0000

Esta es una traducción de Day 29: Globalization, puedes encontrar el artículo aquí en su versión original en inglés.

Globalización contra Localización

Las personas comúnmente se confunden cuando se discute acerca de globalización y localización. Ambas tratan de lidiar con presentar contenido de una manera amigable por todo el mundo, pero la distinción es que la globalización trabaja con el formato de los elementos, tales como el tiempo, fechas, tipos de moneda y números en la forma en la que el usuario este familiarizado considerando, mientras que la localización involucra desplegar el idioma nativo del usuario en la interfaz. Este artículo cubrirá el uso de ambas técnicas para crear aplicaciones que puedan alcanzar una gran audiencia con la interfaz de usuario mas amigable posible.

Estaremos creando una aplicación simple durante el curso de este artículo que soporte a ambas, globalización y localización. Esta aplicación rápidamente genera un mensaje de correo electrónico que permite saber al contacto que estas retrasado para una reunión.

Configurar soporte para la localización

Después de crear un nuevo Windows Phone con C#, necesitaremos hacer algunas cosas para configurar la aplicación para que soporte la localización.

Definir un lenguaje neutral para el ensamblado

Dado que estamos localizando nuestra aplicación, necesitamos decirle al proyecto cual es la localización preestablecida. Para hacer esto, vamos a ir cuadro de diálogo de las propiedades del proyecto y clic en “Assembly Information” y después especificar el idioma neutral para nuestra aplicación – eso es, el lenguaje que será utilizado si no hay recursos locales definidos que coincidan con los del usuario. Para este ejemplo, ajustaremos el lenguaje neutral en “English (United States)”.

Indicando la cultura soportada

A continuación necesitamos decirle al proyecto que lenguajes están soportados. Visual Studio no expone esta parte de información del proyecto, pero podemos editarla fácilmente. Asegúrate de guardar todos los cambios de modo que todos los cambios al .csproj estén guardados antes de editar el archivo. Después ve a la carpeta del proyecto en el disco dando clic derecho en el proyecto y selecciona “Open Folder in Windows Explorer”. Selecciona el .csproj para tu aplicación (se cuidadoso de no seleccionar el archivo .csproj.user) y ábrelo con el bloc de notas o tu editor de textos favorito (N. del T. una amplia recomendación es Notepad++).

Busca el elemento y agrega el código de las culturas que deseas soportar separando cada cultura por un punto y coma. Esta lista no deberá incluit el lenguaje neutral del ensamblado. Visita http://msdn.microsoft.com/en-us/library/hh202918(v=VS.92).aspx para una lista de culturas soportadas por varias versiones de Windows Phone. Para los propósitos de este ejemplo, estaremos soportando Español, Chino simplificado y Francés, además del el preestablecido que fue el Inglés, así que nuestro nodo de SupportedCultures se verá así.

es-ES;zh-CN;fr-FR

Después de hacer tus cambios, guarda el archivo .csproj y ve de regreso a Visual Studio. Presiona “recargar” cuando Visual Studio te diga que el proyecto ha cambiado para que estos cambios puedan tener efecto.

Crear un archivo de recursos base

Ahora que tenemos una cultura preestablecida y una lista de otras mas soportadas, podemos empezar a definir los recursos específicos para cada cultura. Empezaremos agregando un archivo para los recursos preestablecidos y movernos para agregar recursos para culturas específicas. Como una buena práctica de localización, cualquier cadena que el usuario vea deberá ser incluida en estos archivos en lugar de hacerlas de modo estático en XAML o en un archivo de código.

Necesitamos agregar un archivo de recursos al proyecto que defina las cadenas de lenguaje para la aplicación. Para hacer esto, daremos clic derecho en nuestro proyecto en el explorador de soluciones y elegimos “Add –> New Item”. Desde aquí, agregaremos un archivo de recursos. Puedes llamarlo como gustes, para este ejemplo lo llamaremos Cadenas.

Agregar el archivo nos lleva al editor de recursos para este reecurso. El editor contiene una tabla con tres columnas, Name, Value y Comment. Nombre es el nombre auto generado por code-behind para el recurso y sirve como clave única para identificar un recurso. Value es el valor específico de la cultura para este recurso y es lo que usaremos para almacenar el texto que el usuario vea. Comment no es usado por la aplicación, pero es útil para señalar para que usamos tal recurso y donde lo usamos, además puede ayudar demasiado durante la traducción a otros lenguajes. También verás un modificador de acceso en la cima del editor de recursos. Este es interno de forma preestablecida pero necesitamos cambiarlo a público de modo que podamos enlazar estos valores mas adelante.

Aquí esta nuestro ejemplo después de agregar las cadenas apropiadas y cambiar el modificador de acceso a público:

Crear archivos de recursos específicos para cada cultura

Ahora que tenemos nuestros recursos preestablecidos definidos, podemos iniciar a crear recursos personalizados para el proyecto. Empezaremos definiendo los recursos en español para esta aplicación. Presiona y arrastra el archivo cadenas.resx en el explorador de soluciones para crear una copia del archivo y después renómbralo como “CopiaDeCadenas.resx” a “Cadenas.es-ES.resx” (es-ES es el código de cultura para el español). Es importante que este nuevo archivo inicie con el mismo nombre como este nuevo archivo inicie con el mismo nombre que el previo pero teniendo la localización adecuada al final de este o el archivo no podrá ser utilizado de manera adecuada para mapear la localización adecuada. Una vez que has renombrado tal archivo, abre el archivo Cadenas.es-ES.resx y modifica la columna Value para cada recurso. Una buena fuente para traducciones es Bing Translator, además de que debes verificar las traducciones con alguien que entienda el lenguaje antes de desplegar. Es importante que la columna Name coincida entre los archivos de recursos para que los recursos puedan ser mapeados apropiadamente.

Una vez que has terminado con esto, sigue el mismo procedimiento para cualquier localidad adicional que desees soportar siendo cuidadoso de que todos los recursos tienen un modificador de acceso público, mantén el mismo nombre y contén el código de cultura apropiado. Es también importante notar que el editor de recursos puede no desplegar ciertos conjuntos de caracteres extranjeros correctamente cuando copies y pegues desde el traductor de Bing al editor de recursos, pero estos caracteres se verán bien en el dispositivo o emulador.

Crear una interfaz de usuario no localizada

Ahora que tenemos un conjunto de cadenas localizadas, mejor comenzamos a crear la interfaz en donde podamos usarlas. Nuestra aplicación de ejemplo tendrá algunos campos, una barra de aplicación y un encabezado estándar. Dado que queremos incluir datos en este ejemplo para demostrar la globalización, haremos referencia al Toolkit de Silverlight para Windows Phone y usar el control de TimePicker contenido en ese ensamblado. Este artículo no irá hasta el detalle de descargar, instalar y hacer referencia al Toolkit, pero este está disponible y nos será útil.

Nuestro MainPage no localizado se verá así.

Obviamente este XAML contiene un número de cadenas estáticas las cuales no queremos para una aplicación localizable. Necesitamos que la interfaz de usuario tome ventaja de las cadenas de recursos.

Obtener Cadenas de recursos en XAML

Afortunadamente el diseñador de recursos con el que hemos estado trabajando tiene clases automáticamente generadas para acceder a estos recursos. Desafortunadamente, no podemos enlazar fácilmente estos en XAML por la clase de cadenas auto generadas que tiene un constructor interno y propiedades estáticas así que necesitaremos crear un “envoltorio” de recursos que exponga estos en una forma que podamos enlazar.

Agrega una nueva clase al proyecto llamada ProveedorCadenas.cs e incluye el siguiente código.

[crayon]

namespace Dia_29_Globalizacion
{
public class ProveedorCadenas
{
private readonly Cadenas recursos = new Cadenas();

public Cadenas Resources
{
get { return recursos; }
}
}
}

[/crayon]

Ahora ve hacia el archivo de App.xaml y agrega un nuevo recurso a la aplicación con el calificador adecuado de espacio de nombres. Este recurso estará disponible a través de la aplicación entera y te dará un fácil acceso a la localización de cadenas. Cuando termines, tu App.xaml se deberá ver así.

x:Class=”Dia_29_Globalizacion.App”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”clr-namespace:Dia_29_Globalizacion”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”>

Launching=”Application_Launching” Closing=”Application_Closing”
Activated=”Application_Activated” Deactivated=”Application_Deactivated”/>

Ahora que hemos definido nuestro StringProvider como un recurso, podemos enlazarlo al MainPage. En este caso estamos enlazando a la sub propiedad de la propiedad de Reosurces representando el nombre del recurso como lo definimos antes en la colección de recursos y usando el objeto de tipo ProveedorCadenas como una fuente de enlazado. Por ejemplo, el título de nuestra aplicación se vuelve:

Ambos, tanto Blend como Visual Studio deberán reconocar este enlazado y desplegar la cadena de lenguaje neutral (el valor en Cadenas.resx) en el diseñador si el proyecto ha sido compilado desde que los recursos fueron agregados.

Cuando creas aplicaciones globalizadas, ten cuidado de que muchas cadenas de lenguajes serán mayores de lo que es en el idioma preestablecido. Dado esto, es importante que ajustes la propiedad TextWrapping=”Wrap” donde sea aplicable y usa un diseño flexible de estructuras de diseño como ScrollViewers y StackPanels que puedan adaptarse a contenido multi líneas cuando sea necesario. Dado el potencialmente largo recurso de las cadenas, es recomendable ajustar la propiedad SupportedOrientations=”PortraitOrLandscape” en la página cuando sea apropiado.

Es también importante estar al pendiente de que no todas las localidades soportan diferentes fuentes. Tu mejor apuesta en el caso de localización de aplicaciones es evitar las fuentes manualmente especificada o personalización de fuentes y en su lugar confiar en las fuentes ya creadas. Visita http://msdn.microsoft.com/en-us/library/hh202920(v=VS.92).aspx para mas información.

Referirse a cadenas localizadas en C#

Este enfoque funcionará para la mayoría de las cadenas, pero las guías de diseño Metro requieren que el título de la aplicación en la cima de la página esté en mayúsculas y nuestra cadena en el archivo de recursos usa mayúsculas capitales. Podríamos definir un nuevo recurso solo para la etiqueta de título o escribir un convertidor de valores de tipo Uppercase para el enlazado, pero en su lugar solo vamos a ajustar el título en el code behind para poder demostrar el acceso a recursos localizados desde el código al agregar la siguiente línea en el constructor de tu MainPage:

[crayon]

txtTituloApp.Text = Cadenas.AppTitle.ToUpper(CultureInfo.CurrentCulture);

[/crayon]

Localizar la barra de aplicacón

Los elementos de la barra de aplicación actualmente no soportan el enlazado de datos dado que ellos no son realmente controles de Silverlight personalizables. En su lugar, tendremos que ajustar manualmente el texto de nuestro ApplicationBarIconButton en el code behind al referirnos a la propiedad auto generada para nuestro nombre de recurso en el recurso de Cadenas como se muestra.

[crayon]

public MainPage()
{
InitializeComponent();

txtTituloApp.Text = Cadenas.AppTitle.ToUpper(CultureInfo.CurrentCulture);

var button = (ApplicationBarIconButton)ApplicationBar.Buttons[0];
button.Text = Cadenas.ButtonSend;

timeLlegada.Value = DateTime.Now.AddMinutes(15);
}

[/crayon]

Ahora tenemos una aplicación localizada. Probar la aplicación en el emulador usando los ajustes para el lenguaje en francés resultará en lo siguiente.

Soportar globalización

Ahora que tenemos una aplicación localizable, vámonos a la globalización. Dado que la globalización se encarga de los ajustes culturales del usuario respectivo, es importante dar el correcto IFormatProvider a varios métodos de formato de cadenas cuando sea apropiado. Afortunadamente .NET nos da CultureInfo.CurrentCulture el cual representa los ajustes culturales del usuario actual y pueden ser usados para formatear las cadenas para la interfaz del usuario. Cuando se hagan comparaciones estándar o al lidiar con la serialización u otras operaciones que el usuario no ve, es importante usar CultureInfo.InvariantCulture para asegurar que tu aplicación funcione adecuadamente en todos los ajustes de cultura.

A diferencia de la localización, no tienes que hacer nada para soportar una cultura particular e el framework .NET se preocupará de la mayoría de operaciones de formato de cultura por tí. Es también una buena práctica dar el formato apropiado de cadenas y especificar el CultureInfo,CurrentCulture como un IFormarProvider cuando sea apropiado.

Por ejemplo, el código de nuestra aplicación esta hecho para generar un correo electrónico que haga explícito uso de CurrentCulture y formato de cadenas.

[crayon]

private void btnEmail_Click(object sender, System.EventArgs e)
{
var cuerpo = new StringBuilder();
cuerpo.AppendLine(Cadenas.EmailHeader);

if (chkIncluirETA.IsChecked == true)
{
cuerpo.AppendLine();
cuerpo.AppendLine(string.Format(cultura, “{0}: {1}”, Cadenas.CheckShouldArriveBy, timeLlegada.ValueString));
}

if (chkIncluirDiagnostico.IsChecked == true)
{
cuerpo.AppendLine();
cuerpo.AppendLine(cultura.Name);
cuerpo.AppendLine(string.Format(cultura, “pi: {0}”, Math.PI));
cuerpo.AppendLine(string.Format(cultura, “number: {0}”, -1));
cuerpo.AppendLine(string.Format(cultura, “currency: {0:c}”, 4200.00));
cuerpo.AppendLine(string.Format(cultura, “date: {0:D}”, DateTime.Today));
cuerpo.AppendLine(string.Format(cultura, “time: {0:t}”, DateTime.Now));
}

if (Microsoft.Devices.Environment.DeviceType == DeviceType.Emulator)
{
MessageBox.Show(cuerpo.ToString());
}
else
{
var tarea = new EmailComposeTask { Subject = txtTitulo.Text, To = txtPara.Text, Body = cuerpo.ToString() };
tarea.Show();
}
}

[/crayon]

Dado que la globalización esta separada de la localización, corre a aplicación en un lenguaje sin cadenas localizadas resultará en valores apropiadamente globalizados así como estos valores alemanes en la imagen de abajo:

Especificar el formato de cadenas en XAML

Ocasionalmente querrás ser capaz de especificar un formato de cadena en XAML ya sea como un parámetro para un value converter o como una propiedad en un control previamente creado. En nuestro ejemplo ajustaremos explícitamente el formato de la cadena de nuestro TimePicker para acortar el formato de tiempo para la cultura actual (“t”). Para hacer esto, prefijamos el formato de la cadena con un par de llaves como se muestra aquí.

ValueStringFormat=”{}{0:t}”
IsEnabled=”{Binding IsChecked, ElementName=chkIncluirETA}”
Margin=”0,-12,0,0″ />

Es también posible ajustar esto en C# de la siguiente manera.

[crayon]

var info = CultureInfo.CurrentCulture.DateTimeFormat;
timeArrival.ValueStringFormat = “{0:” + info.ShortTimePattern + “}”;

[/crayon]

O mucho mas preciso.

[crayon]

timeArrival.ValueStringFormat = “{0:t}”;

[/crayon]

Probando diferentes culturas

Hasta ahora, hemos creado una aplicación enteramente funcional que soporte la globalización y localización. Quizá te preguntes ahora como probarla en diferentes culturas. Los dispositivos Windows Phone quizá no te permitan cambiar el idioma de despliegue de tu pantalla, pero afortunadamente, Microsoft le dio esta capacidad al emulador.

Para acceder a estos ajustes, ve al menú de aplicaciones del emulador en la pantalla de inicio y escoge la aplicación de ajustes. Desde ahí da clic en el elemento del pivot que dice Region+Lenguaje

Esta pantalla te permite personalizar el lenguaje que se mostrará en el teléfono al ajustar en la lista de selección el lenguaje que quieres mostrar y después dando clic en el enlace de “Da tap aquí para aceptar los cambios”. Al hacerlo, se reiniciará la imagen del SO Windows Phone de tu emulador y aplicará los ajustes de lenguaje y globalización que has elegido. Puede ser confuso usar páginas de ajustes en un lenguaje que no conoces para cambiar los ajustes regionales, así que es una gran idea estudiar el diseño de la pantalla antes de aplicar nuestros cambios. Una vez que el emulador se haya reiniciado al lanzar nuestra aplicación en el emulador podrás verificar que la aplicación respeta el lenguaje del usuario y sus ajustes culturales.

Consideraciones de publicación

Cuando quieras desplegar una aplicación que soporte diferentes lenguajes y culturas, asegúrate de elegir la distribución que coincida con los lenguajes soportados ya sea seleccionando una distribución global al publicar tu aplicación y ajustando los precios o seleccionando lugares individuales que desees soportar.

En Resumen

Ahora sabes como crear una aplicación desde el inicio hasta el final que ofrecerá la mejor experiencia al dar una aplicación propiamente globalizada y localizada para la audiencia global que usa Windows Phone.

Para descargar este ejemplo entero de la aplicación de Windows Phone usando los conceptos aquí mostrados, puedes hacerlo en el enlace siguiente.

Puedes descargar el código aquí.

Mañana, vamos a regresar a la información, y vamos a cubrir como usar una base de datos local en tu aplicación. Nos vemos

Día 28: Biblioteca multimedia

Amin Espinoza — Wed, 28 Dec 2011 17:25:34 +0000

Esta es una traducción de Day 28: Media Library, puedes encontrar el artículo aquí en su versión original en inglés.

Hoy vamos a echar un vistazo a la clase MediaLibrary que es parte del espacio de nombres Microsoft.Xna.Framework.Media. Como el nombre sugiere, esta clase nos da acceso a la biblioteca de medios del usuario. Una biblioteca de medios en Windows Phone almacena imágenes y música. Al usar las biblioteca de medios, puedes integrar este contenido en tus propias aplicaciones. Hay muchas razones por las que un desarrollador querría hacer esto. Aquí hay algunas ideas:

* Para mostrar al usuario una lista de canciones y dejarlos seleccionar la música de fondo mientras usa tu aplicación.

*Permitir al usuario descargar sus imágenes desde un servicio. (por ejemplo Flickr) y agregarlas a la biblioteca.

* Usar música de un artista o género desde la biblioteca de medios para hacer sugerencias de otros contenidos similares en los que el usuario podría interesarse.

Para mostrar como usar la biblioteca de medios, he creado una aplicación de ejemplo. Esta aplicación enlistará todas las canciones que se encuentren en la biblioteca multimedia del usuario, reproducir una canción cuando el usuario la seleccione y permitirle seleccionar una imagen de la biblioteca para usarla como fondo de pantalla. La aplicación usa la biblioteca multimedia para obtener una lista de las canciones y también guarda una imagen a la biblioteca para el usuario.

Guardar la imagen a la biblioteca multimedia

En la aplicación de ejemplo he agregado una imagen como recurso. Es una imagen genial y estoy seguro de que todos los usuarios van a quererla así que vamos a guardarla en la biblioteca de medios. La aplicación de ejemplo guarda esta imagen en el método Application_Launching en el archivo App.xaml.cs, aquí está el código para ello.

public static void GuardarImagenBiblioteca(string nombreImagen)
        {
            var biblioteca = new MediaLibrary();
            var imagen = biblioteca.Pictures.Where(p => p.Name == nombreImagen).SingleOrDefault();

            if (imagen == null)
            {
                var recurso = Application.GetResourceStream(new Uri(string.Format(“/31DaysMediaLibrary;component/Images/{0}”,nombreImagen), UriKind.Relative));
                var bitmap = new BitmapImage();
                bitmap.SetSource(recurso.Stream);

                biblioteca.SavePicture(nombreImagen, bitmap.ToStream());
            }
        }

La mayoría de este código esta simplemente trabajando al cargar una imagen. Hay algunas líneas importantes aquí que están usando la Biblioteca de medios. Vamos a ver mas de cerca esas líneas.

var biblioteca = new MediaLibrary();

Esta línea crea una nueva clase de tipo MediaLibrary. Esto es lo que te dará acceso a las propiedades y métodos de la biblioteca de medios.

var imagen = biblioteca.Pictures.Where(p => p.Name == nombreImagen).SingleOrDefault();

Esta línea busca en la biblioteca por cualquier imagen que este ya salvada con el nombre de la imagen. Si esta existe, el código no la guardará de nuevo.

biblioteca.SavePicture(nombreImagen, bitmap.ToStream());

Esta línea guarda el BitmapImage a la biblioteca. Quizá notes que un BitmapImage no tiene normalmente el método ToStream. Pienso que lo tendría utilizando un método extendido para agregarselo. La clase de extensión no tiene nada que hacer con la biblioteca multimedia, pero aquí verás como es que funciona.

public static class ExtensionBitmap
    {
        public static Stream ToStream(this BitmapImage bitmap)
        {
            var writeableBitmap = new WriteableBitmap(bitmap);
            var stream = new MemoryStream();
            writeableBitmap.SaveJpeg(stream, bitmap.PixelWidth, bitmap.PixelHeight, 0, 100);
            stream.Position = 0;
            return stream;
        }
    }

Después de que el código ha sido ejecutado, la imagen estará disponible en la biblioteca de medios. Para mostrar esto en nuestra aplicación de ejemplo, puedes dar clic en el ícono del engrane en la bandeja de la aplicación y la nueva imagen estará disponible para ser seleccionada usando un PhotoChooserTask.

Obtener una lista de canciones

En la aplicación de ejemplo la pantalla muestra una lista de las canciones que el usuario tiene en la biblioteca de medios. La lista es un ListBox. Un Data Template es definido y es el que enlaza la propiedad Text de los dos TextBlock. Uno despliega el título de la canción y el otro despliega al artista. Aquí esta lo como queda el XAML para el ListBox.

                x:Name=”lstCanciones”
                SelectionChanged=”lstCanciones_SelectionChanged”>

Ajusta el ItemSource a la lista de canciones es bastante simple:

var biblioteca = new MediaLibrary();
lstCanciones.ItemsSource = biblioteca.Songs;

¿Qué mas hay ahí?

Hay algunas otras propiedades de la clase MediaLibrary para considerar:

Álbumes – Es similar a la colección de canciones, pero enlista en su lugar los álbumes

Artistas – Así como la colección de álbumes, esta colección enlista a los artistas de las canciones.

Genres – Esta colección enlista los géneros de las canciones.

Playlists – Esta colección enlista las listas de reproducción que el usuario ha agregado a su biblioteca.

En resumen

Como puedes ver, usar la Biblioteca de medios es bastante sencillo. La mayoría del código en la aplicación de ejemplo esta escrito para usar el contenido, no para acceder a el desde la biblioteca. Hablé acerca de acceder a la colección de canciones y como guardar una imagen en la biblioteca. Discutí unas pocas maneras de usar la biblioteca en tus propias aplicaciones. Estoy seguro que hay muchas mas formas de usar este contenido. Diviértete y no puedo esperar a ver tus aplicaciones.

Para descargar este ejemplo entero de la aplicación de Windows Phone usando los conceptos aquí mostrados, puedes hacerlo en el enlace siguiente.

Puedes descargar el código aquí.

Mañana, cubriremos la globalización/localización en el artículo y te mostraremos que tan sencillo es incluir esto en tu proyecto Windows Phone. Nos vemos.

Día 27: API del micrófono

Amin Espinoza — Wed, 28 Dec 2011 06:19:10 +0000

Esta es una traducción de Day 27:Microphone API, puedes encontrarlo aquí en su versión original en inglés.

Introducción

El reconocimiento de voz o tomar notas es una práctica muy común dependiendo de tu profesión o uso, por ejemplo, es entendido que los dispositivos móviles de hoy ofrecen alguna clase de reconocimiento de palabras y control de la aplicación, ya sean direcciones o marcar un número o el otro uso común, al reproducir música.

La tarea de notas es otro elemento que es útil para ser capaz de capturar audio en el campo para futuras referencias.

El primer paso de todas estas aplicaciones es ser capaz de capturar audio vía el micrófono y procesarlo como sea necesario.

Así que hoy miraremos al API del microfono proveída por Mango y haremos un ejemplo muy sencillo para que inicies.

¿Qué es lo que esta involucrado?

Haremos lo mínimo, necesitaremos grabar audio y salvarlo para su reproducción.

Los siguientes puntos clave deberán ser notados:

1. Clase Microphone: Esta es la clase proveída por el espacio de nombres Microsoft.Xna.Framework.Audio que nos permite el acceso a la API del micrófono.

2. Evento publico EventHandler BufferReady: Este es un evento que se manifiesta cuando el micrófono esta listo para librerar el audio almacenado. Necesitamos manejar esta evento y almacenar el audio para una reproducción posterior.

3. Microphone.Start: Como el nombre indica, lo llamamos para iniciar la grabación.

4. Microphone.Stop: Lo llamamos para detener la grabación. Un punto importante para considerar es que al llamar a Microphone.Stop inmediatamente limpiara el buffer.

Como verás en la aplicación, no llamamos al método Stop inmediatamente cuando el usuario abra el micrófono o de clic en el botón de reproducir. En lugar de eso, dejamos al micrófono levantar el evento de BufferReady con la duración del buffer seleccionada para capturar hasta el último bit de información de audio antes de detener la grabación.

using Microsoft.Xna.Framework –> Como debiste haber adivinado desde el espacio de nombres, requerimos una referencia al framework de Xna. El API del micrófono es parte del framework de XNA y requiere la simulación de juego de Xna. Si no estás familiarizado con XNA, XNA es un framework muy enriquecido proveido por Microsoft para aplicaciones destinadas para juegos y gráficas.

Entendiendo el ejemplo

Prerequisitos: Instala las herramientas de Mango http://create.msdn.com , esto te dará el Windows Phone SDK y Visual Studio Express 2010 que necesitas para desarrollar aplicaciones para Windows Phone.

1. Lanza Visual Studio, navega a la solución y ábrela. La aplicación esta creada usando Silverlight for Windows Phone. Corre el proyecto y despliega la aplicación en el emulador. Verás la siguiente pantalla cuando la aplicación termine de cargar.

2. El elemento de la pantalla:

a. El botón de micrófono es una palanca la cual comienza y detiene al micrófono.

b. El botón de reproducir es usado para escuchar el sonido guardado.

c. Hay tres sliders para ajustar el volumen, extracción y tono del sonido al ser reproducido.

3. Como funciona:

a. Toca el micrófono para iniciar la grabación. Puedes detener la grabación al tocar el micrófono de nuevo o alternativamente al tocar el botón de reproducir.

b. Ajusta el volumen, prueba el sonido al cambiar los valores de los sliders al reproducir el sonido.

Entendiendo el código

Aquí están las declaraciones iniciales:

private Microphone microfono = Microphone.Default;
private MemoryStream stream = new MemoryStream();
private SoundEffectInstance sonidoGrabado;
private byte[] buffer;
bool estaReproduciendoSonido = false;
string rutaImagenMicrofonoDetenido = “Imagenes/stopped.png”;
string rutaImagenMicrofonoIniciado = “Imagenes/114px-Yeti-USB-Microphone.png”;
string rutaImagenBotonPlayPausadoLight = “Imagenes/light.appbar.transport.pause.rest.png”;
string rutaImagenBotonPlayPausadoDark = “Imagenes/dark.appbar.transport.pause.rest.png”;
string rutaImagenBotonPlayLight = “Imagenes/light.appbar.transport.play.rest.png”;
string rutaImagenBotonPlayDark = “Imagenes/dark.appbar.transport.play.rest.png”;
bool grabacionDetenida = false;
bool reproducirSonido = false;
bool streamDesechado = false;
bool esTemaOscuro = ((Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible);

Estaremos usando un objeto de la clase SoundEffectInstance para reproducir el sonido grabado. Podríamos también haber usado un SoundEffect, sin embargo al usar la clase SoundEffectInstance nos permitirá rastrear el estado (reproduciendo o detenido).

La otra declaración aquí es para un objeto MemoryStream. El buffer del micrófono es constantemente escrito en un memorystream a menos que la reproducción sea deseada. En este momento, ingresamos el contenido del memorystream al objeto SoundEffectInstance para reproducir.

Inicialización:

public MainPage()
{
InitializeComponent();
DispatcherTimer temporizador = new DispatcherTimer();
temporizador.Interval = TimeSpan.FromMilliseconds(33);
temporizador.Tick += new EventHandler(temporizador_Tick);
temporizador.Start();
AjustarMicrofono();
SoundEffect.MasterVolume = 1.0f;
AjustarImagenBotonReproducirBasadoEnTema();
}

El punto principal para ver aquí es el ciclo que hemos creado usando un DispatcherTimer. Este ciclo es esencial para capturar el audio desde el micrófono.

Ajustamos la imagen para el botón de reproducir basado en el tipo de tema que esté seleccionado.

Hasta ahora también ajustamos los valores del micrófono para nuestra aplicación, como sigue:

private void AjustarMicrofono()
{
if (Microphone.Default == null)
{
return;
}

microfono.BufferDuration = TimeSpan.FromMilliseconds(500);
buffer = new byte[microfono.GetSampleSizeInBytes(microfono.BufferDuration)];
stream.SetLength(0);

microfono.BufferReady += microfono_BufferReady;

ImageBrush pincel = new ImageBrush();
pincel.ImageSource = new BitmapImage(new Uri(rutaImagenMicrofonoDetenido, UriKind.Relative));
pincel.Stretch = Stretch.Uniform;
btnGrabar.Background = pincel;
}

La duración del buffer es de medio segundo y después usamos un método llamado GetSampleSizeInBytes y pasamos la duración del buffer para obtener el tamaño real de este. Esto es importante para asegurar una captura de audio fluida-

Enlazamos el evento de Buffer Ready y ajustamos la imagen preestablecida del micrófono detenido.

¡Estamos listos para comenzar a grabar!

Grabar audio:

Cuando el usuario de clic sobre el botón del micrófono, el siguiente código es llamado:

private void btnGrabar_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (estaReproduciendoSonido)
{
return;
}
streamDesechado = false;

if (microfono.State == MicrophoneState.Stopped)
{
ImageBrush pincel = new ImageBrush();
pincel.ImageSource = new BitmapImage(new Uri(rutaImagenMicrofonoIniciado, UriKind.Relative));
pincel.Stretch = Stretch.Uniform;
btnGrabar.Background = pincel;
if (sonidoGrabado != null) sonidoGrabado.Stop();
stream.SetLength(0);
grabacionDetenida = false;
microfono.Start();

}
else if (microfono.State == MicrophoneState.Started)
{
grabacionDetenida = true;
ImageBrush pincel = new ImageBrush();
pincel.ImageSource = new BitmapImage(new Uri(rutaImagenMicrofonoDetenido, UriKind.Relative));
pincel.Stretch = Stretch.Uniform;
btnGrabar.Background = pincel;
btnReproducir.IsEnabled = true;
}

reproducirSonido = false;
AjustarImagenBotonReproducirBasadoEnTema();
estaReproduciendoSonido = false;
}

Aquí suceden unas cosas:

1- El micrófono es detenido: Si el micrófono es detenido necesitamos comenzar a hacerlo grabar. Ajustamos el fondo del botón del micrófono. Después reiniciamos el MemoryStream para limpiar nuestro audio grabado previamente. Checamos y detenemos el audio a reproducir.

Pasos muy sencillos de seguir. Ahora necesitamos llamar al método Microfono.Start(). El resto de los pasos están basados en la UI y diseño de la aplicación.

2. El micrófono esta grabando: Primero necesitamos detener la grabación. Si reactivas la nota de arriba, no podemos llamar al método Microfono.Stop() inmediatamente mientras que toda la información grabada no haya sido desechada del MemoryStream. Así que usamos variables booleanas para mantener un registro y diferir la acción de detener en el evento DispatchTimer.

Dos cosas necesitan pasar aquí. Primero, necesitamos dejar el buffer del micrófono listo para lanzar al inicio de modo que podamos leer el último bit del audio y después necesitamos lanzar la reproducción. Manejamos esto como se muestra.

void microfono_BufferReady(object sender, EventArgs e)
{
microfono.GetData(buffer);
stream.Write(buffer, 0, buffer.Length);

if (grabacionDetenida)
{
stream.Flush();
streamDesechado = true;
microfono.Stop();
}
}

En el evento anterior, verificamos si la grabación ha sido detenida usando nuestras variables booleanas y después llamamos al método Stream.Flush(). Esto desecha la información restante del MemoryStream. Después detenemos el micrófono.

Sin embargo, no podemos lanzar la reproducción de audio en este evento, Esto es manejado por el “tick” del temporizador como se muestra en seguida:

void temporizador_Tick(object sender, EventArgs e)
{
try { FrameworkDispatcher.Update(); }
catch (Exception ex)
{
throw ex;
}

if (true == estaReproduciendoSonido)
{
if (sonidoGrabado.State != SoundState.Playing)
{
ResetearAjustesReproduccion();
}
}
else
{
if (reproducirSonido && streamDesechado)
{
reproducirSonido = false;
if (stream.Length > 0)
{
AjustarImagenBotonPausaBasadoEnTema();
Thread hiloSonido = new Thread(new ThreadStart(iniciarReproduccion));
hiloSonido.Start();
}
}
}
}

El evento es llamado cada 33 milisegundos. Así que estará bastante ajustado para que el usuario reproduzca el sonido sin ningún problema. La ventaja, por supuesto es que podemos reproducir el audio entero antes de dejar que sea cortado.

Checamos si es momento de grabar y ver si el stream ha sido desechado. Si es así, iniciamos un nuevo hilo para la reproducción de audio. Este es un punto importante para notar.

Estamos lanzando la reproducción de la cinta en un hilo diferente para permitir a la UI actualizarse. Esto significa que cualquier código dentro de nuestra rutina de reproducción que escoja actualizar los elementos de la interfaz tiene que hacerlo al llamar al DispatchBeginInvoke como se muestra abajo.

Reproducir el audio

private void iniciarReproduccion()
{
SoundEffect sonido = new SoundEffect(stream.ToArray(), microfono.SampleRate, AudioChannels.Mono);
sonidoGrabado = sonido.CreateInstance();

estaReproduciendoSonido = true;
Dispatcher.BeginInvoke(() =>
{
sonidoGrabado.Pitch = (float)sldPitch.Value;
sonidoGrabado.Pan = (float)sldPan.Value;
sonidoGrabado.Volume = (float)sldVolumen.Value;
}
);
sonidoGrabado.Play();
}

Creamos un objeto de la clase SoundEffectInstance alimentándolo del stream de audio capturado, el rango de ejemplo del micrófono y el canal de audio.

Dado que deseamos usar los sliders para ajustar el volumen, pitch y pan, tenemos que usar de nuevo un Dispatcher.BeginInvoke dado que ellos están en un hilo diferente.

Finalmente llamamos al botón reproducir.

En resumen

Es bastante simple crear una aplicación que registre audio. Podemos extender esta aplicación para guardar el audio grabado en el almacenamiento aislado y darle un título elegido por el usuario. Podemos agregar una vista de lista de las grabaciones del almacenamiento aislado y hacer una pequeña aplicación de notas de voz.

Los pasos básicos de la grabación de audio son:

a)Enlaza un evento al micrófono preestablecido para capturar el audio.

b)Escribe el audio en un stream

c)Cuando el usuario detenga la grabación, desecha el stream y almacénalo o reprodúcelo.

Podemos también extender esta aplicación tomando el audio grabado y mandándolo a un servicio de traducción y capturar comandos.

Para descargar este ejemplo entero de la aplicación de Windows Phone usando los conceptos aquí mostrados, puedes hacerlo en el enlace siguiente.

Puedes descargar el código aquí.

Mañana Jeff Fansler estará cubriendo la clase MediaLibrary y como podemos usarla para aprender mas acerca de la librería de música del usuario en su teléfono. Nos vemos.

Día 26: Transferencia de archivos en segundo plano

Amin Espinoza — Tue, 27 Dec 2011 05:29:30 +0000

Esta es una traducción de Day 26: Background File Transfer, puedes encontrarlo aquí en su versión original en inglés.

Ayer creamos un proyecto usando un Background Agent, uno de los nuevos elementos multitarea nuevos en Windows Phone 7.5. Hoy usaremos el Background File Transfer para realizar la descarga de un archivo que continua incluso cuando nuestra aplicación no esté corriendo. Descargaremos un video desde Channel 9 y lo reproduciremos cuando esté completado.

Comenzando

Lanza Visual Studio y crea un nuevo proyecto. Debajo de Silverlight for Windows Phone, selecciona Windows Phone Application. Nombra la aplicación como gustes.

Has creado la aplicación principal. Será responsable para:

1) Iniciar nuestra descarga del video

2) Desplegar el estado de la descarga

3) Reproducir el video una vez que se haya completado

Crear la aplicación

Ahora es tiempo de juntarlo todo. Abre MainPage.xaml y agrega dos botones para descargar y reproducir el video. Después, agrega dos TextBlocks para desplegar el progreso y estado.

Día 25: Background agents

Amin Espinoza — Mon, 26 Dec 2011 03:42:57 +0000

Esta es una traducción de Day 25: Background Agents, puedes encontrarlo aquí en su versión original en inglés.

Hoy, vamos a darle un vistazo a una de las capacidades multitarea nuevas en Windows Phone Mango. El entorno completo de multitarea abarca muchos nuevos elementos:

* Background Agents

* Background File Transfer

* Background Audio Playback

* Scheduled Notifications

* Fast Application Switching

Aquí nos enfocaremos en los Background Agents. Mientras que la transferencia de archivos y tarea de reproducción de audio cubren escenarios específicos, no permiten un código personalizado para ser ejecutados. Aquí es donde entran los agentes en segundo plano.

Hay dos tipos de agentes de segundo plano: Periodic y Resource Intensive. Los agentes de recursos intensivos están hechos para tareas que consumirán un monto grande de recursos del sistema pero con muchas limitaciones para cuando ellos quieran correr. Los agentes periódicos corren mas frecuentemente y con menos restricciones, pero están hechos para tareas que sean ligeras en consumo de recursos. Para entender completamente las diferentes limitantes y beneficios de cada uno,visita la página de MSDN.

Una tarea periódica puede hacer algo corto y simple, así como refrescar un RSS o actualizar tu live tile. Una tarea exigente de recursos puede hacer algo que requiera mas tiempo y ancho de banda, como sincronizar o atrapar grandes montos de datos desde un servicio en la nube.

Vamos a hacer un agente periódico que actualizará el live tile de tu aplicación con el último momento en el que nuestra tarea personalizada se ejecutó.

Comenzando

Lanza Visual Studio 2010 y crea un nuevo proyecto. Debajo de Silverlight for Windows Phone, selecciona Windows Phone Application.

Ya has creado la aplicación principal. Esta será responsable de dos cosas:

1) Tener un live tile que el agente de segundo plano puede actualizar con información

2) Iniciar y detener el agente de segundo plano

El agente de segundo plano por sí mismo, debe vivir en su proyectos propio especial. Agrega un nuevo proyecto a tu solución, seleccionando Windows Phone Scheduled Task Agent. Nómbralo MiAgente. Este proyecto contendrá el código personalizado que correrá en segundo plano y actualizará el live tile.

Finalmente, y esto es importante, ve a tu proyecto principal y agrega una referencia a MiAgente. Esto automáticamente te permitirá registrar tu agente desde dentro de la aplicación. También nota esta entrada automáticamente creada en el WMAppManifest.xml:

Crear la aplicación

Ahora es tiempo de juntarlo todo. Abre el MainPage.xaml y agrega dos botones, uno para iniciar el agente y el otro para detenerlo.