Para ver el artículo en inglés, active la casilla Inglés. También puede ver el texto en inglés en una ventana emergente si pasa el puntero del mouse por el texto.
Traducción
Inglés

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

 

En este tutorial se muestra cómo usar el modelo de objetos de la cinta de opciones para actualizar los controles en una cinta después de cargarla en la aplicación de Office.

Aplicación: la información de este tema se aplica a los proyectos de nivel de documento y los proyectos de complemento de VSTO para las siguientes aplicaciones: Excel; InfoPath 2013 e InfoPath 2010; Outlook; PowerPoint; Project; Visio; Word. Para obtener más información, consulte 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 proyecto de complemento de VSTO de Outlook

  • Diseñar un grupo personalizado de la cinta de opciones

  • Agregar el grupo personalizado a una pestaña integrada

  • Actualizar los controles de la cinta de opciones en tiempo de ejecución

System_CAPS_noteNota

Es posible que tu 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 se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, consulte Customizing Development Settings in Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

En primer lugar, cree un proyecto de complemento de VSTO de Outlook.

Para crear un proyecto de complemento de VSTO de Outlook

  1. En Visual Studio, cree un proyecto de complemento de VSTO de Outlook con el nombre Ribbon_Update_At_Runtime.

  2. En el cuadro de diálogo Nuevo proyecto, seleccione Crear directorio para la solución.

  3. Guarde el proyecto en el directorio de proyecto predeterminado.

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

La cinta de opciones de este ejemplo aparecerá cuando un usuario cree un nuevo mensaje de correo electrónico. Para crear un grupo personalizado en la cinta de opciones, primero agregue un elemento de la cinta de opciones al proyecto y, después, 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 para los clientes extrayendo los nombres e historiales de pedidos de una base de datos.

Para diseñar un grupo personalizado

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

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione Cinta (diseñador visual).

  3. Cambie el nombre de la nueva cinta de opciones por CustomerRibbon y, después, 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 pestaña y un grupo predeterminados.

  4. Haga clic en el Diseñador de la cinta de opciones para seleccionarlo.

  5. En la ventana Propiedades, haga clic en la flecha desplegable situada junto a la propiedad RibbonType y, después, 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.

  6. En el Diseñador de la cinta de opciones, haga clic en Grupo1 para seleccionarlo.

  7. En la ventana Propiedades , establezca Etiqueta en Compras de cliente.

  8. En la pestaña Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un ComboBox hasta el grupo Compras de cliente.

  9. Haga clic en ComboBox1 para seleccionarlo.

  10. En la ventana Propiedades, establezca Etiqueta en Clientes.

  11. En la pestaña Controles de la cinta de opciones de Office del Cuadro de herramientas, arrastre un Menú hasta el grupo Compras de cliente.

  12. En la ventana Propiedades, establezca Etiqueta en Producto comprado.

  13. Establezca Dinámico en true.

    De este modo, puede 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.

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 agregará el grupo personalizado a una pestaña integrada y especificará la posición del grupo personalizado en la pestaña.

Para agregar el grupo personalizado a una pestaña integrada

  1. Haga clic en la pestaña TabAddins (Integrado) para seleccionarla.

  2. En la ventana Propiedades, expanda la propiedad ControlId y, después, establezca OfficeId en TabNewMailMessage.

    De este modo, se agrega el grupo Compras del cliente a la pestaña Mensajes de la cinta de opciones que aparece en un nuevo mensaje de correo.

  3. Haga clic en el grupo Compras del cliente para seleccionarlo.

  4. En la ventana Propiedades, expanda la propiedad Position, haga clic en la flecha desplegable situada junto a la propiedad PositionType y, después, haga clic en BeforeOfficeId.

  5. Establezca la propiedad OfficeId en GroupClipboard.

    De este modo, se coloca el grupo Compras del cliente delante del grupo Portapapeles de la pestaña Mensajes.

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

