Tutorial: Cambiar el panel de acciones de acuerdo con el contexto del usuario

Actualización: noviembre 2007

En este tutorial se muestra cómo responder a los eventos XMLNode. Cuando un usuario mueve el cursor en un documento, los controles del panel de acciones se ocultan o se vuelven visibles.

Este tutorial ilustra las tareas siguientes:

• Agregar controles al panel de acciones

• Mostrar el panel de acciones cuando se abra la aplicación.

• Ocultar y mostrar controles en el panel de acciones en función de las acciones del usuario en nodos XML.

Nota:
Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio incluidos en las instrucciones siguientes. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio Tools para Office (componente opcional de Visual Studio 2008 Professional y Visual Studio Team System).

• Microsoft Office Word 2003.

Nota:
También puede realizar este tutorial con Word 2007. Sin embargo, algunas de las instrucciones suponen que está utilizando los menús de Word 2003.

Visual Studio Tools para Office se instala, de forma predeterminada, con las versiones que se enumeran de Visual Studio. Para comprobar si está instalado, consulte Instalar Visual Studio Tools para Office.

Crear el proyecto

El primer paso consiste en crear un proyecto de documento de Word.

Para crear un nuevo proyecto

• Cree un proyecto de documento de Word con el nombre My Dynamic Actions Pane. En el asistente, seleccione Crear un nuevo documento. Para obtener más información, consulte Cómo: Crear proyectos de Visual Studio para Office.

  Visual Studio abre el nuevo documento de Word en el diseñador y agrega el proyecto Mi panel de acciones dinámicas al Explorador de soluciones.

Crear un esquema para asignarlo al documento

Para crear los nodos XML, arrastre elementos de un esquema XML al documento. Cree en primer lugar un archivo de esquema y, a continuación, cree un documento que corresponda al esquema y asigne los elementos al documento.

Para crear el esquema XML

1. Seleccione el proyecto Mi panel de acciones dinámicas en el Explorador de soluciones.

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

   Aparecerá el cuadro de diálogo Agregar nuevo elemento.

3. En el panel Plantillas, seleccione Esquema XML.

4. Asigne al esquema el nombre ActionsPaneSample.xsd y haga clic en Agregar.

5. En el Explorador de soluciones, haga clic con el botón secundario del mouse en ActionsPaneSample.xsd y, a continuación, en Abrir con.

6. En el cuadro de diálogo Abrir con, seleccione Editor XML y, a continuación, haga clic en Aceptar.

7. Reemplace el texto del editor XML con el texto siguiente.

   <?xml version="1.0" encoding="utf-8" ?>
   <xs:schema targetNamespace="https://schemas.microsoft.com/vsto/samples" elementFormDefault="qualified"
       xmlns="https://schemas.microsoft.com/vsto/samples"
       xmlns:mstns="https://schemas.microsoft.com/vsto/samples"
       xmlns:xs="http://www.w3.org/2001/XMLSchema">
     <xs:element name="Sample" type="SampleType"></xs:element>
     <xs:complexType name="SampleType">
       <xs:all>
         <xs:element name="Insert" type="InsertType" minOccurs="0" maxOccurs="1" />
         <xs:element name="Table" type="xs:string" minOccurs="0" maxOccurs="1" />
       </xs:all>
     </xs:complexType>
     <xs:complexType name="InsertType">
       <xs:sequence>
         <xs:element name="MemoTo" type="xs:string" minOccurs="1" maxOccurs="1"/>
         <xs:element name="MemoFrom" type="xs:string" minOccurs="1" maxOccurs="1"/>
         <xs:element name="MemoSubject" type="xs:string" minOccurs="1" maxOccurs="1"/>
       </xs:sequence>
     </xs:complexType>
   </xs:schema>
   

8. Guarde el proyecto.

Agregar texto y código XML al documento

El documento para este tutorial tiene formato de memorando. Agregue el texto al documento y, a continuación, asigne los elementos XML a ubicaciones en el documento.

