Simple refactoring question

[rcox]

I have a reasonably complex design I'm working on with GWT Designer. After I'm done with the design I want to refactor the structures into their various natural objects (users, roles, etc.)

If I create another method on my entry point class and copy chunks of refactored code to a new method on the class the designer still shows my design time data and objects.

If at isDesignTime() in the entry point class I instantiate an object that has a method to render the same set of objects it appears that nothing happens...no design-time data and GWT objects are not displayed.

I know my isDesignTime method is working properly because I call a method on the entry point class the same code and it works fine and I see the objects at design time. I have a separate runtime path and it also works fine at runtime. The object that is used to render the GWT objects for a single instance works for not only a single instance, but multiple instances as I had intended at runtime. So I know the object works fine too.

I don't see any significant difference between creating the GWT objects from a method of the entry point class and creating the objects from a rendering method of a new object. Am I missing something fundamental about how GWT Designer works?

Thanks for your help.

[Eric Clayberg]

It would be helpful to see an actual code example (even better, if it is annotated) and any relevant screen shots.

I don't understand the issue from your description.

[rcox]

Sure. Here's a very simple example:

Entry point class called "RefactorExample":

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class RefactorExample implements EntryPoint {
   public void onModuleLoad() {
      //renderUser();
      User user = new User();
      user.renderUser();
   }
   
   public void renderUser() {
      RootPanel rootPanel = RootPanel.get();
      final Label label = new Label("Label 1");
      rootPanel.add(label);
   }
}


A client object called User in user.java:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class User {
   
   public void renderUser() {
      RootPanel rootPanel = RootPanel.get();
      final Label label = new Label("Label 1");
      rootPanel.add(label);
   }
}


In the RefactorExample object there is a method called renderUser() that does exactly the same thing as the renderUser() method of the User object. If you comment out the instantiation of User and subsequent call to user.renderUser() and instead call the renderUser() method on the RefactorExample class, the design screen of GWT Designer shows the label with the text "Label 1" as you would expect. If you comment out the call to RefactorExample.renderUser and instead remove the comments in front of the instantiation of User and subsequent call to user.renderUser(), GWT Designer displays "Empty Absolute Panel". Both examples work exactly the same way showing the label at runtime as you would expect. Can GWT Designer not follow the refactoring of the user render code into its own object or am I missing something?

Thanks for your help.

[Eric Clayberg]

GWT Designer only deals with GUI classes. User is not a GUI class so it is ignored.

Make it a subclass of Composite, add it like any other component, and it will show up just fine.

[rcox]

Thanks Eric. Let me know if there is somewhere I can get all the details on what GWT will see and what it won't.

I did another example where my "User" class extended from Composite as you recommended. This class only creates a Label and calls initWidget with it...so very simple composite object.

Code: Select all

package com.mycompany.project.client;

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

public class User extends Composite {

   public User() {
      final Label newUserLabel = new Label("New User");
      initWidget(newUserLabel);
   }

}


Perhaps I should say more about what I'm aiming to do. That is to use GWT Designer to "rough out" a lower level object and then use it in a higher level design. So far, so good. However, because I also want to use GWT Designer for the higher level objects and layout I need to work through the design-time versus runtime issues because I want to be able to instantiate multiple lower level objects at runtime while only working in the Design screen for the high level object with only one instance of the lower level object showing for clarity and interaction performance with the Design window.

I instantiatedthe User composite from onModuleLoad(). If I add that User object to the RootPanel I get my new User composite showing its one and only label. Great. If I add the new User composite to the Vector and add the new user to the RootPanel based on retrieving it from the Vector then it works great at runtime like I want it to, but does not show up in the Design mode.

Code: Select all

package com.mycompany.project.client;

import java.util.Vector;

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

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class RefactorExample implements EntryPoint {
   public Vector<User> users;
   
   public void onModuleLoad() {
      final RootPanel rootPanel = RootPanel.get();

      final User user = new User();
      users = new Vector<User>();
      users.add(0, user);
      rootPanel.add(users.elementAt(0), 0, 0);
   }
}


So there is an honest-to-goodness GWT composite object being instantiated and added to the RootPanel by retrieving it from the Vector. It doesn't matter whether I cast the object to (User) in the rootPanel.add. Either way GWT Designer doesn't "see" it in the Design window.

What technique do people use to get more robust coding methods for runtime while still maintaining design-time workability? I'm hoping to separate the creation of the design time data and objects away so that most of the code works the same whether it's at design-time or runtime. Sorry if this is so basic, but right now it's rather core to how I want to work with GWT Designer and how far I can go.

Thanks for your help.

