[WP7] Usando los servicios de Live

Preparando una idea para un juego que tengo entre manos se me ha ocurrido que podría intentar conectar con los servicios que ofrece Live para ofrecer una experiencia mas social en el juego a parte de lo que es el propio juego.

El SDK de Live nos permite hacer uso de Skydrive, los contactos y el calendario de Hotmail, podemos hacer uso del chat de Messenger y por supuesto autenticarnos en Live y acceder a algunos datos de nuestro perfil.

Bueno pues es esto último lo que voy a mostrar y posteriormente iré mostrando como hacer uso de los demás servicios. Para empezar vamos a descargar e instalar el SDK de Live a través de este link .

cap1

Una vez instalado abrimos Visual Studio y creamos un proyecto de Silverlight para Windows Phone y lo primero que tenemos que hacer es agregar las referencias a nuestro proyecto de Microsoft.Live y Microsoft.Live.Controls y añadir al ToolBox el componente que nos autentica en el servicio.

cap2

cap3

Antes de seguir construyendo el programa necesitamos un identificador para que la aplicación pueda acceder al servicio de Live, para eso vamos a ir al gestor de aplicaciones de Live Connect, donde tenemos que registrar el nombre de la aplicación, el idioma y si la aplicación que accede es movil o no. A cambio de esto obtenemos un identificador de cliente y un codigo secreto de cliente.

cap5

cap6

Ahora ya podemos añadir el componente que hemos agregado a la caja de herramientas, este componente simplifica la conexión con el servicio Connect de Live:

cap4

A continuación rellenamos el Client ID que hemos obtenido de registrar la aplicación en Live:

cap8

Podemos personalizar más cosas, una de ellas, la propiedad Scopes, esta propiedad nos permite definir el nivel de los permisos de acceso a nuestros datos que va a tener la aplicación.

Existen varios tipos de permisos según el servicio de Live que queramos utilizar pero como de momento estamos probando la autenticación y el acceso a los datos de nuestro perfil solamente tenemos que fijarnos en tres que son comunes a todos los servicios:

  • wl.basic:  este permiso nos da acceso a los datos del usuario y también a su lista de contactos.
  • wl.offline_access: como el anterior nos da acceso a la lectura y actualización de los datos del usuario. Si no lo usamos tenemos que iniciar sesión.
  • wl.signin: inicio de sesión único, los usuarios quedan conectados para todos los servicios.

El que yo he utilizado es el básico como podéis ver en la imagen de arriba, es mas que suficiente para poder acceder a los datos del usuario.

Bueno pues ya solo queda construir la interfaz, es simplemente el botón de logueo y un par de textblocks para mostrar que estas conectando y otro para enseñar la info del usuario, quedaría de la siguiente manera:

cap9

El código en XAML sería el siguiente:

<phone:PhoneApplicationPage
    x:Class="DemoLive1.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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Live.Controls;assembly=Microsoft.Live.Controls">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Conectando con los servicios de Live" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="DemoLive" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <my:SignInButton Content="Button" Height="113" HorizontalAlignment="Left" Margin="102,29,0,0" Name="signInButton1" VerticalAlignment="Top" Width="264" TextType="SignIn" ClientId="000000004C07BBAD" Scopes="wl.basic" SessionChanged="signInButton1_SessionChanged" />
            <TextBlock Height="30" Name="txtStatus" Text="" Width="397" TextAlignment="Center" />
            <TextBlock Height="Auto" HorizontalAlignment="Left" Name="txtInfo" Text="TextBlock" VerticalAlignment="Top" Width="438" TextWrapping="Wrap" Visibility="Collapsed" />
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

En la parte de código, en la clase MainPage.xaml.cs vamos a utilizar dos objetos LiveConnectClient y LiveConnectSession, el primero para obtener los datos del usuario y el segundo para determinar si hemos conectado correctamente con el servicio de Live.

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