Para agregar texto al documento

1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en ThisDocument.cs o en ThisDocument.vb y, a continuación, haga clic en Diseñador de vistas.

2. Agregue el texto siguiente al documento de Word.

   MEMORANDO

   Para:

   De:

   Asunto:

   La tabla siguiente muestra la información de contacto solicitada:

   Nombre	Dirección	Ciudad	Estado	Código postal
   Nancy Davolio	507 - 20th Ave. E., Apt. 2A	Seattle	WA	98122

A continuación, asigne elementos XML al texto contenido en el memorando. Se creará un control XMLNode para cada elemento XML que asigne. El nombre del control XMLNode se obtiene agregando los nombres del elemento primario y del elemento secundario a la palabra Node. Por ejemplo, si asigna el elemento Insert del esquema anterior, el nombre será SampleInsertNode. Para obtener más información sobre controles, vea Información general sobre elementos y controles Host.

Para adjuntar el esquema a su documento

1. Abra el cuadro de diálogo Plantillas y complementos. Para hacerlo en Word 2007:

   1. En la cinta de opciones, haga clic en la ficha Desarrollador.

      Nota:
      Si la ficha Desarrollador no está visible, debe mostrarla primero. Para obtener más información, vea Cómo: Mostrar la ficha Programador en la cinta de opciones.

   2. En el grupo XML, haga clic en Esquema.

      Se abrirá el cuadro de diálogo Plantillas y complementos.

   Para abrir el cuadro de diálogo Plantillas y complementos en Word 2003:

   1. En el menú Herramientas, seleccione Herramientas de Microsoft Office Word y, a continuación, haga clic en Plantillas y complementos.

      Se abrirá el cuadro de diálogo Plantillas y complementos.

      Nota:
      Si las Herramientas de Microsoft Office Word no están disponibles en el menú Herramientas, haga clic en el documento para darle el foco. Para obtener más información, vea Menús de Office en el entorno de Visual Studio.

2. En el cuadro de diálogo Plantillas y complementos, haga clic en la ficha Esquema XML y, a continuación, haga clic en Agregar esquema.

3. Vaya al esquema ActionsPaneSample.xsd anteriormente creado, que está situado en su directorio de proyecto, y haga clic en Abrir.

4. Haga clic en Aceptar en el cuadro de diálogo Configuración del esquema.

5. Haga clic en Aceptar para cerrar el cuadro de diálogo Plantillas y complementos.

   Se abre el panel de tareas Estructura XML.

Para asignar elementos XML a su documento

1. Haga clic en el elemento Sample del panel de tareas Estructura XML.

2. Haga clic en Aplicar a todo el documento cuando se le pregunte.

3. Seleccione las tres líneas de texto que contienen To, From y Subject y haga clic en el elemento Insertar del panel de tareas Estructura XML.

4. Coloque el cursor después de Para:, presione la tecla TAB dos veces y haga clic en el elemento MemoTo para insertarlo.

5. Coloque el cursor después de De:, presione la tecla TAB dos veces y haga clic en el elemento MemoFrom.

6. Coloque el cursor después de Asunto:, presione la tecla TAB dos veces y haga clic en el elemento MemoSubject.

7. Seleccione la tabla de manera que quede resaltada toda la tabla y haga clic en el elemento Tabla para aplicarla.

   Las etiquetas XML aparecen dentro de las celdas de la tabla.

8. Desactive la casilla Mostrar las etiquetas XML del documento.

9. Haga clic en Opciones XML en la parte inferior del panel de tareas Estructura XML.

10. Active la casilla Omitir el contenido mixto y haga clic en Aceptar.

11. Cierre el panel de tareas Estructura XML.

Agregar controles al panel de acciones

Para establecer el diseño de controles en el panel de acciones, se utiliza el diseñador de un control denominado control de panel de acciones, que es básicamente igual a un control de usuario. Puede arrastrar otros controles, como botones y cuadros de texto, al control de panel de acciones y organizarlos. Para cambiar el panel de acciones según el contexto de usuario, debe agregar y diseñar un control de panel de acciones para cada contexto y, a continuación, mostrarlos y ocultarlos según corresponda.

