Tutorial: Actualizar los controles de una cinta de opciones en tiempo de ejecución

Artículo
08/10/2011

En este tutorial se muestra cómo utilizar el modelo de objetos de la cinta de opciones para actualizar sus controles una vez cargada la cinta de opciones en la aplicación de Office.

Se aplica a: la información de este tema se aplica a los proyectos de nivel de documento y los proyectos de nivel de aplicación para las siguientes aplicaciones: Excel 2007 y Excel 2010; InfoPath 2010; Outlook 2007 y Outlook 2010; PowerPoint 2007 y PowerPoint 2010; Project 2010; Visio 2010; Word 2007 y Word 2010. Para obtener más información, vea Características disponibles por aplicación y tipo de proyecto de Office.

En el ejemplo, se extraen los datos de la base de datos de ejemplo Northwind para rellenar un cuadro combinado y un menú en Microsoft Office Outlook. Los elementos que se seleccionan en estos controles rellenan automáticamente campos como Para y Asunto en un mensaje de correo electrónico.

En este tutorial se muestran las tareas siguientes:

Crear un nuevo proyecto de complemento de Outlook.
Diseñar un grupo personalizado de la cinta de opciones.
Agregar el grupo personalizado a una ficha integrada.
Actualizar los controles de la cinta de opciones en tiempo de ejecución.

Nota

Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que tenga y la configuración que esté utilizando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Una edición de Visual Studio 2010 que incluye las herramientas para desarrolladores de Microsoft Office. Para obtener más información, vea [Configurar un equipo para desarrollar soluciones de Office](bb398242\(v=vs.100\).md).

Microsoft Office Outlook 2007 u Microsoft Outlook 2010.

Crear un nuevo proyecto de complemento de Outlook

Primero, cree un proyecto de complemento de Outlook.

Para crear un nuevo proyecto de complemento de Outlook

En Visual Studio, cree un proyecto de complemento de Outlook 2007 u Outlook 2010 denominado Ribbon_Update_At_Runtime.
En el cuadro de diálogo Nuevo proyecto, seleccione Crear directorio para la solución.
Guarde el proyecto en el directorio de proyectos predeterminado.

Para obtener más información, vea Cómo: Crear proyectos de Office en Visual Studio.

Diseñar un grupo personalizado de la cinta de opciones

La cinta de opciones para este ejemplo aparecerá cuando un usuario cree un nuevo mensaje de correo. Para crear un grupo personalizado en la cinta de opciones, primero agregue un elemento de cinta de opciones al proyecto y, a continuación, diseñe el grupo en el Diseñador de la cinta de opciones. Este grupo personalizado ayudará a generar mensajes de correo electrónico de seguimiento extrayendo los nombres e historiales de pedidos de la base de datos.

Para diseñar un grupo personalizado

En el menú Proyecto, haga clic en Agregar nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, seleccione Cinta (diseñador visual).
Cambie el nombre de la nueva cinta de opciones a CustomerRibbon y, a continuación, haga clic en Agregar.

El archivo CustomerRibbon.cs o CustomerRibbon.vb se abre en el Diseñador de la cinta de opciones y muestra una ficha y un grupo predeterminados.
Haga clic en el Diseñador de la cinta de opciones para seleccionarlo.
En la ventana Propiedades, haga clic en la flecha desplegable situada junto a la propiedad RibbonType y, a continuación, haga clic en Microsoft.Outlook.Mail.Compose.

De este modo, la cinta de opciones aparecerá cuando el usuario redacte un nuevo mensaje de correo en Outlook.
En el Diseñador de la cinta de opciones, haga clic en Grupo1 para seleccionarlo.
En la ventana Propiedades , establezca Label en Compras del cliente.
Desde la ficha Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un control ComboBox hasta el grupo Compras del cliente.
Haga clic en ComboBox1 para seleccionarlo.
En la ventana Propiedades , establezca Label en Clientes.
Desde la ficha Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un control Menu hasta el grupo Compras del cliente.
En la ventana Propiedades, establezca Label en Producto comprado.
Establezca Dynamic en true.

De este modo, se pueden agregar y quitar controles del menú en tiempo de ejecución después de que se haya cargado la cinta de opciones en la aplicación de Office.

