Windows Phone 7 Beta tools el emulador no se ejecuta

Con la llegada de la versión Beta de las herramientas de desarrollo del Windows Phone 7 y un nuevo Training Kit, me puse manos a la obra para ampliar mi perspectiva en la citada plataforma.

Instale la versión Beta previa desinstalación de las herramientas de desarrollo(CTP Abril 2010), según las indicaciones del grupo de desarrollo. Al compilar y lanzar el emulador para ejecutar la aplicación creada, me aparece el siguiente error:"Connection failed because of invalid command line arguments". No nos alarmemos,”Si, tenemos solución”, nos situamos en la ubicación %LocalAppData%/Microsoft/ y borramos el directorio Phone Tools.Ya que si teníamos instaladas las anteriores herramientas de desarrollo hace incompatible la utilización del nuevo emulador. De este modo reiniciamos el emulador, volvemos a ejecutar nuestra aplicación y listo para sumergirnos en esta maravillosa plataforma.

image

Añadir nuevo registro mediante R.I.A. Services

En artículos anteriores he tratado Silverlight R.I.A. Services de forma global, en el artículo que hoy me ocupa voy a centrarme en añadir un nuevo registro a través de la citada plataforma.

En primer lugar deberemos añadir a nuestro proyecto, los elementos necesarios para usar los servicios R.I.A y la base de datos donde vamos añadir un nuevo registro. Estos pasos los podemos encontrar en el primer artículo que escribí sobre esta plataforma.

Para introducir un nuevo registro, vamos a crear una nueva ventana emergente, que aparecerá en la interfaz de usuario cuando el usuario haga clic sobre un botón que denominaremos Insertar.Para ello nos situamos en el lado del cliente de nuestro proyecto. Presionamos con el botón derecho sobre este y elegimos insertar un nuevo elemento. En la sección Silverlight elegimos el elemento Silverlight Child Window como podemos observar en la siguiente imagen:

image

Seguidamente accedemos al nuevo elemento que hemos añadido Insertar.Xaml, dentro del mismo en el área de diseño introduciremos un objeto DataForm. Dicho objeto lo podremos añadir a través de la barra de herramientas de visual Studio 2010 y nos servirá para que el usuario pueda introducir los diferentes campos del nuevo registro.

Una vez añadido el objeto, deberemos introducir los campos de los que va constar el nuevo registro. Para ello introducimos el siguiente fragmento de código:

DataForm
  1. <toolkit:DataForm Height="426" HorizontalAlignment="Left" Name="AñadirElemento" VerticalAlignment="Top" Width="378" AutoEdit="True" CommandButtonsVisibility="None">
  2.             <toolkit:DataForm.EditTemplate>
  3.                 <DataTemplate>
  4.                     <StackPanel>
  5.                         <toolkit:DataField>
  6.                             <TextBox Text="{Binding Nombre, Mode=TwoWay}" />
  7.                         </toolkit:DataField>
  8.                         <toolkit:DataField>
  9.                             <TextBox Text="{Binding Clase, Mode=TwoWay}" />
  10.                         </toolkit:DataField>
  11.                         <toolkit:DataField>
  12.                             <TextBox Text="{Binding Color, Mode=TwoWay}" />
  13.                         </toolkit:DataField>
  14.                         <toolkit:DataField>
  15.                             <TextBox Text="{Binding Stock, Mode=TwoWay}" />
  16.                         </toolkit:DataField>
  17.                         <toolkit:DataField>
  18.                             <TextBox Text="{Binding StockSeguridad, Mode=TwoWay}" />
  19.                         </toolkit:DataField>
  20.                         <toolkit:DataField>
  21.                             <TextBox Text="{Binding CosteEstandar, Mode=TwoWay}" />
  22.                         </toolkit:DataField>
  23.                         <toolkit:DataField>
  24.                             <TextBox Text="{Binding PrecioVenta, Mode=TwoWay}" />
  25.                         </toolkit:DataField>
  26.                         <toolkit:DataField>
  27.                             <controls:DatePicker Text="{Binding FechaAlta, Mode=OneWay}">
  28.                             </controls:DatePicker>
  29.                         </toolkit:DataField>
  30.  
  31.                     </StackPanel>
  32.                 </DataTemplate>
  33.             </toolkit:DataForm.EditTemplate>
  34.  
  35.         </toolkit:DataForm>

Ahora nos situamos en el código behind de la ventana que hemos añadido con anterioridad (Insertar.xaml.cs) e introduciremos la referencia a el proyecto en la parte del servidor añadiendo la siguiente directiva:

  1. using InsertarRegistro.Web;

