A continuación, explicamos los mecanismos de binding que tiene cada uno de los componentes de Arena (llamados widgets), así como también cómo lucen y para qué se suele utilizar.
La clase más abstracta de componentes en Arena es Widget. A partir de ella podemos ver la jerarquía con todos los componentes que existen.
Pueden explorar esas clases para información extra a esta página.
La clase window es el contenedor principal de los controles. Se le puede configurar
que son el ancho y el largo mínimo que debe tener la pantalla, a menos de que se requiera más espacio (en ese caso se utilizará más ancho o alto).
Todas las ventanas que heredan de SimpleWindow tienen un ErrorsPanel, que es básicamente un label que escucha mensajes de error que aparecen por la interacción del usuario con la aplicación. Se le puede configurar
Para eso, o bien construimos un ErrorsPanel en una ventana MainWindow o Window (que no heredan de SimpleWindow):
o bien tendremos que redefinir el método createErrorsPanel si heredamos de SimpleWindow... para cambiar la cantidad de líneas que queremos mostrar por defecto.
Si nuestra intención es simplemente mostrar los errores en una línea y nuestra ventana hereda de SimpleWindow, no es necesario hacer nada.
org.uqbar.arena.widgets.Control es la subclase de Widget más importante en Arena. Es abstracta, sirve para proveer los siguientes bindings genéricos:
El binding de estas propiedades se puede hacer de dos maneras:
Vemos un ejemplo de cada caso:
en este caso el checkbox se habilita en base a la propiedad "habilitaResumenCuenta" definido en el modelo de la vista. Recordemos que la propiedad se implementa con un método boolean getHabilitaResumenCuenta().
Vemos el mismo ejemplo creando un ObservableProperty:
La ventaja de esta alternativa es que permite modificar el modelo default de la vista para un control particular (reemplazando this.modelObject por otro objeto observable).
Además se puede asignar manualmente las siguientes propiedades (no bindeables):
IMPORTANTE: Todos los controles se instancian pasando como parámetro un panel que los contiene
org.uqbar.arena.widgets.CheckBox representa un cuadro que se asocia a un valor verdadero (seleccionado) o falso (no seleccionado)
Al extender de Control hereda las propiedades bindeables enabled, visible, background y las propiedades manuales height y width.
Un checkbox debe bindear la propiedad
Ejemplo de bindings para un checkbox:
org.uqbar.arena.widgets.Selector<T> es un control que muestra una lista desplegable de opciones y permite al usuario seleccionar una de ellas. Se visualiza como un ComboBox.
Un selector tiene dos propiedades que deben bindearse:
Otros bindings opcionales son:
Al extender de Control hereda las propiedades bindeables enabled, visible, background y las propiedades manuales height y width.
Ejemplo de un selector que muestra el país de fabricación de una computadora. Cada opción muestra la descripción del país:
org.uqbar.arena.widgets.List<T> extiende de Selector y tiene el mismo comportamiento pero se muestra como una lista que permite visualizar varios valores al mismo tiempo. Ejemplo que muestra cómo llenar un List de Productos para un pedido (dentro de un panel con layout horizontal):
Para más referencias ver el control Selector
org.uqbar.arena.widgets.RadioSelector<T> extiende de Selector y tiene el mismo comportamiento pero se muestra como una lista de radio buttons (botones con selección excluyente).
Constructores: además del constructor default de todos los controles (que reciben el panel padre que hace de container) tenemos el
que permite establecer la propiedad de donde salen los ítems a seleccionar.
Para más referencias ver el control Selector
Ejemplo: una vista que tiene una propiedad estadosCiviles sólo lectura
Todos los controles que heredan de SkinnableControls aceptan estas propiedades configurables manualmente:
Además heredan las propiedades bindeables del control (enabled, visible, height, width)
org.uqbar.arena.widgets.Label representa un texto con el formato de una etiqueta. Puede o no tener binding, en el primer caso se trabaja con la propiedad value, en el segundo caso se setea en el inicio una constante String a partir de la propiedad text que no es observable.
Ejemplo de un label fijo:
muestra el valor fijo "Monto"
Ejemplo de un label que se bindea contra una propiedad (es dinámico, responde ante los cambios en el modelo):
La propiedad contra la que se bindea un label suele ser de sólo lectura (aunque no es obligatorio que así lo sea).
Es obligatorio para cada label definir la propiedad text o bien la propiedad value (no tiene sentido definir ambas ya que el value estará pisando el text original).
Propiedades opcionales son:
Imágenes: un label puede tener asociada una imagen (siempre que no tenga binding contra un value). Por ejemplo, podemos establecer una propiedad en el modelo contra el path donde se encuentra una imagen
Y luego en el Label establecer el binding contra un transformer que tome el path y lo convierta a una imagen:
Es conveniente que la imagen esté en un source folder definido en el pom:
Para más información recomendamos descargar este ejemplo.
org.uqbar.arena.widgets.Link permite definir el link a una acción. Es obligatorio el binding
Ejemplo:
Propiedades opcionales son:
org.uqbar.arena.widgets.Button permite definir un botón para que el usuario dispare una acción.
Es obligatorio el binding de la propiedad onClick. Además es conveniente definirle
Propiedades opcionales son:
Ejemplos de uso:
org.uqbar.arena.widgets.FileSelector extiende de Button y además permite seleccionar un archivo mediante un cuadro de diálogo. Es obligatorio establecer el binding de la propiedad value, contra una propiedad del modelo:
Al apretar el botón, se abrirá un dialog para seleccionar el archivo.
Lo que va a bindear es el path del archivo seleccionado a la propiedad "archivo" de nuestro modelo.
Se pueden configurar las siguientes propiedades manuales:
org.uqbar.arena.widgets.TextBox permite ingresar valores al usuario. Por default todos los textboxes asumen que se pueden cargar tanto números como caracteres alfabéticos y símbolos, así que el valor asociado es un String. Se visualiza como una caja de texto. Es obligatorio establecer el binding de la propiedad value, contra una propiedad del modelo:
Recordemos que las opciones para bindear el value son:
Propiedades que pueden setearse manualmente, además de las del control:
org.uqbar.arena.widgets.NumericField es un TextBox adaptado (tiene un filtro que evita los caracteres alfabéticos, y solo permite ingresar dígitos numéricos, comas y puntos). A partir de la versión 3.6.3 de Arena
org.uqbar.arena.widgets.PasswordField es un TextBox adaptado para datos sensibles que no muestra los caracteres ingresados en pantalla. Es ideal para contraseñas.
org.uqbar.arena.widgets.tables.Table<R> permite crear una grilla para mostrar elementos de tipo R:
Es obligatorio definir
Opcionalmente se puede definir una propiedad value para bindear el elemento seleccionado.
Propiedades que pueden setearse manualmente, además de las del control:
Ejemplo: para definir una tabla que muestra los clientes de una empresa de celulares
Para agregar una columna que muestre el nombre de un cliente de esa empresa:
La propiedad nombre está asociada a un celular.
Las columnas
org.uqbar.arena.widgets.Spinner permite editar un valor numérico con dos botones que permiten incrementar/decrementar ese valor.
La propiedad value se bindea mediante el mensaje bindValueToProperty.
Opcionalmente se pueden definir:
Ejemplo: tenemos un pedido y queremos asignar la cantidad a comprar para un producto:
El pedido tiene una propiedad cantidadIngresada int o Integer.
org.uqbar.arena.widgets.tree.Tree<T> permite definir un control que muestre nodos en forma jerárquica
org.uqbar.arena.widgets.Panel sirve como contenedor de widgets o controles.
Todo panel tiene
org.uqbar.arena.widgets.GroupPanel extiende de Panel y le agrega un borde + un título (propiedad title manual).