Saltar a contenido

21. Apache Wicket

21.1 Configuración y estructura del proyecto

Una aplicación Wicket es una aplicación Java EE y por lo tanto en el directorio WEB-INF usa el fichero de despliegue web.xml
En este fichero declara un filtro "servlet":

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <display-name>Wicket Test</display-name>
    <filter>
        <filter-name>TestApplication</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
          <param-name>applicationClassName</param-name>
          <param-value>org.wicketTutorial.WicketApplication</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>TestApplication</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

21.1.1 Empezar un nuevo proyecto.

Usando el asistente de apache wicket, se generan los ficheros iniciales y se descargan. O bien copiar el comando maven y ejecutar. Por ejemplo:

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=9.10.0 -DgroupId=org.wicketTutorial.markupinherit -DartifactId=WicketApplication -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false

21.1.2 La clase aplicacion

Las páginas wicket son java

21.2 Wicket como un gestor de diseño de página (page layout manager).

21.2.1 Cabecera, pie, menu izquierdo, contenido , etc

La página se divide siguiento un patrón:
* header, suele contener titulos,logo y navegación * left menu, enlacs a áreas o páginas * footer, información general como contacto, etc * content, información principal en medio de la página

ver imagen

Para obtener una apariencia uniforme en todo el sitio , debemos asegurarnos que todas las páginas incluyen la distribución anterior.

21.3 Herencia

21.3.1 Herencia con markup

Como se indica en un apartado anterior, las páginas son clases java que por lo tanto pueden heredar.
Cuando una clase hereda de la clase WebPage también hereda elfichero html de la clase padre. A esta herecia se denomina herencia markup.
Como ejemplo, supongamos una clase GenericSitePage.java con su página html GenericSitePage.html Si creamos una clase dereivada, por ejemplo OrderSitePage.java derivada de GenericSitePage y no proporcionamos una página html, utilizara la página html del padre: GenericSitePage.html.

21.3.2 Clases Panel

La clase org.apache.wicket.markup.html.panel.Panel permite reutilizar las páginas html y recursos GUI en todo el sitio web.
Panel y WebPage heredan de la clase comun MarkupContainer

contenedor gui

Las subclases de MarkupContainer disponen del método add(Component…​) para añadir hijos y métodos para gestionar los componentes.
* Añadir uno o varios componentes * Quitar componente * Recuperar un componente concreot get(String) String será el id del componente. 

MyPanel myPanel = new MyPanel ("innerContainer");
add(myPanel);

Label name = (Label)get("innerContainer:name");
* Reemplazar componentes conociendo su id * Iterar entre componenetes con "Iterato" ( version java 7) o "stream" en versioens 8 y posteriores.

Tanto WebPage como Panel tiene su fichero html asociado.

La principal diferencia entre WebPage y Panel es que WebPage pueden usarse por si mismia , mientras Panel debe incluirse en una página para poder representarse (reder). Otro diferencia importante está en el fichero html. En el caso de panel se usa una etiqueta especial para indicar la parte que renderiza el panel: wicket:panel

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
<body>
   <wicket:panel>
      <!-- Your markup goes here -->
   </wicket:panel>
</body>
</html>

Durante el renderizado se elimina el html fuera de la etiqueta <wicket:panl>. Los desarrolladores pueden usar este html eliminado en el renderizado para hacer indicaciones de diseño.

21.4 Ejemplo de uso de patrones de páginas.

21.4.1 Página template

Esta página tiene la estructura principal que necesita la cabecera, pie, menu y contenido

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
<!--Include CSS-->
...
</head>
<body>
    <div id="header" wicket:id="headerPanel">header</div>
    <div id="body">
    <div id="menu" wicket:id="menuPanel">menu</div>
    <div id="content" wicket:id="contentComponent">content</div>
    </div>
    <div id="footer" wicket:id="footerPanel">footer</div>
</body>
</html>

Observar la etiqueta wicket:id="".

Y su clase java: 

package helloWorld.layoutTenda;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.Component;
import org.apache.wicket.markup.html.basic.Label;

