LinqConnect para Metro: una guía rápida

A partir de la versión 4.0, LinqConnect se puede usar para escribir aplicaciones de Windows Metro. En este artículo, le mostraremos cómo usar LinqConnect para trabajar con datos, vincular datos a elementos de la interfaz de usuario, agrupar datos, etc. También discutiremos algunos otros aspectos que necesita saber para integrar rápidamente LinqConnect en sus aplicaciones. Puede descargar el código fuente de la aplicación desde el enlace al final de este artículo.

Índice

    Crear un proyecto y agregar enlaces

    Comencemos con la creación de un proyecto en Visual Studio. Sobre Archivo menú, señale Nuevoy luego presione Proyecto…. En el cuadro de diálogo Nuevo proyecto, seleccione Visual C #> Tienda de Windowsluego seleccione Programa vacío (XAML) en la lista de la izquierda y haga clic en bien.

    Creando un nuevo proyecto

    Creando un nuevo proyecto

    Después de eso, debemos agregar enlaces a las compilaciones de LinqConnect. Para ello, haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Añadir enlace… en el menú contextual. En el cuadro de diálogo que aparece, seleccione Ventanas> Extensiones. En la lista de la derecha, seleccione Devart LinqConnect para el metro marque la casilla y haga clic bien.

    Agregar enlaces a compilaciones de LinqConnect

    Agregar enlaces a compilaciones de LinqConnect

    El nodo Devart LinqConnect for Metro aparecerá en el nodo Referencias. Si compila la aplicación ahora, se publicarán cuatro versiones de LinqConnect en binDebug carpeta: Devart.Data.dll, Devart.Data.SQLite.dll, Devart.Data.Linq.dll, Devart.Data.SQLite.Linq.dll. Estas cuatro compilaciones son un SDK de extensión llamado Devart LinqConnect para Metro.

    Creando un modelo

    Ahora vamos a crear un modelo usando el enfoque Model First. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Nuevo elemento en el submenú Agregar menú contextual. En el cuadro de diálogo Agregar nuevo elemento, seleccione el modelo Devart LinqConnect, como se muestra en la siguiente figura.

    Agregar un nuevo modelo al proyecto

    Agregar un nuevo modelo al proyecto

    Después de presionar Agregar, se mostrará el Asistente para la creación de modelos de desarrolladores de entidades. Esto ayuda a crear y configurar un nuevo modelo en blanco. Seleccione Model First en la primera página del asistente y seleccione SQLite como servidor de destino sobre Configuración de sincronización del modelo página. Sobre Propiedades del modelo en la página puede especificar el nombre del espacio de nombres y la clase DataContext de su modelo. Usamos TaskListDatabase como el nombre de la clase DataContext.

    Después de crear un modelo vacío, usemos el constructor para agregar la clase TaskListItem con las siguientes propiedades: ID, categoría, nombre y descripción. El resultado se muestra a continuación:

    Modelo LinqConnect

    Modelo LinqConnect

    Después de guardar el modelo, el código C # para el contexto TaskListDatabase y la entidad TaskListItem se generarán automáticamente. Además, creamos manualmente el archivo TaskListDatabase.cs (en la imagen de arriba). Este archivo contendrá métodos DataContext para crear una base de datos.

    Implementación de base de datos y formato de cadena de conexión

    Una vez que hemos preparado el modelo, debemos implementar una implementación de base de datos la primera vez que ejecutamos nuestra aplicación. Debido a que usamos el enfoque Model First, la única opción que tenemos es usar los métodos DatabaseExists y CreateDatabase de la clase DataContext. La implementación puede ser la siguiente:

        public static async void DeployDatabase() {
    
          try {
            using (TaskListDatabase db = new TaskListDatabase(
                "Data Source=ms-appdata:///local/TaskList.db"
            )) {
    
              if (!db.DatabaseExists())
                await db.CreateDatabaseAsync(false, true);
            }
          }
          catch (Exception ex) {
            // .. process exception, show error message, etc.
          }
        }

    Si usáramos el enfoque Base de datos First y creáramos un modelo a partir de una base de datos existente, podríamos expandir el archivo de la base de datos simplemente copiándolo. Para hacer esto, tuvimos que agregar un archivo de base de datos al proyecto y establecerlo en acción para crear contenido. En este caso, el código se verá así:

          private async void DeployDatabase() {
    
            try {
              StorageFile file = await StorageFile.GetFileFromPathAsync(
                  Path.Combine(Package.Current.InstalledLocation.Path, 
                  "TaskList.db")
              );
              await file.CopyAsync(
                  ApplicationData.Current.LocalFolder, 
                  "TaskList.db", 
                  NameCollisionOption.FailIfExists
              );
            }
            catch (Exception ex) {
              // process error...
            }
          }

    Es posible que haya notado que usamos métodos con el sufijo Async en el primer ejemplo de DeployDatabase. Debido a que la ejecución asincrónica es una parte clave del desarrollo de aplicaciones de Metro, agregamos esta función a LinqConnect para Metro. La clase DataContext tiene los métodos CreateDatabaseAsync, DeleteDatabaseAsync y SubmitChangesAsync. Todos se pueden usar con las palabras clave await y async ingresadas en C # 5.0. También hemos ampliado la clase Queryable con nuevos métodos de extensión, como ToListAsync, CountAsync, SumAsync, etc.

    Ambos ejemplos anteriores implementan la base de datos en LocalFolder (ApplicationData.Current.LocalFolder). Las aplicaciones de Metro tienen un acceso muy limitado al sistema de archivos. Hemos ampliado las formas posibles de especificar la ruta al archivo de la base de datos en LinqConnect for Metro. Son los siguientes:

    • ms-appdata: /// local / ruta_a_base_de_datos - especifica la ruta al archivo en LocalFolder (por ejemplo, ms-appdata: ///local/TaskList.db)
    • ms-appdata: /// itinerancia / ruta_a_base_de_datos - especifica la ruta al archivo en RoamingFolder (por ejemplo, ms-appdata: ///roaming/Data/TaskList.db)
    • ms-appdata: /// temp / ruta_a_base_de_datos - especifica la ruta al archivo en la carpeta temporal (por ejemplo, ms-appdata: ///temp/Temp.db)
    • ms-appx: /// base de datos_ruta - determina la ruta al archivo en la carpeta donde está instalado el programa.
    • ruta_relativa_a_la_base_de_datos - determina la ruta al archivo relativo a LocalFolder (por ejemplo, Base de datos / TaskList.db)
    • ruta_completa_a_la_base_de_datos - ruta completa al archivo de la base de datos. Se usa tal cual.

    En los siguientes ejemplos, mostraremos cómo crear dos cadenas de conexión diferentes definiendo el mismo archivo de base de datos.

    1. Usando ms-appdata: /// local:
          public static string GetConnectionString(string dbName) {
      
            string msAppDataPath = "ms-appdata:///local/" + dbName;
            return string.Format("Data Source={0}", msAppDataPath);
          }
    2. Con la ruta completa:
          public static string GetConnectionString(string dbName) {
      
            string fullPath = Path.Combine(
                ApplicationData.Current.LocalFolder.Path, dbName);
            return string.Format("Data Source={0}", fullPath);
          }

    Vinculación y visualización de datos

    Usaremos GridView para mostrar los datos. Escribamos código para leer todos los TaskListItems de la base de datos y asignar los resultados a la propiedad GridView.ItemsSource.

        private async void BeginLoadItems() {
    
          try {
            using (TaskListDatabase db = TaskListDatabase.Create()) {
    
              var query = from item in db.Items
                          select item;
    
              ItemGridView.ItemsSource = await query.ToListAsync();
            }
          }
          catch (Exception ex) {
            ShowMessage(ex.Message);
          }
        }

    Luego declaramos GridView en XAML.

                <GridView Margin="20"
                          Visibility="Collapsed"
                          Grid.Row="1"
                          Name="ItemGridView"
                          ItemTemplate="{StaticResource ItemGridViewItemTemplate}"
                          ItemsPanel="{StaticResource ItemGridViewItemsPanelTemplate}"
                          ItemContainerStyle="{StaticResource ItemGridItemContainerStyle}">
                </GridView>

    ItemTemplate se ve así:

                <DataTemplate x:Key="ItemGridViewItemTemplate">
                    <Grid HorizontalAlignment="Left" Background="White">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                            <TextBlock Text="{Binding Description}" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>

    El enlace de datos se realiza en dos TextBlocks en DataTemplate. Estos TextBlocks están relacionados con las propiedades Nombre y Descripción de la clase TaskListItem. El resultado se muestra a continuación.

    Vinculación y visualización de datos

    Vinculación y visualización de datos

    Debe usar el siguiente código para mostrar los datos agrupados:

        private async void BeginLoadGrouppedItems() {
    
          try {
            using (TaskListDatabase db = TaskListDatabase.Create()) {
    
              var query = from item in db.Items
                          group item by item.Category into g
                          select g;
    
              GrouppedItems.Source = await query.ToListAsync();
            }
          }
          catch (Exception ex) {
            ShowMessage(ex.Message);
          }
        }

    XAML para GridView con datos agrupados se ve así:

                <GridView Margin="20"
                          Grid.Row="1"
                          Name="GrouppedItemGridView"
                          ItemsSource="{Binding Source={StaticResource GrouppedItems}}"
                          ItemTemplate="{StaticResource ItemGridViewItemTemplate}"
                          ItemsPanel="{StaticResource ItemGridViewItemsPanelTemplate}"
                          ItemContainerStyle="{StaticResource ItemGridItemContainerStyle}">
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Background="White" Margin="0">
                                        <TextBlock Text="{Binding Key}" Foreground="Blue" 
                                             FontSize="25" Margin="5" />
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>

    ItemTemplate no cambia, sin embargo, usamos CollectionViewSource como ItemsSource. Se puede declarar en los recursos de la página de la siguiente manera.

        <Page.Resources>
            <CollectionViewSource x:Name="GrouppedItems" IsSourceGrouped="True" />
        </Page.Resources>

    También se debe tener en cuenta que no asignamos una colección a la propiedad GridView.ItemsSource, sino a la propiedad CollectionViewSource.Source. El resultado de mostrar los datos agrupados se muestra a continuación.

    Una lista de tareas agrupadas por categoría

    Una lista de tareas agrupadas por categoría

    Puede descargar la solución TaskList aquí.

    Artículos de interés

    Subir