Composite that are Widget Container

[masini]

I did a custom Composite that is also a Widget container (a simple FieldSet).
All works fine, I can drag and drop it into the Designer View. The problem is that, when I try to add other widgets to it, I can't do that in the designer view, but only hand-coding.
I also tried to implements HasWidgets, with no success.
Which is the correct approach ?
I read this post on the forum:

http://www.instantiations.com/forum/viewtopic.php?t=1457

and I agree about everything is written there, but I must have an approach to code my "Panel" using Composite.
Any suggestion ?

[peterblazejewicz]

hi,

guys from Instantiations should post some more,
For me it looks (and I have used that on many occasions to wrap raw elements into drag&drop featuers) that:
- Drag&Drop requries at least something like FlowPanel/ComplexPanel with a method like "add" and "add at position" to allow us to add widget and then reorder it in widget tree.
- All widgets needs to descent from Widget to be D&D (WYSWIG) in Desing view,
- an "drop" area (here Panel) in composite source widget needs to have "Expose that widget" feature applied1,

example for you:

// IMPL:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlowPanel;

public class FieldsetImpl extends FlowPanel {
   private Element legend;

   public FieldsetImpl() {
      setElement(DOM.createElement("fieldset"));
      DOM.setInnerHTML(getElement(), "");
      legend = DOM.createElement("legend");
      DOM.appendChild(getElement(), legend);

   }

   /* @Override */
   public String getTitle() {
      return DOM.getInnerText(legend);
   }

   /**
    * Override to have title'd legend
    */
   /* @Override */
   public void setTitle(String title) {
      DOM.setInnerText(legend, (title == null ? "" : title));
      super.setTitle(title);
   }

}

now Composite:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.ui.Composite;

public class Fieldset extends Composite {

   private FieldsetImpl fieldset;

   public Fieldset() {
      fieldset = new FieldsetImpl();
      initWidget(fieldset);
   }
   public FieldsetImpl getFieldset() {
      return fieldset;
   }
   /* @Override */
   public void setTitle(String title) {
      fieldset.setTitle(title);
   }
   /* @Override */
   public String getTitle() {
      return fieldset.getTitle();
   }

}

(NOTE: Composite also created using D&D whyshiw Design view, however there are no other visible elements on that wiget),
note that I had to expose decorated widget in order to pick it by design view:



CODE GENERATED by GWT Designer after using D&D of those custom widgets:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class TestXML implements EntryPoint {
   JavaScriptObject xml;

   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();
      final Fieldset fieldsetWidget = new Fieldset();
      rootPanel.add(fieldsetWidget);
      fieldsetWidget.setTitle("Fieldset");
      final PasswordTextBox passwordTextBox = new PasswordTextBox();
      fieldsetWidget.getFieldset().add(passwordTextBox);
      passwordTextBox.setText("password");
      final Button loginButton = new Button();
      fieldsetWidget.getFieldset().add(loginButton);
      loginButton.setText("Login");

   }

}

hth
regards,
Peter

[Eric Clayberg]

This same question was asked and answered via e-mail.

In order to provide a drop zone, a custom composite must expose some panel that accepts children using the "Expose Widget" command.



Below is a simple custom Composite that illustrates this. Drop this into a window and you should be able to drop widgets into the inner panel.

Code: Select all

import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

public class CustomContainer extends Composite {

   private AbsolutePanel absolutePanel;
   public CustomContainer() {

      final VerticalPanel verticalPanel = new VerticalPanel();
      initWidget(verticalPanel);

      final Label dropWidgestOnLabel = new Label("Drop widgets on the panel below:");
      verticalPanel.add(dropWidgestOnLabel);

      absolutePanel = new AbsolutePanel();
      verticalPanel.add(absolutePanel);
      absolutePanel.setSize("100%", "200px");
   }
   public AbsolutePanel getPanel() {
      return absolutePanel;
   }
}

Unfortunately, there is no way to provide generic drag/drop support for unknown container classes. As you will see in GWT Designer, each panel type in GWT requires custom drag/drop support for placing and sizing widgets. Thus, if you want to use some inner panel as a drop target for child widgets, that panel must be exposed as a public component so that Designer know what it is and where it is. The "HasWidgets" interface by itself does not provide enough (any) meta information to make generic drag/drop practical or very useful.