1. Información general
Wicket es un marco orientado a componentes web del lado del servidor Java que tiene como objetivo simplificar la construcción de interfaces web mediante la introducción de patrones conocidos del desarrollo de la interfaz de usuario de escritorio.
Con Wicket es posible crear una aplicación web utilizando solo código Java y páginas HTML compatibles con XHTML. No necesita Javascript, ni archivos de configuración XML.
Proporciona una capa sobre el ciclo de solicitud-respuesta, lo que protege del trabajo a bajo nivel y permite a los desarrolladores centrarse en la lógica empresarial.
En este artículo, presentaremos los conceptos básicos mediante la creación de la aplicación HelloWorld W icket, seguida de un ejemplo completo utilizando dos componentes integrados que se comunican entre sí.
2. Configuración
Para ejecutar un proyecto de Wicket, agreguemos las siguientes dependencias:
org.apache.wicket wicket-core 7.4.0 Es posible que desee consultar la última versión de Wicket en el repositorio de Maven Central, que en el momento de su lectura puede no coincidir con la que se usa aquí.
Ahora estamos listos para construir nuestra primera aplicación Wicket.
3. HelloWorld Wicket
Comencemos subclasificando la clase WebApplication de Wicket , que, como mínimo, requiere anular el método Class getHomePage () .
Wicket utilizará esta clase como punto de entrada principal de la aplicación. Dentro del método, devuelva una clase de objeto de una clase llamada HelloWorld:
public class HelloWorldApplication extends WebApplication { @Override public Class getHomePage() { return HelloWorld.class; } }Wicket prefiere la convención a la configuración. Para agregar una nueva página web a la aplicación, es necesario crear dos archivos: un archivo Java y un archivo HTML con el mismo nombre (pero diferente extensión) en el mismo directorio. Solo se necesita una configuración adicional si desea cambiar el comportamiento predeterminado.
En el directorio del paquete del código fuente, primero agregue HelloWorld.java :
public class HelloWorld extends WebPage { public HelloWorld() { add(new Label("hello", "Hello World!")); } }luego HelloWorld.html :
Como paso final, agregue la definición del filtro dentro de web.xml:
wicket.examples org.apache.wicket.protocol.http.WicketFilter applicationClassName com.baeldung.wicket.examples.HelloWorldApplication Eso es. Acabamos de codificar nuestra primera aplicación web Wicket.
Ejecute el proyecto creando un archivo war ( paquete mvn desde la línea de comandos) e impleméntelo en un contenedor de servlets como Jetty o Tomcat.
Accedamos a // localhost: 8080 / HelloWorld / en el navegador. Una página vacía con el mensaje ¡Hola mundo! aparecerá.
4. Componentes de Wicket
Los componentes de Wicket son tríadas que constan de una clase Java, el marcado HTML y un modelo. Los modelos son una fachada que utilizan los componentes para acceder a los datos.
Esta estructura proporciona una buena separación de preocupaciones y, al desacoplar el componente de las operaciones centradas en datos, aumenta la reutilización del código.
El siguiente ejemplo demuestra cómo agregar el comportamiento Ajax a un componente. Consiste en una página con dos elementos: un menú desplegable y una etiqueta. Cuando cambie la selección desplegable, se actualizará la etiqueta (y solo la etiqueta).
El cuerpo del archivo HTML CafeSelector.html será mínimo, con solo dos elementos, un menú desplegable y una etiqueta:
Address: address
En el lado de Java, creemos la etiqueta:
Label addressLabel = new Label("address", new PropertyModel(this.address, "address")); addressLabel.setOutputMarkupId(true);El primer argumento en el constructor Label que coincide con el wicket: id asignado en el archivo HTML. El segundo argumento es el modelo del componente, un contenedor para los datos subyacentes que se presentan en el componente.
El método setOutputMarkupId hace que el componente sea elegible para modificación a través de Ajax. Ahora creemos la lista desplegable y agreguemos el comportamiento Ajax:
DropDownChoice cafeDropdown = new DropDownChoice( "cafes", new PropertyModel(this, "selectedCafe"), cafeNames); cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") { @Override protected void onUpdate(AjaxRequestTarget target) { String name = (String) cafeDropdown.getDefaultModel().getObject(); address.setAddress(cafeNamesAndAddresses.get(name).getAddress()); target.add(addressLabel); } });La creación es similar a la de la etiqueta, el constructor acepta la identificación del wicket, un modelo y una lista de nombres de cafés.
Luego, se agrega AjaxFormComponentUpdatingBehavior con el método de devolución de llamada onUpdate que actualiza el modelo de la etiqueta una vez que se emite la solicitud ajax. Finalmente, el componente de etiqueta se establece como un objetivo para la actualización.
Finalmente, el componente de etiqueta se establece como un objetivo para la actualización.
Como puede ver, todo es Java, no era necesaria una sola línea de Javascript. Para cambiar lo que muestra la etiqueta, simplemente modificamos un POJO. El mecanismo por el cual la modificación de un objeto Java se traduce en un cambio en la página web ocurre detrás de las cortinas y no es relevante para el desarrollador.
Wicket ofrece un gran conjunto de componentes habilitados para AJAX listos para usar. El catálogo de componentes con ejemplos en vivo está disponible aquí.
5. Conclusión
En este artículo introductorio, hemos cubierto los conceptos básicos de Wicket, el marco web basado en componentes en Java.
Wicket proporciona una capa de abstracción cuyo objetivo es eliminar por completo el código de plomería.
Hemos incluido dos ejemplos simples, que se pueden encontrar en GitHub, para darle una idea de cómo se ve el desarrollo con este marco.