Desde Las Vegas, #CES 2012

Desde el Venetian Palazzo de Las Vegas, empieza mi cobertura del Consumer Electronics Show 2012.

Gracias al equipo de Microsoft España y Microsoft EMEA, un grupo de estudiantes y bloggers nos hemos venido a la ciudad del pecado a cubrir el evento.

El evento

El CES es un evento que lleva celebrándose anualmente desde 1995, aunque surge en el año 1967. Considerada una de las mayores ferias que se celebra en Las Vegas y no se encuentra abierta al público en general, sino que solamente van asistentes relacionados con la industria o prensa.

Por este evento han pasado fabricantes como Sony, Microsoft, Motorola, Samsung, HTC, LG, Dell, Palm o Philips, entre otros

Como nota especial, este es el último CES donde veremos a Microsoft, ya que ha confirmado oficialmente que no seguirá presentando en la feria.

El viaje

Las más de 16 horas de viaje se hace un poco largas, pero la atención por parte de los empleados de Delta ayuda a que se pase de la mejor manera posible. Una comida ligera con pasta una hora tras despegar y una pizza una hora antes de aterrizar calman el estómago.

La diferencia horaria es de 9h con Madrid, lo que da una sensación de que estamos retrasados en el tiempo.

El hotel

En estos momentos nos alojamos en el Palazzo, uno de los tres complejos que forman el hotel Venetian, donde se realizará mañana la Keynote inaugural.

Qué se espera

Parece que habrán presentaciones de varios fabricantes (aparte de la keynote inaugural de Steve Ballmer de Microsoft), pero por la información que está disponible, podremos esperar novedades en:

  • Windows 8
  • Tablets con Android y con Windows
  • Ultrabooks
  • Cámaras digitales
  • Google TV
  • La Wii U

… entre otros. Espero poder comentar novedades de estos productos y más durante el evento.

Cobertura

La cobertura principal se realizará vía Twitter, usando el hashtag #CES para el evento principal, y #MSFTCES y #CESHAUS para la cobertura de Microsoft.

Aquí en el blog iré publicando las diferentes novedades que vayan surgiendo, así como los enlaces a algunas colaboraciones con otros blogs.

Más información

  • Sitio web oficial del CES

Evento Desarrollo Metro con Windows 8 UPM: Materiales

El pasado 28 de octubre tuve la ocasión de asistir a la Escuela Técnica Superior de Ingenieros de Telecomunicación (ETSIT) de la Universidad Politécnica de Madrid, invitado por la rama universitaria del IEEE de la UPM (el cubo, como se le conoce de manera coloquial) que incluye el DotNetClub de esa escuela.

Durante una hora y media, y cuelgues del sistema mediante (recordemos que es una Developer Preview) pudimos ver las características más notables del sistema, las charms, los tiles, la pantalla sin marco, los contratos. Vimos cómo simular la rotación de la pantalla usando el simulador y finalmente pudimos ver un ejemplo de uso (mi querida aplicación de gestión de tareas).

Gracias a Jose Angel, coordinador del DotNetClub de la UPM por la invitación y a los asistentes, que tiene mérito estar viendo una charla técnica a la hora de comer un viernes.

Más información

Panel de preferencias para nuestra aplicación Metro

El panel o Charm de preferencias, que se muestra al pulsar la combinación de teclas Windows + I o al seleccionar Settings en el menú de inicio, contiene la información de la aplicación, información genérica del sistema como wifi, brillo o estado de batería. Además de esta información, nuestra aplicación Metro puede colocar enlaces a secciones como las preferencias, acerca de, etc.

En este artículo se verá cómo agregar enlaces a este panel, y posteriormente cómo crear un panel de preferencias que se muestre u oculte usando estos enlaces. El código de este artículo está basado en la última versión de MetroTask, disponible en Codeplex, y en el estado en el que quedó en el anterior artículo.

Agregar los accesos

Para poder agregar los accesos al menú de preferencias primeramente se ha de obtener una referencia al panel de preferencias de la vista actual, siendo este dependiente de la página que se este mostrando.

Posteriormente se agregarán, a la colección ApplicationCommands, el comando deseado, para que se muestre en el panel. Además de agregar un campo que muestra el texto del comando o en este caso, un valor de la colección KnowSettingsCommand, Además, se agregará la llamada a una función que se ejecutará al pulsar sobre la opción:


