使用cssResource的gwt超链接样式

Question

嗨，我想用GWT CSSResource设计我的Webb应用程序。

但我不知道如何设计一个简单的超链接。

在简单的css中，我会这样做：

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

但是我怎么能在CSSResource中做到这一点呢？

这是我的尝试。

我的cssResource看起来像：

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

css文件如下：

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

当我尝试添加linkColor()样式时，会出现一个错误。最好的解决方案是我不需要另一个css类。如果可能的话，字体颜色和超链接颜色应该是相同的。

以下是构建超链接的Java代码。对不起，这里没有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();
  }

}

有人知道这是否可能吗？

提前谢谢。

Answer 1

很多时间之后，我编写了自己的链接小部件。在那里，我可以将样式直接添加到链接元素中。

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

请按以下步骤试一试。

• 您必须在开头一次调用LinkResources.INSTANCE.style().ensureInjected()才能注入CSS，如下所示。
• 尝试使用hyperLink.addStyleName()而不是hyperLink.setStyleName()

尝试使用下面的css样式来观察更改

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

示例代码：(根据实际界面进行更改)

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
}

一些我在你的代码中注意到的东西

• 它应该是 .a { color: #FF8F35; }而不是a { color: #FF8F35; }
• 它应该是 .mainColor { background: #FF8F35; }而不是.mainColor {background: FF8F35;}
• 除了来自fontColor的CssResource之外，没有使用任何样式。