namespace DemoLive1
{
    public partial class MainPage : PhoneApplicationPage
    {

        private LiveConnectClient client;
        private LiveConnectSession session;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void signInButton1_SessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
        {
            if (e.Status == LiveConnectSessionStatus.Connected)
            {
                session = e.Session;
                client = new LiveConnectClient(session);
                txtStatus.Text = "Obteniendo información...";
                client.GetCompleted += new EventHandler<LiveOperationCompletedEventArgs>(client_GetCompleted);
                client.GetAsync("me");
            }
            else
            {
                txtStatus.Text = "No estás conectado!!";
                client = null;
            }
        }

        void client_GetCompleted(object sender, LiveOperationCompletedEventArgs e)
        {
            ocultarControles();
            txtInfo.Text = e.RawResult.ToString();
            txtInfo.Visibility = System.Windows.Visibility.Visible;
        }

        private void ocultarControles()
        {
            txtStatus.Visibility = System.Windows.Visibility.Collapsed;
            signInButton1.Visibility = System.Windows.Visibility.Collapsed;
        }
    }
}

En el evento Session_Changed comprobamos si esta conectado o no. En el caso de estar conectado mostramos un mensaje indicando que es esta obteniendo la información, una vez esté descargada ocultamos los botones de conexión y el mensaje anterior para mostrar solamente los datos del usuario.

 cap91     cap92

cap93     cap94

Como podéis ver es bastante sencillo conectarse a Live y obtener los datos del usuario.

Espero que os sirva, os dejo el código de ejemplo aquí para que podáis ejecutarlo (debéis rellenar el ClientID). En el próximo post veremos ya como hacer uso de alguno de los otros servicios que nos ofrece Live.

Un saludo

[WP7] Como usar LongListSelector

Si navegamos por el Hub de People podemos ver que para recorrer nuestro listado de contactos disponemos aparte de arrastrar la lista, de una serie de cuadrados que contienen la letra inicial de los nombres que vienen a continuación.

Si pulsamos en uno de esos cuadrados aparece un panel con todas las letras del abecedario, seleccionando una de ellas nos posiciona en la sección que comienza por la letra que hemos pulsado.

Este componente que se llama LongListSelector también lo podemos usar en nuestras aplicaciones, para ello tenemos que instalar Silverlight Toolkit for Windows Phone disponible en la siguiente dirección: http://silverlight.codeplex.com/

LongListSelector está estructurado en siete partes (o templates) que podemos personalizar como queramos:

  • ListHeaderTemplate
  • ListFooterTemplate
  • GroupHeaderTemplate
  • GroupFooterTemplate
  • GroupItemsPanel
  • GroupItemTemplate
  • ItemTemplate

Para que funcione necesitamos que al menos GroupHeaderTemplate, GroupItemTemplate, GroupItemsPanel e ItemTemplate sean usados, los demás dependiendo de nuestras necesidades los podemos usar o no.

Para que os hagáis una idea de a que equivale cada template aquí tenéis un par de imágenes que aclararán un poco el asunto:

Para comenzar, una vez que tenemos instalado el Toolkit, abrimos Visual Studio y creamos un nuevo proyecto de Silverlight para Windows Phone 7:

Ahora vamos a preparar las clases que necesitamos para mostrar una lista de modelos de coche agrupados por su marca.

Lo primero que necesitamos es definir la entidad que representa a un coche:

Tengo creada una clase que se llama BaseViewModel.cs de la que me sirvo para notificar los cambios en una propiedad y saber si estoy en tiempo de diseño o no.

La idea es centralizar todos los métodos o propiedades en una sola clase para no tener que reescribir el código en el resto de clases que necesiten esas funciones.


Ahora tenemos que crear la clase que va a manejar la lista de coches, en este caso se va a llamar BrandViewModel.cs.

Como podéis ver tenemos una lista ObservableCollection que nos permite aumentar o disminuir la lista de forma dinámica sin tener que volverla a construir y ¿de qué tipo? pues el tipo es una lista de coches.

