Hi I want to style my Webb app with GWT CSSResource.
But I have no idea how to style an simple hyperlink.
In simple css I would do:
a{color: #somecolor}
a:hover{color: #somecolor}
a:visited{color: #somecolor}
But how I can do this in CSSResource ?
Here is my try.
My cssResource looks like:
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();
}
The css file is this:
.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;
}
When I try to add the linkColor() style I get an error.
The best soulution would be that I don't need another css class. If possible fontcolor and hyperlink color should be the same.
Here is the Java Code where the Hyperlink is build. I'm sorry that there is no 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();
}
}
Does someone know if this is possible ?
Thanks in advance.