Agregar el grupo personalizado a una ficha integrada

Una pestaña integrada es una pestaña que ya está en la cinta de opciones de un inspector o explorador de Outlook. En este procedimiento, va a agregar el grupo personalizado a una ficha integrada y, a continuación, va a especificar la posición del grupo personalizado en la ficha.

Para agregar el grupo personalizado a una ficha integrada

Haga clic en la ficha TabAddins (Built-In) para seleccionarla.
En la ventana Propiedades, expanda la propiedad ControlId y, a continuación, establezca OfficeId en TabNewMailMessage.

De este modo, se agrega el grupo Compras del cliente a la ficha Mensajes de la cinta de opciones que aparece en un nuevo mensaje de correo.
Haga clic en el grupo Compras del cliente para seleccionarlo.
En la ventana Propiedades, expanda la propiedad Position, haga clic en la flecha desplegable situada junto a la propiedad PositionType y, a continuación, haga clic en BeforeOfficeId.
Establezca la propiedad OfficeId en GroupClipboard.

De este modo, se coloca el grupo Compras del cliente delante del grupo Portapapeles en la ficha Mensajes.

Crear el origen de datos

Utilice la ventana Orígenes de datos para agregar un conjunto de datos con tipo al proyecto.

Para crear el origen de datos

En el menú Datos, haga clic en Agregar nuevo origen de datos.

Esto inicia el Asistente para la configuración de orígenes de datos.
Seleccione Base de datos y, a continuación, haga clic en Siguiente.
Seleccione Conjunto de datos y, a continuación, haga clic en Siguiente.
Seleccione una conexión de datos a la base de datos de ejemplo Northwind de Microsoft SQL Server Compact 3.5 o agregue una nueva conexión mediante el botón Nueva conexión.
Cuando haya seleccionado o creado una conexión, haga clic en Siguiente.
Haga clic en Siguiente para guardar la cadena de conexión.
En la página Elija los objetos de base de datos, expanda Tablas.
Active la casilla situada al lado de cada una de las siguientes tablas:
1. Customers
2. Order Details
3. Orders
4. Products
Haga clic en Finalizar.

Actualizar controles del grupo personalizado en tiempo de ejecución

Utilice el modelo de objetos de la cinta de opciones para realizar las tareas siguientes:

Agregar nombres de cliente al cuadro combinado Clientes.
Agregar controles de menú y botón al menú Productos comprados que representen los pedidos y productos vendidos.
Rellenar los campos To, Subject y Body de los nuevos mensajes de correo utilizando los datos del cuadro combinado Clientes y del menú Productos comprados.

Para actualizar los controles del grupo personalizado mediante el modelo de objetos de la cinta de opciones

Haga clic en la opción Agregar referencia del menú Proyecto.
En el cuadro de diálogo Agregar referencia, haga clic en la ficha .NET, seleccione el ensamblado System.Data.Linq y, a continuación, haga clic en Aceptar.

Este ensamblado contiene las clases para utilizar Language-Integrated Query (LINQ). Va a usar LINQ para rellenar los controles del grupo personalizado con datos de la base de datos Northwind.
En el Explorador de soluciones, haga clic en el archivo CustomerRibbon.cs o CustomerRibbon.vb para seleccionarlo.
En el menú Ver, haga clic en Código.

Se abre el archivo de código de la cinta de opciones en el editor de código.

Agregue las siguientes instrucciones a la parte superior del archivo de código de la cinta de opciones. Estas instrucciones proporcionan acceso fácil a los espacios de nombres LINQ y al espacio de nombres del ensamblado de interoperabilidad primario (PIA) de Outlook.

Imports System.Data.Linq
Imports System.Linq
Imports System.Data.Linq.Mapping
Imports System.Linq.Expressions
Imports Outlook = Microsoft.Office.Interop.Outlook
Imports Ribbon_Update_At_Runtime.NorthwindDataSetTableAdapters

using System.Data.Linq;
using System.Linq;
using System.Data.Linq.Mapping;
using System.Linq.Expressions;
using Outlook = Microsoft.Office.Interop.Outlook;
using System.Data;
using System.IO;
using Ribbon_Update_At_Runtime.NorthwindDataSetTableAdapters;

