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.