Setting up a ClientBundle in GWT with multiple CssResources

I am currently in the process of updating some older code to GWT 2 and encountering some strange behavior. I have a custom interface that extends ClientBundle, as recommended by the GWT documentation. Within this bundle, I have defined multiple CssResources to link to various .css files for my module. The issue arises when I try to initialize my module. In the initialization code, I retrieve the static reference to each CssResource and call ensureInjected(). However, only the first call seems to take effect. Subsequent calls are being ignored, and the CSS styles are not being applied to the application. How can I properly work with multiple CSS files for a single module?

CssBundle.java

public interface CssBundle extends ClientBundle {
    public static final CssBundle INSTANCE = (CssBundle) GWT.create(CssBundle.class);

    /* CSS */
    @Source("mypath/public/Client.css")
    public ClientCss mainCSS();

    @Source("mypath/resources/css/mini/ext-all.css")
    public ExtAllCss extAllCSS();
}

ClientCss.java

public interface ClientCss extends CssResource {

    String applicationTitle();

    String branding();

    String bugReportDirections();

    @ClassName("Caption")
    String caption();
}

ExtAllCss.java

public interface ExtAllCss extends CssResource {
    @ClassName("close-icon")
    String closeIcon();

    @ClassName("close-over")
    String closeOver();

    @ClassName("col-move-bottom")
    String colMoveBottom();
}

MyModule.java

public class MyModule extends Composite
{
    public void initialize()
    {
        //the CSS from this resource is applied to the client
        CssBundle.INSTANCE.mainCSS().ensureInjected();
        //this line does not apply the CSS styling
        CssBundle.INSTANCE.extAllCSS().ensureInjected();
    }
}

Answer №1

The code appears to be correct, however, its functionality may not align with your expectations. Instead of each ensureInjected() generating a new <style> block, it simply queues up the required styles for later implementation. At the end of the current event loop, a single <style> element is inserted containing all accumulated styles. This approach minimizes potential restyling of the document and reduces the number of style tags present (a known bug in older versions of IE restricted the maximum number of tags allowed).

To verify this behavior, examine the complete content of the <style> tag. There, you should observe both CSS files appended sequentially.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

error related to reserved area in jquery message box

Currently, I am exploring a jQuery message box similar to the one featured in this example. While I am eager to integrate it into my web application, I have run into an issue. Specifically, I am facing a problem with the reserved area of the entire popup. ...

Invisible Dropdown Feature in Google Places Autocomplete

On my website, I have a Google Places autocomplete feature that seems to be fully functional, but it is not visible. Surprisingly, I know that it is working because when I type in "123 Main Street" and then navigate down using the arrow key and press enter ...

Creating an image rollover effect when hovering between two images

I am currently working with React and trying to change 2 images by hovering over them. Here is what I have accomplished so far: Card.js <div className="image-wrapper"> <img src={sprites.front_default} className="image" a ...

In spring-boot, the connection to the database gets disconnected after more than 4 but less than 24 hours using JPA and

I've encountered an error log in my app that utilizes spring-boot, jpa-hibernate with mysql. The specific error message states: Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last packet successfully received from the server ...

Running multiple classes simultaneously in Selenium can be achieved by utilizing the TestNG framework

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd"> <suite name="Suite" thread-count="4" parallel="tests" preserve-o ...

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

Parsing JSON multiple times to extract data on the top 10 games from Twitch's API

Hey there! I have a little coding challenge for you. The current code below is only fetching the first channel from the JSON. My goal is to fetch all the streams and display them in a grid format with three streams per row. Can you help me achieve this? (B ...

Will incorporating numerous frameworks into a Java program result in any adverse repercussions?

Is the memory footprint of a Java application significantly increased by adding numerous framework dependencies? Does it preload all libraries at startup or does it exhibit lazy behavior by loading only necessary classes when needed, such as with import st ...

Creating a personalized image resizing function for WordPress

I have implemented the following code in functions.php to fetch the first image from WordPress posts: function grab_first_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/< ...

What causes the gap between a parent div and inner div in react components?

I have a relatively simple React component that I'm working on. Even though I am quite new to React, I have tried various methods to eliminate the white space issue but so far have been unsuccessful in determining what is causing it. Negative margin s ...

Ensuring that the content fits perfectly inside a div using either Bootstrap or

I am facing an issue with two nested divs. One of them has a button that I want to stick to the bottom of the parent div, while the other contains text or a list of persons. The problem arises when the text is lengthy, causing it to overflow the div. I am ...

The JQuery mouseover and mouseout functionality for CSS is not functioning properly

Struggling to create an expanding navigation bar using CSS. Managed to implement it, but ran into issues when it kept resetting after navigating to a new page. Resorted to using jQuery to resolve the problem by utilizing mouse enter and mouse leave events. ...

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

Having trouble performing calculations accurately in Kotlin

I am currently attempting to calculate this in Kotlin, but I am not getting the results I expect. https://i.sstatic.net/MwxpU.png Here is the code written in C language that gives the expected result: double bsix = 1.1890129477526807; int main() { // ...

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

Querying MongoDB using the Java API

Below is a snippet of my MongoDB document: user:{ _id:1, name:'xyz', age:12, mobile:21321312, transaction:[{ trans_id:1, prod:'a', purchasedAt:ISODate("2015-02-01"), }, { trans_id:2, prod:'b', purchasedAt:ISODate("2015-02-01" ...

Utilize HTML Bootstrap to showcase a pair of buttons that occupy half of the Div's width

My challenge is with a modal window that requires displaying two buttons at the bottom - Proceed and Cancel, using Bootstrap's button for this purpose. I want these buttons to be positioned side by side, occupying the full width of the div. However, ...

What could be causing the calendar icon to not display in the table cell?

I've been working with the Bootstrap date picker inside a table, and I'm having trouble getting the date picker icon to display using the fas fa-calendar-alt css class. <td> <input type="text" id="expirydate{{$index}} ...