Cómo: Utilizar el control DataGrid en Smartphone

  • Artículo

Actualización: noviembre 2007

Se puede crear una aplicación de Smartphone similar al programa Contacts de Smartphone.

Nota:

Si está utilizando una versión de .NET Compact Framework anterior a la 3.5, debe agregar una referencia a System.Windows.Forms.DataGrid.dll en su proyecto para utilizarla.

En este ejemplo se muestra el formulario principal con una lista de nombres de producto en un control DataGrid de la base de datos Northwind, que viene instalada con Visual Studio. También contiene un formulario de vista de resumen que muestra el registro actual y un formulario de vista de edición para editar datos y agregar nuevos registros. Un objeto BindingSource proporciona acceso al registro seleccionado actualmente en la base de datos. Además de los controles de enlace de datos, un objeto BindingSource puede devolver un objeto DataRowView de la fila actual. Se puede utilizar el objeto DataRowView para tener acceso a datos con varias finalidades, como determinar el valor actual de una columna.

También se puede hacer que Visual Studio genere automáticamente formularios de resumen y de edición seleccionando Generar formularios de datos en el menú de acceso directo correspondiente a la etiqueta inteligente de un control DataGrid. Observe que, a efectos de demostración, sólo se utilizan dos columnas en este ejemplo para los formularios de resumen y de edición.

Esta aplicación tiene los formularios que se describen en la tabla siguiente. También se muestran las correspondientes opciones de menú para las teclas programables derecha e izquierda de Smartphone.

Formulario

Características

Tecla programable izquierda

Tecla programable derecha

Formulario principal

(Form1)

Muestra una columna de la tabla del control DataGrid en el estilo de una lista Contacts de Smartphone.

Si se presiona la tecla Acción o Entrar en el teclado con el emulador, se muestra el formulario de vista de resumen.

Nuevo

Agrega un nuevo registro a la base de datos y muestra el formulario EditView.

Editar

Muestra el formulario EditView.

SummaryView

Muestra los valores de columna del registro actual, optimizados para su visualización.

Listo

Se vuelve al formulario principal.

(ninguna)

EditView

Muestra los valores de columna del registro actual optimizados para su edición.

Listo

Acepta el cuadro de diálogo, actualiza la base de datos y muestra el formulario principal.

Cancelar

Cancela el cuadro de diálogo y muestra el formulario principal.

