How to Apply CSSResource to Customize a GWT Hyperlink

Hello, I am looking to enhance the visual appeal of my web application using GWT CSSResource.

One thing that I am struggling with is styling a simple hyperlink.

In traditional CSS, I would typically do the following:

a{color: #somecolor}
a:hover{color: #somecolor}
a:visited{color: #somecolor}

But how can I achieve this using CSSResource?

Below is my attempt:

My CSSResource interface looks like this:

public interface CiColors
    extends CssResource
{

  public String backgroundColor1();

  public String backgroundColor2();

  public String fontColor();

  public String mainColor();

  @ClassName ( "mainBorderColor")
  public String mainBorderColor();

  public String infoBackground();

  public String captionColor();

  @ClassName("a")
  public String linkColor();
}

Here is an excerpt from the CSS file:

.backgroundColor1 {
  background-color: black;
}

.backgroundColor2 {
  background-color: black;
}

.infoBackground{
  background-color: lightgrey;
}

.fontColor {
  color: #FF8F35;
}

.mainColor {
  background: FF8F35;
}

.mainBorderColor {
  border-color: #FF8F35;
}

.captionColor{
  color: #FF8F35;
}

a{
  color:  #FF8F35;
}

Adding the 'linkColor()' style gives me an error. Ideally, I would like the font color and hyperlink color to be the same without needing another CSS class.

Below is the Java code where the hyperlink is constructed. Please note that there is no ui.xml file present.

[Java code snippet omitted for brevity]

Is there a way to achieve this? Any insights would be greatly appreciated.

Thank you in advance.

Answer №1

Kindly follow the steps outlined below.

  • Make sure to include

    LinkResources.INSTANCE.style().ensureInjected()
    once at the beginning to inject the CSS.

  • Consider using hyperLink.addStyleName() instead of hyperLink.setStyleName()


Experiment with the following CSS style to observe the changes

.fontColor {
  color: #FF8F35;
  background-color: red;
  font-weight: bold;
}

Example code: (adapt it to match your actual interface)

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

    public interface CiColors extends CssResource {
        ...
    }

    @Source("link.css")
    CiColors style(); // adjust it according to your real css file
}

Here are a few things I've observed in your code

  • Make sure it is

    .a { color: #FF8F35; } instead of a { color: #FF8F35; }

  • Ensure it is

    .mainColor { background: #FF8F35; }
    instead of .mainColor {background: FF8F35;}

  • No styles are being used apart from fontColor from CssResource

Answer №2

After spending a significant amount of time, I finally created my own custom link widget. This widget allows me to directly apply styles to the link element.

protected MyHyperLink( Element elem )
  {
    if ( elem == null )
    {
      setElement( anchorElem );
    }
    else
    {
      setElement( elem );
      DOM.appendChild( getElement(), anchorElem );
    }

    anchorElem.addClassName( MyResourcesFactory.getFac().getResources().ciColors().fontColor());
    sinkEvents( Event.ONCLICK );

    directionalTextHelper = new DirectionalTextHelper( anchorElem,
        /* is inline */true );
  }

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

A step-by-step guide to identifying the clicked bar on a Chart.js graph

When using Chart JS to create a line bar chart, I am looking to specifically identify which bar was clicked on the chart and determine the index of that bar. This will allow me to display specific details for each clicked bar on a table. For example, click ...

How can I send a variable to a PHP page with AJAX using jQuery?

index.html <?php while($admin_data=mysql_fetch_row($query2)){ ?> <tr> <td><?php echo $admin_data[0];?></td> <td><?php echo $admin_data[1];?></td> <td><?php echo $admin_data[2];?></td> & ...

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

Dynamic column group in Datatable - toggle visibility based on user selection

In my application, I am utilizing Jquery datatable with a table that includes the following columns: Name, Office, A1, B1, Diff1, A2, B2, Diff2, A3, B3, Diff3, A4, B4, Diff4 Additionally, there is a select box containing the options: 1. All 2. Diff1 3. D ...

Modifying the information depending on the option chosen from the dropdown menu using angularJS

I have a dropdown menu where I can choose between two options, and when selected, the corresponding data is displayed. However, I would like to display the data that is inside a div tag instead. Check out this Fiddle Demo HTML: <div ng-controller="Ct ...

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered. You can vie ...

How can I adjust the indentation in Angular Prime-ng's p-tree component?

In my project, I am utilizing the primg-ng tree component for the sidebar. Currently, the output is displayed as shown here: https://i.stack.imgur.com/kcSQt.png However, I am looking to maintain consistent indentation levels without any adaptive changes ...

Challenges with navbars and Bootstrap

Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...

How can I retrieve the value from an input form using jQuery if it returns null?

Despite trying various methods, I have been unsuccessful in retrieving form values using jQuery and sending them in an AJAX GET request. The value keeps showing as null even after spending more than 18 hours on it. Any help would be greatly appreciated. $ ...

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

Tips for aligning an image in the center with a background attachment

I am facing an issue where only half of the image shows up when inserting the fixed effect. I need the entire image to be visible on the right side while adapting it for mobile devices. * { margin: 0; padding: 0; box-sizing: border-box; } .con ...

The height of adjacent divs should be uniform, resize seamlessly, and contain an absolutely positioned element within

Is there a way to make these neighboring divs the same height, responsive to browser window resizing, and with icons positioned on the corners? This method using display:table-cell works in most browsers but fails in Firefox due to a bug that causes the ic ...

Utilizing CSS to dynamically update SVG icons within the navigation menu upon tab selection

Feeling frustrated and in need of assistance with my current issue. I am attempting to make a change - when I click on a tab in the menu, the default black SVG icon should be replaced by a white one. #menu a .main-menu-icon { display:inline-block; width:2 ...

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

Choose the label by utilizing the CSS selector

I am currently using CSS to create tabs with radio buttons. However, I am struggling to figure out how to select the corresponding <label> for the radio button. To keep the labels separate from the content and display them as tabs, I have structured ...

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

Bootstrap Button Problem: Difficulty arranging buttons in a neat way, unable to position them next to each other

I'm currently working on a real estate website project and have designed a Photoshop template which is uploaded on Behance. Check it out here. Right now, I'm creating the static version of the real estate store template and facing an issue with ...