La siguiente acción que llevaremos a cabo es introducir el siguiente fragmento de código en Insertar.xaml.cs:

  1. namespace InsertarRegistro
  2. {
  3.     public partial class Insertar : ChildWindow
  4.     {
  5.         public Productos NuevoProducto { get; set; }
  6.         public Insertar()
  7.         {
  8.             InitializeComponent();
  9.             NuevoProducto = new Productos();//objeto con la misma estructura que Productos
  10.             NuevoProducto.FechaAlta = DateTime.Now.Date;//Iniciar la fecha a hoy.
  11.             AñadirElemento.CurrentItem = NuevoProducto; //el item actual del formulario de
  12.             //datos toma la estructura de datos del objeto NuevoProducto
  13.             this.Closing += new EventHandler<System.ComponentModel.CancelEventArgs>(AddNew_Closing);
  14.             //llamada al método en el que si no se han introducido todos los datos
  15.             //estos no se envien a la base de datos.
  16.             
  17.         }
  18.         void AddNew_Closing(object sender, System.ComponentModel.CancelEventArgs e)
  19.         {
  20.             if (DialogResult == true)
  21.                 e.Cancel = !AñadirElemento.CommitEdit();
  22.             //Si no se introducen todos los elementos
  23.             //correctamente y se cierra la ventana de
  24.             //nuevo elemento, estos no se añadirán
  25.         }
  26.  
  27.         private void OKButton_Click(object sender, RoutedEventArgs e)
  28.         {
  29.             this.DialogResult = true;
  30.             AñadirElemento.CommitEdit();//actualización de elementos
  31.         }
  32.  
  33.         private void CancelButton_Click(object sender, RoutedEventArgs e)
  34.         {
  35.             this.DialogResult = false;
  36.         }
  37.     }
  38. }

Seguidamente vamos a introducir un nuevo botón en la interfaz de usuario, que nos servirá para mostrar la ventana secundaria de Silverlight creada con anterioridad. Haremos doble clic sobre el botón y de este modo se creará el código Behind para el evento clic del botón. Dentro de dicho evento introducimos el siguiente código:

  1.  
  2. private void button1_Click(object sender, RoutedEventArgs e)
  3. {
  4.     Insertar Insertarregistro = new Insertar();
  5.     Insertarregistro.Closed += new EventHandler(cerrar_nuevoelemento);
  6.     Insertarregistro.Show();//muestra el formulario para añadir
  7.     //nuevo elemento
  8.  
  9. }
  10. void cerrar_nuevoelemento(object sender, EventArgs e)
  11. {
  12.     var win = sender as Insertar;
  13.     var contexto = productosDomainDataSource.DomainContext as StockBikesDomainContext;
  14.     if (win != null && contexto != null && win.DialogResult == true)
  15.     {
  16.         contexto.Productos.Add(win.NuevoProducto);
  17.         //añade un nuevo elemento a la BD
  18.         //en espera que nosotros actualicemos los cambios
  19.         //en el servidor
  20.     }
  21.  
  22. }

De este modo el usuario puede dar de alta un nuevo registro en la base de datos de una forma intuitiva y funcional.

image

Enviando Tweets desde Windows Phone 7

En los últimos días he estado jugando con aplicaciones para Windows Phone 7. Leyendo una serie de blogs, en los que se interactuaban con Twitter desde Windows Phone 7, me animé a desarrollar una sencillísima aplicación que te permitiera la creación y envió de un nuevo Tweet desde el el mencionado dispositivo.

image

Comenzaremos instalando las herramientas de desarrollo de Windows Phone, también nos ayudará Expressión Blend 4  para diseñar nuestra aplicación. Como ya habréis podido leer en un artículo anterior, Expressión Blend4  necesita una serie de complementos para diseñar aplicaciones en Windows Phone 7. Por otro lado es necesario que cuentes con una cuenta de Twitter para poder publicar un Tweet en tu perfil.

Ahora que ya tenemos el instrumental necesario, vamos a empezar a desarrollar la aplicación. Abrimos Visual Studio 2010, nos situamos en la sección Silverlight para Windows Phone y elegimos la plantilla Aplicación de Windows Phone.

 

image

Como podemos observar, si estamos habituados a trabajar con Silverlight, la disposición tanto de la interfaz de usuario como el código Behid es exactamente igual. La interfaz de usuario de la aplicaciónque nos ocupa, constará de una cabecera con el título e imagen de la aplicación. Un control  TextBlock que nos indicará los caracteres que vamos introduciendo en un nuevo TextBlock (como es lógico un máximo de 140), este será el Tweet que se enviará a tu cuenta de Twitter.Como últimos elementos añadiremos un botón para el envío del Tweet y un TextBlock  que avisará al usuario del envío del Tweet. El resultado visual es el siguiente:

image

Para conseguir dicha interfaz de usuario debemos abrir el archivo Mainpage.xaml e introducir el siguiente código:

 

Interfaz Usuario
  1. <navigation:PhoneApplicationPage
  2.     x:Class="EnviarTweet.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:navigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     SupportedOrientations="Portrait"
  9.     mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
  10.  
  11.     <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}">
  12.         <Grid.RowDefinitions>
  13.             <RowDefinition Height="170"/>
  14.             <RowDefinition Height="*"/>
  15.         </Grid.RowDefinitions>
  16.  
  17.         <!–This is the name of the application and page title–>
  18.         <Grid Grid.Row="0" x:Name="TitleGrid">
  19.             <TextBlock x:Name="ApplicationName" Style="{StaticResource PhoneTextPageTitle1Style}" Margin="210,6,-202,18" FontSize="32" FontFamily="Arial Black"><Run Text="Actualizar "/><LineBreak/><Run Text="el estado"/><Run Text=" "/><Run Text="del"/><LineBreak/><Run Text="Usuario"/></TextBlock>
  20.             <Image x:Name="ImgTweet" Margin="22,10,0,6" Source="Imagenes/tweet.png" Stretch="Fill" HorizontalAlignment="Left" Width="158"/>
  21.         </Grid>
  22.  
  23.         <!–This section is empty. Place new content here Grid.Row="1"–>
  24.         <Grid Grid.Row="1" x:Name="ContentGrid">
  25.             <TextBlock x:Name="Caracteres" Height="34" Margin="108,8,102,0" TextWrapping="Wrap" FontFamily="Arial Black" FontSize="18.667" Foreground="White" Text="Te quedan 140 Caracteres" VerticalAlignment="Top" d:LayoutOverrides="Width"/>
  26.             <TextBox x:Name="Entrada" Margin="22,42,28,208" TextWrapping="Wrap" Foreground="#FF1BA1E2" Background="White" FontFamily="Arial Black" FontSize="21.333" TextChanged="Entrada_TextChanged" KeyDown="Entrada_KeyDown" MaxLength="140" />
  27.             <Button Content="ACTUALIZAR" Height="83" Margin="108,0,102,121" VerticalAlignment="Bottom" Click="Button_Click" Name="Actualizar" IsEnabled="True" />
  28.             <TextBlock Height="131" Margin="169,0,124,0" TextWrapping="Wrap" VerticalAlignment="Bottom" FontFamily="Arial Black" FontSize="24" Foreground="Red" Name="Envio" Visibility="Collapsed" Text="El Tweet fue actualizado exitosamente" HorizontalAlignment="Center" Width="187" />
  29.             
  30.         </Grid>
  31.     </Grid>
  32. </navigation:PhoneApplicationPage>

A continuación vamos a lanzar el evento del Botón Actualizar.Para ello, hacemos doble clic sobre el mismo creándose el controlador del mismo en el código Behind de la aplicación(MainPage.xaml.cs). Dicho evento, llama a un método que se encarga de acceder la URI de publicación del estado de un usuario a través de la API de Twitter,  además le pasamos los credenciales de tu cuenta de Twitter para autorizar dicha publicación, como podemos ver en el siguiente fragmento de código:

Evento click
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             ActualizarEstado();
  4.         }
  5.         void ActualizarEstado()
  6.         {
  7.             HttpWebRequest req = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml?status=" + Entrada.Text);//uri para publicar entrada
  8.             req.Method = "POST";//método de la API Twitter para publicar Nuevo Tweet
  9.             req.Credentials = new NetworkCredential("Usuario", "contraseña");//credenciales
  10.             req.ContentType = "application/x-www-form-urlencoded";
  11.             req.BeginGetResponse(new AsyncCallback(GetResponseCallback), req);//Llamada asincrona para realizar las correspondientes acciones
  12.         }

Como hemos podido observar la ultima instrucción realiza la llamada al método GetResponseCallback de forma asincrona, debido a que la API de Twitter se basa en REST, Silverlight realiza sus acciones de forma asincrona.

