GWT Botón de cierre en la barra de título de DialogBox

Question

¿Existe alguna forma no JSNI de agregar un botón de cerrar al área de la barra de título de un DialogBox?

Answer 1

Una solución más simplier es utilizar GWT-ext (http://code.google.com/p/gwt-ext/). Es gratis y fácil de usar e integrar. Puedes ver su escaparate http://www.gwt-ext.com/demo/. Creo que lo que quiere es el MessageBox o la ventana de diseño (están en la categoría de Windows del escaparate).

Atentamente.

Answer 2

sí hay

n no es - al menos no sin tocar el violín con DialogBox propia clase de GWT o la recreación de la DialogBox uso de widgets comunes. Este es un problema conocido en GWT, también conocido como issue 1405 (Star para mostrar su interés).

Sin embargo; DialogBox no nos proporciona las herramientas para hacerlo, por lo que debemos ampliarlo - Editar:esto no funciona.

Si desea hacer un reemplazo directo para DialogBox, puede ponerle nombre a su clase DialogBox e importarla en lugar de la que está incluida en GWT. This thread en el foro de GWT da mejores detalles sobre cómo se puede hacer esto (obsoleto, usa oyentes) Anticuado, las partes internas de DialogBox han cambiado mucho desde este hilo, no funciona.

Aquí hay un código que pirateé para obtener los mismos resultados (utilicé el hilo vinculado como guía). Esto no funciona:

MyDialogBox:

import com.google.gwt.event.dom.client.ClickEvent; 
import com.google.gwt.event.dom.client.ClickHandler; 
import com.google.gwt.event.dom.client.MouseOutEvent; 
import com.google.gwt.event.dom.client.MouseOutHandler; 
import com.google.gwt.event.dom.client.MouseOverEvent; 
import com.google.gwt.event.dom.client.MouseOverHandler; 
import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.Window; 
import com.google.gwt.user.client.ui.DialogBox; 
import com.google.gwt.user.client.ui.HTML; 
import com.google.gwt.user.client.ui.HorizontalPanel; 
import com.google.gwt.user.client.ui.Label; 
import com.google.gwt.user.client.ui.Widget; 

public class MyDialogBox extends DialogBox { 

    private class crossHandler implements ClickHandler, MouseOverHandler, MouseOutHandler 
    { 

     @Override 
     public void onClick(ClickEvent event) { 
      hide(); 
      Window.alert("Click!"); 
     } 

     @Override 
     public void onMouseOver(MouseOverEvent event) { 
      DOM.setStyleAttribute(cross.getElement(), "font-weight", "bold"); 

     } 

     @Override 
     public void onMouseOut(MouseOutEvent event) { 
      DOM.setStyleAttribute(cross.getElement(), "font-weight", "normal"); 

     } 


    } 

    Label cross = new Label("X"); // The close button 
    crossHandler crosshandler = new crossHandler(); 
    HTML caption = new HTML(); // The caption aka title 
    HorizontalPanel captionPanel = new HorizontalPanel(); // Contains caption and cross 


     /** 
     * Creates an empty dialog box. It should not be shown until its child widget 
     * has been added using {@link #add(Widget)}. 
     */ 
    public MyDialogBox() 
    { 
     this(false); 
    } 

    /** 
    * Creates an empty dialog box specifying its "auto-hide" property. It should 
    * not be shown until its child widget has been added using 
    * {@link #add(Widget)}. 
    * 
    * @param autoHide <code>true</code> if the dialog should be automatically 
    *   hidden when the user clicks outside of it 
    */ 
    public MyDialogBox(boolean autoHide) { 
      this(autoHide, true); 
      } 

    /** 
    * Creates an empty dialog box specifying its "auto-hide" property. It should 
    * not be shown until its child widget has been added using 
    * {@link #add(Widget)}. 
    * 
    * @param autoHide <code>true</code> if the dialog should be automatically 
    *   hidden when the user clicks outside of it 
    * @param modal <code>true</code> if keyboard and mouse events for widgets not 
    *   contained by the dialog should be ignored 
    */ 
    public MyDialogBox(boolean autoHide, boolean modal) 
    { 
     super(autoHide, modal); 

     cross.addClickHandler(crosshandler); 
     cross.addMouseOutHandler(crosshandler); 
     cross.addMouseOverHandler(crosshandler); 

     captionPanel.add(caption); 
     captionPanel.add(cross); 
     captionPanel.setStyleName("caption"); 

     Element td = getCellElement(0, 1); // Get the cell element that holds the caption 
     td.setInnerHTML(""); // Remove the old caption 
     td.appendChild(captionPanel.getElement()); 



    } 

    @Override 
    public void setText(String text) 
    { 
     caption.setText(text); 
    } 

    public String getText() 
    { 
     return caption.getText(); 
    } 

    public void setHtml(String html) 
    { 
     caption.setHTML(html); 
    } 

    public String getHtml() 
    { 
     return caption.getHTML(); 
    } 

Nota: Este código no funciona. ClickEvent no se envía desde cross, sino que desde MyDialogBox, independientemente de si agrega ClickHandlers al cross o no, IOW el MyDialogBox es el remitente/fuente y, por lo tanto, no es posible verificar contra cross. Cuando se hace clic en la cruz, no se activa ClickEvent por algún motivo.

Editar: Parece que esto no puede hacerse sin cortes a menos que sea escribir sus propios DialogBox (casi) desde cero o Soluciona el problema de 1405. Por supuesto, hay una serie de bibliotecas existentes que ya han resuelto este problema, es decir, SmartGWT y GWT-Ext, pero su implementación se realiza principalmente desde cero.

Así que para responder a su pregunta en una frase: Sí hay una manera, pero no va a gustar :)

Answer 3

Puede encontrar el cuadro de diálogo que se puede cerrar en el código de google en el proyecto synthfuljava. En realidad, se llama cuadro de diálogo desplazable con un botón Cerrar X en el título.

El blog siguiente explica los obstáculos que tuvieron que superar para que el botón thecaption X para poder escuchar el evento Haga clic para dejarlo trabajar:

http://h2g2java.blessedgeek.com/2009/07/gwt-useable-closeable-scrollable.html

Answer 4

Utilizamos GWT-ext de el comienzo de nuestro proyecto Fue una mala idea Tienen muchos widgets geniales, pero no son widgets GWT Y no tienen compatibilidad con widgets GWT. Una vez que elija GWT-Ext, todo, incluso el mecanismo de evento, debe estar en el modo GWT-Ext, no en el modo GWT. Esta biblioteca no se actualizará para la versión más nueva de GWT, porque la biblioteca javascript Ext no es más gratuita. Estamos eliminando GWT-Ext de nuestro proyecto ahora.

No es posible agregar un widget diferente en el título GWT DialogBox, pero puede ampliar "DecoratedPanel" (es el elemento principal DialogBox). Mire la fuente DialogBox para aprender las técnicas, especialmente cómo agrega el objeto Subtítulo al panel y cómo se implementa el arrastre de la ventana.

Eso es lo que hemos hecho aquí, y funciona muy bien. Hemos creado nuestra propia clase Caption que extiende FocusablePanel (un SimplePanel que captura todos los eventos del mouse) y agregamos un HorizontalPanel a él, con botones y texto. Tuvimos que anular onAttach() y onDetach() simplemente llamando al método super (están protegidos).

Creo que no tengo permiso para poner nuestro código fuente aquí, así que solo puedo darle estos consejos.

Answer 5

Puede hacerlo mediante la adición de un botón en el panel central de la DialogBox:

Image closeButton = new Image(""); 
closeButton.addClickHandler(new ClickHandler() { 
    public void onClick(ClickEvent event) { 
     registerBox.hide();    
    } 
}); 

closeButton.setStyleName("TopRight"); 

Entonces posicionarlo con CSS:

.TopRight { 
    float:right; 
    margin-top:-22px; 
    width:16px; 
    height:16px; 
    display:block; 
    background-image: url(images/cancel_16.png); 
} 

Answer 6

Salida del proyecto activo: http://code.google.com/p/gwt-mosaic/

Su noble objetivo es, como se menciona en su página:

El objetivo es proporcionar un conjunto completo de artilugios manteniendo la API lo más cerca posible de la API de widgets estándar de GWT.

Se han quedado atrapados en el vórtice GXT. No entiendo en absoluto cómo requieren que los usuarios usen API completamente diferente para los oyentes, etc. Por su parte, esto tiene sentido. Después de todo, GXT es solo un puerto de sus bibliotecas javascript existentes. Pero he estado buscando este proyecto MOSAIC por mucho tiempo ...

Answer 7

Simplemente usando GWT y sin bibliotecas externas puede interceptar los eventos de clic en el elemento de título y realizar una prueba de impacto para ver si el mouse x, y coord está dentro de los límites del elemento de anclaje (u otro elemento que use como ClickHandler).

// Create anchor we want to accept click events 
final Anchor myAnchor = new Anchor("My Anchor"); 

// Add handler to anchor 
myAnchor.addClickHandler(new ClickHandler() { 
    @Override 
    public void onClick(ClickEvent event) { 
    Window.alert("Anchor was clicked"); 
    } 
}); 

// Create dialog 
final DialogBox myDialog = new DialogBox(); 
myDialog.setText("My Dialog"); 

// Get caption element 
final HTML caption = ((HTML)myDialog.getCaption()); 

// Add anchor to caption 
caption.getElement().appendChild(myAnchor.getElement()); 

// Add click handler to caption 
caption.addClickHandler(new ClickHandler() { 
    @Override 
    public void onClick(ClickEvent event) { 
    // Get x,y caption click relative to the anchor 
    final int x = event.getRelativeX(myAnchor.getElement()); 
    final int y = event.getRelativeY(myAnchor.getElement()); 

    // Check click was within bounds of anchor 
    if(x >= 0 && y >= 0 && 
     x <= myAnchor.getOffsetWidth() && 
     y <= myAnchor.getOffsetHeight()) { 
     // Raise event on anchor 
     myAnchor.fireEvent(event); 
    } 
    } 
}); 

// Show the dialog 
myDialog.show(); 

Answer 8

me di cuenta que es ridículamente viejo, pero sólo se puede utilizar el posicionamiento absoluto con la parte superior y derecha de 0 a conseguir un widget en la parte superior derecha. El cuadro de diálogo está en una posición absoluta, por lo que el posicionamiento de su widget va en contra de eso.

Answer 9

Puede probar esto, ligeramente mejorada solución mediante fungus1487:

import com.google.gwt.dom.client.EventTarget; 
import com.google.gwt.event.dom.client.ClickEvent; 
import com.google.gwt.event.dom.client.ClickHandler; 
import com.google.gwt.i18n.client.HasDirection; 
import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.ui.*; 

/** 
* @author Andrey Talnikov 
*/ 
public class ClosablePopup extends DialogBox { 

    private Anchor closeAnchor; 

    /** 
    * Instantiates new closable popup. 
    * 
    * @param title  the title 
    * @param defaultClose it {@code true}, hide popup on 'x' click 
    */ 
    public ClosablePopup(String title, boolean defaultClose) { 
     super(true); 

     closeAnchor = new Anchor("x"); 

     FlexTable captionLayoutTable = new FlexTable(); 
     captionLayoutTable.setWidth("100%"); 
     captionLayoutTable.setText(0, 0, title); 
     captionLayoutTable.setWidget(0, 1, closeAnchor); 
     captionLayoutTable.getCellFormatter().setHorizontalAlignment(0, 1, 
       HasHorizontalAlignment.HorizontalAlignmentConstant.endOf(HasDirection.Direction.LTR)); 

     HTML caption = (HTML) getCaption(); 
     caption.getElement().appendChild(captionLayoutTable.getElement()); 

     caption.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       EventTarget target = event.getNativeEvent().getEventTarget(); 
       Element targetElement = (Element) target.cast(); 

       if (targetElement == closeAnchor.getElement()) { 
        closeAnchor.fireEvent(event); 
       } 
      } 
     }); 

     if (defaultClose) { 
      addCloseHandler(new ClickHandler() { 
       @Override 
       public void onClick(ClickEvent event) { 
        hide(); 
       } 
      }); 
     } 
    } 

    public void addCloseHandler(ClickHandler handler) { 
     closeAnchor.addClickHandler(handler); 
    } 
} 

