樣式gwt超鏈接與cssResource

您好我想使用GWT CSSResource樣式我的Webb應用程序。樣式gwt超鏈接與cssResource

但我不知道如何設計一個簡單的超鏈接。

在簡單的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(); 
    } 

}

有人知道這是否可能嗎？

在此先感謝。

來源

2014-05-15 dominic

請分享你的'ui.xml'文件。 – Braj

沒有ui.xml它的所有構建在Java代碼中，但我也可以分享它。 – dominic

很多時間我寫我自己的鏈接部件之後。在那裏，我可以直接添加風格到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); 
    }

來源

2014-05-22 06:41:10 dominic

請嘗試以下步驟。

你必須在開始的時候只打一次LinkResources.INSTANCE.style().ensureInjected()注入CSS如下圖所示。
嘗試與hyperLink.addStyleName()代替hyperLink.setStyleName()

下面css樣式嘗試觀察者的變化

示例代碼：（改按您的實際接口）

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

來源

2014-05-15 17:50:32 Braj

明天我會試試;） – dominic

這對我不起作用，但我選擇了你的想法。 – dominic

樣式gwt超鏈接與cssResource

回答

相關問題