En esta oportunidad les muestro un ejemplo de como crear tabs y agregarlos al componente
Tabbox y agregarlos dinámicamente a una ventana. A continuación el código zul:
index.zul
<zk>
<window
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vmp') @init('com.zk.examples.vm.TabboxVM')"
title="ZK TABBOX"
position="center"
mode="overlapped"
border="normal"
width="50%"
sizable="true"
maximizable="true"
closable="true"
height="50%">
<toolbar>
<toolbarbutton onClick="@command('window1')" label="Ventana 1" />
<toolbarbutton onClick="@command('window2')" label="ventana 2" />
<toolbarbutton onClick="@command('window3')" label="ventana 3" />
</toolbar>
<tabbox id="tb_tabbox" />
</window>
</zk>
- En la primera sección marcada con negrita hay 3 botones del tipo Toolbarbutton en donde cada uno de ellos hace referencia a un método para crear tabs.
- En <tabbox id="tb_tabbox" /> declaramos el componente y le asignamos a este un identificador con el nombre "tb_tabbox", El cual es utilizado por la clase TabboxVM para poder asignarle los tabs que contiene cada ventana.
A continuación muestro el contenido del archivo llamado v1.zul el cual sera agregado al tab y despues al componente Tabbox:
v1.zul
<zk>
<window title="ventana 1" border="normal">
CONTENIDO 1
</window>
</zk>
TabboxVM.java
package com.zk.examples.vm;
import java.util.HashMap;
import java.util.Map;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.util.media.Media;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Tab;
import org.zkoss.zul.Tabbox;
import org.zkoss.zul.Tabpanel;
import org.zkoss.zul.Tabpanels;
import org.zkoss.zul.Tabs;
public class TabboxVM {
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view){
Selectors.wireComponents(view, this, false);
}
//Componentes UI
@Wire
Tabbox tb_tabbox;
@Command
public void window1(){
agregarTab("Ventana 1", "v1", "v1.zul");
}
@Command
public void window2(){
agregarTab("Ventana 2", "v2", "v2.zul");
}
@Command
public void window3(){
agregarTab("Ventana 3", "v3", "v3.zul");
}
private void agregarTab(String titulo, String id, String zul) {
Map<String, Object> arguments = new HashMap<String, Object>();
Tabpanel tabpanel = new Tabpanel();
Tab tab = new Tab(titulo);
tab.setId(id);
if(tb_tabbox.hasFellow(id)){
Messagebox.show("Ya esta abierta la ventana!");
return;
}
tab.setClosable(true);
tab.setSelected(true);
if (tb_tabbox.getTabs() == null){
tb_tabbox.appendChild(new Tabs());
tb_tabbox.appendChild(new Tabpanels());
}
tb_tabbox.getTabs().appendChild(tab);
arguments.put("tabularIndex", tab.getIndex());
tb_tabbox.getTabpanels().appendChild(tabpanel);
tb_tabbox.invalidate();
Executions.createComponents(zul, tabpanel, arguments);
}
}
- Se utiliza la anotación @AfterCompose y se hace uso de Selectors.wireComponents para poder manipular componentes en el patrón mvvm. La documentación menciona que hay que tener cuidado en utilizar esta caracteristica ya que puede afectar la forma en la que el binder trabaja, pero en esta ocasíon no afecta ya que no hacemos uso de datos que afectan la comunicación del binder con los componentes. (http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM/Advance/Wire%20Components).
- En agregarTab se le pasa como primer parámetro el nombre el cual se le asignará al tab que se está creando, el segundo parámetro es el identificador que se le da al tab para poder validar si este ya esta agregado al Tabbox, como tercer parámetro se le pasa el nombre o la ruta donde se encuentra el archivo zul que se desea agregar al tab.
- En if(tb_tabbox.hasFellow(id)) sa valida si ya existe el identificador en el tabbox, muestra un mensaje avisando que ya existe.
- tab.setClosable(true), tab.setSelected(true), se asignan estas propiedades para decirle al tab que muestre un botón de cerrar y que se seleccione al momento de crearlo.
- En tb_tabbox.getTabs().appendChild(tab) se agrega el tab a la lista de tabs.
- En tb_tabbox.getTabpanels().appendChild(tabpanel) se agrega el tabpanel al que se le agregará el archivo zul.
- Por ultimó en Executions.createComponents(zul, tabpanel, arguments) se utiliza el método createComponents para asignar el archivo zul al padre que en este caso es tabpanel y se le pueden pasar algunos argumentos para después utilizarlos más tarde.
Las librerias de zk las puedes descargar desde este enlace, solo incluye las librerias en la carpeta lib de tu proyecto:
http://www.zkoss.org/download/zk
Ejemplo completo:
tabbox.zip
Importante: Este ejemplo esta probado en Eclipse con tomcat 7 por lo tanto puedes importar el proyecto en tu eclipse y adaptarlo al servidor de tu preferencia.
