Diseño Layout

Elementos Layout en las plantillas de reproductores

Las plantillas de reproductor personalizadas únicamente están disponibles para los clientes que utilizan Brightcove Pro y Enterprise. Si desea actualizar su cuenta de Brightcove, póngase en contacto con Brightcove para obtener más información.

El elemento Layout de una plantilla de reproductores incluye y coloca los elementos de interfaz de usuario en un reproductor. Contiene dos grandes tipos de elementos hijo: cuadros de diseño y componentes. Los cuadros de diseño son contenedores de otros elementos, que pueden ser cuadros de diseño adicionales o componentes, y definen el tamaño y el diseño de los elementos hijo. En general, los cuadros de diseño no se muestran, aunque se les puede asignar un color o una imagen de fondo que se mostrará debajo de todos sus elementos hijo. Los componentes son los propios elementos de interfaz de usuario, como VideoPlayer, Label e Image. Para obtener más información sobre los componentes, consulte Componentes de las plantillas de reproductores. El elemento Layout es tanto un contenedor como un cuadro de diseño, ya que debe definir cómo se presentan todos sus elementos hijo.

DTD de BEML define los elementos de cuadro de diseño siguientes:

• Canvas

• HBox

• VBox

• Grid

• TextRegion

• MediaControls

Canvas

Canvas es el cuadro de diseño más simple. Los elementos hijo de Canvas se colocan totalmente dentro del cuadro de lienzo en la posición (x, y) especificada por el elemento hijo. Cualquier cuadro de diseño o componente puede ser un elemento hijo de un cuadro de diseño Canvas. Por ejemplo:

<Canvas width="300" height="50" style="background-color:#BA4973">

<Label text="My Player" x="10" y="20" />

</Canvas>

HBox

HBox es un cuadro horizontal que presenta todos sus elementos hijo de forma horizontal. Los elementos hijo de HBox se colocan de forma secuencial de izquierda a derecha, y cada uno de ellos se sitúa directamente a la derecha del elemento hijo anterior, con un margen interno opcional en el medio. Cualquier cuadro de diseño o componente puede ser un elemento hijo de un cuadro de diseño HBox. Por ejemplo:

<HBox width="300" height="50" style="background-color:#BA4973">

<Label text="one" />

<Label text="two" />

<Label text="three" />

</HBox>

VBox

VBox (cuadro vertical) presenta todos sus elementos hijo de forma vertical. Los elementos hijo de VBox se colocan de forma secuencial de la parte superior a la inferior, y cada uno de ellos se sitúa directamente debajo del elemento hijo anterior, con cualquier margen interno de píxeles especificado en el medio. Cualquier cuadro de diseño o componente puede ser un elemento hijo de un cuadro de diseño VBox. Por ejemplo:

<VBox width="50" height="300" style="background-color:#BA4973">

<Label text="one" />

<Label text="two" />

<Label text="three" />

</VBox>

Grid

El cuadro de diseño Grid permite un diseño más complejo, con elementos hijo que se presentan en columnas y filas. El ejemplo siguiente utiliza cuadros de diseño anidados para mostrar los colores de celdas individuales que se presentan en una cuadricula de 2 x 2. Únicamente Rows y Columns pueden ser elementos hijo del cuadro de diseño Grid. Por ejemplo:

<Grid padding="20" style="background-color:#999999">

<Columns gutter="20">

<Column width="100"/>

</Columns>

<Rows gutter="20">

<Row style="background-color:#FF">

<HBox style="background-color:#FF0000"/>

<HBox style="background-color:#00FF00"/>

</Row>

...