Style a gwt Hyperlink with cssResource

Question

Hi I want to style my Webb app with GWT CSSResource.

But I have no idea how to style an simple hyperlink.

In simple css I would do:

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

But how I can do this in CSSResource ?

Here is my try.

My cssResource looks like:

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();
}

The css file is this:

.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;
}

When I try to add the linkColor() style I get an error. The best soulution would be that I don't need another css class. If possible fontcolor and hyperlink color should be the same.

Here is the Java Code where the Hyperlink is build. I'm sorry that there is no ui.xml.

    import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeUri;
import com.google.gwt.safehtml.shared.UriUtils;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Hyperlink;

import com.SchumannGmbH.cam.web.client.resources.PSGResourcesFactory;

/**
 * @author warzok
 * 
 */
public class SafeHTMLImgLink
    extends Composite
{

  public static final Template TEMPLATE = GWT.create( Template.class );
  private String imageURL;
  private String ratingImageURL = "";
  private String imgWidth;
  private Hyperlink hyperLink;
  private String title;
  private String cssClass = "";
  private String counterText = "";
  private HTML html;
  private FlowPanel panel;
  private boolean rating;
  private boolean selected;
  private LinkType linktype;
  private String token;

  public interface Template
      extends SafeHtmlTemplates
  {
    @Template ( "<img src=\"{0}\" />")
    SafeHtml img( SafeUri imgUrl );

    @Template ( "<div class=\"{3}\" align=\"center\"> <img src=\"{0}\" width=\"{2}\"/> <br/> {1} </div>")
    SafeHtml linkWithImgUp( SafeUri imgUrl, String title, String width, String cssClass );

    @Template ( "<div class=\"{3}\"><table class=\"linkTable\" cellspacing=\"0\" cellpadding=\"0\"><tr>"
        + "<td width=\"{2}\"><img src=\"{0}\" width=\"{2}\"/></td>"
        + "<td style=\"text-align: left; padding-left: 2px;\"><div style=\"white-space: normal;\">{1}</div></td>"
        + "<td style=\"text-align: right; width: {2};\"><img src=\"{4}\" width=\"{2}\"/></td></div>")
    SafeHtml ratingImgLink( SafeUri imgURL, String title, String pictureWidth, String cssClass,
        SafeUri ratingImgURL );

    /**
     * Generates a Link with a degfined text width of 220px
     * 
     * @param imgURL
     * @param title
     * @param pictureWidth
     * @param cssClass
     * @param ratingImgURL
     * @return
     */
    @Template ( "<div class=\"{3}\"><table class=\"linkTable\" cellspacing=\"0\" cellpadding=\"0\"><tr><td width=\"{2}\"><img src=\"{0}\" width=\"{2}\"/></td>"
        + "<td style=\"text-align: left; padding-left: 2px;\">{1}</td><td style=\"text-align: right; width: {2};\"><img src=\"{4}\" width=\"{2}\"/></td></div>")
    SafeHtml ratingImgLinkWithTextWidth( SafeUri imgURL, String title, String pictureWidth,
        String cssClass,
        SafeUri ratingImgURL );

    @Template ( "<div class=\"{3}\"><table class=\"linkTable\" cellspacing=\"0\" cellpadding=\"0\"><tr><td width=\"{2}\"><img src=\"{0}\" width=\"{2}\"/></td>"
        + "<td style=\"text-align: left; padding-left: 2px;\">{1}</td><td class=\"link-counter\">{4}</td></div>")
    SafeHtml counterImgLink( SafeUri imgURL, String title, String pictureWidth,
        String cssClass,
        String counterText );

    @Template ( "<div class=\"{3}\"><table class=\"linkTable\" cellspacing=\"0\" cellpadding=\"0\"><tr>"
        +
        "<td width=\"{2}\"><img src=\"{0}\" width=\"{2}\"/></td>"
        + "<td style=\"text-align: left; padding-left: 2px;\"><div style=\"white-space: normal;\">{1}</div></td></div>")
    SafeHtml fastSearchLink( SafeUri imgURL, String title, String pictureWidth, String cssClass );

    @Template ( "<div class=\"{3}\"><a href='{5}'>"
        + "<table class=\"linkTable\" cellspacing=\"0\" cellpadding=\"0\"><tr>"
        + "<td width=\"{2}\"><img src=\"{0}\" width=\"{2}\"/></td><td><img src=\"{4}\" width=\"{2}\"/></td>"
        + "<td style=\"text-align: left; padding-left: 2px;\"><div>{1}</div></td></a>")
    SafeHtml cameraNaviLink( SafeUri tableOrDiagramImageURL, String title, String pictureWidth,
        String cssClass,
        SafeUri statusImageURL, SafeUri token );
  }

  public SafeHTMLImgLink( String imageURL )
  {
    this( "", false, imageURL, null, null, LinkType.IMG );
  }

  public SafeHTMLImgLink( String imageURL, String title, String imgWidth )
  {
    this( "", false, imageURL, title, imgWidth, LinkType.DEFAULT );
  }

  public SafeHTMLImgLink( String imageURL, String title, String imgWidth, LinkType type )
  {
    this( "", false, imageURL, title, imgWidth, type );
  }

  public SafeHTMLImgLink( String token, boolean rating, String imageURL, String title,
      String imgWidth, LinkType linkType )
  {
    this( token, rating, false, true, imageURL, title, imgWidth, linkType );
  }

  public SafeHTMLImgLink( String token, boolean rating, boolean selection, boolean enabled,
      String imageURL, String title, String imgWidth, LinkType linkType )
  {
    this.rating = rating;
    this.setSelected( selection );
    this.title = title;
    this.imageURL = imageURL;
    this.imgWidth = imgWidth;
    this.linktype = linkType;
    this.token = token;
    panel = new FlowPanel();
    initWidget( panel );
    html = new HTML( buildHTML( title ) );

    panel.add( html );
    if ( token != null )
      buildLink( title, token );
    setEnabled( enabled );

  }

  /**
   * @param title
   * @param token
   * @param imageUp
   */
  private void buildLink( @SuppressWarnings ( "hiding") String title, String token )
  {
    if ( linktype == LinkType.CAMERA_NAVI )
    {
      HTML html = new HTML();

      panel.add( html );
    }
    else
    {
      setHyperLink( new Hyperlink( buildHTML( title ), true, token ) );
      panel.add( getHyperLink() );
    }
  }

  /**
   * @param title
   */
  @SuppressWarnings ( "hiding")
  private String buildHTML( String title )
  {
    String html = null;
    // if(title.length()>= 30)
    // {
    // String[] split = title.split( " " );
    // if(split.length >=3)
    // title=split[0]+split[1]+"\n"+split[2];
    // }
    switch ( linktype )
    {
      case IMG:
        html = TEMPLATE.img( UriUtils.fromString( imageURL ) ).asString();
        break;
      case IMAGEUP:
        html = TEMPLATE.linkWithImgUp( UriUtils.fromString( imageURL ), title,
            imgWidth, cssClass ).asString();
        break;
      case NAVIGATIONLINK:

        html = TEMPLATE.ratingImgLinkWithTextWidth( UriUtils.fromString( imageURL ), title,
            imgWidth, cssClass,
            UriUtils.fromString( ratingImageURL ) )
            .asString();
        break;
      case FASTSEARCH:
        html = TEMPLATE.fastSearchLink( UriUtils.fromString( imageURL ), title,
            imgWidth, cssClass ).asString();
        html = removeHoverStyle( html );
        break;
      case CAMERA_NAVI:
        html = TEMPLATE.cameraNaviLink( UriUtils.fromString( imageURL ), title,
            imgWidth, cssClass,
            UriUtils.fromString( ratingImageURL ), UriUtils.fromString( token ) )
            .asString();
        break;
      default:
        html = TEMPLATE.ratingImgLink( UriUtils.fromString( imageURL ), title,
            imgWidth, cssClass,
            UriUtils.fromString( ratingImageURL ) )
            .asString();
        if ( counterText.startsWith( "(" ) && counterText.endsWith( ")" ) )
          html = TEMPLATE.counterImgLink( UriUtils.fromString( imageURL ),
              title, imgWidth,
              cssClass, counterText )
              .asString();
        break;
    }

    if ( html.contains( "<img src=\"\"" ) )
    {
      int startIndex = html.indexOf( "<img src=\"\"" );
      int endIndex = html.indexOf( '>', startIndex );

      String subString = html.substring( 0, startIndex )
          + html.substring( endIndex + 1, html.length() );

      html = subString;
    }

    return html;
  }

  /**
   * This class set the width of the Images
   * 
   * @param width
   */
  public void setImageWidth( String width )
  {
    this.imgWidth = width;
    getHyperLink().setHTML( buildHTML( this.title ) );
  }

  /**
   * Referesh the title of Link
   * 
   * @param title
   */
  public void updateLink( @SuppressWarnings ( "hiding") String title )
  {
    this.title = title;
    getHyperLink();
  }

  public String getImageURL()
  {
    return imageURL;
  }

  /**
   * Add a new Image at left Position
   * 
   * @param imageURL
   */
  public void setImageURL( String imageURL )
  {
    this.imageURL = imageURL;
    getHyperLink();
  }

  /**
   * Refresh the link
   * 
   * @return {@link Hyperlink}
   */
  public Hyperlink getHyperLink()
  {
    hyperLink.setHTML( buildHTML( title ) );
    hyperLink.setStyleName( PSGResourcesFactory.getFac().getResources().ciColors().fontColor() );
    return hyperLink;
  }

  public void setHyperLink( Hyperlink hyperLink )
  {
    this.hyperLink = hyperLink;
  }

  /**
   * Give a css-Class to the inner div atribute
   * 
   * @param cssClass
   */
  public void setCssClass( String cssClass )
  {
    this.cssClass = cssClass;
    getHyperLink();
  }

  public String getRatingImageURL()
  {
    return ratingImageURL;
  }

  /**
   * Change image on the right side of link
   * 
   * @param ratingImageURL
   */
  public void setRatingImageURL( String ratingImageURL )
  {
    this.ratingImageURL = ratingImageURL;
    this.setRating( true );
    getHyperLink();
  }

  /**
   * Enable / Disable Link
   * 
   * @param enabled
   */
  public void setEnabled( boolean enabled )
  {
    if ( enabled )
    {
      panel.remove( html );
      panel.add( hyperLink );
    }
    else
    {
      panel.add( html );
      html.getElement().getStyle().setOpacity( 0.5 );
      panel.remove( hyperLink );
    }
  }

  public boolean isRating()
  {
    return rating;
  }

  /**
   * 
   * @param rating
   */
  public void setRating( boolean rating )
  {
    this.rating = rating;
    getHyperLink();
  }

  /**
   * Call true if you want to display image obove text
   * 
   * @param imageUp
   * @param imgWith
   */
  public void setImageUp( LinkType linkType, String imgWith )
  {
    this.imgWidth = imgWith;
    this.linktype = linkType;
    getHyperLink();
  }

  public boolean isSelected()
  {
    return selected;
  }

  public void setCounterText( String counterText )
  {
    this.counterText = counterText;
    getHyperLink();
  }

  /**
   * Selected / not Selected
   * 
   * @param selected
   */
  public void setSelected( boolean selected )
  {
    if ( this.selected && !selected )
    {
      getHyperLink().addStyleName( "link" );
      getHyperLink().removeStyleName( "link-bold" );
    }
    else if ( !this.selected && selected )
    {
      getHyperLink().removeStyleName( "link" );
      getHyperLink().addStyleName( "link-bold" );
    }
    this.selected = selected;
  }

  /**
   * Mit dieser Methode wird der Style "linkTable" entfernt. Somit gibt es keinen Hovereffekt mehr.
   * 
   * @return Den String ohne Style
   */
  private String removeHoverStyle( @SuppressWarnings ( "hiding") String html )
  {
    return html.replace( "linkTable", "" );
  }

  /**
   * Wird irgendwann durch den normalen {@link SafeHTMLImgLink} ersetzt.
   **/
  @Deprecated
  public static String getLinkAsHTML( String imgURL, String title, String pictureWidth,
      String cssClass, String rightImgURL, boolean removeHoverStyle )
  {
    SafeHtml imgLink = TEMPLATE.ratingImgLink( UriUtils.fromString( imgURL ),
        title, pictureWidth,
        cssClass, UriUtils.fromString( rightImgURL ) );
    String html = imgLink.asString();
    if ( removeHoverStyle )
      html = html.replace( "linkTable", "" );

    return html;

  }

  /**
   * Wird irgendwann durch den normalen {@link SafeHTMLImgLink} ersetzt.
   **/
  @Deprecated
  public static String getLinkWithImgUpAsHTML( String imgUrl, String title, String width,
      String cssClass, boolean removeHoverStyle )
  {
    SafeHtml imgLink = TEMPLATE
        .linkWithImgUp( UriUtils.fromString( imgUrl ), title,
            width, cssClass );
    String html = imgLink.asString();
    if ( removeHoverStyle )
      html = html.replace( "linkTable", "" );

    return html;
  }

  @Override
  public String toString()
  {
    html.setVisible( true );
    return html.toString();
  }

}

Does someone know if this is possible ?

Thanks in advance.

Answer 1

After a lot of Time I write my own link widget. And there I can add the style directly to the linkelement.

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 );
  }

Answer 2

Please try with below steps.

• You have to call LinkResources.INSTANCE.style().ensureInjected() in the beginning single time only to inject the CSS as shown below.

• Try with hyperLink.addStyleName() instead of hyperLink.setStyleName()

---

Try with below css style to observer the changes

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

Sample code: (change it as per 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(); // change it with your actual css file
}

---

Some to the things that I noticed in your code

• It should be

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

• It should be

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

• No style is used other than fontColor from CssResource