[Eric Clayberg]

That is very non-standard code pattern, that would not be supported by any GUI builder. Designer looks for and parses known GUI patterns to reconstruct a GUI from Java source. It does not execute all the code in a class (in fact, most non-GUI code, conditional code, looping code, etc. in a class is intentionally ignored). Instead it analyzes known static GUI patterns such as creation using constructors, creation using factory methods, assignments to variables/fields, passing objects to other methods in the class, etc. Designer does not have knowledge about other (non GUI) classes such as containers. It does not know, for example, that the sequence users.add(0, user) followed somewhere by users.elementAt(0) is a put/get for a component instance. We could add such knowledge to the parser, but is would be too impractical for us to support exotic patterns like this.

In practice, Designer is able to reverse engineer (read and write) 100% of the code generated by other GUI builders and 80-90% of code created by hand. Code that is highly dynamic or that uses very unusual patterns falls into the 10-20% that we don't even try to support. Designer is the only Java GUI builder that can effectively reverse engineer hand written code at all. Most popular Java GUI builders (like the one in NetBeans) can't even parse their own generated Java code (which makes them dangerous to use) let alone code created by other tools or by hand. Designer is very unique in that ability, but even it has its limitations.

[rcox]

Thanks for the reply. I have a good appreciation for what you guys have accomplished and have gotten a lot of good out of GWT-Designer so far. Knowing that adding composite objects to a vector was "very non-standard" (I'm surprised) is somewhat useful, but knowing a pattern to straddle the runtime/design-time boundary would be more useful. How do you design a single instance composite, use it in another design or composite, and then turn the code into production code with standard things like collections? Or am I missing another obvious concept or just asking too much? Should I use GWT-Designer for initial designs and then set off into coding land once I have to a certain place?

Thanks again for your reply in helping figure out where I and GWT-Designer fit in the mix.

[Eric Clayberg]

Knowing that adding composite objects to a vector was "very non-standard" (I'm surprised) is somewhat useful

Having never seen that pattern used in 20 years of GUI development and 10 years of Java development, I would definitely say it is "very non-standard". No other GUI builder generates (or parses) code like that, and I could not find any examples like that within our collection of the 1000+ test cases that we use with Designer (mostly user submitted).

knowing a pattern to straddle the runtime/design-time boundary would be more useful

I honestly don't know what you mean by the above. The standard code that Designer generates works fine at runtime and design time and closely matches what most developers would write by hand.

How do you design a single instance composite, use it in another design or composite

Composite classes created with Designer can be easily re-used in other windows or other composites either singularly or in multiple instances. Reuse of a common component is probably the main reason to create a Composite to begin with.

then turn the code into production code with standard things like collections?

Again, I am not sure what you are getting at or why you want to use a collection for this purpose. I see no benefit to using a collection in the example you provided. Unless you are talking about building a highly dynamic UI that constructs itself based on various runtime attributes, I don't see why you would ever use one (and even then, using a collection to hold GUI elements seems to be of dubious value). If you are trying to build a highly dynamic UI, then a GUI builder isn't going to help you very much. It will help with the individual chunks (the Composites) but not with the main window that brings it all together. GUI builders by their very nature tend to deal with statically defined elements that can be shown to the user for manipulation. If the content of your UI is not know until runtime, the GUI builder doesn't have much to show at design time.

Should I use GWT-Designer for initial designs and then set off into coding land once I have to a certain place?

Given what it sounds like you want to do (and without a more concrete example, I can't be sure), you can certainly use Designer to create all of your chunks of UI elements as Composites and then combine them dynamically later on in any way that you want (that last bit you would do by hand).

[rcox]

Unless you are talking about building a highly dynamic UI that constructs itself based on various runtime attributes, I don't see why you would ever use one (and even then, using a collection to hold GUI elements seems to be of dubious value). If you are trying to build a highly dynamic UI, then a GUI builder isn't going to help you very much. It will help with the individual chunks (the Composites) but not with the main window that brings it all together. GUI builders by their very nature tend to deal with statically defined elements that can be shown to the user for manipulation. If the content of your UI is not know until runtime, the GUI builder doesn't have much to show at design time.

This is exactly what I'm talking about. I think I have my answer and will use GWT-Designer to rough out the first set of objects and code the more complex UI dynamics from there. I evidently thought it could do more than I originally thought. Thanks.

[Eric Clayberg]

I think I have my answer and will use GWT-Designer to rough out the first set of objects and code the more complex UI dynamics from there.

Yes. Using GWT Designer to create the basic Composite objects would seem to match your needs. You could also use it to mock up any more complex screens.