GWT Style with CSS

The Resource File

Our next step will be to create the resource file that will connect your GSS file to your Java classes. On completion, GWT obfuscates class names, so this file will be used to link the obfuscated names to the corresponding classes in your GSS.

Inside src/main/java/com/company/project/client/resources, let's create AppResources.java

Here is the code inside:

package com.company.project.client.resources;
 
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
 
public interface AppResources extends ClientBundle {
    interface Style extends CssResource {
    }
 
    @Source("css/style.gss")
    Style style();
}

You can also try this code with Online Java Compiler

Run Code

The Resource Loader File

As a next step, we need to set up the loader file so that everything inside the application can be loaded.

Create a file named ResourceLoader.java inside src/main/java/com/company/project/client/resources and include the following code:

package com.company.project.client.resources;
 
import javax.inject.Inject;
 
public class ResourceLoader {
    @Inject
    ResourceLoader(
            AppResources appResources) {
        appResources.style().ensureInjected();
    }
}

You can also try this code with Online Java Compiler

Run Code

In this case, the ensureInjected() function is crucial, since it injects your CSS into the DOM.

It is important to bind the ClientModule to this file, which will likely be located under src/main/java/com/company/project/client/gin/ClientModule.java in your project.

package com.company.project.client.gin;
 
// [your imports]
 
public class ClientModule extends AbstractPresenterModule {
    @Override
    protected void configure() {
        // [your code]
        bind(ResourceLoader.class).asEagerSingleton();
    }
 
    // [you might have code here too]
}


Activate GSS
Since version 2.7, GSS has been included in GWT, but isn't enabled by default. Your GWT module needs to have a single line of code added to enable it. I have this file located at src/main/java/com/company/project/AppModule.gwt.xml:  


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.7.0//EN"
        "http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
<module rename-to="AppModule">
   // [Inheriting some stuff]
   // [Source some stuff]
 
   // The line that you need to add
   <set-configuration-property name="CssResource.enableGss" value="true">
 
   // [Some more code extending ... thing?]
</module>

You can also try this code with Online Java Compiler

Run Code

There you go! As long as everything went well, your application should build and run, loading your style.gss file. Don't worry if it fails, since your application might be structured differently than the tutorial shows. You should be able to fix compile errors if you take the time to read them. Those of you who don't, but have access to a backend dev near you can always ask for help.

Using Classes

When working with GSS files in GWT, one of the most confusing things is having to declare your classes inside of your resource file to access them.

In our style.gss file, let's add the following classes:

body {
    background-color: pink;
    padding: 2em 0;
}
 
.my_first_class {
    color: red;
}
 
.my_second_class {
    color: blue;
}

The resource file needs to be adapted accordingly:  

package com.company.project.client.resources;
 
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
 
public interface AppResources extends ClientBundle {
    interface Style extends CssResource {
        String my_first_class();
 
        String my_second_class();
    }
 
    @Source("css/style.gss")
    Style style();
}

You can also try this code with Online Java Compiler

Run Code

Congratulations!🎉 In addition to your views (files ending in .ui.xml), you can now use your Java classes as well

The first thing we need is a view. Our file will look like this, titled ApplicationView.ui.xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
    <div>
        <h1>Hello World!</h1>
 
        <p>This is my first paragraph.</p>
        <p>This is my second paragraph.</p>
    </div>
</ui:UiBinder>

Our classes must be imported into the view before they can be used:

<ui:with field="resources" type="com.company.project.client.resources.AppResources"/>

Using resources.style.name_of_my_class, we can now call the required classes

This would be the final code based on the precedent view:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
 
    <ui:with field="resources" type="com.company.project.client.resources.AppResources"/>
 
    <div>
        <h1>Hello World!</h1>
 
        <p class="{resources.style.my_first_class}">This is my first paragraph.</p>
        <p class="{resources.style.my_second_class}">This is my second paragraph.</p>
    </div>
</ui:UiBinder>

It is important to understand that Java uses the CamelCase naming convention, which means that class names with hyphens will not compile. You need to use @ClassName within your CSSResource to resolve this issue:  

@ClassName("my-class-name")
String myClassName();

You can also try this code with Online Java Compiler

Run Code

Using Images

In order to use images inside of your GSS file, you will need to declare them as ImageResources. As with your GSS files, it's always a good idea to maintain an organized folder structure for your image inside your resources folder.

// src/main/java/com/company/project/client/resources/pages/ContactResources.java
 
package com.company.project.client.resources.pages;
 
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.ImageResource;
// ^ don't forget to import the ImageResource package
 
public interface AppResources extends ClientBundle {
    interface Style extends CssResource {
        String contact();
 
        String contact_form();
    }
 
    @Source("images/contact/background.jpg")
    ImageResource background();
 
    @Source("com/company/project/client/resources/css/pages/contact.gss")
    Style style();
}

You can also try this code with Online Java Compiler

Run Code

// src/main/resources/com/company/project/client/resources/css/pages/contact.gss
 
@def BACKGROUND resourceUrl("background");
 
.contact {
    background: BACKGROUND no-repeat center center;
    padding: 4em;
}
 
.contact_form {
    width: 100%;
    border: 1px solid #00f;
}

Frequently Asked Questions

Why is CSS important?

It enhances the appearance of a website and creates a great user experience. 

What are the 3 CSS principles?

CSS is built and maintained based on three principles: consistency, succinctness, and separation (or CSS).

Can CSS classes inherit?

There is no 'inheritance' in CSS, unfortunately.

Why CSS is called cascading?

When more than one style rule matches an element, cascading is used to determine which applies.  

How many types of CSS are there?

CSS can be categorized as follows: Inline CSS, Internal or Embedded CSS, and External CSS.  

Conclusion

CSS in GWT can be challenging at first, but once you master the basics, you'll be a front-end ninja in no time. Adapt your workflow to your needs, structure your files, and have fun! You can also visit this link if you want to learn more about other JAVA frameworks.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in CSS, Competitive Programming, Databases, System Design, GWT UI Binder, GWT DeckPanel Widget, GWT TabPanel Widget, GWT Composite Widget many more!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!!