Agregue el código siguiente dentro de la clase CustomerRibbon. Este código declara los adaptadores de tabla y tabla de datos que usará para almacenar la información de las tablas de clientes, pedidos, detalles de pedidos y productos de la base de datos Northwind.

    'Declare the Northwind data set.

    Dim nwDataSet As NorthwindDataSet = New NorthwindDataSet()

    'Declare the data tables.

    Dim customerTable As NorthwindDataSet.CustomersDataTable
    Dim orderTable As NorthwindDataSet.OrdersDataTable
    Dim orderDetailsTable As NorthwindDataSet.Order_DetailsDataTable
    Dim productsTable As NorthwindDataSet.ProductsDataTable

    'Declare the data table adapters for each table.

    Dim customersTableAdapter As CustomersTableAdapter = New CustomersTableAdapter()
    Dim ordersTableAdapter As OrdersTableAdapter = New OrdersTableAdapter()
    Dim detailsTableAdapter As Order_DetailsTableAdapter = New Order_DetailsTableAdapter()
    Dim productsTableAdapter As ProductsTableAdapter = New ProductsTableAdapter()

//Declare the Northwind dataset.
NorthwindDataSet nwDataSet = new NorthwindDataSet();

//Declare the data tables.

NorthwindDataSet.CustomersDataTable customerTable;
NorthwindDataSet.OrdersDataTable orderTable;
NorthwindDataSet.Order_DetailsDataTable orderDetailsTable;
NorthwindDataSet.ProductsDataTable productsTable;

//Declare the data table adapters for each table.

CustomersTableAdapter customerTableAdapter = new CustomersTableAdapter();
OrdersTableAdapter ordersTableAdapter = new OrdersTableAdapter();
Order_DetailsTableAdapter detailsTableAdapter = new Order_DetailsTableAdapter();
ProductsTableAdapter productsTableAdapter = new ProductsTableAdapter();

Agregue uno de los siguientes bloques de código a la clase CustomerRibbon. Este código agrega tres métodos auxiliares que crean los controles para la cinta de opciones en tiempo de ejecución.

Si su proyecto está destinado a .NET Framework 4, agregue el siguiente código.


Private Function CreateRibbonDropDownItem() As RibbonDropDownItem
    Return Me.Factory.CreateRibbonDropDownItem()
End Function

Private Function CreateRibbonMenu() As RibbonMenu
    Return Me.Factory.CreateRibbonMenu()
End Function

Private Function CreateRibbonButton() As RibbonButton
    Dim button As RibbonButton = Me.Factory.CreateRibbonButton()
    AddHandler (button.Click), AddressOf Button_Click
    Return button
End Function

private RibbonDropDownItem CreateRibbonDropDownItem()
{
    return this.Factory.CreateRibbonDropDownItem();
}
private RibbonMenu CreateRibbonMenu()
{
    return this.Factory.CreateRibbonMenu();
}
private RibbonButton CreateRibbonButton()
{
    RibbonButton button = this.Factory.CreateRibbonButton();
    button.Click += new RibbonControlEventHandler(button_Click);
    return button;
}

Si su proyecto está destinado a .NET Framework 3.5, agregue el siguiente código.


Private Function CreateRibbonDropDownItem() As RibbonDropDownItem
    Return New RibbonDropDownItem()
End Function

Private Function CreateRibbonMenu() As RibbonMenu
    Return New RibbonMenu()
End Function

Private Function CreateRibbonButton() As RibbonButton
    Dim button As RibbonButton = New RibbonButton()
    AddHandler (button.Click), AddressOf Button_Click
    Return button
End Function

private RibbonDropDownItem CreateRibbonDropDownItem()
{
    return new RibbonDropDownItem();
}
private RibbonMenu CreateRibbonMenu()
{
    return new RibbonMenu();
}
private RibbonButton CreateRibbonButton()
{
    RibbonButton button = new RibbonButton();
    button.Click += new EventHandler<RibbonControlEventArgs>(button_Click);
    return button;
}