Este tutorial utiliza tres controles de panel de acciones. El primer control del panel de acciones contiene tres cuadros de texto y un botón para que los usuarios finales puedan escribir datos y agregarlos al documento. El segundo control del panel de acciones contiene un botón que abre el cuadro de diálogo Table Properties. El tercer control del panel de acciones contiene una casilla que muestra todos los controles del panel de acciones, sin tener en cuenta dónde está colocado el cursor en el documento.

Para agregar un control del panel de acciones

1. Seleccione el proyecto Mi panel de acciones dinámicas en el Explorador de soluciones.

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

3. En el cuadro de diálogo Agregar nuevo elemento, seleccione Control del panel de acciones, asígnele el nombre AddTextControl y haga clic en Agregar.

4. Cambie la propiedad Size del control del panel de acciones a 170, 135.

Para agregar controles de formularios Windows Forms al primer control de panel de acciones

1. Desde la ficha Windows Forms del Cuadro de herramientas, arrastre un control Label hasta AddTextControl y cambie la propiedad Text a Para:.

2. Agregue un control Textbox a AddTextControl y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	toBox
   Size	110, 20

3. Agregue un segundo control Label a AddTextControl y cambie la propiedad Text a De:.

4. Agregue un segundo control Textbox a AddTextControl y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	fromBox
   Size	110, 20

5. Agregue un tercer control Label a AddTextControl bajo el cuadro de texto anterior y cambie la propiedad Text a Asunto:.

6. Agregue un tercer control Textbox a AddTextControl al lado de la etiqueta anterior y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	subjectBox
   Multiline	True
   Size	110, 40

7. Cambie el tamaño del cuadro de texto subjectBox para que permita incluir varias líneas.

8. Agregue un control Button a AddTextControl y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	insertText
   Text	Insert

Para crear el segundo control del panel de acciones

1. Agregue un segundo control del panel del acciones a su proyecto y asígnele el nombre ShowPropertiesControl.

2. Cambie la propiedad Size del control del panel de acciones a 170, 50.

3. Desde la ficha Windows Forms del Cuadro de herramientas, arrastre un control Button hasta ShowPropertiesControl y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	tableProperties
   Text	Table Properties
   Enabled	False
   Size	100, 23

4. Para C#, cambie la propiedad Modifiers del botón a Internal.

Para crear el tercer control del panel de acciones

1. Agregue un tercer control del panel de acciones a su proyecto y asígnele el nombre ShowAllControl.

2. Cambie la propiedad Size del control del panel de acciones a 170, 75.

3. Desde la ficha Windows Forms del Cuadro de herramientas, agregue un control GroupBox a ShowAllControl y cambie la propiedad Text a My Actions Pane.

4. Agregue un control CheckBox a ShowAllControl por encima del cuadro de grupo y cambie las propiedades siguientes.

   Propiedad	Valor
   Name	showCheck
   Text	Show All Controls

5. Para C#, cambie la propiedad Modifiers de la casilla a Internal.

Agregar código para responder al contexto del usuario

Ahora puede escribir código para mostrar el panel de acciones y para agregar y quitar controles de panel de acciones según la ubicación del cursor en el documento. El código entra en los controladores de eventos de los controles XMLNode.

Para agregar código a eventos de control de XMLNode

1. En el Explorador de soluciones, haga clic con el botón secundario en ThisDocument.vb o ThisDocument.cs y, a continuación, haga clic en Ver código.

2. Cree una referencia variable para cada control del panel de acciones en la sección de declaraciones de ThisDocument.

   Dim addText As New AddTextControl
   Dim showProperties As New ShowPropertiesControl
   Dim showAll As New ShowAllControl
   
   Friend WithEvents showCheck As System.Windows.Forms.CheckBox
   

   private AddTextControl addText = new AddTextControl();
   private ShowPropertiesControl showProperties = new ShowPropertiesControl();
   private ShowAllControl showAll = new ShowAllControl();
   

