Visual Inheritance Example

GWT Designer allows you to quickly create the modules, composites, panels, remote services and other elements that comprise Google Web Tookit applications.

Moderators: Konstantin.Scheglov, gnebling, Alexander.Mitin, jwren, Eric Clayberg

Visual Inheritance Example

Postby Eric Clayberg » Tue Nov 07, 2006 6:14 am

Supporting visual inheritance of Java GUI components (whether they be SWT, Swing or GWT) is quite difficult.

The first release of GWT Designer allowed the creation of custom composites that could be embedded within other Composites or Modules.

The latest build now adds initial support for visual inheritance of Composites.

The following is an example of three Composites in an inheritance hierarchy. The following Composite uses an AbsolutePanel and two buttons. The AbsolutePanel and one of the Buttons have been exposed as public components using the Expose Widget command. Expose Widget converts a component to a field and adds a public accessor for it. Finally, the text property of the second Button has been exposed as a public property of the Composite using the Expose Property command. Expose Property adds a pair of accessors for getting and setting the desired property of the target widget.

Image Image Image

Code: Select all
package com.mycompany.project.client;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
public class MyC extends Composite {
   private Button helloButton;
   private AbsolutePanel absolutePanel;
   private Button button;
   public MyC() {
      absolutePanel = new AbsolutePanel();
      initWidget(absolutePanel);
      button = new Button();
      absolutePanel.add(button, 147, 27);
      button.setSize("166px", "68px");
      button.setText("New Button");
      helloButton = new Button();
      absolutePanel.add(helloButton, 32, 166);
      helloButton.setSize("166px", "68px");
      helloButton.setText("Hello");
   }
   public Button getButton() {
      return button;
   }
   public AbsolutePanel getAbsolutePanel() {
      return absolutePanel;
   }
   public String getHelloButtonText() {
      return helloButton.getText();
   }
   public void setHelloButtonText(String text) {
      helloButton.setText(text);
   }
}

The second Composite inherits from the first and adds a CheckBox via the accessor on the exposed AbsolutePanel from the superclass. The exposed Button from the superclass has also been moved. Finally, the styleName property of the CheckBox has been exposed.

Note that the exposed AbsolutePanel and Button from the superclass show up in the component tree with a small "i" overlay icon. The second Button defined in the first Composite does not show up in the tree because it is private to that Composite.

Image

Code: Select all
package com.mycompany.project.client;
import com.google.gwt.user.client.ui.CheckBox;
public class MyC2 extends MyC {
   private CheckBox checkBox;
   public MyC2() {
      super();
      getAbsolutePanel().setWidgetPosition(getButton(), 45, 35);
      checkBox = new CheckBox();
      getAbsolutePanel().add(checkBox, 246, 60);
      checkBox.setText("New CheckBox");
   }
   public String getCheckBoxStyleName() {
      return checkBox.getStyleName();
   }
   public void setCheckBoxStyleName(String styleName) {
      checkBox.setStyleName(styleName);
   }
}

The final Composite inherits from the second. It does not add any widgets (it could), but it does override the text setting of the second Button using the accessor defined in the first Composite and sets the style of the CheckBox using the accessor defined in the second Composite.

Image

Code: Select all
package com.mycompany.project.client;
public class MyC3 extends MyC2 {
   public MyC3() {
      super();
      setHelloButtonText("World");
      setCheckBoxStyleName("gwt-MenuBar");
   }
}
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA

Postby boscomonkey » Thu Dec 07, 2006 12:06 pm

Does the base widget have to be an AbsolutePanel? And does it have to be publicly exposed (what about protected)?

BTW, in 1.0.1, if the base composite class is abstract, the designer pops up an error when trying to design a derived class.
boscomonkey
 
Posts: 3
Joined: Thu Dec 07, 2006 11:02 am

Postby boscomonkey » Thu Dec 07, 2006 3:00 pm

boscomonkey wrote:BTW, in 1.0.1, if the base composite class is abstract, the designer pops up an error when trying to design a derived class.


