html - 使用 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

请尝试以下步骤。

• 您必须在开始时单次调用 LinkResources.INSTANCE.style().ensureInjected() 以注入(inject) 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 { 颜色:#FF8F35; } 而不是 a { color: #FF8F35; }

• 应该是

  .mainColor { 背景:#FF8F35; } 而不是 .mainColor {background: FF8F35;}

• 除了 CssResource

  中的 fontColor 之外没有使用其他样式