Search code examples
gwtintellij-ideagxt

GWT elements are not visible


I have already asked such a question here but haven't got a reply which could work out. It is really important for me to resolve the problem. So, I try to develop an app using ExtGWT 2.3.0 / GWT 2.5.1 but faced the problem that widgets (both GWT and GXT) are not visible in browsers. I've been trying to solve this issue more than week but unfortunatelly I've failed. The stuff I have alredy tried:

  • using different libraries of GWT/GXT (using ExtGXT 3.x doesn't settle a problem);
  • creating project using Maven web-app / gxt3+ archetypes;
  • deploying project on Tomacat / lunching under GWT;
  • using different styles in GWT-module (like <inherits name='com.google.gwt.user.theme.standard.Standard'/>);
  • rewriting .css-file;
  • compiling project by Maven / GWT compiler;
  • cleaning up cache files in all relevant temp directories (as Windows' as well as Intellij IDEA's);
  • making Maven's clean install;
  • using different browsers of different versions (IE 8 and 11, Chrome, FF 24 and 36);
  • trying to lunch app in browsers with / without GWT developer plugin;
  • browsing internet to find solution (especially stackoverflow);

Maybe I left out smth but the list of actions is pretty much big. By the way I logged actions and there were no any errors or exeptions thrown. If I declare border settings for the widgets in .css their borders become visible that testifies that widgets are on page. So, if anyone has experienced such a problem or just could suggest something please let me know. Frankly it is very important for me. Please take a look at screenshots of the folder structure / setting of the project. Thank you in advance.

EntryPoint - class

public class ProjectEntryPoint implements EntryPoint {
    @Override
    public void onModuleLoad() {
        Viewport viewport = new Viewport();
        final BorderLayout borderLayout = new BorderLayout();

        BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 20);
        northData.setSplit(false);
        northData.setCollapsible(false);

        BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
        centerData.setCollapsible(false);

        BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200, 150, 300);
        westData.setCollapsible(true);
        westData.setSplit(true);

        ContentPanel mainPanel = new ContentPanel();
        mainPanel.setStyleName("mainPanel");
        ContentPanel navPanel = new ContentPanel();
        mainPanel.setStyleName("navPanel");

        HTML headerHTML = new HTML();
        headerHTML.setHTML("<h1>RSS Reader</h1>");

        viewport.add(mainPanel, centerData);
        viewport.add(navPanel, westData);
        viewport.add(headerHTML, northData);
        viewport.setLayout(borderLayout);
        viewport.layout();
        RootPanel.get().add(viewport);
    } 
}

module

<module rename-to='Project'>
  <inherits name='com.google.gwt.user.User' />
  <inherits name='com.extjs.gxt.ui.GXT' />
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <entry-point class='GXT3App.client.ProjectEntryPoint' />
  <source path='client' />
  <source path='shared' />
  <add-linker name="xsiframe" />
</module>

.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="gxt-all.css">
    <title>Project</title>
    <script type="text/javascript" language="javascript" src="Project/Project.nocache.js"></script>
  </head>
  <body>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
  </body>
</html>

.css

.mainPanel {
    border: 1px solid black;
}

.navPanel {
    border: 1px solid black;
}

folder structure GWT config WAR structure Result on web-page


Solution

  • It looks like a problem with missing styles - please double check that gxt-all.css is available from where you reference it in your host page. Use your browser's developer tools to see if it's not throwing a 404.

    It seems that the missing resources are mentioned in Step 1 in the setup.txt file that is bundled with GXT 2.3:

    1. Create a Google Web Application Project project within Eclipse.

      Copy the contents of the /resources folder in the download to a {foldername} location within your war folder. Substitute {foldername} with the name of the folder you've created for resources within your war folder.

    2. Add the following stylesheet to your host page.

      <link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />
      
    3. If you are using Charts, add the following script to your host page.

    1. Add the following entry to you projects module xml file.

      <inherits name='com.extjs.gxt.ui.GXT'/>
      
    2. Eclipse Setup (should be similar for other development environments). These instructions assume you have a existing project and launch configuration.

      1. Add gxt.jar to the project.
      2. Add GXT jar to launch configuration.