Introducción a los guiones gráficos en Xamarin.Mac

  • Artículo
  • 5 minutos para leer

En este artículo se proporciona una introducción al trabajo con guiones gráficos en una aplicación de Xamarin.Mac. En él, se describe cómo crear y mantener la interfaz de usuario de la aplicación mediante guiones gráficos e Interface Builder de Xcode.

Los guiones gráficos permiten desarrollar un Interfaz de usuario para la aplicación de Xamarin.Mac que no solo incluye las definiciones de ventana y los controles, sino que también contiene los vínculos entre diferentes ventanas (a través de segues) y estados de vista.

Una interfaz de usuario de ejemplo en Xcode

En este artículo se proporciona una introducción al uso de guiones gráficos para definir la interfaz de usuario de una aplicación de Xamarin.Mac.

¿Qué son los guiones gráficos?

Mediante guiones gráficos, toda la interfaz de usuario de una aplicación de Xamarin.Mac se puede definir en una sola ubicación con toda la navegación entre sus elementos individuales e interfaces de usuario. Los guiones gráficos para Xamarin.Mac funcionan de forma muy similar a los guiones gráficos para Xamarin.iOS. Sin embargo, contienen un conjunto diferente de tipos de segue debido a las distintas expresiones de interfaz.

Trabajar con escenas

Como se indicó anteriormente, un guión gráfico define toda la interfaz de usuario de una aplicación determinada desglosada en una introducción funcional de sus controladores de vista. En la página de Interface Builder Xcode, cada uno de estos controladores reside en su propia escena.

Un controlador de vista de ejemplo

Cada escena representa un par de controlador de vista y vista determinado con un conjunto de líneas (denominadas Segues) que conectan cada escena en la interfaz de usuario, mostrando así sus relaciones. Algunos segues definen cómo un controlador de vistas contiene una o varias vistas secundarias o controladores de vista. Otros segues, defina transiciones entre el Controlador de vistas (por ejemplo, mostrar un elemento emergente o un cuadro de diálogo).

Un segue de ejemplo

Lo más importante que hay que tener en cuenta es que cada Segue representa el flujo de algún tipo de datos entre el elemento determinado de la interfaz de usuario de la aplicación.

Trabajar con controladores de vista

Los controladores de vista definen las relaciones entre una determinada vista de información dentro de una aplicación Mac y el modelo de datos que proporciona esa información. Cada escena de nivel superior del guión gráfico representa un controlador de vista en el código de la aplicación Xamarin.Mac.

Un ejemplo de controlador de vista deslizante

De esta manera, cada controlador de vistas es un emparejamiento autocontenido y reutilizable de la representación visual de la información (Vista) y la lógica para presentar y controlar esa información.

Dentro de una escena determinada, puede hacer todas las cosas que normalmente se hubieran manipulado mediante archivos .xib individuales:

  • Coloque subvistas y controles (como botones y cuadros de texto).
  • Defina las posiciones de los elementos y las restricciones de diseño automático.
  • Acciones y salidas de conexión para exponer elementos de la interfaz de usuario al código.

Trabajar con Segues

Como se indicó anteriormente, Segues proporciona las relaciones entre todas las escenas que definen la interfaz de usuario de la aplicación. Si está familiarizado con el trabajo en guiones gráficos en iOS, sabe que los segues para iOS suelen definir transiciones entre vistas de pantalla completa. Esto difiere de macOS, cuando los segues suelen definir la "contención" (donde una escena es el elemento secundario de una escena primaria).

En macOS, la mayoría de las aplicaciones tienden a agrupar sus vistas dentro de la misma ventana mediante elementos de interfaz de usuario como vistas divididas y pestañas. A diferencia de iOS, donde las vistas deben realizarse en la pantalla y fuera de la pantalla, debido a un espacio de visualización físico limitado.

Dadas las inclinaciones de macOS hacia la contención, hay situaciones en las que se usan segues de presentación, como modales Windows, vistas de hoja y elementos emergentes.

Al usar segues de presentación, puede invalidar el método del controlador de vista primario para que la presentación inicialice las variables y y proporcione los datos al controlador de vista que PrepareForSegue se va a presentar.

Tiempos de diseño y ejecución

En tiempo de diseño (al diseñar la interfaz de usuario en el Interface Builder de Xcode), cada elemento de la interfaz de usuario de la aplicación se divide en sus elementos constituyentes:

  • Escenas: que se componen de:
    • Controlador de vistas: define las relaciones entre las vistas y los datos que las admiten.
    • Vistas y subvistas: los elementos reales que son la interfaz de usuario.
    • Segues de contención: definen las relaciones de elementos primarios y secundarios entre las escenas.
  • Segues de presentación: definen modos de presentación individuales.

Al definir cada elemento de esta manera, permite la carga diferida de cada elemento solo cuando se necesita durante el tiempo de ejecución. En macOS, todo el proceso se diseñó para permitir al desarrollador crear interfaces de usuario complejas y flexibles que requieren un mínimo de código de respaldo para que funcionen, todo ello a la vez que es lo más eficaz posible con los recursos del sistema.

Gráfico de Inicio rápido

En la guía de Inicio rápido storyboard, crearemos una aplicación xamarin.Mac sencilla que presenta los conceptos clave de trabajar con guiones gráficos para crear un Interfaz de usuario. La aplicación de ejemplo constará de una vista spilt que contiene un área de contenido y un área de inspector y presentará una ventana de diálogo de preferencias sencilla. Usaremos Segues para unir todos los Interfaz de usuario elementos.

Trabajo con guiones gráficos

En esta sección se tratan los detalles en profundidad de Trabajar con guiones gráficos en una aplicación de Xamarin.Mac. Echamos un vistazo en profundidad a las escenas y a cómo se componen de controladores de vista y vista. A continuación, echaremos un vistazo a cómo se vinculan las escenas con Segues. Por último, echaremos un vistazo al trabajo con tipos segue personalizados.

Ejemplo de guión gráfico complejo

Para obtener un ejemplo de un ejemplo complejo de trabajar con guiones gráficos en una aplicación de Xamarin.Mac, consulte la aplicación de ejemplo SourceWriter. SourceWriter es un editor de código fuente simple que proporciona compatibilidad con la finalización de código y el resaltado de sintaxis simple.

El código de SourceWriter se ha comentado completamente y, si están disponibles, se han proporcionado vínculos de métodos o tecnologías clave a información relevante en la documentación de las guías de Xamarin.Mac.

Resumen

En este artículo se ha dado un vistazo rápido al trabajo con guiones gráficos en una aplicación de Xamarin.Mac. Hemos visto cómo crear una nueva aplicación mediante guiones gráficos y cómo definir una interfaz de usuario. También hemos visto cómo navegar entre diferentes ventanas y estados de vista mediante segues.