Answer 10

creé esta clase leyenda:

public class DialogBoxCaptionWithCancel extends Composite 
    implements Caption, HasClickHandlers { 

@UiField 
HTMLPanel mainPanel; 
@UiField 
HTML captionLabel; 
@UiField 
PushButton cancelButton; 

private HandlerManager handlerManager = null; 

private static final Binder binder = GWT.create(Binder.class); 

interface Binder extends UiBinder<Widget, DialogBoxCaptionWithCancel> { 
} 

public DialogBoxCaptionWithCancel() { 
    initWidget(binder.createAndBindUi(this)); 

    mainPanel.setStyleName("Caption"); 
    Image upImage = new Image("images/closeWindow.png"); 
    Image hoverImage = new Image("images/closeWindowFocus.png"); 
    cancelButton.getUpFace().setImage(upImage); 
    cancelButton.getUpHoveringFace().setImage(hoverImage); 
    cancelButton.setStylePrimaryName("none"); 
} 

/* 
* (non-Javadoc) 
* 
* @see com.google.gwt.user.client.ui.Widget#onLoad() 
*/ 
@Override 
protected void onLoad() { 
    super.onLoad(); 

    handlerManager = new HandlerManager(this); 
} 

@UiHandler("cancelButton") 
public void cancelButtonOnClick(ClickEvent event) { 
    handlerManager.fireEvent(event); 
} 

@Override 
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) { 
    return handlerManager.addHandler(MouseDownEvent.getType(), handler); 
} 