public CollectionPage()
{
   ...
   SettingsPane pane = SettingsPane.GetForCurrentView();
   pane.ApplicationCommands.Add(new SettingsCommand(KnownSettingsCommand.About, About);
   ...
}

private void About(IUICommand command)
{
    //Aquí se situará la lógica de las preferencias
}

El resultado se aprecia a continuacíón. Este botón ejecuta el comando seleccionado, que sin duda podría cargar otra página con la configuración y las preferencias, pero los ejemplos mostrados nos dan la idea de que el panel de preferencias de nuestra aplicación debe tener un formato similar al Charm que se muestra, y eso es lo que vamos a hacer a continuación.

Crear el panel

Para crear un panel de preferencias el proceso consiste en crear una página XAML (que en este caso se llamará AppSettingsPane), cargarla dentro de la vista mostrada, y ocultarla, de tal manera que la acción que se ejecute sea solamente mostrarla.

Para poder cargar la página lo primero es agregar una sentencia using al documento xaml, para poder usar las referencias al proyecto, y posteriormente cargar la misma:

xmlns:local="using:Tareas"
...
<local:AppSettingsPane x:Name="Settings" HorizontalAlignment="Right" Margin="0,0,-346,0"/>
...

Con este proceso se incrusta el contenido del fichero AppSettingsPane en la página, desplazado 346px a la derecha (y oculto), según dicta la guía de diseño. Finalmente se modifica el código generado anteriormente para que desplace la capa:

private void About(IUICommand command)
{
    Settings.Margin = ThicknessHelper.FromUniformLength(0);
}

El problema de este código es que no hay manera de ocultar la ventana, para lo cual se agrega un método adicional llamado PointerPressed en el Grid principal, que estará pendiente de los cambios de posición del cursor, lo que permitirá que cuando el cursor haga click fuera del panel este se oculte.


<Grid x:Name="LayoutRoot" PointerPressed="LayoutRoot_PointerPressed" Style="{StaticResource LayoutRootGridStyle}">

 

        private void LayoutRoot_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
        {
            if (Settings.Margin.Right == 0)
            {
                Settings.Margin = ThicknessHelper.FromLengths(0, 0, -346, 0);
            }
        }

Conclusiones

Las preferencias permiten al usuario personalizar su aplicación, habilitar o deshabilitar funciones, y está en nuestras manos proporcionar un panel que permita dicha personalización. En este artículo se ha visto cómo insertar un elemento en el panel de preferencias, y cómo cargar un menú de opciones desde éste.

Más información

Incorporando búsquedas a nuestra aplicación Metro

El desarrollo de aplicaciones Metro incluye algunos cambios relativos a la interoperabildad entre aplicaciones, lo que nos permite compartir imágenes, texto y multimedia entre aplicaciones mediante el uso del contrato Share, proporcionar una fuente de ficheros usando el contrato FilePicker, y la última opción, que es la que cubre este artículo, es la de poder realizar búsquedas en nuestra aplicación desde cualquier punto del sistema, y desde cualquier aplicación.

En este artículo se verá cómo agregar un contrato de búsqueda a un proyecto existente, MetroTask, así como la lógica necesaria para poder tener un ejemplo funcional.

Agregar el contrato

Para agregar el contrato de búsqueda, el proceso es el mismo que con el otros contratos, en un proyecto existente, se hace click derecho en el icono del proyecto, a continuación en Add new item… Posteriormente se selecciona Search Contract y se agrega a la solución.

Lo que se agregará al proyecto es un fichero xaml que contendrá la interfaz gráfica de búsqueda, así como el código fuente que procesará el término y mostrará los resultados.

En este caso, no es necesaria una configuración adicional, ya que el fichero appxmanifest, que contiene la configuración de declaraciones, capacidades y detalles como el nombre y el icono de nuesta aplicación, se actualiza automáticamente al agregar el fichero.

Tras agregarlo, se puede compilar el proyecto y ejecutarlo, para comprobar que se ejecuta correctamente, si carga el charm de búsqueda desde cualquier punto de la apliacación, o desde cualquier otro punto de la interfaz metro, lo que se mostrará será la siguiente imagen:

Una vez introducido el término de búsqueda, se mostrará una pantalla similar a la siguiente:

Enlazandolo con los datos

Para este ejemplo, agregaré al servicio web de Tareas una función para buscar proyectos, simplemente una pequeña selección, gracias al uso de LINQ. Con ello se puede hacer una consulta, y devolver solamente los proyectos que cumplan dicha consulta (por nombre, en este caso).

        public IEnumerable<Project> getProjectByName(string name)
        {
            ProjectContext p = new ProjectContext();
            return p.Projects.Where(proj => proj.Name.Contains(name)).AsEnumerable();
        }

Una vez comprobado que el servicio funciona, se agrega en el código una nueva función para gestionar el contenido:

        async void getProjectsByName(string search)
        {
            PageTitle.Text = "Proyectos (Cargando)";
            TaskServiceClient client = new TaskServiceClient();
            try
            {
                this.CollectionViewSource.Source = await client.getProjectByNameAsync(search);
                client.CloseAsync();
                PageTitle.Text = "Proyectos";
            }
            catch (Exception)
            {
                PageTitle.Text = "Se ha producido un error";
                //Show a Message dialog
            }
        }

Posteriormente se agrega la siguiente línea dentro de la función “Activate”

getProjectsByName(queryText);

Finalmente, se agrega el siguiente GridView (tomado de la página “CollectionPage.xaml”)

            <GridView x:Name="ItemGridView" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" ItemTemplate="{StaticResource GroupedItemTemplate}" ItemContainerStyle="{StaticResource GridTileStyle}" ItemsPanel="{StaticResource GridItemsPanelTemplate}"
              Grid.Row="1" Background="{StaticResource PageBackgroundBrush}" BorderThickness="0" VerticalAlignment="Stretch"
               Margin="0"/>

Esta vista cargará el estilo del fichero App.xaml, usando la misma visualización que la página de colección. Un par de detalles gráficos más, y el resultado es el siguiente:

Conclusiones y posibles mejoras

En este artículo se ha visto cómo agregar la capacidad de búsqueda a la aplicación, y cómo usarla desde cualquier lugar del sistema. Como posibles mejoras está el uso del cuadro de sugerencia de búsqueda, que mostraría los datos según los vamos escribiendo (ver enlace al final del artículo), y se pueden filtrar los resultados una vez obtenidos, ya que el botón que indica All(0) puede llegar a ser bastante descriptivo :).

