Compartir a través de

Declarar comandos y controles con marcado de cinta de opciones

  • Artículo

El marco de la cinta de Opciones de Windows usa un lenguaje de marcado basado en lenguaje xaml (Extensible Application Markup Language) para implementar mediante declaración la apariencia de una aplicación de cinta de opciones.

Separación de la presentación de la lógica de comandos

La separación de los atributos visuales y de presentación de la lógica de comandos en el marco de la cinta de opciones se realiza a través de dos plataformas de desarrollo distintas, pero dependientes. Los diseños de control, los comportamientos de escalado, las declaraciones de comandos y las especificaciones de recursos son el dominio de tiempo de diseño de una sintaxis de marcado declarativa basada en la especificación xaml (Extensible Application Markup Language). La funcionalidad de bajo nivel, los enlaces de aplicación y los controladores de comandos se definen en implementaciones de interfaz basadas en el modelo de objetos componentes (COM).

Esta separación de la presentación y la lógica proporciona las siguientes ventajas:

  • Un ciclo de desarrollo de aplicaciones más eficaz que permite a los desarrolladores y diseñadores de la interfaz de usuario implementar la GUI de la aplicación ribbon independientemente de la funcionalidad principal de la aplicación. Esta funcionalidad básica se puede dejar a los desarrolladores de software dedicados.
  • Mantenimiento menos costoso porque los cambios en la GUI son posibles sin cambios en la funcionalidad principal (y viceversa).
  • Especificación simple de los recursos de cadena e imagen a través del marcado.
  • Facilidad de creación de prototipos.

Estructura de marcado

Existen dos ramas distintas dentro de la estructura del marcado del marco de la cinta de opciones.

La primera rama contiene un manifiesto de declaraciones de comandos y recursos (cadenas e imágenes). El marco usa cada entrada command para enlazar un control de cinta de opciones, a través de un identificador de comando, a un controlador de comandos definido en el código de la aplicación.

La segunda rama contiene las declaraciones de control reales. Cada control está asociado a un comando a través de un atributo CommandName que se asigna a un atributo Name especificado en cada declaración Command.

Componentes de la cinta de opciones

La funcionalidad de la interfaz de usuario del marco de la cinta de opciones se expone a través de vistas. Una vista es básicamente un contenedor, como la cinta de opciones y ContextPopup, que se usa para presentar controles de marco y los comandos a los que están enlazados.

La vista de cinta de opciones se compone de varios componentes que incluyen un menú de la aplicación, la barra de herramientas de acceso rápido (QAT) para mostrar comandos usados habitualmente desde la interfaz de usuario de la cinta de opciones, las pestañas principales y contextuales que contienen grupos de controles y el sistema de menú contextual enriquecido de ContextPopup.

Todos los componentes de la cinta de opciones se declaran en un archivo de marcado independiente que:

Los dos ejemplos de marcado de la cinta de opciones siguientes muestran cómo un conjunto de elementos de menú de aplicación de cinta de opciones están asociados a un nombre de comando e identificador.

  1. En esta sección se muestran las declaraciones command necesarias para un menú de aplicación con comandos básicos como New, Open y Save.

    <!-- Command declarations for the Application Menu. -->
<Command Name="cmdFileMenu"
         Symbol="ID_FILE_MENU"
         Id="25000" />
<!-- Command declaration for most recently used items. -->
<Command Name="cmdMRUItems"
         Symbol="ID_FILE_MRUITEMS"
         Id="25050"/>
<!-- Command declarations for Application Menu items. -->
<Command Name="cmdNew"
         Symbol="ID_FILE_NEW"
         Comment="New"
         Id="25001"
         LabelTitle="&amp;New"/>
<Command Name="cmdOpen"
         Symbol="ID_FILE_OPEN"
         Comment="Open"
         Id="25002"
         LabelTitle="&amp;&amp;Open"/>
<Command>
  <Command.Name>cmdSave</Command.Name>
  <Command.Symbol>ID_FILE_SAVE</Command.Symbol>
  <Command.Comment>Save</Command.Comment>
  <Command.Id>25003</Command.Id>
  <Command.LabelTitle>
    <String>
      <String.Content>Label for Save</String.Content>
      <String.Id>59999</String.Id>
      <String.Symbol>strSave</String.Symbol>
    </String>
  </Command.LabelTitle>
  <Command.TooltipTitle>Tooltip title with &amp;&amp; for Save Command</Command.TooltipTitle>
  <Command.TooltipDescription>Tooltip description for Save Command.</Command.TooltipDescription>
  <Command.Keytip>s1</Command.Keytip>
</Command>
<Command Name="cmdPrint"
         Symbol="ID_FILE_PRINT"
         Comment="Save"
         Id="25004"
         LabelTitle="Print" />
<Command Name="cmdExit"
         Symbol="ID_FILE_EXIT"
         Comment="Exit"
         Id="25005"
         LabelTitle="Exit" />

  2. En esta sección se muestran las declaraciones de control asociadas.

    <!-- Control declarations for Application Menu items. -->
<Ribbon.ApplicationMenu>
  <ApplicationMenu CommandName="cmdFileMenu">
    <!-- Most recently used items collection. -->
    <ApplicationMenu.RecentItems>
      <RecentItems CommandName="cmdMRUItems"/>
    </ApplicationMenu.RecentItems>
    <!-- Menu items collection. -->
    <MenuGroup>
      <Button CommandName="cmdNew" />
      <Button CommandName="cmdOpen" />
      <Button CommandName="cmdSave" />
    </MenuGroup>
    <MenuGroup>
      <Button CommandName="cmdPrint" />
      <Button CommandName="cmdExit" />
    </MenuGroup>
  </ApplicationMenu>
</Ribbon.ApplicationMenu>

Cuando el marcado se compila con la herramienta UI Command Compiler (UICC), los nombres de comando e identificadores de comando se colocan en un archivo de encabezado usado por la aplicación host de la cinta de opciones.

A continuación se muestra un ejemplo de un archivo de encabezado generado por UICC.

// *****************************************************************************
// * This is an automatically generated header file for UI Element definition  *
// * resource symbols and values. Please do not modify manually.               *
// *****************************************************************************

#pragma once

#define cmdFileMenu 25000 
#define cmdNew 22001  /* New */ 
#define cmdNew_LabelTitle_RESID 60005
#define cmdOpen 22002  /* Open */ 
#define cmdOpen_LabelTitle_RESID 60006
#define cmdSave 22003  /* Save */ 
#define cmdSave_LabelTitle_RESID 60007
#define cmdSave_TooltipTitle_RESID 60008
#define cmdSave_TooltipDescription_RESID 60009

Lenguaje de marcado de aplicaciones extensible (XAML)

Compilación del marcado de la barra de herramientas