@Override 
public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) { 
    return handlerManager.addHandler(MouseUpEvent.getType(), handler); 
} 

@Override 
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) { 
    return handlerManager.addHandler(MouseOutEvent.getType(), handler); 
} 

@Override 
public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) { 
    return handlerManager.addHandler(MouseOverEvent.getType(), handler); 
} 

@Override 
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) { 
    return handlerManager.addHandler(MouseMoveEvent.getType(), handler); 
} 

@Override 
public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) { 
    return handlerManager.addHandler(MouseWheelEvent.getType(), handler); 
} 

@Override 
public String getHTML() { 
    return ""; 
} 

@Override 
public void setHTML(String html) { 
} 

@Override 
public String getText() { 
    return this.captionLabel.getText(); 
} 

@Override 
public void setText(String text) { 
    this.captionLabel.setText(text); 
} 

@Override 
public void setHTML(SafeHtml html) { 
} 

@Override 
public HandlerRegistration addClickHandler(ClickHandler handler) { 
    return handlerManager.addHandler(ClickEvent.getType(), handler); 
} 

} 

Las imágenes son sólo capturaron a partir del comportamiento de IE8 cuando se pasa el ratón sobre el botón cancelar

Aquí está el código UiBinder:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder 
xmlns:ui='urn:ui:com.google.gwt.uibinder' 
xmlns:g='urn:import:com.google.gwt.user.client.ui'> 