3. En el controlador de eventos Startup de ThisDocument, escriba el código siguiente para agregar el control ShowAllControl y mostrar el panel de acciones.

   Me.ActionsPane.Controls.Add(showAll)
   showCheck = showAll.showCheck
   

   this.ActionsPane.Controls.Add(showAll);
   

   Nota:
   El orden en el que se agregan los controles al panel de acciones determina su posición. Si tiene un control que siempre estará visible en la parte superior del panel de acciones, debe agregarlo en primer lugar. El orden también depende de la propiedad StackOrder del panel de acciones. Para obtener más información, vea Cómo: Administrar el diseño de controles en paneles de acciones.

4. Agregue el código siguiente al controlador de eventos ContextEnter del control SampleInsertNode.

   Private Sub SampleInsertNode_ContextEnter(ByVal sender As Object, _
       ByVal e As Microsoft.Office.Tools.Word.ContextChangeEventArgs) _
       Handles SampleInsertNode.ContextEnter
   
       If showAll.showCheck.Checked = False Then
           Me.ActionsPane.Controls.Add(addText)
           Me.ActionsPane.Controls.Remove(showProperties)
       End If
   End Sub
   

   private void SampleInsertNode_ContextEnter(object sender, 
       Microsoft.Office.Tools.Word.ContextChangeEventArgs e)
   {
       if (showAll.showCheck.Checked == false)
       {
           this.ActionsPane.Controls.Add(addText);
           this.ActionsPane.Controls.Remove(showProperties);
       }
   }
   

5. Agregue el código siguiente al controlador de eventos ContextLeave del control SampleInsertNode para ocultar el control después de que el usuario haya movido el cursor fuera de este nodo XML.

   Private Sub SampleInsertNode_ContextLeave(ByVal sender As Object, _
       ByVal e As Microsoft.Office.Tools.Word.ContextChangeEventArgs) _
       Handles SampleInsertNode.ContextLeave
   
       If showAll.showCheck.Checked = False Then
           Me.ActionsPane.Controls.Remove(addText)
       End If
   End Sub
   

   private void SampleInsertNode_ContextLeave(object sender,
       Microsoft.Office.Tools.Word.ContextChangeEventArgs e)
   {
       if (showAll.showCheck.Checked == false)
       {
           this.ActionsPane.Controls.Remove(addText);
       }
   }
   

6. Agregue el código siguiente al controlador de eventos ContextEnter del control SampleTableNode.

   Private Sub SampleTableNode_ContextEnter(ByVal sender As Object, _
       ByVal e As Microsoft.Office.Tools.Word.ContextChangeEventArgs) _
       Handles SampleTableNode.ContextEnter
   
       If showAll.showCheck.Checked = False Then
           Me.ActionsPane.Controls.Remove(addText)
           Me.ActionsPane.Controls.Add(showProperties)
       End If
   
       showProperties.tableProperties.Enabled = True
   End Sub
   

   private void SampleTableNode_ContextEnter(object sender,
       Microsoft.Office.Tools.Word.ContextChangeEventArgs e)
   {
       if (showAll.showCheck.Checked == false)
       {
           this.ActionsPane.Controls.Remove(addText);
           this.ActionsPane.Controls.Add(showProperties);
       }
       showProperties.tableProperties.Enabled = true;
   }
   

7. Agregue el código siguiente al controlador de eventos ContextLeave del control SampleTableNode para ocultar el control después de que el usuario haya movido el cursor fuera de este nodo XML.

   Private Sub SampleTableNode_ContextLeave(ByVal sender As Object, _
       ByVal e As Microsoft.Office.Tools.Word.ContextChangeEventArgs) _
       Handles SampleTableNode.ContextLeave
   
       If showAll.showCheck.Checked = False Then
           Me.ActionsPane.Controls.Remove(showProperties)
       End If
   
       showProperties.tableProperties.Enabled = False
   End Sub
   

   private void SampleTableNode_ContextLeave(object sender,
       Microsoft.Office.Tools.Word.ContextChangeEventArgs e)
   {
       if (showAll.showCheck.Checked == false)
       {
           this.ActionsPane.Controls.Remove(showProperties);
       }
       showProperties.tableProperties.Enabled = false;
   }
   