FWIW, the December 7th version of GWTDesigner_v1.0.1_win32_x86.exe does not pop up an error dialog when the base class is abstract. Seems like the version of GWTDesigner_v1.0.1_win32_x86.exe I downloaded on Dec 5th is different from the latest.

Hey, how about embedding a sub-sub-version number or a build date in the filename?
boscomonkey
 
Posts: 3
Joined: Thu Dec 07, 2006 11:02 am

Postby boscomonkey » Thu Dec 07, 2006 3:35 pm

boscomonkey wrote:Does the base widget have to be an AbsolutePanel? And does it have to be publicly exposed (what about protected)?

I'm discovering questions to my answers with the Dec 7, 2006 release of GWTDesigner_v1.0.1_win32_x86.exe. Visual inheritance is working much better in this release.
  • The base widget does NOT have to be an AbsolutePanel. I tried a VerticalPanel and that worked fine.
  • However, it seems that I have to expose the base widget publicly in order to be able to add other widgets to it in derived classes. I tried exposing with protected but it doesn't show up in derived classes and thus I couldn't add widgets.
[/list]
boscomonkey
 
Posts: 3
Joined: Thu Dec 07, 2006 11:02 am

Postby Eric Clayberg » Fri Dec 08, 2006 6:21 am

boscomonkey wrote:if the base composite class is abstract, the designer pops up an error when trying to design a derived class.

In general, Designer does not support subclassing of abstract UI classes (as those classes can't be instantiated).

With visual inheritance, the direct superclass of the class you are editing needs to be concrete.

boscomonkey wrote:The base widget does NOT have to be an AbsolutePanel. I tried a VerticalPanel and that worked fine.

It should work with most panel types other than Grids and FlexTables (it may work for those in the future).

boscomonkey wrote:it seems that I have to expose the base widget publicly in order to be able to add other widgets to it in derived classes. I tried exposing with protected but it doesn't show up in derived classes and thus I couldn't add widgets.

The latest build will support widgets exposed as protected in the superclass.
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA

Re:

Postby giorgiog » Fri Sep 19, 2008 6:59 am

Eric Clayberg wrote:
boscomonkey wrote:it seems that I have to expose the base widget publicly in order to be able to add other widgets to it in derived classes. I tried exposing with protected but it doesn't show up in derived classes and thus I couldn't add widgets.

The latest build will support widgets exposed as protected in the superclass.

Dunno why but for me it is working like boscomonkey said: in the editor, in derived classes, I can't see any widget exposed as protected in the superclass. They show up if exposed as public.

Another strange thing: I'm trying to extend a DialogBox. This is the superclass:
1.jpg
superclass
1.jpg (68.48 KiB) Viewed 3944 times

Now this is the derived class:
2.jpg
2.jpg (73.41 KiB) Viewed 3942 times

As you can see the guidelines for flexTable and ftblContext grids are in the wrong position. Plus trying to drop anything in any position change the dialog shape in this way:
3.jpg
3.jpg (69.37 KiB) Viewed 3943 times

So I can't add anything in design mode. I'm on windows xp atm, I'll try on linux too, later at home.

UPDATE: the guidelines-alignment is ok on linux.
Giorgio Gelardi
senior designer & developer at GESINF srl
giorgiog
 
Posts: 6
Joined: Wed Sep 10, 2008 1:01 am
Location: Rome, Italy

Re: Re:

Postby Eric Clayberg » Sat Sep 20, 2008 6:26 am

Give this a try using the latest build.
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA

Re: Re:

Postby giorgiog » Sat Sep 20, 2008 7:44 am

Eric Clayberg wrote:Give this a try using the latest build.

Now it seems perfect on windows too, thank you.
Giorgio Gelardi
senior designer & developer at GESINF srl
giorgiog
 
Posts: 6
Joined: Wed Sep 10, 2008 1:01 am
Location: Rome, Italy

Re: Re:

Postby Eric Clayberg » Sat Sep 20, 2008 8:27 am

giorgiog wrote:Now it seems perfect on windows too, thank you.

Good. Thanks for letting us know.
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA


Return to GWT Designer

Who is online

Users browsing this forum: No registered users and 3 guests