<ui:style> 
    .htmlField { 
     width: 100%; 
    } 

    .pushButton { 
     border: none; 
     padding: 0px; 
     width: 49px; 
     height: 21px; 
    } 
</ui:style> 

<g:HTMLPanel ui:field="mainPanel"> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr> 
      <td width="100%"> 
       <g:HTML ui:field="captionLabel" addStyleNames="{style.htmlField}"></g:HTML> 
      </td> 
      <td> 
       <g:PushButton ui:field="cancelButton" addStyleNames="{style.pushButton}"></g:PushButton> 
      </td> 
     </tr> 
    </table> 
</g:HTMLPanel> 
</ui:UiBinder> 

Entonces mi clase que se extiende DialogBox tiene la siguiente:

public class MyDialogBox extends DialogBox implements ClickHandler { 
... 
// instantiate the caption with the cancel button 
private static DialogBoxCaptionWithCancel caption = new DialogBoxCaptionWithCancel(); 
... 
public MyDialogBox() { 
    // construct the dialog box with the custom caption 
    super(false, false, caption); 

    setWidget(binder.createAndBindUi(this)); 

    // set the caption's text 
    caption.setText("My Caption"); 
} 
.... 
protected void onLoad() { 
    super.onLoad(); 

    // let us react to the captions cancel button 
    caption.addClickHandler(this); 
} 
... 
@Override 
public void onClick(ClickEvent event) { 
    // the caption's cancel button was clicked 
    this.hide(); 
} 

Answer 11

Esto funciona si sólo wa no una solución sencilla para la pregunta planteada:

Image button = new Image("images/cancel.png"); 