public class JugTemplate extends WebPage {
        public static final String CONTENT_ID = "contentComponent";

        private Component headerPanel;
        private Component menuPanel;
        private Component footerPanel;

    public JugTemplate(){
                add(headerPanel = new HeaderPanel("headerPanel"));
                add(menuPanel = new MenuPanel("menuPanel"));
                add(footerPanel = new FooterPanel("footerPanel"));
                add(new Label(CONTENT_ID, "Pon tu contenido Aquí"));
        }

    //getters for layout areas
    //...
}

Página html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
<body>
   <wicket:panel>
      <table width="100%" style="border: 0px none;">
          <tbody>
            <tr>
              <td>
                <img alt="Jug4Tenda" src="wicketLayout_files/logo_jug4tenda.gif">
              </td>
              <td>
                <h1>Gestione Anagrafica</h1>
              </td>
             </tr>
          </tbody>
      </table>
   </wicket:panel>
</body>
<html>

y su clase java

package helloWorld.layoutTenda;

import org.apache.wicket.markup.html.panel.Panel;

public class HeaderPanel extends Panel {

        public HeaderPanel(String id) {
                super(id);
        }
}

Similar: * HeaderPanel * FooterPanel * MenuPanel

21.4.3 Utilizamos el patrón para nuevas páginas.

Vamos a crear una págian de login usando los patrones anteriores.

La página de contenido con su panel:

<html>
<head>
</head>
<body>
   <wicket:panel>
    <div style="margin: auto; width: 40%;">
       <form  id="loginForm" method="get">
         <fieldset id="login" class="center">
            <legend >Login</legend>
            <span >Username: </span><input type="text" id="username"/><br/>
            <span >Password: </span><input type="password" id="password" />
            <p>
               <input type="submit" name="login" value="login"/>
            </p>
         </fieldset>
      </form>
    </div>
   </wicket:panel>
</body>
</html>
Y la clase java hereda del patrón JungTemplate. Se incluye un formulario y se oculta el menú lateral sin añadir una nueva página html. 

package helloWorld.layoutTenda;
import helloWorld.LoginPanel;
import org.apache.wicket.event.Broadcast;
import org.apache.wicket.event.IEventSink;

public class SimpleLoginPage extends JugTemplate {
        public SimpleLoginPage(){
                super();
                replace(new LoginPanel(CONTENT_ID));
                getMenuPanel().setVisible(false);
        }
}

21.5 Herencia Markup con etiqueta

Otra forma alternativa es utilizar la herencia de Markup usando la etiqueta wicket:child .
Se usa en la página padre para indicar donde se inyecta el contenido del hijo . 

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    This is parent body!
    <wicket:child/>
</body>
</html>
La página/panel del hijo se pone dentro de la etiqueta wicket:child y en la página hijo solo se incluira el contenido en la etiquete wicket:extend 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <wicket:extend>
      This is child body!
    </wicket:extend>
</body>
</html>

Con las anterior páginas la página final será:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    This is parent body!
    <wicket:child>
      <wicket:extend>
        This is child body!
      </wicket:extend>
    </wicket:child>
</body>
</html>

21.5.1 Volviendo al ejemplo del login

El mismo ejemplo con estas etiquetas

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="header" wicket:id="headerPanel">header</div>
<div id="body">
        <div id="menu" wicket:id="menuPanel">menu</div>
        <wicket:child/>
</div>
<div id="footer" wicket:id="footerPanel">footer</div>
</body>
</html>

<html>
<head>
</head>
<body>
   <wicket:extend>
    <div style="margin: auto; width: 40%;">
       <form  id="loginForm" method="get">
         <fieldset id="login" class="center">
            <legend >Login</legend>
            <span >Username: </span><input type="text" id="username"/><br/>
            <span >Password: </span><input type="password" id="password" />
            <p>
               <input type="submit" name="login" value="login"/>
            </p>
         </fieldset>
      </form>
    </div>
   </wicket:extend>
</body>
</html>