Desarrollo Web con componentes: Modelos en Wicket

En el ejemplo del contador, el botón "Sumar" agrega una unidad al número que actúa como contador:

class ContadorPage extends WebPage { extension WicketExtensionFactoryMethods = new WicketExtensionFactoryMethods int contador new() { val labelContador = new Label("contador", new PropertyModel(this, "contador")); this.addChild(labelContador) labelContador.outputMarkupId = true this.addChild(new XLink<Object>("sumar") => [ onClick = [| contador = contador + 1 ] ]) this.addChild(new XAjaxLink<Object>("restar") => [ onClick = [ target | contador = contador - 1 target.add(labelContador) ] ]) } }

ContadorPage.xtend

<div id="bd"> <h2>Contador</h2> <p> <span wicket:id="contador">contador</span> </p> <br/> <a href="#" wicket:id="sumar">Sumar</a>

ContadorPage.html

¿Y el label cómo se entera de eso?

  • Para eso usamos "modelos". La idea es modelar mi aplicación con objetos (modelo) y luego los componentes gráficos se asocian a esos objetos.
  • En este caso usamos un PropertyModel, es decir este modelo vincula a un componente con una propiedad de nuestros objetos.
  • Nótese que usamos la palabra modelo ambiguamente... para nosotros el modelo son los objetos que representan abstracciones del dominio ("el negocio"). En cambio Wicket llama Model a los objetos que tienen una interfaz en común y representan el binding entre los componentes visuales y lo que nosotros llamamos "modelo". (Son los controllers de Arena, así que ¡a no confundirse!)
  • Podría hablar directamente con el Label, pero nuestra propuesta es modelar el comportamiento y luego hacer que los componentes reflejen el estado de nuestro modelo. De esta forma el Label se mantiene siempre actualizado y yo puedo definir el comportamiento de la aplicación en términos de mi modelo y no de componentes visuales.
  • En este ejemplo el modelo está en la propia home page, cuando hagamos ejemplos más complicados lo vamos a sacar de ahí.
  • El hecho de que el contador sea una variable de instancia, nos hace ver que
    • Todos los pedidos le llegan al mismo objeto HomePage.
    • Cada usuario que ingresa al sistema tiene su propia instancia de HomePage.
    • Notar que el href # del link en el html no es significativo, eso sirve para que la versión estática sea navegable si uno quiere.

Para aprender más sobre models de Wicket, pueden ver

TODO: Agregar CompoundPropertyModel vs. Property Model.