Es decir, Group es una clase que os enseñare más adelante que nos permite almacenar en una lista los coches de una misma marca, por lo que al final lo que estamos haciendo es una lista BrandGroupList, que contiene varias listas Group (una por cada marca) de coches

A continuación lo que podeis ver es el método LoadExampleInfo para cargar los datos de ejemplo en una lista y a continuación ordenarlos con DoOrder.

          

El método DoOrder agrupa los coches en listas de tipo Group y luego los añade a la lista que vamos a enlazar con la interfaz (Brand_Group_List).

Ya solo nos queda ver lo que hace la clase Group:

Básicamente tenemos el constructor que crea la lista y dos propiedades una que será “Key” que es la clave por la que organizamos los grupos y “HasElements” que nos dice si tiene elementos un grupo o no.

La clase es genérica para poderla usar en otros proyectos y no tener que volverla a modificar :D

Vale, pues con esto (que no es poco) ya tenemos nuestro origen de datos y podemos comenzar a trabajar en la interfaz. Para ello tenemos que añadir la referencia al Microsoft.Phone.Controls.Toolkit en nuestro proyecto, pulsando con el botón derecho del ratón en referencias, seleccionamos agregar referencia en el menú que aparece y luego buscamos la librería en la ventana que aparece:

De tal manera que obtendremos esto en nuestro proyecto una vez pulsemos sobre OK:

Además podéis añadir el componente LongListSelector a la caja de herramientas pulsando con el botón derecho del ratón y seleccionando “Choose item” en el menú contextual, en la ventana que se abre, seleccionáis el componente pulsáis en Ok.



Ahora el componente aparece en la caja de herramientas, podéis usar el componente simplemente arrastrándolo desde la caja de herramientas a MainPage.xaml en la vista de diseño.

También se puede editar la interfaz con Expression Blend o ir trabajando directamente en XAML añadiendo los templates que deseéis usar, en cualquier caso tendréis algo parecido a esto:

Template de ListHeader:

Template de ListFooter:


Template de GroupItems:


Template de GroupItem:


Template de GroupHeader:

Template de GroupHeader:

Una vez está terminada la interfaz hay que ir al MainPage.xaml.cs y apuntar la propiedad ItemSource del componente para que cuando arranque la aplicación la lista este rellena:


Espero que esto os ayude a usar este componente, podéis acceder al código del ejemplo desde aquí :)


Tags: ,
Posted in Sin categoría by cesar. 2 Comments

[Links] Links of the week

Hola a todos!!

pues nada aquí estoy un sábado más con unos enlaces la mar de interesantes ;)

  • El primero de todos es Raspberry Pi, un pedazo de proyecto que promete para finales de este año un mini ordenador por 25 dolares. Se trata de una máquina justa en prestaciones pensada para la los más necesitados. Usa GNU-Linux como sistema operativo y lo mejor de todo es que el Quake III ¡¡FUNCIONA!! :D
  • La nueva versión de Windows empieza a verse en la red y no solo trae novedades para los usuarios, sino también para los desarrolladores. Os dejo un resumen en este post escrito por Eugenio Estrada.
  • Este enlace va dedicado a los profes de mi universidad que dicen “no” a usar productos de Microsoft sin dar explicación alguna. Creo que dedicare un post a esto pero de momento dejo esto: “Microsoft ha muerto“.

 

Un saludo

Posted in Links by cesar. No Comments

[Links] Links of the week

Hola a tod@s, ¡¡es sábado!!

y con este post inauguro la nueva sección de mi blog “Links of the week” que intentare que aparezca los sábados con aquellos enlaces a sitios que me han llamado la atención durante la semana y que merecen la pena ser nombrados.

