Documentation on upgrade from 0.9.3 to 2.0.

[sb10]

Please provide a page of documentation on upgrading. We now have code
that is completely obsolete.

Thank you.

[Sanjiv Jivan]

I would suggest you start off with reading the Ext 1.x to 2.0 migration Guide as it closely mirrors the overall changes that took place from GWT-Ext 0.9 to 2.0.  http://extjs.com/learn/Ext_1_to_2_Migration_Guide

On the GWT-Ext specific stuff, most of the <Widget>Config classes have been removed and the methods on them are now  present directly on the <Widget> class. So directly create the component using the default constructor, and call the setters on it instead of the config class.

I would strongly recommend going through each GWT-Ext Showcase sample, and closely examine the corresponding source viewable by clicking the "View Source" button on the top toolbar. It would be even better if you tried running the samples of interest locally. This is probably the best form of tutorial by example and I'm confident you'll get a good sense of how to upgrade and start using the new features. There are over 65 samples in the Shwocase demo.

Ofcourse if you have any questions along the way of are facing any issues, let us know and we'll help out.

Thanks,
Sanjiv

[Arthur]

Hi Sanjiv!

Thank you for the great job! I like a lot GWT Ext.
I've implemented my application with GWT Ext 0.93. And it looks and
works very well:)
I'll migrate it soon to GWT Ext 2.0.
It will be cool to stick this topic on the top. It's very useful for a
lot of people who'll migrate their apps to 2.0.

Best regards,
Arthur

On Feb 8, 3:10 am, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> I would suggest you start off with reading the Ext 1.x to 2.0 migration
> Guide as it closely mirrors the overall changes that took place from GWT-Ext
> 0.9 to 2.0. http://extjs.com/learn/Ext_1_to_2_Migration_Guide
>
> On the GWT-Ext specific stuff, most of the <Widget>Config classes have been
> removed and the methods on them are now present directly on the <Widget>
> class. So directly create the component using the default constructor, and
> call the setters on it instead of the config class.
>
> I would strongly recommend going through each GWT-Ext Showcase sample, and
> closely examine the corresponding source viewable by clicking the "View
> Source" button on the top toolbar. It would be even better if you tried
> running the samples of interest locally. This is probably the best form of
> tutorial by example and I'm confident you'll get a good sense of how to
> upgrade and start using the new features. There are over 65 samples in the
> Shwocase demo.
>
> Ofcourse if you have any questions along the way of are facing any issues,
> let us know and we'll help out.
>
> Thanks,
> Sanjiv
>

[HappyEngineer]

I'm still in the process of converting to 2.0 and I'd like to help out
by listing some of the issues I encountered.

All the special case tab stuff has gone away. Now you just use Panel
objects and set the title of the Panel and add it to a TabPanel.

If any panels or tables or tabs don't show up (or if only the very
first line shows up) then odds are good that it's a style issue.
Comment out all calls to setStyleName and addStyleName. Apparently in
2.0 those methods actually overwrite the styles that are used
internally whereas before they only messed with user styles (as far as
I can tell). I don't know why addStyleName screws things up even when
the style is innocuous, but it does.

If you get javascript errors about Ext being null or not existing then
it's almost certainly the result of some combination of:
- importing the new extjs javascript files in the wrong order
- importing both the old and new extjs javascript files
- importing some crazy combination of both old and new extjs files
- failing to import a js file that you need.
- In your *.gwt.xml you need to add:
<inherits name='com.gwtext.GwtExt'/>
<inherits name='com.gwtext.MultiSelect'/>
The order is critical. And, you need both for some reason.

For some reason Intellij was caching the old js files and when I added
the new ones I was getting the wrong files imported. Very frustrating
until I figured out what was happening.

Use firebug in firefox to find out if you are importing the correct
extjs files and if they are all be successfully loaded.

The old stupidity where you needed a Form to render various form
fields is no longer there. You can just create input fields and add
them anywhere without needing to render them inside the form first.

You need to add layouts to many/most Panel objects. You can do things
like:
Panel panel = new Panel();
panel.setLayout(new VerticalLayout()).

You can use FitLayout to expand a panel to fit its container, but note
that this somehow forces things so that you cannot have more than one
object inside of it. So if you do that, make sure to add only one
object into that panel. You can obviously just create another panel
inside of that and add multiple objects to it.

I haven't figured out when the layout is required and when it isn't.
You can't add layouts to some things like TabPanel objects.

Sometimes I've had a difficult time getting a Panel to display with a
style. In those cases I just create a gwt VerticalPanel or SimplePanel
or HorizontalPanel and add the style to that. There aren't any styling
conflicts with those objects.

I haven't finished migrating to 2.0 yet, so there are probably other
issues yet. But those are the ones I've encountered so far.

[Michel]

Hi.

I saw that the LoginPanel example is gone in the 2.0 showcase. I'm
still in the process of learning GWT-Ext... and all my development was
basically based in the LoginPanel...

Can you please add the LoginPanel 2.0 version to your showcase?
That would be awesome.

Best regards,
Michel.

On Feb 8, 3:10 am, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:

> I would suggest you start off with reading the Ext 1.x to 2.0 migration
> Guide as it closely mirrors the overall changes that took place from GWT-Ext
> 0.9 to 2.0. http://extjs.com/learn/Ext_1_to_2_Migration_Guide
>
> On the GWT-Ext specific stuff, most of the <Widget>Config classes have been
> removed and the methods on them are now present directly on the <Widget>
> class. So directly create the component using the default constructor, and
> call the setters on it instead of the config class.
>
> I would strongly recommend going through each GWT-Ext Showcase sample, and
> closely examine the corresponding source viewable by clicking the "View
> Source" button on the top toolbar. It would be even better if you tried
> running the samples of interest locally. This is probably the best form of
> tutorial by example and I'm confident you'll get a good sense of how to
> upgrade and start using the new features. There are over 65 samples in the
> Shwocase demo.
>
> Ofcourse if you have any questions along the way of are facing any issues,
> let us know and we'll help out.
>
> Thanks,
> Sanjiv
>

[HappyEngineer]

Some additional things I've learned:

Calling setStyleName or addStyleName on a Panel will screw up the
panel because it overrides the internal styles. Using setBodyStyle
works, but there doesn't appear to be a method called
setBodyStyleName. Does anyone know of a way to set a new style name to
a Panel without messing up the panel's existing styles? addStyleName
doesn't work for that purpose.

I'm having a lot of trouble with panel heights. setHeight("100%")
never seems to be helpful. So far it seems that it's always necessary
to set the height of an outer panel to some specific pixel height.
Inner panels can have their height set with setAutoHeight(true). That
sometimes works and sometimes doesn't. At the moment I am having to go
around and set all panels to fixed heights and then, starting at the
outermost level, try different layouts and height settings until I get
everything adjusted. I still don't have a good understanding of how
all the heights and layouts and auto heights are supposed to work
together. I wish the panels wouldn't always default to height:0px.
That makes life difficult.

You can add buttons to any panel. This makes life easy if you want to
add a button to a panel without having to worry about using a border
layout with the buttons set to the bottom (which then requires
figuring out how to set the heights properly). To add buttons in other
places just add buttons to a Toolbar and then call setTopToolbar or
setBottomToolbar on a panel. I haven't yet figured out how to make
normal looking buttons appear at the top of a panel (as opposed to
toolbar buttons).

[Arthur]

Hi HappyEngineer,

Thank you for the advices. It's very helpful.

I've discovered another trick with GWT Ext 2.0.
If you use SimpleStore in your application you need to call
store.load() after it's created. It wasn't neccessary to do in GWT Ext
0.93.

Example :

Store store = new SimpleStore(...);
store.load();

Best regards
Arthur

[HappyEngineer]

One more major issue. Never ever setHeight("100%") on any panel. It
never works properly and often causes crazy problems. I worked for a
long time trying to figure out why scrolling wasn't working and why
some panels would expand into other panels and clip rather than
scroll. Turns out that a setHeight("100%") was doing crazy things.

I always avoid height:100% in css, but I thought that gwtext would
interpret it differently since it used javascript to set exact heights
when resizing of the window is done. No such luck. Just avoid setting
the height with percentages. You can use some layouts that help. You
can set autosizing on some things (although I'm not certain how well
that works).

[wendy]

Hi Michel,

My development was similar to the LoginPanel, and I have converted
most of my code to 2.0.
Below is what my converted code looks like...
I do have a few bugs that I haven't figured out yet though....
1. I must click on the "Login / Register" button twice in order for
the window to appear.
2. When you press "Cancel" on the popup window, it disappears but
leaves a blue square in it's place.
3. Then I can't get the login window to appear again unless I
refresh the page.

I hope that this code gets you a little further along in your
conversion to 2.0. I would love to see the LoginDialog in Showcase2.0
as well since I'm still trying to work out a few bugs here.

LoginDialogPanel.java ....

public Panel getViewPanel() {

final Window dialog = new Window();
dialog.setTitle("Sign In");
dialog.setClosable(true);
dialog.setWidth(500);
dialog.setHeight(400);
dialog.setPlain(true);
dialog.setLayout(new BorderLayout());
dialog.setCloseAction(Window.HIDE);
dialog.setShadow(true);


final Button signInBtn = new Button("Sign In");
signInBtn.addListener(new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
// do stuff here
}
});

final Button registerBtn = new Button("Register");
registerBtn.addListener(new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
/// do stuff here
}
});

dialog.addButton(signInBtn);
dialog.addButton(registerBtn);


Button cancelBtn = new Button("Cancel");
cancelBtn.addListener(new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
dialog.hide();
}
});

dialog.addButton(cancelBtn);



TabPanel tabPanel = new TabPanel();
tabPanel.setBodyBorder(false);
tabPanel.setEnableTabScroll(true);
tabPanel.setAutoScroll(true);
tabPanel.setAutoDestroy(false);
tabPanel.setActiveTab(0);


// Sign In Tab Contents
signInTab = new FormPanel();
signInTab.setTitle("Sign In");
signInTab.setFrame(true);
signInTab.setIconCls("tab-icon");
signInTab.setAutoScroll(true);
signInTab.setClosable(false);
signInTab.setWidth(300);
signInTab.setLabelWidth(75);
signInTab.setAutoHeight(true);
signInTab.setPaddings(10);

FieldSet signInFieldSet = new FieldSet("Sign In"); // FieldSet
puts that line border around the set of objects it contains.

TextField email = new TextField("Email", "email", 230);
email.setVtype(VType.EMAIL);
email.setAllowBlank(false);
signInFieldSet.add(email);

TextField password = new TextField("Password", "password",
230);
password.setAllowBlank(false);
password.setPassword(true);
signInFieldSet.add(password);

signInTab.add(signInFieldSet);

// Register Tab Contents
FormPanel registerTab = new FormPanel();
registerTab.setTitle("Register");
registerTab.setFrame(true);
registerTab.setIconCls("tab-icon");
registerTab.setAutoScroll(true);
registerTab.setClosable(false);
registerTab.setAutoHeight(true);
registerTab.setPaddings(10);
registerTab.setWidth(300);
registerTab.setLabelWidth(75);
registerTab.setBorder(true);

FieldSet registerFieldSet = new FieldSet("Register");

TextField registerEmail = new TextField("Email", "email",
200);
registerEmail.setVtype(VType.EMAIL);
registerEmail.setAllowBlank(false);
registerFieldSet.add(registerEmail);

TextField registerPassword = new TextField("Password",
"password", 200);
password.setAllowBlank(false);
password.setPassword(true);
registerFieldSet.add(registerPassword);

TextField firstName = new TextField("First Name", "firstName",
200);
firstName.setAllowBlank(true);
registerFieldSet.add(firstName);

TextField lastName = new TextField("Last Name", "lastName",
200);
lastName.setAllowBlank(true);
registerFieldSet.add(lastName);

// add more register fields if you want to...

registerTab.add(registerFieldSet);

// Info Tab Contents
FormPanel infoTab = new FormPanel();
infoTab.setTitle("Title of Information Tab");
infoTab.setIconCls("tab-icon");
infoTab.setAutoScroll(true);
infoTab.setClosable(false);
infoTab.setFrame(true);
infoTab.setPaddings(10);
infoTab.setWidth(300);
infoTab.setAutoHeight(true);
registerTab.setBorder(true);

FieldSet infoSet = new FieldSet();
infoSet.setTitle("Information");
infoSet.add(new Label("There has to be an object in this tab
or else the tabs won't work properly."));
infoTab.add(infoSet);

// add all three tabs to the tab panel
tabPanel.add(signInTab);
tabPanel.add(registerTab);
tabPanel.add(infoTab);


//hide the panel when the tab is closed
tabPanel.addListener(new TabPanelListenerAdapter() {
public void onTabChange(TabPanel source, Panel tab) {

if (tab.getTitle().equals("Sign In")) {
signInBtn.show();
registerBtn.hide();
}
else if (tab.getTitle().equals("Register")) {
registerBtn.show();
signInBtn.hide();
}
else { // don't show these buttons if the info tab is
showing.
registerBtn.hide();
signInBtn.hide();
}
}
});

tabPanel.setLayoutOnTabChange(true);
tabPanel.setTitle("Sign In");
dialog.add(tabPanel);

Button button = new Button("Login / Register");

ButtonListenerAdapter listener = new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
dialog.show();
}
};
button.addListener(listener);
dialog.setAnimateTarget(button.getId());

Panel vp = new Panel();
vp.setPaddings(15);
vp.add(new HTML("<h1>Please login or register to begin.</
h1>"));

vp.add(button);
// vp.add(lblServerReply);
return vp;
}


Wendy

[Michel]

Hi Wendy.

Thanks very much for helping.
Best regards,
Michel.

[wendy]

You are welcome... Here are a few more things I figured out...

I made the textfields global to the class because the method
((TextField)signInFieldSet.getComponent("email")) was returning null.
I call the method signInEmail.getValueAsString() instead.

I was setting the dialog Window to be BorderLayout, but I didn't use a
BorderLayoutData when adding the tabPanel to the dialog.
// must add tabPanel to dialog window using borderlayout
data in center
// this fixes a layout bug where the button needs to be
clicked twice in order
// for the window to appear, and it also fixes the bug
where it never appears again without reloading the code.
BorderLayoutData centerData = new
BorderLayoutData(RegionPosition.CENTER);
centerData.setMargins(3, 0, 3, 3);

dialog.add(tabPanel, centerData);

That should fix those problems I mentioned earlier.

Wendy