Como desarrollar Aplicaciones de Windows 8 utilizando listas de SharePoint 2013

La primera vez que nos disponemos a desarrollar una aplicación para Windows 8 que obtenga la información de SharePoint, pensamos que este proceso será relativamente sencillo debido principalmente a que dispondremos de un SDK que nos facilitará la vida (de la misma forma que lo hay en Windows Phone 7.1 y 8). Pero la realidad es que no existe este SDK, además, tampoco funcionará utilizando cualquier dll existente porque las librerias clientes de SharePoint no funcionan en Windows 8 debido a que existe una dependencia de System.Web.Service.dll que lo hace incompatible. Por tanto, esta opción está totalmente descartada. A día de hoy no hay fecha ni anuncio por parte de Microsoft de la publicación de este SDK.

Así que, la única alternativa para hacer poder hacer APP W8 con listas de SharePoint 2013 es hacer uso de la API REST de una forma semejante como si estuviéramos desarrollando sobre una plataforma NO Microsoft, es decir: iPhone, iPad o Android.

Para empezar con el desarrollo, abrimos Visual Studio 2012, seleccionamos una Aplicación Vacia (XML) de la Windows Store:

A continuación le añadimos una elemento de página:

Si nos planteamos realizar desarrollos para publicarlos en la Windows Store es bueno echarle un ojo a las plantillas que vienen predefinidas, ya que ahorran mucho trabajo en cuanto al diseño y desarrollo debido a que utilizan el famoso patrón Model View View Model (MVVM) . Este patrón consiste en separar las Capa vista del modelo utilizando entre medio un Modelo de la Vista que se encarga de mapear los datos en ambas direcciones. De esta forma conseguimos un software más escalable y de mayor calidad.

Antes de empezar con el desarrollo conviene ir al Manifest.xml de la aplicación y activar las siguientes capacidades:

Hay que seleccionar estas opciones para permitir realizar las llamadas API Rest a nuestro SharePoint y también hay que añadirlo para obtener la verificación si queremos subir esta APP a la Store.

Una vez ya tenemos el entorno de trabajo preparado ahora viene lo más divertido 🙂 ponerse con el desarrollo. Para ello, nos vamos al fichero ItemsEmpleado.cs y nos creamos la siguiente función asíncrona BindData (el motivo de hacerla asíncrona es que ahora no nos podemos permitir tener al usuario parado y de esta forma nuestra aplicación mientras espera la respuesta de la API Rest puede ir realizando otras tareas)

private async void BindData()
 {
string restUrl = "http://www.iberiansharepointconference.com/_api/web/lists/getbytitle('Empleados')/items?$select=Title,Apellidos,PuestodeTrabajo,Descripcion";
 httpClientHandler.UseDefaultCredentials = true;
 HttpClient client = new HttpClient(httpClientHandler);
 client.DefaultRequestHeaders.Add("Accept", "application/atom+xml");
client.DefaultRequestHeaders.Add("ContentType", "application/atom+xml;type=entry");
var response = await client.GetAsync(restUrl);
 response.EnsureSuccessStatusCode();

 string responseBody = await response.Content.ReadAsStringAsync();

             XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.LoadXml(responseBody);

            StringReader reader = new StringReader(responseBody);
            XDocument responseXml = XDocument.Load(reader, LoadOptions.None);

            XNamespace atom = "http://www.w3.org/2005/Atom";
            XNamespace d = "http://schemas.microsoft.com/ado/2007/08/dataservices";
            XNamespace m = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";
            var items = from item in responseXml.Descendants(atom + "entry")
                 select new
                    {
                        Title = item.Element(atom + "content").Element(m + "properties").Element(d + "Title").Value,
                        Apellidos = item.Element(atom + "content").Element(m + "properties").Element(d + "Apellidos").Value,
                        PuestoDeTrabajo = item.Element(atom + "content").Element(m + "properties").Element(d + "PuestodeTrabajo").Value,
                        Descripcion = item.Element(atom + "content").Element(m + "properties").Element(d + "Descripcion").Value
                    }
                        ;
            this.DefaultViewModel["Items"] = items;

       }

De este código se puede observar que se realiza una llamada a la API REST con los parámetros que indica Microsoft en la MSDN. Lo más novedoso y donde debemos prestar más atención, es en las Credenciales de Usuario. En este ejemplo al coincidir el usuario con el que arranco Windows 8 con el usuario de mi SharePoint, puedo utilizar las credenciales por defecto. Si en nuestro caso no coincide, bien tendriamos que hacer una pantalla de Login previa y crearnos unas «CredentialNetworks» con los datos obtenidos o bien, si estamos utilizando un Office365, se ha de realizar de otra forma (tengo pendiente un post sobre como realizarlo). En nuestro caso hemos realizado una llamada sobre una lista llamada «Empleados» que tiene los siguientes campos: Titulo, Apellidos,PuestodeTrabajo y Descripción.

Una vez hemos obtenido la respuesta de SharePoint, tenemos la información que nos ha devuelto la API Rest pero sin formato alguno, por lo que la convertimos en XML y de dicho XML obtenemos los datos de la lista. Finalmente asignamos estos datos al ViewModel.

Si ejecutamos la APP ahora mismo, veriamos que en la pantalla solo vemos el campo «Titulo», esto es debido a que debemos modificar el Template que se muestra por defecto y añadirle los campos que queremos mostrar.  Para hacerlo hay que editar el fichero «StandardStyles.xaml» que se encuentra en la Carpeta «Common» y añadimos nuestro Template»Empleados»

<DataTemplate x:Key=”TaskItemTemplate”>

<Grid HorizontalAlignment=”Left” Width=”250″ Height=”250″>

<StackPanel VerticalAlignment=”Top” Background=”{StaticResource ListViewItemOverlayBackgroundThemeBrush}”>

<TextBlock Text=”{Binding Title}” Foreground=”{StaticResource ListViewItemOverlayForegroundThemeBrush}” Style=”{StaticResource TitleTextStyle}” Height=”60″ Margin=”15,0,15,0″/>

<TextBlock Text=”{Binding Apellidos}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>

<TextBlock Text=”{Binding PuestoDeTrabajo}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>

<TextBlock Text=”{Binding Descripcion}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>

</StackPanel>

</Grid>

</DataTemplate>

El siguiente paso es asignar este estilo en el «Grid» de la página de Empleados y a la propiedad «ItemTemplate» asignarle este  Template.

Lanzamos  nuestra aplicación y obtenemos el siguiente resultado:

El código de este ejemplo lo podéis descargar desde el siguiente link.

Conclusión

En este ejemplo hemos visto lo sencillo que es crear una APP de Windows 8 utilizando nuestro servidor favorito. La Windows Store es un mercado en expansión que esta creciendo a pasos agigantados y hemos visto lo sencillo que es realizar aplicaciones para el Store. Además, allí  todo tiene cabida: es un mercado que no solo está a disposición de las empresas sino también de los particulares. Además, es un plus de calidad que se le puede dar a los clientes: va a tener una buena página web sino que además tiene la posibilidad de tener una APP en el Store para tener mucha mayor difusión. ¿No te animas?