Barras de herramientas en Xamarin.Mac

En este artículo se describe cómo trabajar con barras de herramientas en una aplicación de Xamarin.Mac. Abarca la creación y el mantenimiento de barras de herramientas en Xcode e Interface Builder, exponerlas al código y trabajar con ellas mediante programación.

Los desarrolladores de Xamarin.Mac que trabajan con Visual Studio para Mac tienen acceso a los mismos controles de interfaz de usuario disponibles para los desarrolladores de macOS que trabajan con Xcode, incluido el control de barra de herramientas. Dado que Xamarin.Mac se integra directamente con Xcode, es posible usar el Generador de interfaces de Xcode para crear y mantener elementos de la barra de herramientas. Estos elementos de la barra de herramientas también se pueden crear en C#.

Las barras de herramientas de macOS se agregan a la sección superior de una ventana y proporcionan fácil acceso a los comandos relacionados con su funcionalidad. Las barras de herramientas pueden ocultarse, mostrarse o personalizarse por los usuarios de una aplicación, y pueden presentar elementos de barra de herramientas de varias maneras.

En este artículo se describen los conceptos básicos de trabajar con barras de herramientas y elementos de barra de herramientas en una aplicación de Xamarin.Mac.

Antes de continuar, lea el artículo Hello, Mac (específicamente la introducción a Xcode y las secciones Generador de interfaces y salidas y acciones ), ya que trata los conceptos y técnicas clave que se usarán en esta guía.

Eche también un vistazo a la sección Exposición de clases y métodos de C# para Objective-C el documento Xamarin.Mac Internals . Explica los Register atributos y Export que se usan para conectar clases de C# a Objective-C clases.

Introducción a las barras de herramientas

Cualquier ventana de una aplicación macOS puede incluir una barra de herramientas:

Las barras de herramientas proporcionan una manera sencilla de que los usuarios de la aplicación accedan rápidamente a características importantes o usadas con frecuencia. Por ejemplo, una aplicación de edición de documentos podría proporcionar elementos de barra de herramientas para establecer el color del texto, cambiar la fuente o imprimir el documento actual.

Las barras de herramientas pueden mostrar elementos de tres maneras:

1. Icono y texto

   

2. Solo icono

   

3. Solo texto

   

Cambie entre estos modos haciendo clic con el botón derecho en la barra de herramientas y seleccionando un modo de visualización en el menú contextual:

Use el mismo menú para mostrar la barra de herramientas con un tamaño menor:

El menú también permite personalizar la barra de herramientas:

Al configurar una barra de herramientas en el Generador de interfaces de Xcode, un desarrollador puede proporcionar elementos de barra de herramientas adicionales que no forman parte de su configuración predeterminada. A continuación, los usuarios de la aplicación pueden personalizar la barra de herramientas, agregando y quitando estos elementos predefinidos según sea necesario. Por supuesto, la barra de herramientas se puede restablecer a su configuración predeterminada.

La barra de herramientas se conecta automáticamente al menú Ver , lo que permite a los usuarios ocultarlo, mostrarlo y personalizarlo:

Consulte la documentación sobre la funcionalidad de menú integrada para obtener más información.

Además, si la barra de herramientas está configurada correctamente en interface Builder, la aplicación conservará automáticamente las personalizaciones de la barra de herramientas en varios inicios de la aplicación.

En las secciones siguientes de esta guía se describe cómo crear y mantener barras de herramientas con el Generador de interfaces de Xcode y cómo trabajar con ellas en el código.

Establecimiento de un controlador de ventana principal personalizado

Para exponer elementos de interfaz de usuario al código de C# a través de salidas y acciones, la aplicación Xamarin.Mac debe usar un controlador de ventana personalizado:

1. Abra el guión gráfico de la aplicación en el Generador de interfaces de Xcode.

2. Seleccione el controlador de ventana en la superficie de diseño.

3. Cambie al Inspector de identidad y escriba "WindowController" como nombre de clase:

   

4. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar.

5. Se agregará un archivo WindowController.cs al proyecto en el Panel de solución en Visual Studio para Mac:

   