Más información:

  • Código editado en Codeplex
  • Ejemplo de uso del contrato de búsqueda en MSDN

Consumir ficheros en aplicaciones Metro

En artículos anteriores se ha visto cómo compartir contenido desde nuestras aplicaciones así como consumir contenido de otras. En este artículo y en el siguiente se hablará de cómo consumir ficheros del sistema de archivos, y como proporcionar opciones para que otras aplicaciones puedan hacerlo usando el contrato File Picker.

Consumiendo ficheros

Para poder consumir ficheros solamente es necesario cargar un menú, de la misma manera que lo haríamos con una aplicación Windows Forms.

Lo primero necesario es una referencia a Windows.Storage.Pickers así como a Windows.Storage

Tras agregar la referencia, el siguiente paso es cargar el filePicker, para ello, se puede asignar a un botón, enlazandolo con el evento Click, o también se podría cargar automáticamente (por ejemplo, si estuviese vacía una base de datos, para una importación inicial). Estos métodos, como se ha visto en otros artículos relacionados con Metro, deberán ser asíncronos.

Finalmente se podrán establecer filtros para seleccionar una extensión concreta, la manera de mostrar el menú de selección, o si lo que se carga es una selección simple o una múltiple.

De esta manera para seleccionar un único fichero txt situado en la biblioteca Documents, y que se muestre como una lista de ficheros, el código a usar será este:

async void Button_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.List;
    openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    openPicker.FileTypeFilter.Add(".txt");
    StorageFile file = await openPicker.PickSingleFileAsync();
}

Como alternativas a este código, si el objetivo es cargar múltiples ficheros, se ha de cambiar la última llamada del código por pickMultipleFilesAsync(). En caso de que el contenido sean imágenes, lo más recomendable sería cambiar la cuarta línea del código para que se mostraran como miniaturas, para lo que se usaría PickerViewMode.Thumbnail.

En el próximo artículo se mostrará cómo se pueden proporcionar ficheros a otras aplicaciones y al sistema como si de otro origen de datos se tratara.

Más información

Capacidad de compartir para nuestra aplicación Metro

Una de las opciones que incorpora Windows 8, es el chime o pestaña Share, que permite que nuestras aplicaciones puedan enviar contenidos a otras de una manera sencilla. Para ello, tanto la aplicación origen como la destino tiene que tener la capacidad de aceptar elementos (ShareTarget) o de enviarlos (SendTarget).

Leer más “Capacidad de compartir para nuestra aplicación Metro”

Instalando Windows 8 Developer Preview + Visual Studio 11 en un Macbook Pro

Instalar un sistema operativo que está en fase pre-beta puede tener sus complicaciones. Si lo instalas en un Mac, la cosa se puede complicar aún más. El sistema que tengo (Un MacBook Pro 13′ de mediados de 2010) con una única partición de OSX. No quiero instalarlo en nativo 100%, así que instalaré vía Bootcamp una copia de Windows 7 Profesional x64 y encima de ella, Windows 8 versión x64.

1. Particionar

El primer paso será reducir el tamaño de nuestra partición para poder hacer hueco para Windows.

Para ello, usamos el Asistente Boot Camp que nos permite reducir el tamaño de nuestra partición de OSX, aunque podemos encontrarnos con un error de este tipo:

El disco no puede dividirse en particiones porque algunos archivos no pueden moverse. Guarde una copia de seguridad del disco y utilice la Utilidad de Discos para formatearlo como un único volumen Mac OS Plus (con registro). Restituya la información en el disco y vuelva a usar el Asistente Boot Camp