    button.addClickHandler(new ClickHandler(){ 
     public void onClick(ClickEvent event) { 
      hide(); 
     } 
    }); 
    button.setStyleName("dialog-close"); 

    HorizontalPanel header = new HorizontalPanel(); 
    header.add(new HTML("Example Tool")); 
    header.add(button); 

    setHTML(header.getElement().getInnerHTML()); 

Answer 12

supongo que una simple respuesta a esto es crear una instancia de un widget para reemplazar el estándar Captio n widget desde DialogBox. Creé un título que tiene un botón a la derecha y puede elegir una referencia al mismo. Luego puede agregar cualquier evento de clic que desee.

En GWT 2.4 que utiliza la siguiente solución:

import com.google.gwt.event.dom.client.MouseDownHandler; 
import com.google.gwt.event.dom.client.MouseMoveHandler; 
import com.google.gwt.event.dom.client.MouseOutHandler; 
import com.google.gwt.event.dom.client.MouseOverHandler; 
import com.google.gwt.event.dom.client.MouseUpHandler; 
import com.google.gwt.event.dom.client.MouseWheelHandler; 
import com.google.gwt.event.shared.HandlerRegistration; 
import com.google.gwt.safehtml.shared.SafeHtml; 
import com.google.gwt.user.client.ui.HorizontalPanel; 
import com.google.gwt.user.client.ui.InlineLabel; 
import com.google.gwt.user.client.ui.PushButton; 
import com.google.gwt.user.client.ui.DialogBox.Caption; 

/** 
* @author Cristiano Sumariva 
*/ 
public class ButtonCaption extends HorizontalPanel implements Caption 
{ 
    protected InlineLabel text; 
    protected PushButton closeDialog; 

