SimplePanel can only contain one child widget - gwt

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.

Related

GWT : Return VerticalPanel from a function in ClickHandler

I am trying to get a pop up when an image is clicked. below is the piece of code:
while(index<bookList.size()){
if(cellCount<4){
image[index] = new Image(imageList.get(index));
final int imageIndex = index;
table.setWidget(row, cellCount, new Image(bookList.get(index)));
table.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
VerticalPanel vPanel = new VerticalPanel();
vPanel = imageDetail.getPopup(popup, image[imageIndex]);
popup.setAnimationEnabled(true);
popup.setGlassEnabled(true);
popup.setAutoHideEnabled(false);
popup.setWidth("300px");
popup.setHeight("300px");
popup.add(vPanel);
popup.center();
}});
table.getFlexCellFormatter().setStyleName(row, cellCount, "ImageCell");
cellCount++;
index++;
}
Above code contain clickhandler which calls "getPopup" of imageDetail object. "getPopup" function returns a vertical Panel which is added to PopupPanel. ImageDetail class is as follows
public class ImageDetails extends Composite {
private Image closeButton;
VerticalPanel getPopup(final PopupPanel popup, Image image){
VerticalPanel vPanel = new VerticalPanel();
//Close Button
HorizontalPanel closePanel = new HorizontalPanel();
closeButton = new Image("/Images/closebutton.jpg");
closeButton.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
popup.hide();
}});
closePanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
closePanel.add(closeButton);
vPanel.add(closePanel);
VerticalPanel imagePanel = new VerticalPanel();
imagePanel.add(image);
vPanel.add(imagePanel);
return vPanel;
}
My questions are as following :
1) Is it ok to return panels from a function? If no, then why? If yes, why above code gives "Uncaught exception escaped com.google.gwt.event.shared.UmbrellaException: 3 exceptions caught: null; null; null"?
2) When i try to add vertical panel to popup panel in "getPopup" function and get popup panel from there, code returning same error as mentioned in first question. What am I missing?
Am i missing any initWidget(w) function call?
Thank you

GXT 3 Grid height and scroll

My environment is: GWTP 0.7, GWT 2.4.0, GXT 3.0.1. This question is somehow related to GXT 3 grid scrolling issue but with the exception that the solution there does not work for me.
My case:
public abstract class AbstractGridView extends ViewImpl implements AbstractGridPresenter.MyView {
protected final VerticalLayoutContainer cont = new VerticalLayoutContainer();
protected final VerticalLayoutData toolBarData = new VerticalLayoutData(1, -1);
protected final VerticalLayoutData contentData = new VerticalLayoutData(1, -1); //grid's layout config
protected final ToolBar toolBar = new ToolBar();
protected final TextButton addItemButton = new TextButton(ADDBUTTON_TEXT);
#Inject
protected AbstractGridView() {
toolBar.add(addItemButton);
cont.add(toolBar, toolBarData);
}
public Widget asWidget() {
return cont;
}
}
public class DepartmentsView extends AbstractGridView implements DepartmentsPresenter.MyView {
private final Grid<Department> grid;
private final ColumnModel<Department> model;
private final List<ColumnConfig<Department, ?>> config = new ArrayList<ColumnConfig<Department,?>>();
private final ListStore<Department> store = new ListStore<Department>(PROPS.key());
#Inject
public DepartmentsView() {
super();
config.add(new ColumnConfig<Department, Long>(PROPS.id()));
config.get(config.size() - 1).setHeader(IDCOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(PROPS.name()));
config.get(config.size() - 1).setHeader(NAMECOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(companyNameProvider));
config.get(config.size() - 1).setHeader(COMPANYCOLUMN_HEADER);
model = new ColumnModel<Department>(config);
grid = new Grid<Department>(store, model);
grid.getView().setAutoFill(true);
filters.initPlugin(grid);
filters.setLocal(true);
filters.addFilter(idFilter);
filters.addFilter(nameFilter);
filters.addFilter(companyFilter);
cont.add(grid);
}
}
All these are injected into BorderLayoutContainer in BaseView:
public class BaseView extends ViewImpl implements BasePresenter.MyView {
private final Viewport viewPort = new Viewport();
private final BorderLayoutContainer borderContainer = new BorderLayoutContainer();
private final ContentPanel west = new ContentPanel();
private final ContentPanel north = new ContentPanel();
private final ContentPanel center = new ContentPanel();
private final BorderLayoutData westData = new BorderLayoutData(200);
private final BorderLayoutData northData = new BorderLayoutData();
private final BorderLayoutData centerData = new BorderLayoutData();
#Inject
public BaseView() {
borderContainer.setBorders(true);
west.setResize(true);
center.setResize(false);
center.setHeight("auto");
north.setResize(false);
westData.setCollapsible(false);
westData.setCollapseMini(false);
westData.setMargins(new Margins(5, 5, 5, 5));
northData.setCollapsible(false);
northData.setMargins(new Margins(5));
northData.setSize(57);
centerData.setCollapsible(false);
centerData.setMargins(new Margins(5));
borderContainer.setWestWidget(west, westData);
borderContainer.setCenterWidget(center, centerData);
borderContainer.setNorthWidget(north, northData);
viewPort.add(borderContainer);
}
public Widget asWidget() {
return viewPort;
}
#Override
public void setInSlot(Object slot, Widget content) {
setMainContent(content);
}
private void setMainContent(Widget content) {
center.clear();
if (content != null) {
center.setWidget(content);
}
}
}
So, if I do not attach contentData when adding my grid to VerticalLayoutContainer (cont) it renders equally to as VerticalLayoutData(1, -1) which is: grid's height is not computed at all and it's content flows under the bottom of the page with no scrollbar to get to any row lower the bottom page border. If I set VerticalLayoutData (1, 1) as in the link at the beginning of my question I can only see grid's header and grid's content's height is computed to 0px (though it's present in the page's DOM). And only if I set height manually, for example setHeight(300) grid's height sets that quantity of pixels and vertical scrollbar is shown to get to any row in the grid's store, though one can easily understand manually setting grid's height is not of any reason solution in case of Viewport managed application window.
What have I missed in widgets config or is this a bug with any reasonable workaround for it?
I've found the layout problem:
center.setResize(false); // BaseView's constructor
That made BorderLayoutContainer's ContentPanel not to resize child widget (VerticalLayoutContainer) to fit.

