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);
}
Related
When i run the following Code and push Button "Push", more than once a time, i get browser error "simplePanel can only contain one child widget". How can i solve that problem? thank you in advance! Jogi
public class Projekt implements EntryPoint {
private RootPanel rootPanel;
public void onModuleLoad() {
rootPanel = RootPanel.get("gwtContainer");
rootPanel.setSize("1902", "868");
final AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setStyleName("frame1");
boundaryPanel.setSize("1455px", "600px");
final Diagram diagram = new Diagram(boundaryPanel);
RootPanel.get().add(boundaryPanel, 446, 242);
final Connector con = new Connector(100, 300, 300, 500);
Button la = new Button("Push");
la.setSize("200", "200");
RootPanel.get().add(la);
Button la2 = new Button("Push2");
la2.setSize("200", "200");
RootPanel.get().add(la2);
final Image img = new Image("images/concrete.svg");
img.setSize("200", "200");
final Shape shapei = new Shape(img);
Image img2 = new Image("images/variable.svg");
img2.setSize("200", "200");
boundaryPanel.add(img2, 200,200);
final Shape shapei2 = new Shape(img2);
shapei2.showOnDiagram(diagram);
la.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
boundaryPanel.add(img, 100,100);
shapei.showOnDiagram(diagram);
}
});
la2.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
con.showOnDiagram(diagram);
}
});
diagram.addDiagramListener(new DiagramListenerAdapter() {
#Override
public void onElementConnect(ElementConnectEvent event) {
if (con.startEndPoint.isGluedToConnectionPoint()) {
Widget connected = con.startEndPoint.gluedConnectionPoint.parentWidget;
if(connected.equals(shapei.connectedWidget)){
Image logo = new Image("images/xor.svg");
logo.setSize("100", "100");
boundaryPanel.add(logo);
}
else if(connected.equals(shapei2.connectedWidget)){
Image logo2 = new Image("images/and.svg");
logo2.setSize("100", "100");
boundaryPanel.add(logo2);
};
}}
});
}}
RootPanel.get() is a SimplePanel. You try to add more than one child to it, resulting in this error.
Instead, you should add HTMLPanel, for example, to your RootPanel, and then add all the children to this HTMLPanel.
I suppose your Diagram extends GWT's SimplePanel
class? SimplePanel can contain only a single widget, have a look here:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/SimplePanel.html
You could either extend a different class, or call the remove(Widget w) method to remove the existing widget before trying to add a new one.
I`m using GWT-Popup-Panel with the following code:
private static class MyPopup extends PopupPanel {
public MyPopup() {
// PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
// If this is set, the panel closes itself automatically when the user
// clicks outside of it.
super(true);
// PopupPanel is a SimplePanel, so you have to set it's widget property to
// whatever you want its contents to be.
setWidget(new Label("Click outside of this popup to close it"));
}
}
public void onModuleLoad() {
final Button b1 = new Button("About");
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
final MyPopup g = new MyPopup();
g.setWidget(RootPanel.get("rightagekeyPanel"));
g.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
public void setPosition(int offsetWidth, int offsetHeight) {
g.setPopupPosition(b1.getAbsoluteLeft(), b1.getAbsoluteTop());
g.setAutoHideEnabled(true);
}
});
g.setVisible(true);
g.setWidth("500px");
g.setHeight("500px");
g.show();
}
});
It does appear when clicking Button b1, but not when clicking it the second time. What is wrong?
Make one popup, outside of your ClickHandler, at the same level as your Button. You also don't need that PositionCallback to center your popup. You can just call g.center() to show it and center it. It's a known issue on the GWT support pages that it won't center properly if you don't set a width to it. It will center properly if you give your popup a proper width.
The reason it doesn't show again is because you remove the widget inside RootPanel.get("rightagekeyPanel") and put it into your popup. It is no longer there the next time you try to do it.
A widget can only be in one place at a time, so if you remove it from its parent, keep track of it with a variable or something, so you can re-use it. Otherwise, you must re-instantiate the widget.
public void onModuleLoad() {
final Button b1 = new Button("About");
final MyPopup g = new MyPopup(); //create only one instance and reuse it.
g.setAutoHideEnabled(true);
g.setSize("500px", "500px"); //sets width AND height
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
g.setWidget(RootPanel.get("rightagekeyPanel"));//DON'T DO THIS.
g.center();//will show it and center it.
}
});
}
Just say in my case I had to add some widget to make the PopUpPanel appear. Try using a label to make sure the Popup is showing.
PopupPanel popup = new PopupPanel();
popup.setVisible(true);
popup.center();
popup.show();
popup.setWidth("500px");
popup.setHeight("500px");
popup.add(new Label("Test"));
GXT3 - Grid: Adding a column with a button to modify row in Editable Grid
In the example the line is editable automatically when line is selected.
http://www.sencha.com/examples/#Exam...oweditablegrid
I want the line to be changed when I click on the edit button that would appear in a popup.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
Info.display("Event", "Call the popup here.");
}
});
nameColumn.setCell(button);
There is a way do get this?
Thanks in advance for your help.
First of all you have yo create a column with TextBoxCell which may you already created.
Then you have to disable default onclick editable behavior of grid.
For that as per Sencha example's file RowEditingGridExample.java you can override onClick event and prevent to fire default code.
public class RowEditingGridExample extends AbstractGridEditingExample {
#Override
protected GridEditing<Plant> createGridEditing(Grid<Plant> editableGrid) {
return new GridRowEditing<Plant>(editableGrid){
#Override
protected void onClick(ClickEvent event) {
}
};
}
}
And when you click on textBoxCell click handler you can start editing manually.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
//Here you can pass a new GridCell like with proper cell index and row index.
GridCell cell = new GridCell(getRowIndex(), getCellIndex());
editing.startEditng(cell);
}
});
nameColumn.setCell(button);
If you want to appear row editor in separate popup you have to design it manually.
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 have a gwt form which has about 70-100 widgets (textboxes,listboxes,custom widgets etc)
I am trying to implement the features of CUT ,COPY in this form .For this i have 2 buttons right on top of the form.
Now the problem i have is that when i click on the copy button , the widget that was focused in the form looses focus and i dont know which text to copy(or which widget was last focused before the focus getting to the copy button)
I was planning to implement blur handlers on all the widgets but i feel is a very laborious and not a good solution.
How can i get around this issue?
Thanks
Perhaps someone with a deeper insight might provide a better approach but I beleive adding blur handlers is perfectly valid. I do not quite see why you think it would be laborious, after all you don't need a different handler for each of your widgets, you can get away with only one(at most a couple for a variety of controls..), here is a very simple example,
public class CustomBlurHandler implements BlurHandler{
Object lastSource;
String text;
#Override
public void onBlur(BlurEvent event) {
if (event.getSource() instanceof TextBox) {
lastSource = event.getSource();
text = textBox.getSelectedText();
}
}
public Object getLastSource() {
return lastSource;
}
public String getText() {
return text;
}
}
and onModuleLoad :
public class Test implements EntryPoint {
CustomBlurHandler handler = new CustomBlurHandler();
public void onModuleLoad() {
TextBox text1 = new TextBox();
TextBox text2 = new TextBox();
text1.addBlurHandler(handler);
text2.addBlurHandler(handler);
Button b = new Button("Get last selected text");
b.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert(handler.getLastSource()+ " " + handler.getText());
}
});
RootPanel.get().add(text1);
RootPanel.get().add(text2);
RootPanel.get().add(b);
}
}