    /** 
    * @return the button at caption 
    */ 
    public PushButton getCloseButton() 
    { 
    return closeDialog; 
    } 
    public ButtonCaption(String label) 
    { 
    super(); 
    setWidth("100%"); 
    setStyleName("Caption"); // so you have same styling as standard caption widget 
    closeDialog = new PushButton(); 
    add(text = new InlineLabel(label)); 
    add(closeDialog); 
    setCellWidth(closeDialog, "1px"); // to make button cell minimal enough to it 
    } 
    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseDownHandlers#addMouseDownHandler(com.google.gwt.event.dom.client.MouseDownHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) 
    { 
    return addMouseDownHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseUpHandlers#addMouseUpHandler(com.google.gwt.event.dom.client.MouseUpHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) 
    { 
    return addMouseUpHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseOutHandlers#addMouseOutHandler(com.google.gwt.event.dom.client.MouseOutHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) 
    { 
    return addMouseOutHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseOverHandlers#addMouseOverHandler(com.google.gwt.event.dom.client.MouseOverHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) 
    { 
    return addMouseOverHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseMoveHandlers#addMouseMoveHandler(com.google.gwt.event.dom.client.MouseMoveHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) 
    { 
    return addMouseMoveHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.event.dom.client.HasMouseWheelHandlers#addMouseWheelHandler(com.google.gwt.event.dom.client.MouseWheelHandler) 
    */ 
    @Override 
    public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) 
    { 
    return addMouseWheelHandler(handler); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.user.client.ui.HasHTML#getHTML() 
    */ 
    @Override 
    public String getHTML() 
    { 
    return getElement().getInnerHTML(); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.user.client.ui.HasHTML#setHTML(java.lang.String) 
    */ 
    @Override 
    public void setHTML(String html) 
    { 
    remove(text); 
    insert(text, 1); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.user.client.ui.HasText#getText() 
    */ 
    @Override 
    public String getText() 
    { 
    return text.getText(); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.user.client.ui.HasText#setText(java.lang.String) 
    */ 
    @Override 
    public void setText(String text) 
    { 
    this.text.setText(text); 
    } 

    /* (non-Javadoc) 
    * @see com.google.gwt.safehtml.client.HasSafeHtml#setHTML(com.google.gwt.safehtml.shared.SafeHtml) 
    */ 
    @Override 
    public void setHTML(SafeHtml html) 
    { 
    setHTML(html.asString()); 
    } 
} 

amplía la DialogBox para utilizar el nuevo ButtonCaption disponibles

class CaptionCloseableDialogBox extends DialogBox 
{ 
    public CaptionCloseableDialogBox() 
    { 
    super(new ButtonCaption("dialog box title")); 
    setAutoHideEnabled(false); 

    ButtonCaption ref = (ButtonCaption) this.getCaption(); 
    PushButton closeButton = ref.getCloseButton(); 
    // apply button face here closeButton; 
    closeButton.addClickHandler(/* attach any click handler here like close this dialog */); 
    } 
} 

creo que sirve ninguna.

Answer 13

Creo que el ButtonCaption de cavila es la mejor solución, pero hay un error en la implementación de la leyenda. La invocación de uno de los métodos overidden causa un bucle infinitivo porque el método se llama recursivamente.

Para evitar esto, se puede llamar al método en el texto InlineLabel lugar: la parte superior DIV nivel

@Override 
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) { 
    return text.addMouseDownHandler(handler); 
} 

Answer 14

del cuadro de diálogo GWT tiene el posicionamiento absoluto, por lo que puede hacer lo mismo con el botón de cierre. Esto le permite colocarlo en el cuerpo del cuadro de diálogo en lo que respecta al DOM, pero hacer que aparezca físicamente en el título.

En mi ejemplo a continuación, lo coloco en el ángulo superior derecho del cuadro de diálogo, y lo centro en el título usando el relleno.

<ui:style> 
    .close { 
     position: absolute; 
     top: 0; 
     right: 0; 
     padding: 3px 3px 1px 3px !important; 
     border-radius: 4px; 
     margin: 5px; 
    } 
</ui:style> 

<g:PushButton ui:field="closeButton" addStyleNames="{style.close}"> 
    <g:upFace image='{closeIcon}'/> 
    <g:downFace image='{closeIcon}'/> 
    <g:upHoveringFace image='{closeIcon}'/> 
    <g:downHoveringFace image='{closeIcon}'/> 
    <g:upDisabledFace image='{closeIcon}'/> 
    <g:downDisabledFace image='{closeIcon}'/> 
</g:PushButton>