Tutorials, examples, general info?

[mtrausch]

Okay, so I might be blind, an , or both, but I am am having a *really* hard time trying to figure out some things.

First things first, I am using GXT 1.1.1 and GWT 1.5. I have a project in Eclipse, and it runs. But it does strange things, and I don't know why.

When I started, I assumed that GXT would provide the CSS and images itself. Following the information up in the Help Center (as well as the screencasts), nothing stated that the images or CSS (e.g., ext-all.css and the ExtJS image set) had to be placed in the project. Since that didn't happen, I downloaded the ExtJS bundle that had them and inserted those into the project, expecting *that* to work. It did not. It works better than *no* style sheet and images (before I was getting an empty window with no window decoration, now I get a window with the close button on the left side of the title bar, the title of the window beneath the close button, and the window gets scroll bars when they're not necessary).

I have the feeling that there is something that I am missing or doing incorrectly *outside* the code, but I haven't the slightest clue as to what. Has anyone run into a scenario like this?

Additionally, are there is there anything in the way of verbose tutorials/documentation/an introduction to GXT to get started with it? Or is there some sort of divination required to "get it", along side the studying of code examples? :-) Also, are there any example Eclipse projects? The samples that come with GXT don't appear to be Eclipse projects, so I can't compare them to what I have and see what I might have done wrong.

Thanks a bunch!

[mtrausch]

A screenshot to show the problem:

http://www.trausch.us/images/ss.png

[gslender]

First of all, thoroughly follow this http://extjs.com/helpcenter/index.jsp

Also, you don't need any part of the ExtJS library - no style sheets etc...

You do need to add this to your HTML file, but the CSS file itself will come out of the gxt.jar

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

Finally, if none of that helps, you'll need to post your code and/or html file contents - otherwise its too hard to guess what might be wrong.

[mtrausch]

First of all, thoroughly follow this http://extjs.com/helpcenter/index.jsp

Also, you don't need any part of the ExtJS library - no style sheets etc...

You do need to add this to your HTML file, but the CSS file itself will come out of the gxt.jar

<link rel="stylesheet" type="text/css" href="css/ext-all.css" /> Finally, if none of that helps, you'll need to post your code and/or html file contents - otherwise its too hard to guess what might be wrong.

Alright, I figured it out. Apparently just referencing the JAR file isn't enough, you have to use that user library thing in Eclipse. Don't know why; referencing the JAR seems to work when using the compile shell script. Strange. So, I have the window working and rendering properly now (at least in a real browser, not in hosted mode). I assume that the stylesheet bit means that the stylesheet has to be added to gwt.xml file, not the post-compilation HTML output; this is what I did.

I am still in need of some general tutorial and overview, though. I can add TextField<> fields to my window, but it won't take a Button, and that confuses me. Here's the code:


import com.extjs.gxt.ui.client.*;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.*;
import com.extjs.gxt.ui.client.widget.layout.*;
import com.extjs.gxt.ui.client.widget.form.*;

public class LoginWindow extends Window {
private TextField<String> txtLogin;
private TextField<String> txtPasswd;
private Button btnSubmit;

public LoginWindow() {
super();
this.txtLogin = new TextField<String>();
this.txtPasswd = new TextField<String>();
this.btnSubmit = new Button("Login");

txtLogin.setFieldLabel("Login");

txtPasswd.setFieldLabel("Password");
txtPasswd.setPassword(true);

FormLayout theLayout = new FormLayout();
theLayout.setLabelWidth(80);
theLayout.setDefaultWidth(200);

this.setLayout(theLayout);

this.add(txtLogin);
this.add(txtPasswd);
this.add(btnSubmit);

this.setHeading("Login Window");

this.setWidth(350);
this.setHeight(75);

this.layout();
this.show();
}
}Any idea why the button wouldn't be showing up, but the text fields do?

[gslender]

button doesn't show up becuase you are using a formlayout to lay out the fields - formlayout will only layout widgets that extend http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/form/Field.html

as per clearly indicated in the docs...8-|

http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/layout/FormLayout.html

I'm also not sure what you mean by just referencing the gxt.jar ??? the tutorial is fairly straight forward if you follow it closely- did you actually follow the tutorial step-by-step? /:)

[mtrausch]

button doesn't show up becuase you are using a formlayout to lay out the fields - formlayout will only layout widgets that extend http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/form/Field.html

as per clearly indicated in the docs...8-|

http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/layout/FormLayout.html

I'm also not sure what you mean by just referencing the gxt.jar ??? the tutorial is fairly straight forward if you follow it closely- did you actually follow the tutorial step-by-step? /:)

Ahh, I missed that in the FormLayout thing. Though I would think that logically a button would be considered part of a form. Seems the other layouts don't work very well when laying out form elements.

What I meant by referencing gxt.jar is by including it in the classpath. For example, when building it using the project-compile shell script, you have to include gxt.jar in the classpath for it to find the GXT components and build the application outside of Eclipse. Within Eclipse, though, the equivalent of simply referencing the jar file does not work, you have to use the User Library that is setup in the project setup section of the mini-tutorial.

Which, by the way, needs to be corrected, it would seem. It states to use:


<link rel="stylesheet" type="text/css" href="css/ext-all.css" />But in the project.gwt.xml file you have to use:


<stylesheet src='css/ext-all.css' />To add the style sheet reference to the compiled project and its HTML output. If you leave that out, you get errors in hosted mode when you run the application, and your only choice is to then use the project-compile shell script, and then manually modify the HTML output of the compiled project...

Still one pretty important thing that isn't being addressed that I would find very useful: Is there anywhere (I've searched and found nothing) a tutorial that shows how to use GXT? I've found the getting started material, which is useful if you want a template to start from (but doesn't actually *teach* anything, just "this is how it is, get 'er done"), and I've found the API docs, which are useful if you know exactly what you're looking for, but I don't see anything that says "So you've developed GUI interfaces before for {Swing,GTK,Qt,WxWidgets,Win32,Whatever}, here's is the underlying assumptions of this framework and the model behind it, and here is how it is designed and why, and here are the general types of things that you do with it" including examples?

Does such a resource not exist yet? Or is it assumed that you'll spend lots of time playing with the thing to discover all of that for oneself?

[gslender]

<stylesheet src='css/ext-all.css' />To add the style sheet reference to the compiled project and its HTML output. If you leave that out, you get errors in hosted mode when you run the application, and your only choice is to then use the project-compile shell script, and then manually modify the HTML output of the compiled project...

No you don't. I have heaps of gxt projects and none of them have stylesheet src='css/ext-all.css' in the gwt.xml - that is certainly one way to do it, but you don't have to. As per the exact details of the tutorial, you add the stylesheet to the HTML code (near the head) and ensure that gxt.jar is on the source path of the launch. Both hosted mode and compile-button in the shell work fine. I do nothing more. :-|

I'd still bet you are not following the tutorial exactly. :D



Still one pretty important thing that isn't being addressed that I would find very useful: Is there anywhere (I've searched and found nothing) a tutorial that shows how to use GXT? I've found the getting started material, which is useful if you want a template to start from (but doesn't actually *teach* anything, just "this is how it is, get 'er done"), and I've found the API docs, which are useful if you know exactly what you're looking for, but I don't see anything that says "So you've developed GUI interfaces before for {Swing,GTK,Qt,WxWidgets,Win32,Whatever}, here's is the underlying assumptions of this framework and the model behind it, and here is how it is designed and why, and here are the general types of things that you do with it" including examples?

Does such a resource not exist yet? Or is it assumed that you'll spend lots of time playing with the thing to discover all of that for oneself?

At the moment, not such resource exists. But I'm aware of something being worked on in the wings... lets hope it comes out soon ;)

[mtrausch]

No you don't. I have heaps of gxt projects and none of them have stylesheet src='css/ext-all.css' in the gwt.xml - that is certainly one way to do it, but you don't have to. As per the exact details of the tutorial, you add the stylesheet to the HTML code (near the head) and ensure that gxt.jar is on the source path of the launch. Both hosted mode and compile-button in the shell work fine. I do nothing more. :-|

I'd still bet you are not following the tutorial exactly. :D

On that one thing, you're right. ;-) It works. I don't know what file you mean, still, though, because the only HTML files I have in my project appear to be generated by the GWT compiler. I haven't created any myself, that's for sure.


At the moment, not such resource exists. But I'm aware of something being worked on in the wings... lets hope it comes out soon ;)

Ahh, that'd be nice. I just took the API docs and made a PDF out of them, and after seeing the page count, I *won't* be printing it, lol... but some sort of thing that would be a good, complete tutorial would be quite handy. I like to try to learn things in the way of "This is the convention we use to do this," sort of thing because then you don't have to memorize the whole thing you're working with. You just have to know what was being thought and you can intuit the result, at least approximately, and approach the API docs for finer-grained detail.

You've been a great help, by the way. Thank you much for the helpful replies. I've got it building now. One more (hopefully the last) question: How do I change the generated doctype to comply with what the documentation/mini-tutorial state is required? GWT is generating a HTML 4 doctype, and the mini-tutorial says that HTML 3.2 is required.

[gslender]

One more (hopefully the last) question: How do I change the generated doctype to comply with what the documentation/mini-tutorial state is required? GWT is generating a HTML 4 doctype, and the mini-tutorial says that HTML 3.2 is required.

Now you've got me worried... GWT does not build the source HTML file. :-? Sure it copies it to the output compiled location, but it does not build it.

The applicationCreator will generate a template html file and put it in package.name.public and name it the same as your entry point class.

If you look into that public package location you'll see the html file is just copied directly - any changes you make will be reflected in the compile.

GWT generates too much fluff in the template applicationCreator step - I normally cut it down to just this.... :>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--include the ext gwt styles-->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
</head>
<body>
<script language="javascript" src="com.test.gxt.Test.nocache.js"></script>
</body>
</html>

[gslender]

GWT is generating a HTML 4 doctype, and the mini-tutorial says that HTML 3.2 is required.

Oh, the tutorial is a little old now, and you can safely use the following doctype


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

[mtrausch]

Now you've got me worried... GWT does not build the source HTML file. :-? Sure it copies it to the output compiled location, but it does not build it.

The applicationCreator will generate a template html file and put it in package.name.public and name it the same as your entry point class.

A-ha! I didn't think to search all of the directories to see it. Looking for it now, I see what you mean. I suppose that's part of the problem with trying to learn two things at once... already knew Java, but this project is the first time I've had to work with both GWT and GXT... maybe there needs to be a "Came to GWT for GXT?" type tutorial. :-D


If you look into that public package location you'll see the html file is just copied directly - any changes you make will be reflected in the compile.

GWT generates too much fluff in the template applicationCreator step - I normally cut it down to just this.... :>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--include the ext gwt styles-->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
</head>
<body>
<script language="javascript" src="com.test.gxt.Test.nocache.js"></script>
</body>
</html>

Now it makes sense to me. I've been beating my head against my desk all because I missed a little piece of information that made a big difference. Thanks for the clarification!

[brendand]

First of all, thoroughly follow this http://extjs.com/helpcenter/index.jsp

Also, you don't need any part of the ExtJS library - no style sheets etc...

You do need to add this to your HTML file, but the CSS file itself will come out of the gxt.jar

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

Finally, if none of that helps, you'll need to post your code and/or html file contents - otherwise its too hard to guess what might be wrong.

I think I'm running into the same problem. I'm trying out GXT as part of GWT on GAE. (New to all 3, so bit of a learning curve).

Here is my error:

15/04/2009 8:27:22 AM com.google.appengine.tools.development.LocalResourceFileServlet doGet
WARNING: No file found for: /css/ext-all.css

It's a bit confusing as http://extjs.com/learn/Ext_GWT_Getting_Started_Tutorials and setup.txt (included with gxt-1.2.3) have slightly different instructions regarding gxt.jar.

These are the step I followed.

I'm using the Google Plugin for Eclipse, and have created a new web web application.
I ticked the box to say use GWT 1.6.4. Finished the wizard.

Hacked around with the generated code. Took some of the "Form" sample code to try displaying a form.

Change OnModuleLoad to


GXT.setDefaultTheme(Theme.BLUE, true);
Form1 f = new Form1();
RootPanel.get().add(f);

Create a User Defined Library
Select Window > Preferences and select Java > Build Path > User Libraries in the preference tree.
Click the New button and name the library GXT_1_2. Select the new library and then click Add Jars. add the gxt.jar from the Ext GWT download.

Assign New User Library To Your Project
Bring up your project's properties by right clicking the project name in the Package Explorer and selecting Properties from the context menu. Once open, select the Java Build Path item in the tree then select the Libraries tab.

Create A New Launch Config
Open the Run Config by selecting Run > Open Run Dialog.
Select existing Web Application Run Config.
Classpath Tab
Add GXT_1_2 user defined libraries by clicking the Advanced button

Ran the project and got my error. Everything seems to work except the styles are missing.

I'm guessing a missed a simple step that is required for the GXT/GAE combo.

[gslender]

GXT 1.2.x requires GWT 1.5.x and is only supported on that release.

In GWT 1.6.x things changed and GXT 2.0 is required (release has not yet been publicly released, but should be available "real soon").

So, you'll need to use GXT 2.0 available in SVN or wait till its released if you wish to use GAE which used GWT 1.6

Cheers,
Grant

[brendand]

GXT 1.2.x requires GWT 1.5.x and is only supported on that release.

Perhaps this document http://extjs.com/learn/Ext_GWT_Getting_Started_Tutorials can be updated to document which GXT versions support which GWT versions.. Currently it says "GWT version: GWT 1.5 or above is required".



So, you'll need to use GXT 2.0 available in SVN or wait till its released if you wish to use GAE which used GWT 1.6

SVN is only available for subscribers, isn't it.

I guess i'll have to wait till "April 14th".

ps, Currently April 15th in my part of the world at the moment. :)

[jpnet]

I've used GXT 2.0/GWT 1.6.4 on GAE and I plan on writing up a tutorial on the application I built... I'll try to get it up this week. :D

[googelybear]

Somehow I cannot get the css to be automatically included from the jar...I always copy the gxt-all.css and gxt-gray.css manually from the gxt download to my project folder and reference gxt-all.css from there. Is it a problem if the page layout contains sub folders (.../war/section1/index.html etc.)? How should the gxt-all.css be referenced from there (../gxt/css/gxt-all.css doesn't seem to work)?