Reemplace el método de control de eventos CustomerRibbon_Load con el código siguiente. Este código utiliza una consulta LINQ para realizar las tareas siguientes:

Rellenar el cuadro combinado Clientes con el identificador y el nombre de 20 clientes de la base de datos Northwind.
Llamar al método auxiliar PopulateSalesOrderInfo. Este método actualiza el menú Productos comprados con los números de pedido correspondientes al cliente actualmente seleccionado.

    Private Sub CustomerRibbon_Load(ByVal sender As System.Object, _
   ByVal e As Microsoft.Office.Tools.Ribbon.RibbonUIEventArgs) _
       Handles MyBase.Load

        customerTable = nwDataSet.Customers
        customersTableAdapter.Fill(customerTable)

        Dim customerQuery = From customers In customerTable.AsEnumerable.Take(20) _
                Select CustomerID = customers.Customer_ID, _
                CustomerName = customers.Contact_Name

        ' Execute the query.
        For Each item In customerQuery
            Me.ComboBox1.Items.Add(CreateRibbonDropDownItem())

            Me.ComboBox1.Items.Last().Label = item.CustomerID.ToString() _
                + "|" + item.CustomerName
        Next item

        Me.ComboBox1.Text = Me.ComboBox1.Items.First().Label
        PopulateSalesOrderInfo()
    End Sub

private void CustomerRibbon_Load(object sender, RibbonUIEventArgs e)
{
    customerTable = nwDataSet.Customers;
    customerTableAdapter.Fill(customerTable);

    var customerQuery = from customers in customerTable.AsEnumerable().Take(20)
                        select new
                        {
                            CustomerID = customers.Field<string>("Customer ID"),
                            CustomerName = customers.Field<string>("Contact Name")
                        };


    // Execute the query.
    foreach (var item in customerQuery)
    {
        this.comboBox1.Items.Add(CreateRibbonDropDownItem());
        this.comboBox1.Items.Last().Label =
        item.CustomerName + "|" + item.CustomerID.ToString();
    }
    this.comboBox1.Text = this.comboBox1.Items.First().Label;
    PopulateSalesOrderInfo();
}

Agregue el código siguiente a la clase CustomerRibbon. Este código utiliza consultas LINQ para realizar las tareas siguientes:

Agregar un submenú al menú Productos comprados por cada pedido relacionado con el cliente seleccionado.
Agregar botones a cada submenú para los productos relacionados con el pedido.
Agregar controladores de eventos a cada botón.

Private Sub PopulateSalesOrderInfo()

    Dim tempArray As [String]() = comboBox1.Text.Split(New [Char]() {"|"c})
    Menu1.Items.Clear()

    orderTable = nwDataSet.Orders
    orderDetailsTable = nwDataSet.Order_Details
    productsTable = nwDataSet.Products

    ordersTableAdapter.Fill(orderTable)
    detailsTableAdapter.Fill(orderDetailsTable)
    productsTableAdapter.Fill(productsTable)

    Dim orderQuery = From order In orderTable.AsEnumerable() _
                     Where order.Customer_ID.ToString() = tempArray(0) _
                     Select New With {.SalesOrderID = order.Order_ID}

    For Each orderItem In orderQuery
        Me.Menu1.Items.Add(CreateRibbonMenu())

        Dim orderMenu As RibbonMenu = CType(Menu1.Items.Last(), RibbonMenu)
        orderMenu.Dynamic = True
        orderMenu.Label = orderItem.SalesOrderID.ToString()
        orderMenu.Tag = orderItem.SalesOrderID

        Dim productQuery = From orderDetail In orderDetailsTable.AsEnumerable(), _
                               product In productsTable.AsEnumerable() _
                           Where orderDetail.Product_ID = _
                               product.Product_ID _
                           And orderDetail.Order_ID = _
                           orderMenu.Tag _
        Select productName = product.Product_Name

        For Each productItem In productQuery
            Dim button As RibbonButton = CreateRibbonButton()
            button.Label = productItem
            orderMenu.Items.Add(button)
        Next productItem
    Next orderItem
End Sub