Para crear el proyecto y diseñar el formulario principal

  1. En Visual Studio, cree un proyecto para Smart Device y establezca la plataforma de destino en Windows Mobile 5.0 para Smartphone SDK o Windows Mobile 6 Standard SDK.

  2. En el menú Datos, haga clic en Agregar nuevo elemento.

  3. En Asistente para la configuración de orígenes de datos, conéctese a la base de datos Northwind mediante Microsoft SQL Compact Edition (Proveedor de datos .NET Framework para SQL Server CE). La base de datos Northwind, Northwind.sdf, se instala en \Archivos de programa\Microsoft SQL Server Compact Edition\v3.5\Ejemplos.

    Nota:

    En Windows Vista, debe ejecutar Visual Studio como un administrador para tener acceso a la base de datos Northwind. Para obtener más información sobre cómo agregar la base de datos, vea Cómo: Agregar una base de datos a un proyecto de dispositivos.

  4. En el paso Elija los objetos de base de datos del asistente, seleccione la tabla Products y todas sus columnas.

  5. En el Cuadro de herramientas, agregue un control DataGrid al formulario.

  6. Para que el control DataGrid aparezca como la lista Contacts en Smartphone, establezca sus propiedades como se muestra en la tabla siguiente.

    DataGrid (Propiedad)

    Establecer en

    ColumnHeadersVisible

    False

    RowHeadersVisible

    False

    GridLineColor

    Window

    Location

    Una estructura Point con -2 para x y -2 para y.

    Size

    Una estructura Size con 184 para el ancho y 190 para el alto.

  7. Establezca la propiedad DataSource en la tabla Orders. Visual Studio agrega los objetos NorthwindDataSet, ProductsBindingSource y ProductsTableAdapter al proyecto.

  8. Haga clic en la propiedad TableStyles en el panel Propiedades. Con esta acción se muestra el cuadro de diálogo Editor de la colección DataGridTableStyle. A continuación, realice las acciones siguientes:

    1. Agregue un objeto DataGridTableStyle a la colección TableStyles.

    2. Especifique "Products" para la propiedad MappingName.

    3. Haga clic en la propiedad GridColumnStyle. Con esta acción se muestra el cuadro de diálogo Editor de la colección DataGridColumnStyle.

    4. Agregue un objeto DataGridTextBoxColumn a la colección GridColumnStyles.

    5. Haga clic en la propiedad MappingName y seleccione Nombre del producto.

    6. Establezca los valores de Texto de encabezado y Ancho deseados.

    7. Repita el procedimiento para las columnas adicionales.

    8. Cierre los cuadros de diálogo.

  9. Agregue dos formularios al proyecto, uno para la vista de resumen y otro para la vista de edición. Denomínelos SummaryView y EditView.

  10. Agregue un parámetro a los constructores de los formularios SummaryView y EditView para tomar un objeto BindingSource. Declare una variable global, CurrentBindingSouce en estos formularios para que se establezca en el objeto BindingSource que se pasa al constructor. Observe que debe establecerse antes de que se llame al método InitializeComponent.

    Los programadores de Visual Basic tienen que agregar Sub New al formulario, agregando un método New de la lista superior derecha Nombre de método del panel de código.

    Dim CurrentBindingSource As BindingSource
Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource
    InitializeComponent()
End Sub

    private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
}

  11. En el formulario principal, agregue un objeto MenuItem denominado New (MenuItem1) y otro denominado Edit (MenuItem2). Estos menús corresponden a las teclas programables izquierda y derecha de Smartphone. Agregue el código siguiente para los eventos ClickNew y Edit.

    ' Add new record.
Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    ProductsBindingSource.AddNew()
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub
' Edit record.
Private Sub MenuItem2_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub

    // Add new record.
private void menuItem1_Click(object sender, EventArgs e)
{
    productsBindingSource.AllowNew = true;
    productsBindingSource.AddNew();
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        ProductsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
     }
}
// Edit record (Edit).
private void menuItem2_Click(object sender, EventArgs e)
{
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        productsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
    }
}

  12. En el formulario principal, agregue código para el evento KeyDown que se produce cuando la tecla de acción se presiona en Smartphone. Con esta acción se muestra el formulario SummaryView.

    Private Sub DataGrid1_KeyDown(ByVal sender As System.Object, _
    ByVal e As System.Windows.Forms.KeyEventArgs) _
    Handles DataGrid1.KeyDown
    If (e.KeyCode = Keys.Enter) Then
        Dim SummaryViewDialog As SummaryView = New SummaryView(ProductsBindingSource)
        Cursor.Current = Cursors.Default
        SummaryView.ShowDialog()
    End If
End Sub

    private void dataGrid1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        SummaryView SummaryViewDialog = 
          new SummaryView(productsBindingSource);
        SummaryViewDialog.ShowDialog();
     }
}