Llamada asincrona
  1. void GetResponseCallback(IAsyncResult asynchronousResult)
  2.         {
  3.  
  4.             HttpWebRequest request = (HttpWebRequest)asynchronousResult.AsyncState;
  5.             HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(asynchronousResult);
  6.             response.Close();
  7.             Dispatcher.BeginInvoke(() => Entrada.Text = "");//Limpia el Texblock al enviar Tweet
  8.             Dispatcher.BeginInvoke(() => Envio.Visibility = Visibility.Visible);//Visibiliza que el Tweet a sido enviado
  9.             Dispatcher.BeginInvoke(() => Envio.Text = "El Tweet fue actualizado exitosamente");//Rellena el control con el mensaje deseado
  10.         }

Se completa la llamada asincrona y mientras realizamos esta acción,para realizar el cambio de propiedades de elementos de la interfaz de usuario debemos utilizar el método Dispatcher.BeginInvoke().

El siguiente paso es limitar el número máximo de caracteres que el usuario puede introducir en el control TextBlock. Para ello seleccionamos dicho objeto y cambiamos la propiedad  MaxLength a el valor 140.

image

También vamos a controlar el número de caracteres que va introduciendo el usuario, a fin de aportarle información sobre el estado de su nuevo Tweet. Seleccionamos el objetos TextBlock, donde introduce el usuario el nuevo Tweet y lanzamos el evento TextChanged añadiendo el siguiente código al mismo:

TextChanged
  1. private void Entrada_TextChanged(object sender, TextChangedEventArgs e)
  2.       {
  3.           if (Entrada.Text.Length != 0)
  4.           {
  5.               Envio.Text = "";
  6.           }
  7.  
  8.           Caracteres.Text = "Te quedan " + (140 – Entrada.Text.Length).ToString() + " caracteres";
  9.  
  10.       }

Por último vamos a darle al usuario la posibilidad de publicar el nuevo Tweet cuando este presione Intro, para agilizar dicha acción. Seleccionando el mismo objeto Texblock que antes, le agregamos el evento KeyDown, de este modo controlaremos que el usuario presione la citada tecla del teclado y publique el Tweet, como podemos observar a continuación:

KeyDown
  1. private void Entrada_KeyDown(object sender, KeyEventArgs e)
  2.       {
  3.           if (e.Key == Key.Enter)
  4.           {
  5.  
  6.               ActualizarEstado();
  7.  
  8.           }
  9.       }

Ya tenemos nuestra sencilla aplicación, aprovechando la versatilidad que nos otorgan las diferentes herramientas mencionadas. Ahora queda de mano de tu creatividad, que le des un diseño más dinámico a la funcionalidad que proporciona el API de Twitter.

image

image

Expression Blend 4 & Windows Phone 7

Realizando una serie de aplicaciones de Windows Phone 7 con Visual Studio 2010, sentí la necesidad de otorgarles un toque más dinámico. Como ya había trabajado con Expressión Blend en Silverlight y WPF, seguí la misma senda para diseñar y desarrollar aplicaciones Windows Phone 7 de forma sencilla y rápida. Para un uso correcto de ambas herramientas deberás instalar los siguientes complementos en el orden que menciono a continuación:

  1.  Microsoft Expression Blend 4 RC
  2. Herramientas de desarrollo de Windows Phone 7(SDK)
  3. SDK de Expression Blend 4 para Windows Phone 7
  4. Add-in de Windows Phone 7 para Expression Blend 4

Una vez tengamos instalado el software dispondremos de las plantillas de Windows Phone 7 y toda la capacidad de diseño de esta excelente herramienta.

image

image

Nota:Aunque la versión final de Expression Blend 4 ha sido lanzada, el SDK de Windows Phone 7 funciona de forma correcta solo en la versión RC.

Silverlight+Excel 2010+Power Pivot= Análisis dinámico de datos

Power Pivot es un complemento que nos permite realizar el análisis de datos a través de Excel 2010, tomando como fuentes de datos un blog,un servidor, una base de datos, un sitio web público, otro libro de Excel… cualquier origen que pueda establecer una conexión remota.

Esta capacidad que otorga Power Pivot para poder trabajar con gran volumen de datos, es posible gracias al aprovechamiento de  las capacidades multi core de los nuevos equipos y toda la memoria RAM instalada en el sistema, sobre todo cuando contamos con equipos que corren versiones de 64 bits del sistema operativo Windows.

Una vez que hemos explicado que es Power Pivot, vamos a centrarnos en la utilización de este complemento tomando como fuente de datos una aplicación Silverlight 4. Para ello, tendremos que tener creada una aplicación de Silverlight 4 ,en el que utilicemos R.I.A. Services, como hemos podido el artículo que publicado con anterioridad. También deberemos tener instalado Excel 2010 y el complemento Power Pivot para dicha plataforma.