8. En C#, debe agregar controladores de eventos para los controles XMLNode. Puede colocar este código en el controlador de eventos Startup de ThisDocument. Para obtener más información sobre cómo crear controladores de eventos, vea Cómo: Crear controladores de eventos en Visual Studio Tools para Office.

   this.SampleInsertNode.ContextEnter += new Microsoft.Office.Tools.Word.
       ContextChangeEventHandler(SampleInsertNode_ContextEnter);
   
   this.SampleInsertNode.ContextLeave += new Microsoft.Office.Tools.Word.
       ContextChangeEventHandler(SampleInsertNode_ContextLeave);
   
   this.SampleTableNode.ContextEnter += new Microsoft.Office.Tools.Word.
       ContextChangeEventHandler(SampleTableNode_ContextEnter);
   
   this.SampleTableNode.ContextLeave += new Microsoft.Office.Tools.Word.
       ContextChangeEventHandler(SampleTableNode_ContextLeave);
   

Punto de control

Guarde su proyecto y compruebe que los controles del panel de acciones cambian a medida que desplaza el cursor por el documento.

Para probar el proyecto

1. Presione F5 para ejecutar el proyecto.

2. Lleve el punto de inserción a la palabra Para y compruebe que el control del panel de acciones addText está visible en el panel de acciones.

3. Coloque el punto de inserción en el interior de la tabla y compruebe que el control del panel de acciones showProperties está visible en el panel de acciones.

4. Coloque el punto de inserción en la palabra MEMORANDUM y compruebe que los controles de panel de acciones addText y showProperties no están visibles en el panel de acciones.

Agregar código para responder a los eventos de control en el panel de acciones

Hasta ahora, los controles del panel de acciones no hacen nada. El último paso consiste en escribir código para mostrar todos los controles, insertar texto y mostrar el cuadro de diálogo Table Properties.

Para mostrar todos los controles en el panel de acciones

1. Agregue el código siguiente a ThisDocument.

   Private Sub showCheck_CheckStateChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles showCheck.CheckStateChanged
   
       If showAll.showCheck.Checked = True Then
           Me.ActionsPane.Controls.Add(addText)
           Me.ActionsPane.Controls.Add(showProperties)
       Else
           Me.ActionsPane.Controls.Remove(addText)
           Me.ActionsPane.Controls.Remove(showProperties)
       End If
   End Sub
   

   private void showCheck_CheckStateChanged(object sender, EventArgs e)
   {
       if (showAll.showCheck.Checked)
       {
           this.ActionsPane.Controls.Add(addText);
           this.ActionsPane.Controls.Add(showProperties);
       }
       else
       {
           this.ActionsPane.Controls.Remove(addText);
           this.ActionsPane.Controls.Remove(showProperties);
       }
   }
   

2. En C#, debe agregar un controlador de eventos para el control checkbox. Puede colocar este código en el controlador de eventos Startup de ThisDocument.

   showAll.showCheck.CheckStateChanged += new EventHandler(showCheck_CheckStateChanged);
   

Para insertar texto al hacer clic en el botón Insertar

1. En el Explorador de soluciones, haga clic con el botón secundario en AddTextControl.vb o en AddTextControl.cs y, a continuación, haga clic en Ver código.