Para crear la vista de resumen

  1. Agregue los controles siguientes al formulario:

    • Un control Label para el encabezado Product Name, como "Product Name:".

    • Un control Label para el valor Product Name.

    • Un control Label para el valor Discontinued, que sólo se muestra cuando el valor de la columna Discontinued de la tabla Products es true. Asigne a esta etiqueta el título "DISCONTINUED" con una fuente de color rojo.

  2. Agregue el código siguiente al constructor para que el formulario SummaryView establezca los enlaces de datos. Declare una variable de formulario denominada CurrentBindingSource para que se establezca en la instancia de BindingSource pasada en el constructor del formulario. Un objeto DataRowView determina que si la columna Discontinued es true, se muestre la etiqueta Discontinued.

    Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()
    ' Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text", _
      CurrentBindingSource, "Product Name")
        ' Show the Discontinued label if
        ' that value is true in the database.
        Dim drView As DataRowView
        drView = CurrentBindingSource.Current
        If drView.Item("Discontinued") = True Then
            DiscontinuedLabel.Visible = True
        Else
            DiscontinuedLabel.Visible = False
        End If
    End Sub

    private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text",
      CurrentBindingSource, "Product Name");
    // Show the Discontinued label if
    // that value is true in the database.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if (drView["Discontinued"] == true)
    {
        DiscontinuedLabel.Visible = true;
    }
    else
    {
        DiscontinuedLabel.Visible = false;
    }
}

  3. Agregue un objeto MenuItem con el título Listo para que la tecla programable izquierda cierre el formulario y se vuelva al formulario principal.

    Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.Close
End Sub

    private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.Close();
}

Para crear la vista de edición

  1. Agregue una referencia al espacio de nombres Microsoft.WindowsCE.Forms en el proyecto. Esta acción es necesaria para establecer el valor InputMode de Smartphone en controles de cuadro de texto.

  2. Agregue los controles siguientes al formulario:

    • Un control Label para el cuadro de texto Product Name.

    • Un control TextBox para la columna Product Name.

    • Un control CheckBox para el valor Discontinued.

  3. Para establecer el enlace de datos, agregue el código siguiente al constructor del formulario detrás de la llamada a InitializeComponent. Este código incluye la adición de un nuevo registro o la edición de un registro existente. Si se agrega un nuevo registro, un objeto DataRowView determina si la columna Discontinued tiene un valor null. Si el valor es null, la casilla se activa en false.

    Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.

    ' Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,_
      InputMode.AlphaT9)
    ProductNameTextBox.DataBindings.Add("Text",_
      CurrentBindingSource, "Product Name")

    ' Determine the Discontinued value.
    ' If null, change to False.
    Dim drView As DataRowView
    drView = CurrentBindingSource.Current
    ' Set the bindings.
    If IsDBNull(drView("Discontinued")) Then
        DiscontinuedCheckBox.DataBindings.Add("CheckState",_
          CurrentBindingSource, "Discontinued", True,_
          DataSourceUpdateMode.OnValidation, False, "")
    Else
        DiscontinuedCheckBox.DataBindings.Add("Checked",_
          CurrentBindingSource, "Discontinued")
     End If
End Sub

    public EditView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,
      InputMode.AlphaT9);
    // Set the bindings.
    ProductNameTextBox.DataBindings.Add("Text",
      CurrentBindingSource,"Product Name");
    // Determine the Discontinued value.
    // If null, change to False.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if(drView("Discontinued")== null)
    {
        DiscontinuedCheckBox.DataBindings.Add("CheckState",
          CurrentBindingSource, "Discontinued",
          true,DataSourceUpdateMode.OnValidation,false,"");
    }
    else
    {
        DiscontinuedCheckBox.DataBindings.Add("Checked",
          CurrentBindingSource, "Discontinued");
    }
}

  1. Agregue un objeto MenuItem con el título Listo para que la tecla programable izquierda actualice la base de datos con los cambios y se vuelva al formulario principal.

    Private Sub MenuItem1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.OK
    Me.Close()
End Sub

    Private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.OK;
    this.Close();
}

  1. Agregue un objeto MenuItem con el título Cancelar para que la tecla programable derecha descarte los cambios y se vuelva al formulario principal.

    Private Sub MenuItem2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.Cancel
    Me.Close()
End Sub

    Private void MenuItem2_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.Cancel;
    this.Close();
}

Compilar el código

Para este ejemplo se requieren referencias a los siguientes espacios de nombres:

Vea también

Tareas

Cómo: Utilizar el control DataGrid en Pocket PC

Conceptos

Generar objetos DataSet con establecimiento inflexible de tipos (ADO.NET)

Otros recursos

Acceso a datos y compatibilidad XML en .NET Compact Framework