private void PopulateSalesOrderInfo()
{
    String[] tempArray = comboBox1.Text.Split(new Char[] { '|' });
    menu1.Items.Clear();

    orderTable = nwDataSet.Orders;
    orderDetailsTable = nwDataSet.Order_Details;
    productsTable = nwDataSet.Products;

    ordersTableAdapter.Fill(orderTable);
    detailsTableAdapter.Fill(orderDetailsTable);
    productsTableAdapter.Fill(productsTable);

    var orderQuery = from orders in orderTable.AsEnumerable()
                     where orders.Field<string>("Customer ID") == tempArray[1]
                     select new { OrderID = orders.Field<int>("Order ID") };

    foreach (var orderItem in orderQuery)
    {
        menu1.Items.Add(CreateRibbonMenu());

        RibbonMenu orderMenu = (RibbonMenu)menu1.Items.Last();
        orderMenu.Dynamic = true;
        orderMenu.Label = orderItem.OrderID.ToString();
        orderMenu.Tag = orderItem.OrderID;

        var productQuery = from orderDetail in orderDetailsTable.AsEnumerable()
                           join product in productsTable.AsEnumerable() on
                               orderDetail.Field<int>("Product ID")
                           equals product.Field<int>("Product ID")
                           where orderDetail.Field<int>("Order ID") ==
                               orderItem.OrderID
                           select new { ProductName = product.Field<string>("Product Name") };

        foreach (var productItem in productQuery)
        {
            RibbonButton button = CreateRibbonButton();
            button.Label = productItem.ProductName;
            orderMenu.Items.Add(button);
        }
    }
}

En el Explorador de soluciones, haga doble clic en el archivo de código de la cinta de opciones.

Se abre el Diseñador de la cinta de opciones.
En el Diseñador de la cinta de opciones, haga doble clic en el cuadro combinado Clientes.

El archivo de código de la cinta de opciones se abre en el editor de código y aparece el controlador de eventos ComboBox1_TextChanged.
Reemplace el controlador de evento ComboBox1_TextChanged con el código siguiente. Este código realiza las tareas siguientes:
- Llama al método auxiliar PopulateSalesOrderInfo. Este método actualiza el menú Productos comprados con los pedidos relacionados con el cliente seleccionado.
- Llama al método auxiliar PopulateMailItem y pasa el texto actual, que es el nombre del cliente seleccionado. Este método rellena los campos To, Subject y Body de los nuevos mensajes de correo.
```
Private Sub ComboBox1_TextChanged(ByVal sender As System.Object, _
    ByVal e As Microsoft.Office.Tools.Ribbon.RibbonControlEventArgs) _
        Handles ComboBox1.TextChanged
    PopulateSalesOrderInfo()
    PopulateMailItem(ComboBox1.Text)
End Sub
```
```
private void comboBox1_TextChanged(object sender,
    RibbonControlEventArgs e)
{
    PopulateSalesOrderInfo();
    PopulateMailItem(comboBox1.Text);
}
```

Agregue el siguiente evento Click a la clase CustomerRibbon. Este código agrega el nombre de los productos seleccionados al campo Body de los nuevos mensajes de correo.

Private Sub Button_Click(ByVal sender As System.Object, _
    ByVal e As Microsoft.Office.Tools.Ribbon.RibbonControlEventArgs)
    Dim application As Outlook.Application = Globals.ThisAddIn.Application
    Dim inspector As Outlook.Inspector = application.ActiveInspector()
    Dim myMailItem As Outlook.MailItem = CType(inspector.CurrentItem,  _
        Outlook.MailItem)
    Dim myButton As RibbonButton = CType(sender, RibbonButton)
    myMailItem.Subject = "Following up on your order"
    myMailItem.Body = myMailItem.Body + ControlChars.Lf + "* " _
        + myButton.Label
End Sub

void button_Click(object sender, RibbonControlEventArgs e)
{
    Outlook.Application application = Globals.ThisAddIn.Application;
    Outlook.Inspector inspector = application.ActiveInspector();
    Outlook.MailItem myMailItem = (Outlook.MailItem)inspector.CurrentItem;
    RibbonButton myCheckBox = (RibbonButton)sender;
    myMailItem.Subject = "Following up on your order";
    myMailItem.Body = myMailItem.Body + "\n" + "* " + myCheckBox.Label;
}