2. En el controlador de eventos Click del botón insertText, escriba el código siguiente.

   Private Sub insertText_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles insertText.Click
   
       With Globals.ThisDocument
           .InsertMemoFromNode.Text = Me.fromBox.Text
           .InsertMemoToNode.Text = Me.toBox.Text
           .InsertMemoSubjectNode.Text = Me.subjectBox.Text
       End With
   
       ' Clear the text boxes.
       Me.fromBox.Text = ""
       Me.toBox.Text = ""
       Me.subjectBox.Text = ""
   End Sub
   

   private void insertText_Click(object sender, System.EventArgs e)
   {
       Globals.ThisDocument.InsertMemoFromNode.Text = this.fromBox.Text;
       Globals.ThisDocument.InsertMemoToNode.Text = this.toBox.Text;
       Globals.ThisDocument.InsertMemoSubjectNode.Text = this.subjectBox.Text;
   
       // Clear the text boxes.
       this.fromBox.Text = "";
       this.toBox.Text = "";
       this.subjectBox.Text = "";
   }
   

3. En C#, debe agregar un controlador de eventos para el botón. Puede colocar este código en el constructor AddTextControl, después de la llamada a InitializeComponent.

   public AddTextControl()
   {
       InitializeComponent();
       this.insertText.Click += new System.EventHandler(this.insertText_Click);
   }
   

Para mostrar el cuadro de diálogo Propiedades de tabla

1. En el Explorador de soluciones, haga clic con el botón secundario en ShowPropertiesControl.vb o en ShowPropertiesControl.cs y, a continuación, haga clic en Ver código.

2. Agregue el código siguiente al controlador de eventos Click del botón tableProperties.

   Private Sub tableProperties_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles tableProperties.Click
   
       Globals.ThisDocument.Application.Dialogs( _
           Word.WdWordDialog.wdDialogTableProperties).Show()
   End Sub
   

   private void tableProperties_Click(object sender, System.EventArgs e)
   {
       object timeout = 0;
   
       Globals.ThisDocument.Application.Dialogs[
           Microsoft.Office.Interop.Word.WdWordDialog.wdDialogTableProperties]
               .Show(ref timeout);
   }
   

3. En C#, debe agregar un controlador de eventos para el botón. Puede colocar este código en el constructor ShowPropertiesControl, después de la llamada a InitializeComponent.

   public ShowPropertiesControl()
   {
       InitializeComponent();
       this.tableProperties.Click += new System.EventHandler(this.tableProperties_Click);
   }
   

Probar la aplicación

Ahora puede probar más exhaustivamente su documento para comprobar la funcionalidad de los controles del panel de acciones.

Para probar el documento

1. Presione F5 para ejecutar el proyecto.

2. Confirme que el panel de acciones está visible.

3. Coloque el cursor en la sección del documento que contiene las líneas Para, De y Asunto y confirme que en el panel de acciones aparecen los controles addText.

4. Escriba texto en los cuadros de texto Para, De y Asunto en el panel de acciones y haga clic en Insertar.

5. Coloque el cursor en la tabla y confirme que en el panel de acciones aparece el control showProperties.

6. Haga clic en el botón Propiedades de tabla y confirme que se abre el cuadro de diálogo Propiedades de tabla.

7. Haga clic en la casilla Mostrar todo y confirme que en el panel de acciones están visibles todos los controles.

8. Coloque el cursor fuera de la tabla y confirme que se deshabilita el botón Propiedades de tabla.

Pasos siguientes

Este tutorial muestra los fundamentos para cambiar el panel de acciones en función del contexto del usuario. Éstas son algunas de las tareas que pueden venir a continuación:

• Implementar el proyecto. Para obtener más información, vea Cómo: Implementar soluciones de Office (2003 System).

• Enlazar datos a controles en Word. Para obtener más información, vea Tutorial: Enlazar datos a controles en un panel de acciones de Word.

• Enlazar datos a controles en Excel. Para obtener más información, vea Tutorial: Enlazar datos a controles en un panel de acciones de Excel.

Vea también

Tareas

Cómo: Agregar un panel de acciones a un documento de Word

Cómo: Agregar un panel de acciones a un libro de Excel

Cómo: Administrar el diseño de controles en paneles de acciones

Conceptos

Información general sobre paneles de acciones

XMLNodes (Control)