堆棧內存溢出
  簡體   English   中英

使用cssResource設置gwt超鏈接的樣式

[英]Style a gwt Hyperlink with cssResource

 原文  2014-05-15 13:16:49  5   2    html/ css/ gwt/ hyperlink

問題描述

嗨，我想用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類。 如果可能，fontcolor和超鏈接顏色應該相同。

這是構建超鏈接的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();
  }

}

有人知道這是否可能嗎？

提前致謝。

2 個解決方案

解決方案1
 0  2014-05-15 17:50:32

請嘗試以下步驟。

  • 您只需要在開始的單個時間調用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; }而不是a { color: #FF8F35; } a { color: #FF8F35; }

  • 它應該是

    .mainColor { background: #FF8F35; } .mainColor { background: #FF8F35; }代替.mainColor {background: FF8F35;}

  • 除了fontColor的CssResource以外，不使用其他任何樣式

解決方案2
 0 已采納  2014-05-22 06:41:10

很多時間后，我編寫了自己的鏈接小部件。 在這里，我可以將樣式直接添加到鏈接元素。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 超鏈接“活動”樣式不起作用？ GWT默認樣式名稱 GWT + CSS樣式重載 GWT超鏈接焦點在CSS上的作用類似於Active 如何設置前置HTML超鏈接的樣式？ 為輸入設置樣式，使其看起來像超鏈接 CSS 手風琴：超鏈接 (a) 不繼承樣式 帶有超鏈接問題的CSS樣式標題 使用超鏈接更改 style.display 嵌入CSS樣式，活動超鏈接位於<asp: Label>
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM