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

• Wicket: Working with models

• La documentaciòn oficial sobre Models

TODO: Agregar CompoundPropertyModel vs. Property Model.