Agregue el código siguiente a la clase CustomerRibbon. Este código realiza las tareas siguientes:

Rellena la línea To en los nuevos mensajes de correo con la dirección de correo electrónico del cliente actualmente seleccionado.
Agrega texto a los campos Subject y Body de los nuevos mensajes de correo.

Private Sub PopulateMailItem(ByVal addressToLine As String)
    Dim application As Outlook.Application = Globals.ThisAddIn.Application
    Dim inspector As Outlook.Inspector = application.ActiveInspector()
    Dim myMailItem As Outlook.MailItem = _
        CType(inspector.CurrentItem, Outlook.MailItem)

    myMailItem.To = ""
    Dim tempArray As [String]() = addressToLine.Split(New [Char]() {"|"c})
    myMailItem.To = tempArray(1) + "@example.com"
    myMailItem.Subject = "Following up on your order"
    myMailItem.Body = "Hello " + tempArray(1) + "," _
        + ControlChars.Lf + "We would like to get your feedback" + _
        "on the following products that you recently ordered: "
End Sub

private void PopulateMailItem(string addressToLine)
{
    Outlook.Application application = Globals.ThisAddIn.Application;
    Outlook.Inspector inspector = application.ActiveInspector();
    Outlook.MailItem myMailItem = (Outlook.MailItem)inspector.CurrentItem;

    myMailItem.To = "";
    String[] tempArray = addressToLine.Split(new Char[] { '|' });
    myMailItem.To = tempArray[0] + "@example.com";
    myMailItem.Subject = "Following up on your order";
    myMailItem.Body = "Hello " + tempArray[0] + "," +
        "\n" + "We would like to get your feedback on the " +
        "following products that you recently ordered: ";
}

Probar los controles del grupo personalizado

Cuando abra un nuevo formulario de correo en Outlook, aparecerá el grupo personalizado Compras del cliente en la ficha Mensajes de la cinta de opciones.

Para crear un mensaje de correo electrónico de seguimiento, seleccione un cliente y, a continuación, seleccione los productos comprados por ese cliente. Los controles del grupo Compras del cliente se actualizan en tiempo de ejecución con los datos de la base de datos Northwind.

Para probar los controles del grupo personalizado

Presione F5 para ejecutar el proyecto.

Se inicia Outlook.
En Outlook, en el menú Archivo, seleccione Nuevo y, a continuación, haga clic en Mensaje de correo.

Se producen las siguientes acciones:
- Aparece una nueva ventana de inspector para el mensaje de correo.
- En la pestaña Mensaje de la cinta de opciones, el grupo Compras del cliente aparece delante del grupo Portapapeles.
- El cuadro combinado Clientes del grupo se actualiza con los nombres de los clientes en la base de datos Northwind.
En la pestaña Mensaje de la cinta de opciones, en el grupo Compras del cliente, seleccione un cliente en el cuadro combinado Clientes.

Se producen las siguientes acciones:
- El menú Productos comprados se actualiza para mostrar cada pedido de ventas del cliente seleccionado.
- Cada submenú de pedido de ventas se actualiza para mostrar los productos comprados en ese pedido.
- La dirección de correo electrónico del cliente seleccionado se agrega a la línea Para del mensaje de correo, y el asunto y el cuerpo del mensaje de correo se rellenan con texto.
Haga clic en el menú Productos comprados, elija cualquier pedido y, a continuación, haga clic en un producto del pedido.

El nombre del producto se agrega al cuerpo del mensaje de correo.

Pasos siguientes

Puede aprender más acerca de la personalización de la interfaz de usuario de Office en estos temas:

Agregar una interfaz de usuario basada en contexto a cualquier personalización de nivel de documento. Para obtener más información, vea Información general sobre recuadros de acciones.
Extender un formulario estándar o personalizado de Microsoft Office Outlook. Para obtener más información, vea Tutorial: Diseñar un área de formulario de Outlook.
Agregar un panel de tareas personalizado a Outlook. Para obtener más información, vea Información general sobre los paneles de tareas personalizados.

Vea también

Compartir a través de