GWT RootPanel not interacting

I have created Login Class:
public class LoginPage extends VerticalPanel implements ClickHandler {
ApplicationMethods appMthd;
private RootPanel rootPanel;
TextBox txtUserEmail;
PasswordTextBox txtPassword;
Button btnLogin;
String strEmail, strPass;
public LoginPage(ApplicationMethods appMthd) {
this.appMthd = appMthd;
rootPanel = RootPanel.get();
rootPanel.setSize("320", "480");
btnLogin = new Button("Login");
btnLogin.setText("Login");
rootPanel.add(btnLogin, 224, 256);
btnLogin.setSize("79px", "35px");
btnLogin.addClickHandler(this);
txtUserEmail = new TextBox();
rootPanel.add(txtUserEmail, 36, 161);
txtUserEmail.setSize("240px", "20px");
txtPassword = new PasswordTextBox();
rootPanel.add(txtPassword, 36, 207);
txtPassword.setSize("240px", "20px");
}
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
if(event.getSource() == btnLogin)
{
strEmail = txtUserEmail.getText().toString();
strPass = txtPassword.getText().toString();
appMthd.onLogin(strEmail, strPass);
}
else
{
Window.alert("Coming Soon..!!");
}
}
}
But I can't access any textbox or click on button.
Because Parent class is RootPanel.
If I am using :
add(txtUserEmail);
add(txtPassword);
add(btnReg);
add(btnLogin);
btnLogin.addClickHandler(this);
Then, it is accessible. In this, parent class is VerticalPanel.
So, how can I resolve this problem for RootPanel.?
Please help me for this.
Thanks in advance.
When you use VerticalPanel you can't specify the x,y
You can of course extend AbsolutePanel if you want to specify x,y
but since you're programming for mobile, that's a good thing.
If you want to create mobile applications with phonegap and gwt
you should check the mgwt and hello world mgwt
public LoginPage() {
rootPanel = RootPanel.get();
rootPanel.setSize("320", "480");
rootPanel.add(this);
btnLogin = new Button("Login");
btnLogin.setText("Login");
add(btnLogin);
btnLogin.setSize("79px", "35px");
btnLogin.addClickHandler(this);
txtUserEmail = new TextBox();
add(txtUserEmail);
txtUserEmail.setSize("240px", "20px");
txtPassword = new PasswordTextBox();
add(txtPassword);
txtPassword.setSize("240px", "20px");
}

GWT client side cropping

I'm stuck on integrating gwt with JCrop or imgareaselect javascript libraries
I have an image, which url is changing each time the client change the file choosen from its filesystem (using an upload widget).
I want the user select the area in its image, this way i will be able to have images with aspect ratio respected respect to the client wishes.
Problem is i can't succed in making imgareaselect or jcrop called on load event, each time i have null, if i try jquery ("imagepreview") jquery is unknow at execution time, if i try some $("#imagepreview") i get a $ is undefined...
PLEASE any help...
Regards.
public class ThisWidget extends LayoutContainer {
public void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new VBoxLayout());
setWidth("100%");
final FormPanel uploadPhotoPanel = new FormPanel();
uploadPhotoPanel.setWidth("100%");
uploadPhotoPanel.setHeight("150px");
Label label = new Label("Ajouter une photo");
add(label);
uploadPhotoPanel.setAction(GWT.getModuleBaseURL()
+ "photoload/uploadpreview.ctz");
uploadPhotoPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
uploadPhotoPanel.setMethod(FormPanel.METHOD_POST);
final FileUploadField file = new FileUploadField();
file.setName("FILE");
uploadPhotoPanel.add(file);
file.addHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent event) {
uploadPhotoPanel.submit();
}
}, ChangeEvent.getType());
final Button btn = new Button("Ajouter",
new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
uploadPhotoPanel.submit();
}
});
final Image previewimage;
previewimage = new Image();
DOM.setElementAttribute(previewimage.getElement(), "id",
"previewimage");
previewimage.setSize("200px", "200px");
previewimage.addLoadHandler(new LoadHandler(){
protected native void onPreviewLoad() /*-{
document.getElementById("previewimage").imgAreaSelect({
aspectRatio : '1:1',
handles : true,
fadeSpeed : 200
});
}-*/;
#Override
public void onLoad(LoadEvent event) {
onPreviewLoad();
}});
uploadPhotoPanel
.addSubmitCompleteHandler(new SubmitCompleteHandler() {
#Override
public void onSubmitComplete(SubmitCompleteEvent event) {
previewimage.setUrl(GWT.getModuleBaseURL()
+ "photoload/downloadpreview.ctz?tsp="
+ System.currentTimeMillis());
}
});
add(uploadPhotoPanel);
add(previewimage);
add(btn);
}
Use $wnd.$("#imagepreview") or $wnd.jquery("#imagepreview").
(Updated to fix the forgotten #)

GWT Tab panel close

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("&nbsp&nbsp&nbsp"));
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);
}