Style un lien hypertexte gwt avec cssResource

Question

Salut Je veux styler mon application Webb avec GWT CSSResource.

Mais je n'ai aucune idée de comment styler un simple lien hypertexte.

En simple, je css faire:

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

Mais comment je peux le faire en CSSResource?

Voici mon essai.

Mon cssResource ressemble:

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

Le fichier css est la suivante:

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

Lorsque je tente d'ajouter le style linkColor() Je reçois une erreur. La meilleure soulution serait que je n'ai pas besoin d'une autre classe CSS. Si possible, la couleur de police et de lien hypertexte doit être la même.

Voici le code Java où le lien hypertexte est construit. Je suis désolé qu'il n'y a pas 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(); 
    } 

} 

Est-ce que quelqu'un sait si c'est possible?

Merci d'avance.

Answer 1

Après beaucoup de temps j'écrire mon propre widget lien. Et là je peux ajouter le style directement au lien.

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

Veuillez essayer les étapes ci-dessous.

• Vous devez appeler LinkResources.INSTANCE.style().ensureInjected() dans le temps unique commence seulement à injecter le CSS comme indiqué ci-dessous.

• Essayez avec hyperLink.addStyleName() au lieu de hyperLink.setStyleName()

---

Essayez avec en dessous de style CSS à l'observateur les changements

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

Exemple de code: (changer selon votre interface réelle)

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 
} 

---

Certaines des choses que je remarquai dans votre code

• Il devrait être

  .a { color: #FF8F35; } au lieu de a { color: #FF8F35; }

• Il devrait être

  .mainColor { background: #FF8F35; } au lieu de .mainColor {background: FF8F35;}

• Aucun style est utilisé autre que fontColor de CssResource