Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Tutorials, examples, general info?

  1. #1

    Default Tutorials, examples, general info?

    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!

  2. #2

    Default Screenshot

    A screenshot to show the problem:


  3. #3
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572

    Default

    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
    Code:
    <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.

  4. #4

    Default

    Quote Originally Posted by gslender View Post
    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
    Code:
    <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:

    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?

  5. #5
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572

    Default

    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/...orm/Field.html

    as per clearly indicated in the docs...

    http://extjs.com/deploy/gxtdocs/com/...ormLayout.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?

  6. #6

    Default

    Quote Originally Posted by gslender View Post
    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/...orm/Field.html

    as per clearly indicated in the docs...

    http://extjs.com/deploy/gxtdocs/com/...ormLayout.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:

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

    Code:
    <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?

  7. #7
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572

    Default

    Quote Originally Posted by mtrausch View Post
    Code:
    <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.

    Quote Originally Posted by mtrausch View Post
    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

  8. #8

    Default

    Quote Originally Posted by gslender View Post
    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.
    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.

    Quote Originally Posted by gslender View Post
    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.

  9. #9
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572

    Default

    Quote Originally Posted by mtrausch View Post
    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....
    Code:
    <!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>

  10. #10
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572

    Default

    Quote Originally Posted by mtrausch View Post
    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

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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •