Personalizar las consultas de los elementos de la lista y los datos de los filtros para las aplicaciones de Windows Phone

Artículo
03/21/2023

Personalizar las consultas de datos en las que se basan las vistas de una aplicación de Windows Phone.

Con proyectos creados a partir de la plantilla de aplicación de lista de SharePoint de Windows Phone, los desarrolladores pueden aprovechar un patrón de diseño aplicado en la plantilla que les permite personalizar elementos de la capa de datos para una aplicación de Windows Phone. En Microsoft SharePoint Server se puede configurar e incluir una vista de una lista de SharePoint en una aplicación de Windows Phone como está en la aplicación del teléfono o se puede crear una vista personalizada de la aplicación.

Importante

Si está desarrollando una aplicación para Windows Phone 8, debe usar Visual Studio Express 2012 en lugar de Visual Studio 2010 Express. Salvo para el entorno de desarrollo, toda la información de este artículo se aplica a la creación de aplicaciones para Windows Phone 8 y Windows Phone 7. > Para obtener más información, vea Cómo: Configurar un entorno para desarrollar aplicaciones móviles para SharePoint.

Configurar vistas de lista en el servidor para su uso en aplicaciones de Windows Phone

Cuando crea una aplicación de lista de SharePoint para Windows Phone con la plantilla de aplicación de lista de SharePoint de Windows Phone, puede incluir en su aplicación las vistas existentes asociadas con la lista de SharePoint. Una de las formas para filtrar elementos de una lista de SharePoint tal como aparece la lista del teléfono es configurar una vista filtrada para la lista en el servidor y, a continuación, seleccionar esa opinión para incluirla en la aplicación de Windows Phone. El asistente para plantillas de la aplicación de lista de SharePoint de Windows Phone genera una consulta Lenguaje de marcado de aplicaciones de colaboración (CAML) para la vista seleccionada que incluye las condiciones de filtrado configuradas para la vista en el servidor. Por ejemplo, podría tener una lista en el servidor basada en la plantilla de lista de tareas. Puede crear una vista de la lista denominada "Fiesta de vacaciones" que solo incluya elementos relacionados, por ejemplo, planear una fiesta de vacaciones de la empresa agregando una condición de filtro que muestre elementos de lista solo cuando el campo de descripción contenga las palabras "vacaciones" o "fiesta". En la aplicación de Windows Phone, el marcado CAML generado para la vista se parecería a lo siguiente (en función de los campos elegidos para incluirse en la aplicación).

<View>
    <Query>
        <Where>
            <Or>
                <Contains>
                    <FieldRef Name='Body' />
                    <Value Type='Note'>holiday</Value>
                </Contains>
                <Contains>
                    <FieldRef Name='Body' />
                    <Value Type='Note'>party</Value>
                </Contains>
            </Or>
        </Where>
    </Query>
    <RowLimit>30</RowLimit>
    <ViewFields>
        <FieldRef Name='Title'/>
        <FieldRef Name='Body'/>
        <FieldRef Name='AssignedTo'/>
        <FieldRef Name='Status'/>
        <FieldRef Name='PercentComplete'/>
        <FieldRef Name='StartDate'/>
        <FieldRef Name='DueDate'/>
        <FieldRef Name='Checkmark'/>
    </ViewFields>
</View>

Como con otras vistas existentes para la lista de las tareas que decida incluir en la aplicación de Windows Phone al crear su proyecto, se agrega un control PivotItem correspondiente a la vista elegida al control Pivot que constituye el elemento principal de la interfaz de usuario (IU) en la aplicación.

Personalizar consultas de la vista de lista en la aplicación de Windows Phone

Por una razón u otra, quizás no sea posible o razonable configurar vistas que se adapten a sus necesidades de diseño para una lista determinada del servidor. En un proyecto de Microsoft Visual Studio creado desde la plantilla de aplicación de lista de SharePoint de Windows Phone, aspectos de lo que se puede denominar la capa de datos están disponibles para los desarrolladores, principalmente mediante el archivo ListDataProvider.cs del proyecto. Puede modificar el CAML definido para una vista existente o puede agregar consultas CAML para nuevas vistas en el archivo ListDataProvider.cs.