Los links de esta semana son:

  • Saving trees for a greener City of Madrid. Aquí os dejo un artículo que habla de una herramienta que se encuentra a disposición de los habitantes de Madrid para pedir que planten arboles en su barrio, informarse de las especies de arboles plantadas en la ciudad, notificar deficiencias, etc,. Y todo ello usando Windows Azure y Silverlight
  • Photoduino es una iniciativa para contruir un controlador para cámara de fotos basado en Arduino. Tiene muy buena pinta sobre todo si quieres hacer time lapses o fotografiar tormentas.
  • Intervaluino este es un aparato similar a photoduino en cuanto al objetivo del proyecto pero con menos funciones que el anterior.Usa .NET y Netduino.
  • El wallpaper de XP. Si quieres saber de donde ha salido entra en el enlace, es bastante curioso.
  • Autopsia de un Pentium III. Creo que el título lo dice todo ;)
  • PaTTY el tester de la Surfac2.0

Espero que os resulten tan curiosos como a mi :)

Saludos

Posted in Links by cesar. No Comments

[WP7] Nueva versión del toolkit de Silverlight para Windows Phone

Hola a tod@s,

hace un par de días ha aparecido la versión estable del Silverlight Toolkit for Windows Phone, la última versión estable salio por febrero de este año.

Pero bueno, el caso es que ya la tenemos aquí y trae algunas novedades. Antes de nada para los que no se hallan actualizado, es necesario tener instalado la ultima versión de las herramientas de desarrollo para “Mango”.

Se han añadido algunos componentes: PhoneTextBox, DateTimePickers, LockablePivots, MultiSelectList, LongListSelector, HubTitle, ExpanderView y HeaderedItemsControl. Y como siempre se han solucionado algunos fallos y se ha optimizado el rendimiento de los componentes.

La verdad es que viene bastante completo, podeis ver la descripción de todas las novedades en el blog de Jeff Wilcox.

Y nada a parte de dejaros los enlaces correspondientes os recomiento que os bajeis el XAP de ejemplo y que lo metais en el emulador o en vuestro movil para ver como funciona :)

Recursos:

 Windows Phone SDK 7.1 Beta 2

Silverlight Toolkit for Windows Phone

 Saludetes ;)

Tags: ,
Posted in Windows Phone 7 by cesar. No Comments

Google compra la división de móviles de Motorola

Pues con esta interesante noticia me he levantado esta mañana.

Parece que este año nadie quiere descansar en agosto y si hace unos días se despertaban los rumores sobre la salida de Mango, la nueva versión de Windows Phone, al mercado este proximo 1 de septiembre hoy es que Google intentando plantar cara a Apple y Microsoft en el terreno de los smartphones ha comprado la división de telefonía movil de Motorola.

¿Como nos puede afectar esto? pues en primer lugar los teléfonos que van a llevar la voz cantante en cuanto a implementar nuevas caracteristicas en sus terminales serán Apple, Nokia y Motorola, además de que serán los primeros de la cola en pedir y adquirir nuevas funcionalidades el los sistemas operativos.

Eso si, aunque efectivamente Google sale reforzada en su lucha contra Apple y Microsoft por las patentes en móviles, ahora Android no resulta tan neutral ya que Motorola sera la cabeza visible en la que todo el mundo se fijara para ver el camino que sigue Android por lo que muchas empresas quizás se empiecen a plantear lazar algunos modelos más con el sistema Windows Phone de Microsoft para no quedarse en desventaja frente a Motorola.

En cualquier caso para los desarrolladores es mas lo que ganamos que lo que perdemos pues la experiencia que tiene Motorola aportada a Android seguro que hace mejorar las herramientas de desarrollo en este sistema y tanto a los demás fabricantes de móviles como a Microsoft y Apple competir más por sacar nuevas caracteristicas tanto en el hardware como en el software, que al final siempre mejora la experiencia del usuario final del teléfono.

Más opiniones en Xataka y Engadget.

Tags: , ,
Posted in Noticias by cesar. No Comments