Evidentemente no queremos formatear el ordenador, ya que sería cuanto menos, un contratiempo. Podemos omitir este error usando los pasos siguientes:

  1. Abrir Utilidad de discos.
  2. Seleccionar el disco que queremos reparticionar.
  3. Reparar disco y Reparar permisos.
  4. En la pestaña Particiones reduciremos el tamaño al tamaño que querramos.
  5. Una vez que hayamos reducido la partición la volveremos a ampliar, y ya podremos usar Boot Camp.

En este proceso lo que hemos hecho ha sido mover los ficheros a otra parte del disco, un proceso que el asistente de BootCamp no soporta, pero Utilidad de Discos sí.

2. Instalar Windows 7

Tras usar el asistente de Boot Camp, instalamos Windows 7 (en mi caso versi’on  siguiendo los pasos del instalador. Puede pasar que en el transcurso de la instalación el instalador se quede colgado (En el apartado de “Completando Instalación”), si ese es tu caso, vuelve a grabar la iso de Windows 7 que tengas (si eres estudiante universitario puedes acceder mediante el programa Microsoft Academic Alliance) porque tendrás archivos corruptos.

3. Instalar Windows 8

En la web de Scott Hanselman recomienda instalarlo mediante un pen-drive USB, eso es genial porque ahorras en grabar discos, además es mucho más rápido. Desafortunadamente los mac no permiten arranque desde USB de nada que no sea un disco con una instalación de Mac OSX (http://support.apple.com/kb/HT1948) así que nos tocará grabar la ISO y luego instalarlo a la vieja usanza, la pega en este caso es que perdemos las herramientas de desarrollo, pero todo se puede arreglar.

Antes de reiniciar, crearemos el disco virtual siguiendo los siguientes pasos:

  1. Abrir Panel de Control / Herramientas Administrativas / Administración de Equipos
  2. Desplazarse al apartado Discos
  3. Crear un Nuevo VHD, asignamos una capacidad de 60 GB, con 40 deberían bastar, pero nos aseguramos.

Ahora podremos reiniciar el ordenador, cargar el disco de Windows 8, y comenzar el instalador. (Nota. Es recomendable, o bien tener un teclado externo para los próximos pasos, o bien poner la distribución del teclado en inglés y poner los caracteres especiales a ciegas, ya que en mi caso el instalador no reconocía la tecla correspondiente a \).

Al llegar al apartado de selección de discos pulsamos Shift + F10, lo que nos mostrará una ventana de comandos, y tendremos que montar el disco virtual que hemos creado antes, para poder instalarlo ahí. Los comandos son los siguientes (cuando lo instalas por 5ª vez te los aprendes de memoria, palabra).

  • select vdisk file=”C.\ruta\a\disco”
  • attach vdisk

Si volvemos al instalador, y pulsamos el botón de Actualizar (o click en F5, para el mismo efecto) y nos dejará seleccionar el disco que hemos creado hace un rato, y podremos instalar Windows ahí, y completar la instalación.

4. Instalar los drivers

En este caso es igual que anteriormente, solo que si no nos deja ejecutarlo tendremos que usar compatibilidad con Windows 7. Para ello, click derecho sobre el instalador, pestaña compatibilidad y seleccionamos Windows 7. Tras ejecutar el instalador, tendremos audio, resolución decente, e incluso compatibilidad con el Magic Mouse para el scroll.

5. Instalar Visual Studio 11

En mi caso el instalador web no funcionó, así que recurrí a la versión ISO (disponible aquí: http://www.microsoft.com/download/en/details.aspx?id=27538) para la instalación. Como Windows 8 incorpora gestión de imágenes ISO, podemos montarla directamente sin tener que recurrir a otros programas.

En mi caso la instalación se congeló (literalmente), en varias ocasiones, para lo cual reiniciaba el ordenador, tras lo que la instalación continuaba. Tras 5 o 6 reinicios y varios quebraderos de cabeza, se instaló toda la suite.

Aún faltaba un pequeño detalle, y es que Visual Studio 11, pese a incluir las herramientas para desarrollar aplicaciones Metro, no incluye elementos clave para ejecutarlas. Estos elementos sí que están disponibles en la ISO que incluye las herramientas de desarrollador (que ocupa unos 5 GB y no pude instalar al no contar con DVDs de doble capa).

Por suerte se han publicado los ficheros necesarios en esta web http://weblogs.asp.net/bsimser/archive/2011/09/17/fixing-the-makepri-exe-error-on-windows-8.aspx para que así podamos tener las herramientas para empezar a jugar con Windows 8.

Como última recomendación, si tenéis errores a la hora de ejecutar vuestras aplicaciones, probad a cambiar la resolución un par de veces, y se solucionará.

Fuentes: