Blog Archives

Center Panel on Screen

To display a panel on the screen you often use such code:

RootPanel.get().add(myPanel);

I need a panel, which will be displayed on the center of the browser window. To get this, I create a div within the HTML page, which loads my GXT3 application:

<div id="gxt-app" class="center">

Within the GXT application I reference this div now:

RootPanel.get("gxt-app").add(myPanel);

I don’t know, how the size of myPanel is, so we have to create a little CSS snippet to calculate the size and move the div into the center of the browser window:

.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Install GXT Development Environment

1. Download and install an JDK7+
2. Download Eclipse 4.5 (Mars) as J2EE bundle
3. uncompress the TAR into a folder, where the developer has access
4. start Eclipse

Maven

1. Download and install Maven in the same version as delivered with Eclipse
2. add M2_HOME, MAVEN_OPTS and JAVA_HOME to ~/.profile
3. create a file settings.xml within ~/.m2 folder

Within Eclipse:

1. Open Marketplace and install Subversive 3.0.0 and Eclipse Color Theme 1.0.0
2. Open Marketplace and install Google Plugin for Eclipse 4.3 (4.5 doesn’t exist?)
3. open SVN perspective and download all SVN Connectors
4. Install SCM connectors in the m2e Marketplace (i.e. m2e for Subversive)

I use Native JavaHL 1.8.14 as connector, you have to install “javahl” on your operating system. Set the connector within the Preferences->Team->SVN. Set svn+ssh, which will use the local .ssh/config file.

5. Configure your SVN repository within Eclipse
6. checkout the Master project as Maven project
7. Checkout the Server parent project as Maven project (you need the m2e connector to get the context menu item)
8. Checkout the UI parent project

9. change the presentation of the Project Explorer content to hierarchical.

Operating System

1. Download Glassfish 3.1
2. Install it into an empty folder, which is user-accessible

Eclipse

1. Create a new server
2. Server-Type Glassfish 3.1 (download additional server adapters if necessary, Preferences->Server->Runtime-Environments)
3. Use settings from Glassfish installation (admin, domain, ports)

Operating System

1. Download the GXT version which match the current GWT plugin version (GWT 2.6.0 -> GXT 2.3.1.a)
2. create a named user library for the GXT version and link it to the downloaded JAR files
3. add the user library to the project build path (UI project)

Access private fields per Reflections within Glassfish

You can not access a private field per Reflections, if your application runs on Glassfish. You have to set a policy entry on the server to permit it:

1. open the security policy file: glassfishv3/glassfish/domains/domain1/config/server.policy
2. include the following entry:

        grant codeBase "file:${com.sun.aas.installRoot}/domains/domain1/applications/arena-dwr/-" {
            permission java.lang.reflect.ReflectPermission "suppressAccessChecks";
        };

Don’t forget to replace the arena-dwr by the name of your application, and also to check project path if you are not using the default container instance domain1.

Then you can call:

   Entity.class.getDeclaredFields()

without a SecurityException.

GWT no longer supports Quirks Mode

To prevent that warning, you should add

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to your “index.html”. The standard page for a GWT project in Eclipse doesn’t contain a DTD reference, so you should add “loose.dtd”. An alternative could be, that you add

<extend-configuration-property name="document.compatMode" value="BackCompat">

to your module XML file. But this only hides the warning and doesn’t solve the problem.

Change version for GWT application

In Eclipse are different places where you can change the version of your web application.

1. Your pom.xml
Change the version of your artifact like:

<groupId>de.uni_leipzig.smo</groupId>
<artifactId>trialregistry-gui</artifactId>
<version>0.3-SNAPSHOT</version>
<packaging>war</packaging>

2. Your build path
Set the default output folder to something similar to your pom.xml:

Build Path Settings

3. Your Run configuration
To run GWT applications you define a Run configration within Eclipse. The tab “Arguments” contains also a path to the war-directory, which could contain the version number:

Run Configration

GWT Compile and wrong output dir

If your “GWT Compile” process exports the “deploy” directory to the wrong place, you can correct this within the preferences file com.google.gdt.eclipse.core.prefs, which you can find within the “.settings” directory of you Eclipse project.

eclipse.preferences.version=1
jarsExcludedFromWebInfLib=
lastWarOutDir=/path-to-your-project/src/main/webapp
warSrcDir=src/main/webapp
warSrcDirIsOutput=false

Change the “lastWarOutDir” to the correct path. It should contain the “WEB-INF” directory and GWT should create a “deploy” directory within it. Restart your IDE to load the new settings! You can check the results during “GWT Compile” with log level TRACE.

Auto adjust Grid

If you have a Grid within a Panel or Window class and the Grid will not be automatically adjusted, you will have to check the complete widget hierarchy for valid LayoutManagers. All parent widgets of the Grid must use the layout sytem. Then we can use

  grid.getView().setAutoFill(true);
  grid.getView().setForceFit(true);

The parent Panel or Window should define an minimal height and width.

  window.setLayout(new FitLayout());
  window.setMinWidth(500);
  window.setMinHeight(400);

Every resize operation on the Panel/Window should resize the Grid too. If you forget the layout on the window or its panels, the grid will not be displayed till you set a height and width explicitly.

Wrong charset with GWT Dev-Mode in Eclipse

If you use .properties files to define the application strings, you will run into a strange behaviour of the GWT Dev-Mode in Eclipse.

All .properties files have a default charset of ISO-8859-1. You can see that on your global preferences:

eclipse-prefs

If you write your text, it will be encoded into ISO-8859-1. Now the internal Jetty sends HTTP responses with a charset ISO-8859-1, your text will be unchanged. But if the browser displays the website in UTF-8, all of your texts have the wrong charset (i.e. German umlaute will be wrong). There is no config option to change the behaviour of the Jetty, but you can set the default charset of the .properties files to UTF-8. Then the HTTP responses will change your text encoding, but the browser will change it back to the right charset (set Content-type UTF-8 within your index.html!).

Set focus on a textfield to prevent validation

In the SignInWindow of the trial registry the login textfield has always a red border, because it executes the validation (must not empty) too earlier. So it is necessary to set the focus on that textfield, if we open the window. The following code is copied from the Sencha forum:

Window window = new Window();
window.setWidth(400);
FormPanel formPanel = new FormPanel();                 
                
TextField<String> passwordField = new TextField<String>();                
passwordField.setFieldLabel("xyz");
passwordField.setEmptyText("abcd");
passwordField.setAllowBlank(false);    
passwordField.setMaxLength(255);
passwordField.setPassword(true);
// passwordField.focus(); - Comment this
                
formPanel.add(passwordField);
window.add(formPanel);

window.setFocusWidget(passwordField); // Added this line
window.show();

It doesn’t work to set focus() on the textfield, it is better to let the window decide that.

GXT webdesktop – no background image

If you don’t see the background image of your Desktop, your website probably don’t load the associated CSS files. First at all, you have to include the CSS into your start page:


<link type="text/css" rel="stylesheet" href="gxt-2.2.5/css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="gxt-2.2.5/desktop/css/desktop.css">

Start your appliaction in Development Mode, and open the start page in your browser. If there isn’t the background image visible, you should check your page with a debug-tool like Firebug. Navigate to the CSS link (mostly in <head>) and try to open the link. If the file could not be found (you can not see the CSS definitions), your GXT resources are not available within the application. Copy the necessary files into your WAR or in your deployment directory.