Una vez establecidos los requisitos vamos a meternos en materia.Vamos a utilizar el protocolo OData, para que los usuarios puedan tener acceso a los datos contenidos en la aplicación Silverlight y así poder analizarlos de forma sencilla y dinámica.  Para poder usar el protocolo lo podemos hacer de dos formas, la primera es, cuando añadimos un nuevo servicio de dominio, al establecer las directrices de los servicios R.I.A de Silverlight. En este caso debemos marcar la casilla de Expose OData EndPoint como podemos ver en la siguiente imagen:

image

De esta forma ya podríamos importar a Excel 2010  los datos de nuestra aplicación Silverlight.

El segundo caso es cuando ya tenemos creado el servicio de dominio, en este caso simplemente debemos acceder al archivo Web.config de nuestra aplicación Silverlight. En la sección <system.serviceModel> añadimos el siguiente fragmento de código:

  1. <domainServices>
  2.  
  3.       <endpoints>
  4.         <add name=«OData« type=«System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35« />
  5.  
  6.       </endpoints>
  7.  
  8.     </domainServices>

 

De esta forma estamos permitiendo el acceso a las diferentes entidades contenidas en el servicio de dominio (NorthwindDomainService en mi caso). Seguidamente vamos asignamos las entidades del servicio de domino que queremos que tengan acceso los usuarios. Para ello nos situamos en el servicio de dominio (NorthwindDomainService.cs). Como queremos tener acceso a las entidades City,Customers, Employees y Orders que están contenidas en la más que conocida base de datos Northwind. Para ello precediendo a los métodos de las entidades nombradas con anterioridad debemos introducir la siguiente sentencia de código:

[Query(IsDefault = true)]

 

 

 

 

image

El paso siguiente es comprobar que tenemos acceso a los métodos nombrados con anterioridad. Para ello incluimos en el navegador la siguiente URL: http://Nombre_del_Servidor/Nombre_de_la_Aplicación-Web-Nombre_del_servicio_de_dominio.svc/OData/, en  mi caso esta es la url que utilizo para acceder a las distintas entidades del proyecto(http://localhost:52063/SilverlightBusinessApplication-Web-NorthwindDomainService.svc/OData/). Siendo el resultado el de la siguiente imagen:

image

Cómo podemos observar los datos devueltos del servidor son en formato XML, para que estos datos sean legibles por el usuario vamos abrir Excel 2010 y el complemento Power Pivot. En un nuevo libro de Excel 2010 acedemos a la pestaña Power Pivot, después presionamos en la sección Ventana de Power Pivot

image

Al realizar dicha acción emergerá una nueva ventana, que nos permitirá elegir la fuente de datos. Elegimos Fuentes de datos Externos image

image

