I am using gxt(2.6) messagebox in my gwt application..
I tried this following code to keep closable icon..but its not working
Messagebox.setclosable(true);
A bug?:
http://www.sencha.com/forum/showthread.php?50995-FIXED-Bug-in-MessageBox.setClosable%28true%29
You could also easily build a custom component to have a popup window with "close" button, such as:
public class EnhancedDialogBox extends DialogBox {
public EnhancedDialogBox(String header, String text){
setText(header);
FlowPanel fp = new FlowPanel();
Button ok = new Button("Close");
ok.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
EnhancedDialogBox.this.hide();
}
});
Label lbl = new Label(text);
fp.add(lbl);
fp.add(ok);
add(fp);
}
}
in case of dire need or as a quick and dirty fix or workaround.
Its a unfixed bug in gxt 2.6 ..I reviewed the alert() function in MessageBox.class..
public static Messagebox alert(String title, String msg,
Listener<MessageboxEvent> callback) {
Messagebox box = new Messagebox();
box.setTitle(title);
box.setMessage(msg);
box.callback = callback;
box.setButtons(OK);
box.icon = WARNING;
box.show();
return box;
}
If we add box.setClosable(true); this in existing method it will work fine
public static Messagebox alert(String title, String msg,
Listener callback) {
Messagebox box = new Messagebox();
box.setTitle(title);
box.setMessage(msg);
box.callback = callback;
box.setButtons(OK);
box.icon = WARNING;
box.setClosable(true);
box.show();
return box;
}
Related
I've an combo box which is composed of a text field and a popup with a CellTable showing the suggestion items. The text field has a change handler that updates the CellTable's selection.
When typing a character and clicking an already selected suggestion, the first click is swallowed. The second click works and triggers the selection via the CellTable.addDomHandler(...).
Any idea why first click is swallowed?
Example code:
private static class SuggestFieldTextAndPopupSandbox extends SimplePanel {
private final TextField mText;
private CellTable<Handle<String>> mTable;
private SingleSelectionModel<Handle<String>> mTableSelection;
private SingleSelectionModel<Handle<String>> mSelection;
private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
private PopupPanel mPopup;
private List<Handle<String>> mData;
public SuggestFieldTextAndPopupSandbox() {
mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
mSelection = new SingleSelectionModel<Handle<String>>();
mText = new TextField();
mText.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent pEvent) {
mPopup.showRelativeTo(mText);
}
});
mText.addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent pEvent) {
mTableSelection.setSelected(startsWith(mText.getValue()), true);
}
});
mText.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent pEvent) {
mText.setText(mText.getText().toUpperCase());
}
});
mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));
mTable.setTableLayoutFixed(false);
mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
mTable.setSelectionModel(mTableSelection);
mTable.addDomHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent pEvent) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
}, ClickEvent.getType());
mTable.addColumn(new TextColumn<Handle<String>>() {
#Override
public String getValue(Handle<String> pObject) {
return pObject.get();
}
});
mTable.setRowData(mData);
mPopup = new PopupPanel();
mPopup.setAutoHideEnabled(true);
mPopup.setWidget(mTable);
mPopup.setWidth("200px");
mPopup.setHeight("200px");
VerticalPanel p = new VerticalPanel();
p.add(mText);
setWidget(p);
}
private Handle<String> startsWith(final String pValue) {
final String val = nullToEmpty(pValue).toLowerCase();
int i = 0;
for (Handle<String> item : mData) {
String value = item.get();
if (value != null && value.toLowerCase().startsWith(val)) {
return item;
}
i++;
}
return null;
}
}
I reproduced your issue and here is the problem:
when you click on the suggestions the following is happening:
The text field is loosing focus which causes the corresponding ChangeEvent to be dealt with followed by the BlurEvent.
The click causes the popup to get the focus now which is why it is swallowed.
If you remove the ChangeHandler and the BlurHandler of the text field the issue disappears. But I think I found another solution
Try replacing the DOM handler of the mTable with a selection handler relative to the mTableSelection as follows:
mTableSelection.addSelectionChangeHandler(new Handler(){
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
});
Found a way how to properly solve this.
Skipping the blur handler when user hovers the suggestion list area seemed to fix that issue, at least from the tests that were done didn't see any more issues.
This was necessary because just before the user clicks a suggestion item, the text is blurred and it fires a selection change. This in turn cancels the selection made when user clicks an item.
I have the following code snippet -
Button testButton = new Button("Test");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
box.setText("Test");
box.add(new DateField());
box.setGlassEnabled(true);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
box.show();
}
});
}
});
RootPanel.get().add(testButton);
RootPanel.get().add(new DateField());
The GXT DateField inside the modal DialogBox doesn't seem to work and none of the dates are selectable. On the other hand, the one added directly to RootPanel seems to works fine.
Any ideas on how to work around this?
When using the GWT dialog and the date picker expand, the GWT dialog is preventing the click events from propagating to it. So in this case the GWT dialog modal can be set to false to get it to work. Although I would suggest using the GXT DialogBox. Another option might be to override the event handling a bit more in DialogBox in the case the GXT Date picker is displayed.
This will allow the field to work in GWT:
final DialogBox box = new DialogBox(false, false);
Small test case to show both:
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.Dialog;
import com.sencha.gxt.widget.core.client.form.DateField;
public class DialogWithDateField {
public DialogWithDateField() {
RootPanel.get().add(new DateField());
testGwtDialog();
testGxtDialog();
}
private void testGwtDialog() {
Button testButton = new Button("Test Gwt Dialog");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DateField field = new DateField();
final DialogBox box = new DialogBox(false, false);
box.setText("Test");
box.add(field);
box.setGlassEnabled(true);
box.show();
}
});
RootPanel.get().add(testButton);
}
private void testGxtDialog() {
Button testButton = new Button("Test Gxt Dialog");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
DateField field = new DateField();
final Dialog box = new Dialog();
box.setHeadingText("Test");
box.add(field);
box.setModal(true);
box.show();
}
});
RootPanel.get().add(testButton);
}
}
The issue might be due to mixing GWT Dialog with GXT widget.
Try this sample code that works with Sencha Dialog
Dialog d = new Dialog();
d.setHeadingText("Enter Date");
d.setWidget(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setPredefinedButtons(PredefinedButton.YES, PredefinedButton.NO,
PredefinedButton.CANCEL);
d.show();
Works fine with EXTJS Dialog as well.
Dialog d = new Dialog();
d.setTitle("Enter Date");
d.add(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setButtons(Dialog.YESNOCANCEL);
d.show();
I have a user form with a lot of gwt listbox. The form is like an excel form with named list.
It's ugly and the arrows take place.
I would like the cells were like in excel. The arrow appears only when you click in the cell.
I start to program my own widget with a textbox and a listbox embedded into a DeckPanel, switching when you click on the textbox or when the value change. But with this solution, it is necessary to click again to open the listbox.
Now, it will be great, if when you click on the textbox, the listbox will be displayed already open.
In the code below, I try to do this into the method onClick wih this line:
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
But it has no effects.
public class CustomListBox extends Composite implements ClickHandler,
ChangeHandler, HasChangeHandlers {
private final StringListBox listBox;
private final TextBox textBox;
private final DeckPanel panel;
public CustomListBox() {
textBox = new TextBox();
textBox.addClickHandler(this);
textBox.setReadOnly(true);
listBox = new StringListBox();
listBox.addChangeHandler(this);
panel = new DeckPanel();
panel.add(textBox);
panel.add(listBox);
panel.showWidget(0);
// All composites must call initWidget() in their constructors.
initWidget(panel);
}
#Override
public void onClick(ClickEvent event) {
Object sender = event.getSource();
if (sender == textBox) {
panel.showWidget(1);
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
}
}
public void addItem(String item) {
listBox.addItem(item);
}
public int getSelectedIndex() {
return listBox.getSelectedIndex();
}
public String getItemText(int selectedIndex) {
return listBox.getItemText(selectedIndex);
}
#Override
public HandlerRegistration addChangeHandler(ChangeHandler handler) {
return listBox.addChangeHandler(handler);
}
#Override
public void onChange(ChangeEvent event) {
Object sender = event.getSource();
if (sender == listBox) {
textBox.setText(getItemText(getSelectedIndex()));
panel.showWidget(0);
}
}
}
Since you are already programming your own widget, why don't you go all the way. Don't swap out the text box for a list box widget. Instead of a textbox use a label. Add an arrow to your label background when you mouse over, then use a popupPanel for the list itself. In the popupPanel you can make the list items whatever you like, just make sure when you click on it, it sets the text in your original label.
I am building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("   "));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}
My gwt project have flexTable show data of image and button on each row and coll.
But my button won't work properly. this is my current code:
private Button[] b = new Button[]{new Button("a"),...,new Button("j")};
private int z=0;
...
public void UpdateTabelGallery(JsArray str){
for(int i=0; i str.length(); i++){
b[i].setText(str.gettitle());
UpdateTabelGallery(str.get(i));
}
}
public void UpdateTabelGallery(GalleryData str){
Image img = new Image();
img.setUrl(str.getthumburl());
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[z] );
TabelGaleri.setWidget(y, x, himage);
//is here th right place?
b[z].addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
Window.alert("I wan to show the clicked button text" + b[z].getText());
}
});
z++;
}
I'm still confuse where I should put my button handler. With this current code seems the clickhandler didn't work inside a looping. And if I put it outside loop its not working because I need to know which button clicked. I need to get my index button.but how? Is there any option than array button?
thanks
I was using this method me too, then I've created a new Button with an additional argument.
When I add the ButtonArg I set also the argument:
Panel.add(new ButtonArg("B1", i));
...
// Create a handler for the A-Z buttons
class MyHandler implements ClickHandler {
public void onClick(ClickEvent e) {
ButtonArg btn=(ButtonArg) e.getSource();
Window.alert("Button Text="+btn.getArgument());
}
}
public class ButtonArg extends Button {
int argument;
public ButtonArg(String html, int arg) {
super(html);
setArgument(arg);
}
public int getArgument() {
return argument;
}
public void setArgument(int argument) {
this.argument = argument;
}
[...]
The problem is that you refer to 'z' in your click handler, but the value of z changes, so that when your click handler is actually called the value of z is wrong.
You need a local final variable in UpdateTabelGallery which you assign the current value of z to to allow it to be captured by the handler you create. Even better, get rid of z entirely and pass i to UpdateTableGallery:
public void updateTableGallery(GalleryData str, final int i){
Image img = new Image();
img.setUrl(str.getthumburl());
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[i] );
TabelGaleri.setWidget(y, x, himage);
//is here th right place?
b[i].addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
Window.alert("I wan't to show the clicked button text" + b[i].getText());
}
});
}
But what do you expect:
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[i] );
to do? Aside from the incorrect HTML syntax, I don't think adding ypur button to the string will work.
I know this is old, but it didn't look answered and I was looking to do the same thing. Here's one solution:
public void onModuleLoad() {
Button[] b=new Button[26];
RootPanel rp=RootPanel.get("body");
// Create a handler for the A-Z buttons
class MyHandler implements ClickHandler {
public void onClick(ClickEvent e) {
Button btn=(Button) e.getSource();
Window.alert("Button Text="+btn.getText());
}
}
MyHandler handler = new MyHandler();
for(int i=0;i<26;i++) {
b[i] = new Button(String.valueOf((char)(65+i)));
b[i].addStyleName("sendButton");
rp.add(b[i]);
b[i].addClickHandler(handler);
}
SimplePanel sPanel = new SimplePanel();
}