Ámbitos de Propiedad

La mayoría de las propiedades de los componentes (como texto y posicionamiento) se pueden configurar para usar valores alternativos según el ámbito actual de un widget. El ámbito está vinculado al idioma, punto de interrupción y variante actuales del widget.

Casos de Uso

• Widgets multilingües — El mismo widget se puede usar en sitios web que admiten varios idiomas definiendo valores alternativos para los componentes de texto y botón según el ámbito de idioma del widget.
• Widgets responsivos — Los widgets se pueden ajustar a diferentes anchos de navegador y dispositivo modificando la posición y las dimensiones de los componentes según el ámbito de punto de interrupción del widget.
• Diseños alternativos — Un solo widget se puede configurar con uno o más diseños alternativos que se activan según el ámbito de variante del widget.

¿Cómo se determinan los valores de las propiedades?

Los ámbitos de las propiedades utilizan un modelo de herencia. Los valores iniciales que especifique para las propiedades de los componentes se almacenan en el ámbito predeterminado. Los valores en el ámbito predeterminado forman una base que es heredada y anulada por otros ámbitos más específicos.

Por ejemplo, un componente de Botón podría tener valores predeterminados para su texto y dimensiones (ancho y alto). El texto podría anularse para proporcionar una traducción específica al francés y las dimensiones podrían anularse para hacer el botón más pequeño para dispositivos móviles.

En el siguiente ejemplo, si el widget se muestra en cualquier idioma que no sea francés, el texto del botón dirá "Hello".

Figura: Ejemplo de herencia de propiedades para un componente llamado "Button1"

Cambiar los ámbitos de edición

El ámbito actual de edición de propiedades se puede cambiar desde los menús desplegables cerca de la parte superior del editor. Estos menús desplegables de ámbito del editor solo son visibles si ha definido ámbitos de propiedad adicionales a través de la Configuración del Widget.

Figura: Menús desplegables de ámbito de edición

Ámbito de Idioma

El idioma de un widget está vinculado a la oferta actual a la que está adjunto. Cada oferta definida en el Portal de Fanplayr tiene un atributo de idioma y los widgets adoptan este valor en tiempo de ejecución.

Ámbito de Punto de Interrupción

Los puntos de interrupción le permiten crear widgets responsivos que utilizan estilos alternativos basados en el dispositivo utilizado para ver su sitio web. Los puntos de interrupción se pueden utilizar en dos modos diferentes: simple y avanzado.

Puntos de Interrupción Simples

El modo simple divide el ámbito de punto de interrupción en dos tipos: escritorio o móvil. Esto se puede usar para hacer cambios simples en un widget para asegurar que su diseño funcione tanto para pantallas grandes como pequeñas. En tiempo de ejecución, el widget asumirá el punto de interrupción apropiado según el dispositivo que lo esté visualizando.

Puntos de Interrupción Avanzados

El modo avanzado le permite definir y nombrar ámbitos de puntos de interrupción específicos que se basan en el ancho máximo de los componentes de vista.

Por ejemplo, esto se puede usar para crear un banner incrustable que se ajuste de forma responsiva a diferentes tamaños de pantalla. El componente de vista puede configurarse para ocupar el 100% del ancho de su contenedor y luego ser estilizado de manera diferente en anchos específicos para reducir progresivamente el contenido visible en el widget para pantallas más pequeñas.

Ámbito de Variante

El ámbito de variante se puede usar para anular ciertas propiedades en un widget y crear diseños alternativos que no se relacionan necesariamente con traducciones o diseño responsivo.

Similar al ámbito de idioma, la variante de un widget está vinculada a la oferta actual a la que está adjunto. Cada oferta definida en el Portal de Fanplayr tiene un atributo de nombre de variante y los widgets adoptan este valor en tiempo de ejecución.

Por ejemplo, podría usar variantes para crear diseños alternativos para cada temporada en lugar de tener que crear un widget completamente nuevo.

Confirmación de Eliminación de Componente

Es importante tener en cuenta que cuando elimina un componente, este se elimina por completo del widget, no solo del ámbito particular que está editando. Si desea que un componente esté oculto para un ámbito particular (por ejemplo, oculto para dispositivos más pequeños usando un ámbito de punto de interrupción), simplemente puede establecer la propiedad Visible del componente en "hidden" para ese ámbito.

Cuando intente eliminar un componente en un widget que tiene propiedades con ámbito, se le mostrará un cuadro de diálogo de confirmación similar al siguiente. Esto es para protegerlo de eliminar accidentalmente un componente por completo cuando su intención pudo haber sido solo ocultarlo.

Figura: Cuadro de diálogo de confirmación de eliminación de componente

Agregar Componentes a Ámbitos No Predeterminados

Cuando agrega un componente a su widget mientras edita en un ámbito no predeterminado, las propiedades del componente se configurarán inicialmente para que sea visible solo para el ámbito actual. Esto le permite agregar componentes de forma rápida y conveniente a su widget que solo son visibles para el ámbito de edición actual, sin necesidad de ocultarlo de otros ámbitos que haya definido.

El editor hace esto automáticamente al:

1. Establecer la propiedad Visible predeterminada del componente en "hidden".
2. Establecer la propiedad Visible del componente para el ámbito de edición actual en "visible".

Esto luego hace que todos los demás ámbitos de propiedades hereden la propiedad "hidden" del ámbito predeterminado.