La siguiente ventana que nos es presentada, nos pedirá la url o ubicación de la fuente de datos. Debemos introducir la url que hemos utilizado con anterioridad para interactuar con las diferentes entidades de la fuente de datos(http://Nombre_del_Servidor/Nombre_de_la_Aplicación-Web-Nombre_del_servicio_de_dominio.svc/OData/)

image 
En la siguiente ventana aparecen las diferentes entidades. Como podemos observar podemos seleccionar aquellas que creamos oportunas. En mi caso elegiré todas las entidades.

 

 

 

 

 

 

image

por otro lado también tenemos la posibilidad de editar los nombres por los que vamos a reconocer las diferentes entidades.

image

Por otro lado tenemos la posibilidad de vista previa y de filtrado.

image

 

 

Deseleccionamos los diferentes campos que creamos oportunos, presionamos Aceptar y Finalizar.

Como podemos observar se cargan las diferentes tablas, con sus respectivas filas:

image

Al presionar Cerrar, vemos como los datos son adquiridos, separando cada una de las tablas en una hoja.
De este modo podemos además de Importar Datos de nuestra aplicación presentarlos de una forma más dinámica y legible al usuario. 
Nos situamos en la hoja Pedidos y accedemos a la sección PivotTable y elegimos la opción Gráfico y tabla Horizontal.
image 
Seguidamente elegimos los campos que queremos que aparezcan en la tabla, para este apartado elegimos Freight en la entidad Pedidos y CityName en la entidad Ciudad.
Por último presionamos sobre crear y los datos serán importados en la tabla.
image 
Repetimos exactamente los mismos pasos en el gráfico y el resultado final es el siguiente:

image

 

 

 

En resumen , los usuarios pueden tener en todo momento acceso a los datos de la aplicación Silverlight, de una manera rápida y dinámica. Consiguiendo con ello, un mayor control de los datos, para realizar una gestión eficiente de las acciones llevadas a cabo en su empresa.. También podemos tener Business Intelligence, conectando Power Pivot con SharePoint 2010 o SQL Server 2010 siendo la actualización de datos en tiempo real, consiguiendo con ello una plena integración de las herramientas ofimáticas con las plataformas nombradas con anterioridad.

Ordenación y agrupación de datos en WCF R.I.A para Silverlight 4

En artículos anteriores hemos visto como podemos implementar WCF R.I.A Services en Silverlight 4. Ahora vamos a ir más allá para poder ver una parte del abanico de posibilidades que nos puede ofrecer este modelo.

Lo primero de todo es situarnos.Tenemos un proyecto que toma como fuente de datos, la archiconocida base de  datos Northwind. Las distintas tablas sobre las que vamos a trabajar (en concreto Orders, Employes y Customers) están relacionadas entre sí. Los datos de la tabla Orders son presentados en la interfaz de usuario a través del control DataGrid. El objetivo que perseguimos es poder ordenar estos datos y a la vez agruparlos según los criterios que consideremos relevantes.

Queremos realizar una organización de los datos del DataGrid. Para ello vamos a ordenarlos por el campo ShipCity y agruparlos por el campo ShipCountry.

Accedemos a el esquema de Home.xaml (debido a que es la página con la que trabajamos por defecto) para seleccionar el objeto ordersDomainDataSource. En la propiedad SortDescriptors, hacemos clic sobre el botón que esta anexo al título de la propiedad para editar los elementos de la colección.Cómo podemos observar a continuación:

image

En el editor de la colección de elementos añadimos un nuevo SortDescriptor. En el campo PropertyPath introducimos el valor del campo (ShipCity) por el cual van a ser ordenados los diferentes datos.

image

Ejecutamos la aplicación y podemos observar como los datos son ordenados por el campo deseado.

image

El siguiente paso es aplicar a los datos ordenados por el campo ShipCity, una agrupación por el campo ShipCountry. Para ello teniendo seleccionado el mismo objeto sobre el que hemos realizado la ordenación de datos, vamos a acceder a la propiedadad GroupDescriptor. Al hacer clic sobre el botón anexo al título de la propiedad, surgirá una nueva ventana emergente en la que debemos añadir un nuevo GroupDescriptor. En la propiedad PropertyPath el valor que tomará para realizar el agrupamiento será ShipCountry.

image

Ejecutamos el proyecto y vemos como además de estar ordenado esta agrupado por los campos que hemos decidido a lo largo de este apartado.

 

image

SharePoint 2010-Evolución vs Revolución

MOSSEvo_2blog

El próximo día 15/06/2010 a partir de las 11 de la mañana realizaremos el evento SharePoint 2010-Evolución vs Revolución en los Centros de Excelencia Software.

La Agenda del evento será la siguiente:

o Novedades generales de SharePoint 2010:

-Capacidades disponibles por defecto

-Versiones de SharePoint 2010.

o Cambios en la interfaz de usuario y en la arquitectura.

o SharePoint como plataforma de creación de soluciones de negocio:

-Visual Studio 2010 Tools para SharePoint

-Posibilidades a nivel de desarrollo

o Modelo de Objetos SharePoint en cliente:

-Acceso a datos desde cliente Silverlight

-Rich User Interface en SharePoint

Como ponentes contaremos con el MVP de SharePoint Juan Carlos González del CIIN, que nos mostrará la evolución que ha realizado dicha plataforma en su versión 2010.

Por otro lado los componentes del CES Microsoft Goretti Ortigosa y Raúl Mayo, se encargarán de presentarnos revolución del modelo de objetos SharePoint 2010 en el lado del cliente.

Si deseáis conocer más sobre esta temática, os animo a que asistáis inscribiéndoos aquí

Agilizando el diseño de proyectos con SketchFlow

Desde Cein venimos realizando una serie de jornadas, encaminadas al desarrollo de proyectos, mediante herramientas y metodología ágiles. Hoy me quiero sumar a esta causa, mostrándoos como podéis agilizar la parte de diseño de un proyecto a través de la herramienta SketchFlow de Microsoft.

Vamos a empezar situándonos y que mejor forma de comenzar describiendo que es  SketchFlow. Es la herramienta de Microsoft que permite convertir los prototipos o bocetos de un proyecto de desarrollo de software en el diseño final de la aplicación. Este diseño permitirá ser entregado al equipo de desarrollo y a la vez será comprendido por este de una forma rápida y sencilla, lo que conlleva reducción del tiempo de desarrollo gracias a la agilidad que ofrece  SketchFlow. También permite un contacto continuo con el cliente final, debido a que los bocetos pueden ser editados en todo momento como veremos más adelante.Finalmente el cliente puede ver constantemente la evolución del proyecto y por tanto sentirse integrado en el proyecto.

IMAGE_006   image

 

Una vez situados, os surgirá la duda de que herramientas he de utilizar para poder aprovecharme de todas las funcionalidades de  SketchFlow. Esta herramienta viene incluida en Expession Studio a partir de la versión 3. Aunque realmente donde vamos a utilizarla es en Expression Blend .

Para empezar a plasmar las ideas que quiere el cliente, ejecutaremos Expression Blend 4. A la hora de crear un nuevo proyecto de SketchFlow podemos tener dos vertientes. Por un lado que nuestro proyecto final se desarrolle en la plataforma WPF o en Silverlight.

En el menú superior elegiremos Archivo->Nuevo y elegiremos la opción de la plataforma en la que deseemos realizar nuestro proyecto como podemos observar a continuación:

Silverlight

image 

WPF

image

En el ejemplo que os muestro en este artículo voy a utilizar Silverlight. Como podemos ver, al crear el proyecto de SketchFlow consta de dos áreas diferenciadas, por un lado está el proyecto de Silverlight que realmente consta de App.xaml que sirve como motor de SketchFlow. Por otro lado tenemos el área dedicada a las distintas pantallas de nuestro prototipo.

image

Situándonos en el archivo Screen 1 vamos a introducir los diferentes elementos que hemos consensuado en una reunión previa a la elaboración del prototipo. Este constará en una pantalla inicial de un menú de etiquetas, cada una de ellas referenciará a un sitio distinto. Además tendrá una descripción de la empresa, ya que estamos desarrollando la Home de nuestro proyecto.Para realizar esta acción en la barra de herramientas elegiremos el icono de búsqueda image . En el área de búsqueda introduciremos SketchFlow. De este modo tendremos a nuestra disposición todos los objetos que podemos usar con la herramienta indicada.

Seleccionaremos el objeto TabControl-Sketch, que es el elemento que nos permitirá introducir las diferentes etiquetas. En este ejemplo he incluido 4 etiquetas (Inicio, Cursos, Certificaciones y Eventos). Ahora  elegiremos un bloque de texto siguiendo los mismos pasos que hemos tenido en cuenta con anterioridad. El resultado de nuestra página de Inicio debería ser parecido al siguiente:

image

Como hemos podido comprobar al añadir los diferentes elementos al prototipo, estos elemento se construyen  mediante Xaml. Por ello pueden ser utilizados con posterioridad en el proyecto final. Además Dicho lenguaje permite la fluida comunicación entre el diseñador y el desarrollador, además del cliente final.

Otras de las características que vamos a tener en cuanta es el SketchFlow Map, que es una vista gráfica de las distintas pantallas del prototipo y sus conexiones. Dicho elemento se encuentra en la parte inferior del área de diseño. Si no estuviera visible podemos mostrarla presionando la combinación de teclas Shift+F12.

image

Con este elemento podemos navegar y editar las distintas páginas del prototipo. Para añadir una nueva página basta con hacer clic sobre la página y presionar sobre crear una nueva pantalla de contenido como podemos observar en la siguiente imagen:

image

También podemos categorizar las distintas pantallas por colores, de forma que podamos distinguir el organigrama de las diferentes pantallas. Para ellos nos situaremos sobre la pantalla que deseemos categorizar y presionaremos sobre la paleta de colores y elegiremos el color acorde con la categoría deseada:

image

En nuestro caso queremos que el menú de etiquetas esté presente en todas las páginas, sin necesidad de repetir de nuevo la creación de los diferentes objetos. Para ello seleccionamos el objeto (TabControl-Sketch) y con el botón derecho sobre el mismo seleccionamos convertir en un componente de la pantalla.

image

Le daremos un nombre a dicho control común:

image

De este modo podremos introducir este elemento en cualquier pantalla sin necesidad de volverlo a crear.

Otro de los añadidos es la posibilidad de añadir notas a nuestras pantallas. Con esta características podremos indicar acciones o modificaciones que el cliente requiere en un momento dado sin tener el riesgo de perdida de información.

Para utilizar esta característica nos situamos en la barra de herramientas presionamos sobre el botón de búsqueda image y en el área dedicada para este fin introducimos notes, seleccionamos el elemento y podremos introducir las notas que deseemos.

image

Una vez creada las sucesivas pestañas podemos ver el comportamiento de nuestro prototipo ejecutándolo F5. También podemos realizar correcciones del boceto y exportar las mismas.

Para realizar correcciones debemos seleccionar la pestaña Feedback y utilizar las diferentes herramientas:

image

Para exportar el Feedback tendremos que situarnos en la pestaña Feedback y presionar sobre el icono representado con una carpeta u elegir exportar Feedback.

Otra opción que aún permite mejorar la comunicación entre el equipo de desarrollo y el cliente final es la posibilidad de empaquetar el prototipo y enviárselo al cliente para su posterior revisión. Para realizar esta acción, simplemente accederemos al menú archivo y la opción empaquetar el proyecto SketchFlow.

Por último, he de mencionar la capacidad que tiene SketchFlow para poder exportar nuestro prototipo a Microsoft Word. De esta forma se incluirán en el documento el mapa del prototipo, las diferentes pantallas, elemento enriquecidos de pantalla, etc..

Para ello entramos en el menú archivo y elegimos la opción exportar a Word y el resultado es el siguiente:

image

Como podéis ver SketchFlow tiene una gran versatilidad lo que ayuda a incrementar la agilidad a la hora de pasar de un prototipo al diseño definitivo del proyecto. Por otro lado la citada herramienta tiene una perfecta simbiosis con Silverlight y WPF, lo que nos otorga una menor perdida de esfuerzo a la hora de realizar los proyectos. Aumentando con todo esto la satisfacción del cliente gracias a una fluida comunicación,  a la par que se reduce el tiempo de entrega del producto final.

Error de Vulnerabilidad de MOSS y WSS

El miércoles 28 de abril, se puso en conocimiento a través de Chema Alonso, un error de vulnerabilidad de las plataformas Microsoft Office SharePoint Server 2007 (MOSS) y Windows SharePoint Services 3.0. El origen de este fallo radica en un ataque XSS sobre la página que ejecuta la ayuda (help.aspx) de las plataformas citadas con anterioridad.

La solución a este inconveniente afortunadamente se erradica de forma sencilla y rápida. Lo primero es localizar el archivo help.aspx, que se encuentra en la siguiente ruta Program FilesCommon FilesMicrosoft SharedWeb Server Extensions12TEMPLATELAYOUTS. Una vez localizado lo abrimos con un editor de texto y eliminaremos el Form incluido dentro de la etiqueta <body> . Remplazamos dicho elemento por un mensaje amigable como “En este momento la ayuda por motivos de seguridad, disculpen las molestias” o el que tu creas más conveniente. A continuación podéis ver el resultado final de help.aspx:

help.aspx
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html runat="server"
  4. dir="<%$Resources:wss,multipages_direction_dir_value%>"
  5. >
  6.       <%@ Assembly Name="Microsoft.SharePoint.ApplicationPages" %> <%@ Page Language="C#" Inherits="Microsoft.SharePoint.ApplicationPages.HelpPage"%>
  7. <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %>
  8.     <head>
  9.         <META HTTP-EQUIV="expires" CONTENT="0" />
  10.         <link rel="stylesheet" type="text/css" href="/_layouts/<%= UiLcid.ToString(System.Globalization.CultureInfo.InvariantCulture) %>/styles/help.css"/>
  11.         <title><%# Microsoft.SharePoint.Utilities.SPHttpUtility.HtmlEncode(PageTitle) %></title>
  12.     </head>
  13.     <SharePoint:ScriptLink language="javascript" name="core.js" runat="server" />
  14.     <body class="<%# GetCssClassName("body") %>">
  15.         Se ha deshabilitado la ayuda por motivos de seguridad, disculpen las molestias.
  16.     </body>
  17. </html>

Hasta que en próximos días Microsoft ponga a disposición de todos los usuarios un parche para solucionar este bug deberemos de utilizar este método que aunque no es el más ortodoxo si es el más eficaz.

image

Numeración de líneas en el editor de texto de Visual Studio 2010

Una de las cosas que echaba de menos en Visual Studio 2010 y que no aparece de forma predeterminada, es la posibilidad  de ver el número de línea en el que nos encontramos.

image 

Esta capacidad nos permite acceder de forma rápida y precisa a un error que se ha producido, cuando realizamos pruebas de testeo de nuestras aplicaciones, etc..

Para utilizar la numeración de líneas en Visual Studio 2010, accedemos a Herramientas->Opciones

image

En Opciones expandiremos Editor de Texto->Expandiremos C#

image

Dentro de la pestaña General, tendremos que seleccionar Números de Línea.

image

De este modo podremos inmediatamente utilizar esta propiedad de Visual Studio 2010!!!!!