6. Vuelva a abrir el guión gráfico en el Generador de interfaz de Xcode.

7. El archivo WindowController.h estará disponible para su uso:

   

Creación y mantenimiento de barras de herramientas en Xcode

Las barras de herramientas se crean y mantienen con el Generador de interfaces de Xcode. Para agregar una barra de herramientas a una aplicación, edite el guión gráfico principal de la aplicación (en este caso Main.storyboard) haciendo doble clic en él en el Panel de solución:

En el Inspector de biblioteca, escriba "herramienta" en el cuadro de búsqueda para facilitar la visualización de todos los elementos de la barra de herramientas disponibles:

Arrastre una barra de herramientas a la ventana en el Editor de interfaz. Con la barra de herramientas seleccionada, configure su comportamiento estableciendo propiedades en el Inspector de atributos:

Están disponibles las propiedades siguientes:

1. Mostrar : controla si la barra de herramientas muestra iconos, texto o ambos
2. Visible en Iniciar : si está seleccionada, la barra de herramientas está visible de forma predeterminada.
3. Personalizable : si está seleccionado, los usuarios pueden editar y personalizar la barra de herramientas.
4. Separador : si está seleccionado, una línea horizontal delgada separa la barra de herramientas del contenido de la ventana.
5. Tamaño : establece el tamaño de la barra de herramientas.
6. Autoguardado : si está seleccionado, la aplicación conservará los cambios de configuración de la barra de herramientas de un usuario en los inicios de la aplicación.

Seleccione la opción Autoguardar y deje todas las demás propiedades en su configuración predeterminada.

Después de abrir la barra de herramientas en la jerarquía de interfaz, abra el cuadro de diálogo de personalización seleccionando un elemento de barra de herramientas:

Use este cuadro de diálogo para establecer propiedades para los elementos que ya forman parte de la barra de herramientas, diseñar la barra de herramientas predeterminada para la aplicación y proporcionar elementos de barra de herramientas adicionales para que un usuario seleccione al personalizar la barra de herramientas. Para agregar elementos a la barra de herramientas, arrástrelos desde el Inspector de biblioteca:

Se pueden agregar los siguientes elementos de la barra de herramientas:

• Elemento de la barra de herramientas de imagen: un elemento de barra de herramientas con una imagen personalizada como un icono.

• Elemento de barra de herramientas de espacio flexible: espacio flexible que se usa para justificar los elementos posteriores de la barra de herramientas. Por ejemplo, uno o varios elementos de barra de herramientas seguidos de un elemento de barra de herramientas de espacio flexible y otro elemento de barra de herramientas anclarían el último elemento al lado derecho de la barra de herramientas.

• Elemento de barra de herramientas espaciadora: espacio fijo entre los elementos de la barra de herramientas

• Elemento de barra de herramientas separador: un separador visible entre dos o más elementos de barra de herramientas, para la agrupación

• Personalizar elemento de barra de herramientas: permite a los usuarios personalizar la barra de herramientas

• Imprimir elemento de la barra de herramientas: permite a los usuarios imprimir el documento abierto

• Mostrar colores Elemento de barra de herramientas : muestra el selector de colores del sistema estándar:

  

• Mostrar elemento de barra de herramientas de fuentes: muestra el cuadro de diálogo de fuente del sistema estándar:

  

Importante

Como se verá más adelante, muchos controles estándar de cocoa UI, como campos de búsqueda, controles segmentados y controles deslizantes horizontales, también se pueden agregar a una barra de herramientas.

Agregar un elemento a una barra de herramientas

Para agregar un elemento a una barra de herramientas, seleccione la barra de herramientas en la jerarquía de interfaz y haga clic en uno de sus elementos, lo que hace que aparezca el cuadro de diálogo de personalización. A continuación, arrastre un nuevo elemento desde el Inspector de biblioteca al área Elementos de la barra de herramientas permitidos:

Para asegurarse de que un nuevo elemento forma parte de la barra de herramientas predeterminada, arrástrelo al área Elementos de barra de herramientas predeterminados:

Para reordenar los elementos de la barra de herramientas predeterminados, arrástrelos a la izquierda o a la derecha.

A continuación, use el Inspector de atributos para establecer las propiedades predeterminadas para el elemento:

Están disponibles las propiedades siguientes:

• Nombre de imagen: imagen que se va a usar como icono para el elemento
• Etiqueta : texto que se va a mostrar para el elemento de la barra de herramientas
• Etiqueta de paleta: texto que se va a mostrar para el elemento en el área Elementos de la barra de herramientas permitidos
• Etiqueta : un identificador único opcional que ayuda a identificar el elemento en el código.
• Identificador : define el tipo de elemento de la barra de herramientas. Se puede usar un valor personalizado para seleccionar un elemento de barra de herramientas en el código.
• Seleccionable : si está activada, el elemento actuará como un botón activado o desactivado.

Importante

Agregue un elemento al área Elementos de barra de herramientas permitidos , pero no a la barra de herramientas predeterminada para proporcionar opciones de personalización para los usuarios.

Adición de otros controles de interfaz de usuario a una barra de herramientas

También se pueden agregar varios elementos de la interfaz de usuario de Cocoa, como campos de búsqueda y controles segmentados, a una barra de herramientas.

Para probarlo, abra la barra de herramientas en la jerarquía de interfaz y seleccione un elemento de barra de herramientas para abrir el cuadro de diálogo de personalización. Arrastre un campo de búsqueda desde el Inspector de biblioteca al área Elementos de la barra de herramientas permitidos:

Desde aquí, use interface Builder para configurar el campo de búsqueda y exponerlo al código a través de una acción o salida.

Compatibilidad integrada con elementos de la barra de herramientas

Varios elementos de la interfaz de usuario de Cocoa interactúan con los elementos de barra de herramientas estándar de forma predeterminada. Por ejemplo, arrastre una vista de texto a la ventana de la aplicación y colótrela para rellenar el área de contenido:

Guarde el documento, vuelva a Visual Studio para Mac para sincronizar con Xcode, ejecute la aplicación, escriba texto, selecciónelo y haga clic en el elemento de barra de herramientas Colores. Observe que la vista de texto funciona automáticamente con el selector de colores:

Uso de imágenes con elementos de la barra de herramientas

Con un elemento de barra de herramientas de imagen, cualquier imagen de mapa de bits agregada a la carpeta Resources (y dada una acción de compilación de Bundle Resource) se puede mostrar en la barra de herramientas como un icono:

1. En Visual Studio para Mac, en el Panel de solución, haga clic con el botón derecho en la carpeta Recursos y seleccione Agregar>archivos.

2. En el cuadro de diálogo Agregar archivos , vaya a las imágenes deseadas, selecciónelas y haga clic en el botón Abrir :

   

3. Seleccione Copiar, active Usar la misma acción para todos los archivos seleccionados y haga clic en Aceptar:

   

4. En el Panel de solución, haga doble clic en MainWindow.xib para abrirlo en Xcode.

5. Seleccione la barra de herramientas de la jerarquía de interfaz y haga clic en uno de sus elementos para abrir el cuadro de diálogo de personalización.

6. Arrastre un elemento de la barra de herramientas de imagen desde el Inspector de biblioteca al área Elementos permitidos de la barra de herramientas de la barra de herramientas:

   

7. En el Inspector de atributos, seleccione la imagen que acaba de agregar en Visual Studio para Mac:

   

8. Establezca la etiqueta en "Papelera" y la etiqueta de paleta en "Borrar documento":

   

9. Arrastre un elemento de barra de herramientas separador desde el Inspector de biblioteca hasta el área Elementos permitidos de la barra de herramientas:

   

10. Arrastre el elemento separador y el elemento "Papelera" al área Elementos predeterminados de la barra de herramientas y establezca el orden de los elementos de la barra de herramientas de izquierda a derecha de la siguiente manera (Colores, Fuentes, Separador, Papelera, Espacio flexible, Imprimir):

    

11. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

Ejecute la aplicación para comprobar que la nueva barra de herramientas se muestra de forma predeterminada:

Exponer elementos de la barra de herramientas con salidas y acciones

Para acceder a una barra de herramientas o un elemento de barra de herramientas en el código, debe adjuntarse a una salida o a una acción:

1. En el Panel de solución, haga doble clic en Main.storyboard para abrirlo en Xcode.

2. Asegúrese de que la clase personalizada "WindowController" se haya asignado al controlador de ventana principal en el Inspector de identidad:

   

3. A continuación, seleccione el elemento de la barra de herramientas en la jerarquía de interfaz:

   

4. Abra la vista asistente, seleccione el archivo WindowController.h y arrastre el control desde el elemento de la barra de herramientas al archivo WindowController.h .

5. Establezca el tipo de Conectar ion en Acción, escriba "trashDocument" en Nombre y haga clic en el botón Conectar:

   

6. Exponga la vista de texto como salida denominada "documentEditor" en el archivo ViewController.h :

   

7. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

En Visual Studio para Mac, edite el archivo ViewController.cs y agregue el código siguiente:

public void EraseDocument() {
    documentEditor.Value = "";
}

A continuación, edite el archivo WindowController.cs y agregue el código siguiente a la parte inferior de la WindowController clase :

[Export ("trashDocument:")]
void TrashDocument (NSObject sender) {

    var controller = ContentViewController as ViewController;
    controller.EraseDocument ();
}

Al ejecutar la aplicación, el elemento de la barra de herramientas Papelera estará activo:

Observe que el elemento de la barra de herramientas Papelera ahora se puede usar para eliminar texto.

Deshabilitación de elementos de la barra de herramientas

Para deshabilitar un elemento en una barra de herramientas, cree una clase personalizada NSToolbarItem e invalide el Validate método . A continuación, en Interface Builder, asigne el tipo personalizado al elemento que desea habilitar o deshabilitar.

Para crear una clase personalizadaNSToolbarItem, haga clic con el botón derecho en el proyecto y seleccione Agregar>nuevo archivo.... Seleccione Clase vacía general>, escriba "ActiveableItem" en Nombre y haga clic en el botón Nuevo:

A continuación, edite el archivo ActivatableItem.cs para leer como se indica a continuación:

using System;

using Foundation;
using AppKit;

namespace MacToolbar
{
    [Register("ActivatableItem")]
    public class ActivatableItem : NSToolbarItem
    {
        public bool Active { get; set;} = true;

        public ActivatableItem ()
        {
        }

        public ActivatableItem (IntPtr handle) : base (handle)
        {
        }

        public ActivatableItem (NSObjectFlag  t) : base (t)
        {
        }

        public ActivatableItem (string title) : base (title)
        {
        }

        public override void Validate ()
        {
            base.Validate ();
            Enabled = Active;
        }
    }
}

Haga doble clic en Main.storyboard para abrirlo en Xcode. Seleccione el elemento de la barra de herramientas Papelera creado anteriormente y cambie su clase a "ActiveableItem" en el Inspector de identidad:

Cree una salida denominada trashItem para el elemento de la barra de herramientas Papelera . Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode. Por último, abra MainWindow.cs y actualice el método para leer lo AwakeFromNib siguiente:

public override void AwakeFromNib ()
{
    base.AwakeFromNib ();

    // Disable trash
    trashItem.Active = false;
}

Ejecute la aplicación y observe que el elemento Papelera ahora está deshabilitado en la barra de herramientas:

Resumen

En este artículo se ha realizado un vistazo detallado al trabajo con barras de herramientas y elementos de barra de herramientas en una aplicación de Xamarin.Mac. Se describe cómo crear y mantener barras de herramientas en el Generador de interfaces de Xcode, cómo funcionan automáticamente algunos controles de interfaz de usuario con elementos de barra de herramientas, cómo trabajar con barras de herramientas en código de C# y cómo habilitar y deshabilitar elementos de la barra de herramientas.

Vínculos relacionados

• MacToolbar (ejemplo)
• Hello, Mac
• Directrices de interfaz humana para barras de herramientas
• Introducción a las barras de herramientas