El archivo ListDataProvider.cs

En un proyecto basado en la plantilla de aplicación de lista de SharePoint de Windows Phone, el archivo ListDataProvider.cs define objetos que proporcionan la posibilidad de acceso y configuración de una lista de SharePoint como un origen de datos para las vistas de la aplicación de Windows Phone. En el archivo List.xaml, que define la página principal de la aplicación, un control Pivot (que en sí mismo contiene los controles de PivotItem secundarios) se declara con un controlador de eventos asignado a su evento LoadedPivotItem. El método LoadDataFromServer del archivo ListDataProvider.cs se llama en última instancia al cargar un control PivotItem (que se utiliza como contenedor de representación para los elementos de lista en la aplicación de Windows Phone) en la página principal de la aplicación.

El PivotItem asociado con una vista de lista determinada se carga en la IU.
En el archivo List.xaml.cs, el controlador para el evento LoadedPivotItem llama al método LoadData implementado en el archivo ListViewModel.cs, pasando el nombre del control PivotItem que acaba de cargarse. (En el diseño de proyectos basados en la plantilla Aplicación de lista de SharePoint de Windows Phone, el nombre de un control PivotItem determinado se establece como el mismo que el valor de clave de la cadena de consulta CAML para la vista asociada a ese control en el tipo viewXmlsDictionary definido en la clase CamlQueryBuilder en ListViewModel.cs).
El método LoadData de ListViewModel.cs llama al método LoadData implementado en el archivo ListDataProvider.cs.
El método LoadData de ListDataProvider.cs llama al método LoadDataFromServer también implementado en el mismo archivo. A continuación, el método LoadDataFromServer hace lo siguiente:
1. Obtiene la cadena de consulta CAML asociada con una vista determinada.
```
CamlQuery query = CamlQueryBuilder.GetCamlQuery(ViewName);
```
2. Registra la lista que se va a recuperar con el modelo de objetos de cliente.
```
ListItemCollection items = Context.Web.Lists.GetByTitle(ListTitle).GetItems(query);
```
3. Indica el modelo de objetos de cliente que debe devolver los elementos de lista y los campos de los elementos de la lista (como valores de texto).
```
Context.Load(items);
Context.Load(items, listItems => listItems.Include(item => item.FieldValuesAsText));
```
4. Llama a ExecuteQueryAsync para enviar las solicitudes a SharePoint Server y recupera los datos (de forma asincrónica).

Agregar una consulta de vista de lista personalizada y los elementos correspondientes de la IU

En sus propios proyectos, puede aprovechar la forma en que está diseñada la capa de datos para agregar sus propias vistas de lista y cadenas de consulta CAML personalizadas.

Para el ejemplo de código siguiente, suponga de nuevo que la instalación de destino de SharePoint Server tiene una lista de pedidos de productos creada a partir de la plantilla Lista personalizada, configurada con los campos y tipos indicados en la tabla 1 del tema How to: Implement business logic and data validation in a Windows Phone app for SharePoint. Cree un proyecto basado en la plantilla Aplicación de lista de SharePoint de Windows Phone que use una lista como la lista Pedidos de productos como origen (como se describe en Cómo: Crear una aplicación de lista de SharePoint para Windows Phone). Para los fines de este ejemplo, agregamos una vista personalizada a la aplicación de Windows Phone (no a la lista de la server.md) que se filtra para mostrar solo los pedidos de productos en los que la cantidad ordenada es 100 o más.

Para agregar una vista y una consulta personalizada

En Explorador de soluciones, haga doble clic en el archivo ListDataProvider.cs (o elija el archivo y presioneF7) para abrir el archivo para su edición.

Actualice la definición del tipo ViewXmlsDictionary en la clase estática CamlQueryBuilder para incluir una consulta CAML adicional, con una cláusula WHERE que estipula la condición de filtrado adecuada.

static Dictionary<string, string> ViewXmls = new Dictionary<string, string>()
{
    {"View1",   @"<View><Query><OrderBy><FieldRef Name='ID'/>
        </OrderBy></Query><RowLimit>30</RowLimit><ViewFields>{0}</ViewFields></View>"},
    {"View2",   @"<View><Query><OrderBy><FieldRef Name='ID' /></OrderBy>
     <Where><Geq><FieldRef Name='Quantity' />
          <ValueType='Number'>100</Value>
                </Geq></Where>
             </Query><RowLimit>30</RowLimit>
               <ViewFields>{0}</ViewFields></View>"}
};

Haga doble clic en el archivo List.xaml para abrir el archivo para editarlo.

Agregue el marcado para definir un control PivotItem secundario adicional dentro del control Pivot principal. El elemento Grid en el que se declaran los elementos de la IU que definen la página principal de la aplicación debe ser parecido al siguiente código.

<Grid x:Name="LayoutRoot" Background="Transparent"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls">
    <!--Pivot Control-->
    <ProgressBar x:Name="progressBar" Opacity="1" HorizontalAlignment="Center"
     VerticalAlignment="Top" Height="30" Width="470" IsIndeterminate="{Binding IsBusy}"
     Visibility="{Binding ShowIfBusy}" />
    <Grid x:Name="ContentPanel" Grid.Row="0" Width="470">
        <controls:Pivot Name="Views" Title="Product Orders" LoadedPivotItem="OnPivotItemLoaded">
            <!--Pivot item-->
            <controls:PivotItem Name="View1" Header="All Items">
                <!--Double line list with text wrapping-->
                <ListBox x:Name="lstBox1" Margin="0,0,-12,0" SelectionChanged="OnSelectionChanged"
                 ItemsSource="{Binding [View1]}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical" Margin="10">
                                <TextBlock Name="txtTitle" Text="{Binding [Title]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextTitle2Style}" />
                                <TextBlock Name="txtDescription" Text="{Binding [Description]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" />
                                <TextBlock Name="txtQuantity" Text="{Binding [Quantity]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>

            <!--Added PivotItem control for customized view--><controls:PivotItem Name="View2" Header="Big Orders"><!--Double line list with text wrapping--><ListBox x:Name="lstBox2" Margin="0,0,-12,0"
                 SelectionChanged="OnSelectionChanged" ItemsSource="{Binding [View2]}"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Vertical" Margin="10"><TextBlock Name="txtTitle" Text="{Binding [Title]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextTitle2Style}" /><TextBlock Name="txtDescription" Text="{Binding [Description]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" /><TextBlock Name="txtQuantity" Text="{Binding [Quantity]}"
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" /></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></controls:PivotItem>

        </controls:Pivot>
    </Grid>
</Grid>

Nota:

[!NOTA] En particular, el valor del atributo Name ("Vista2") del control PivotItem es el mismo que el valor principal de la entrada del tipo Dictionary definido en el paso 2. Este valor se usa para identificar la consulta CAML adecuada que se utiliza para recuperar los datos que se mostrarán en PivotItem. Además observe que la ListBox que se declara aquí (denominada "CuadroLista2" simplemente para distinguirla de la ListBox del valor predeterminado) también se enlaza a la vista.

Al iniciar el proyecto (presionando F5), el control Pivot de la aplicación incluye dos controles PivotItem y los datos recuperados por las consultas CAML asociadas con sus vistas respectivas. La vista predeterminada Todos los elementos muestra todos los pedidos, como se muestra en la figura 1 (con datos de ejemplo).

Figura 1. Todos los pedidos (elementos de la lista) en una lista de ejemplo

Todos los pedidos (elementos de la lista) en una lista de ejemplo

Y la vista personalizada, tal como se define en el procedimiento anterior, muestra una lista filtrada de los elementos que incluye solo los pedidos que contienen una cantidad de 100 o más, como se muestra en la figura 2.

Figura 2. Solo los pedidos grandes

Solo los pedidos grandes

Puede realizar muchas otras personalizaciones en las consultas CAML, en las que se basan las vistas, y en los elementos de la IU asociados con las vistas.

Compartir a través de