Para crear el origen de datos

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

    Se inicia el Asistente para la configuración de orígenes de datos.

  2. Seleccione Base de datos y haga clic en Siguiente.

  3. Seleccione Conjunto de datos y haga clic en Siguiente.

  4. Seleccione una conexión de datos a la base de datos de ejemplo Northwind de Microsoft SQL Server Compact 4.0 o agregue una nueva conexión mediante el botón Nueva conexión.

  5. Cuando haya seleccionado o creado una conexión, haga clic en Siguiente.

  6. Haga clic en Siguiente para guardar la cadena de conexión.

  7. En la página Elija los objetos de base de datos, expanda Tablas.

  8. Active la casilla situada al lado de cada una de las siguientes tablas:

    1. Customers

    2. Detalles del pedido

    3. Pedidos

    4. Productos

  9. Haga clic en Finalizar.

Use el modelo de objetos de la cinta de opciones para llevar a cabo las siguientes tareas:

  • Agregar nombres de cliente al cuadro combinado Clientes.

  • Agregar controles de menú y de botón al menú Productos comprados que representen los pedidos y los productos vendidos.

  • Rellenar los campos To, Subject y Body de los nuevos mensajes de correo usando 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

  1. En el menú Proyecto, haga clic en Agregar referencia.

  2. En el cuadro de diálogo Agregar referencia, haga clic en la pestaña .NET, seleccione el ensamblado System.Data.Linq y, después, haga clic en Aceptar.

    Este ensamblado contiene las clases para usar Language-Integrated Queries (LINQ). Va a usar LINQ para rellenar los controles del grupo personalizado con datos de la base de datos Northwind.

  3. En el Explorador de soluciones, haga clic en el archivo CustomerRibbon.cs o CustomerRibbon.vb para seleccionarlo.

  4. 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.

  5. 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.

    using System.Data.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.Northwind40DataSetTableAdapters;
    
  6. Agregue el siguiente código 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 dataset.
    Northwind40DataSet nwDataSet = new Northwind40DataSet();
    
    //Declare the data tables.
    
    Northwind40DataSet.CustomersDataTable customerTable;
    Northwind40DataSet.OrdersDataTable orderTable;
    Northwind40DataSet.Order_DetailsDataTable orderDetailsTable;
    Northwind40DataSet.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();
    
  7. Agregue el siguiente bloque 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.

    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;
    }
    
  8. Reemplace el método del controlador de eventos CustomerRibbon_Load por el siguiente código. Este código usa una consulta LINQ para efectuar las siguientes tareas:

    • Rellenar el cuadro combinado Clientes con el identificador y el nombre de 20 clientes de la base de datos Northwind.

    • Llama 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 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();
    }
    
  9. Agregue el código siguiente a la clase CustomerRibbon. Este código usa consultas LINQ para efectuar las siguientes tareas:

    • 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 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);
            }
        }
    }
    
  10. 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.

  11. 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.

  12. Reemplace el controlador de eventos ComboBox1_TextChanged por el siguiente código. 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 void comboBox1_TextChanged(object sender,
        RibbonControlEventArgs e)
    {
        PopulateSalesOrderInfo();
        PopulateMailItem(comboBox1.Text);
    }
    
  13. Agregue el siguiente controlador de eventos Click a la clase CustomerRibbon. Este código agrega el nombre de los productos seleccionados al campo Body de los nuevos mensajes de correo.

    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;
    }
    
  14. 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 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: ";
    }
    

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

Para crear un mensaje de correo electrónico de seguimiento de clientes, seleccione un cliente y, después, 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 en el grupo personalizado

  1. Presione F5 para ejecutar el proyecto.

    Se inicia Outlook.

  2. En Outlook, en el menú Archivo, elija Nuevo y haga clic en Mensaje de correo.

    Se producen las siguientes acciones:

    • Aparece una nueva ventana del inspector de mensajes 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.

  3. 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 del cliente seleccionado.

    • Cada submenú del pedido 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.

  4. Haga clic en el menú Productos comprados, elija cualquier pedido y, después, 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:

Mostrar: