Image widget that overcomes PNG browser incompatabilities : Image « GWT « Java






Image widget that overcomes PNG browser incompatabilities

 

package com.java2s.gwt.client;

import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.core.client.*;

public class GWTClient implements EntryPoint{
  public void onModuleLoad() {
    RootPanel.get().add(new ToggleButton("images/close.png",16,16));
  }
}
/*
 * Copyright 2006 Robert Hanson <iamroberthanson AT gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *    http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


class ToggleButton extends ImageButton
{
    private int trueState;


    public ToggleButton (String url, int width, int height)
    {
        super(url, width, height);
    }

    protected void init ()
    {
        addMouseListener(new MouseListenerAdapter(){

            public void onMouseEnter (Widget sender)
            {
                trueState = getState();
                setState(ON_STATE);
                setColors();
            }

            public void onMouseLeave (Widget sender)
            {
                setState(trueState);
                setColors();
            }
        });
    }
    
    public void setOn (boolean on)
    {
        if (on) {
            setState(ON_STATE);
            trueState = ON_STATE;
        }
        else {
            setState(OFF_STATE);
            trueState = OFF_STATE;
        }
        setColors();
    }


    /**
     * Toggle button state
     * @param on
     */
    public void toggle ()
    {
        if (trueState == ON_STATE) {
            trueState = OFF_STATE;
        }
        else {
            trueState = ON_STATE;
        }
        setState(trueState);
        setColors();
    }
}

/*
 * Copyright 2006 Robert Hanson <iamroberthanson AT gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *    http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Use an image as a button.  Allows for setting of on/off 
 * background color, border color, border width, and border 
 * style.  The "on" colors are used on mouse over.
 * 
 * @author rhanson
 */
class ImageButton extends PNGImage
{

    protected final static int ON_STATE = 1;
    protected final static int OFF_STATE = -1;
    private int state = OFF_STATE;
    
    private String onStyle = "gwl-ImageButton-On";
    private String offStyle = "gwl-ImageButton-Off";

    private Color backgroundOnColor = Color.NONE;
    private Color backgroundOffColor = Color.NONE;

    private Color borderOnColor = Color.BLACK;
    private Color borderOffColor = Color.NONE;
    
    private int borderOnWidth = 1;
    private int borderOffWidth = 0;
    
    private int paddingLeft = 0;
    private int paddingRight = 0;
    private int paddingTop = 0;
    private int paddingBottom = 0;
    
    private BorderStyleConstant borderOnStyle = BorderStyle.BORDER_STYLE_SOLID;
    private BorderStyleConstant borderOffStyle = BorderStyle.BORDER_STYLE_NONE;


    public ImageButton (String url, int width, int height)
    {
        super(url, width, height);
        setStyleName("gwl-image-button");
        setColors();
        init();
    }

    
    protected void init ()
    {
        addMouseListener(new MouseListenerAdapter(){

            public void onMouseEnter (Widget sender)
            {
                state = ON_STATE;
                setColors();
            }

            public void onMouseLeave (Widget sender)
            {
                state = OFF_STATE;
                setColors();
            }
        });
    }
    
    
    public boolean isOn ()
    {
        return state == ON_STATE;
    }
    
    /**
     * Updates the colors of the widget based on the state
     * and color settings. This is usually only used after 
     * setting one or more of the colors.
     */
    public void setColors ()
    {
        DOM.setStyleAttribute(getElement(), "paddingTop", getPaddingTopWidth() + "px");
        DOM.setStyleAttribute(getElement(), "paddingRight", getPaddingRightWidth() + "px");
        DOM.setStyleAttribute(getElement(), "paddingBottom", getPaddingBottomWidth() + "px");
        DOM.setStyleAttribute(getElement(), "paddingLeft", getPaddingLeftWidth() + "px");
        DOM.setStyleAttribute(getElement(), "borderWidth", getBorderWidth() + "px");
        DOM.setStyleAttribute(getElement(), "borderColor", getBorderColor().getHexValue());
        DOM.setStyleAttribute(getElement(), "borderStyle", getBorderStyle().getBorderStyleName());
        DOM.setStyleAttribute(getElement(), "backgroundColor", getBackgroundColor().getHexValue());
        setStyleName(getCssStyleName());
    }

    private String getCssStyleName ()
    {
        if (state == ON_STATE)
            return onStyle;
        else
            return offStyle;
    }


    private Color getBackgroundColor ()
    {
        if (state == ON_STATE)
            return backgroundOnColor;
        else
            return backgroundOffColor;
    }

    private BorderStyleConstant getBorderStyle ()
    {
        if (state == ON_STATE)
            return borderOnStyle;
        else
            return borderOffStyle;
    }

    private Color getBorderColor ()
    {
        if (state == ON_STATE)
            return borderOnColor;
        else
            return borderOffColor;
    }

    private int getBorderWidth ()
    {
        if (state == ON_STATE)
            return borderOnWidth;
        else
            return borderOffWidth;
    }

    private int getPaddingLeftWidth ()
    {
        int max = (borderOnWidth > borderOffWidth) ? borderOnWidth : borderOffWidth;
        
        if (state == ON_STATE) {
            return (max - borderOnWidth + paddingLeft);
        }
        else {
            return (max - borderOffWidth + paddingLeft);
        }
    }

    private int getPaddingRightWidth ()
    {
        int max = (borderOnWidth > borderOffWidth) ? borderOnWidth : borderOffWidth;
        
        if (state == ON_STATE) {
            return (max - borderOnWidth + paddingRight);
        }
        else {
            return (max - borderOffWidth + paddingRight);
        }
    }

    private int getPaddingTopWidth ()
    {
        int max = (borderOnWidth > borderOffWidth) ? borderOnWidth : borderOffWidth;
        
        if (state == ON_STATE) {
            return (max - borderOnWidth + paddingTop);
        }
        else {
            return (max - borderOffWidth + paddingTop);
        }
    }
    
    private int getPaddingBottomWidth ()
    {
        int max = (borderOnWidth > borderOffWidth) ? borderOnWidth : borderOffWidth;
        
        if (state == ON_STATE) {
            return (max - borderOnWidth + paddingBottom);
        }
        else {
            return (max - borderOffWidth + paddingBottom);
        }
    }
    
    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setMargin (int px)
    {
        DOM.setStyleAttribute(getElement(), "margin", px + "px");
    }
    
    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setHorizontalMargin (int px)
    {
        DOM.setStyleAttribute(getElement(), "marginLeft", px + "px");
        DOM.setStyleAttribute(getElement(), "marginRight", px + "px");
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setVerticleMargin (int px)
    {
        DOM.setStyleAttribute(getElement(), "marginTop", px + "px");
        DOM.setStyleAttribute(getElement(), "marginBotom", px + "px");
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public Color getBackgroundOffColor ()
    {
        return backgroundOffColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBackgroundOffColor (Color backgroundOffColor)
    {
        this.backgroundOffColor = backgroundOffColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public Color getBackgroundOnColor ()
    {
        return backgroundOnColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBackgroundOnColor (Color backgroundOnColor)
    {
        this.backgroundOnColor = backgroundOnColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public Color getBorderOffColor ()
    {
        return borderOffColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOffColor (Color borderOffColor)
    {
        this.borderOffColor = borderOffColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public BorderStyleConstant getBorderOffStyle ()
    {
        return borderOffStyle;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOffStyle (BorderStyleConstant borderOffStyle)
    {
        this.borderOffStyle = borderOffStyle;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public int getBorderOffWidth ()
    {
        return borderOffWidth;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOffWidth (int borderOffWidth)
    {
        this.borderOffWidth = borderOffWidth;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public Color getBorderOnColor ()
    {
        return borderOnColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOnColor (Color borderOnColor)
    {
        this.borderOnColor = borderOnColor;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public BorderStyleConstant getBorderOnStyle ()
    {
        return borderOnStyle;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOnStyle (BorderStyleConstant borderOnStyle)
    {
        this.borderOnStyle = borderOnStyle;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public int getBorderOnWidth ()
    {
        return borderOnWidth;
    }

    /**
     * This method is under consideration for removal,
     * if you have an opion please comment on http://gwtwidgets.blogspot.com.
     */
    public void setBorderOnWidth (int borderOnWidth)
    {
        this.borderOnWidth = borderOnWidth;
    }

    protected int getState ()
    {
        return state;
    }

    protected void setState (int state)
    {
        this.state = state;
    }


    public String getOffStyle ()
    {
        return offStyle;
    }


    public void setOffStyle (String offStyle)
    {
        this.offStyle = offStyle;
    }


    public String getOnStyle ()
    {
        return onStyle;
    }


    public void setOnStyle (String onStyle)
    {
        this.onStyle = onStyle;
    }


}

/*
 * Copyright 2006 Robert Hanson <iamroberthanson AT gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *    http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


/**
 * Image widget that overcomes PNG browser incompatabilities.
 * Although meant for PNG images, it will work with any image
 * format supported by the browser.  If the image file ends
 * with ".png" or ".PNG" it will use the PNG specific routines,
 * otherwise will use generic non-PNG specific routines.
 * 
 * The URL, width, and height are required at the creation of the
 * widget, and may not be updated via the widget methogs.  Calling
 * setUrl() will throw a RuntimeException.  This is in part due to
 * the workarounds required for IE 5.5 and IE6.
 * 
 * @author rhanson
 */
 class PNGImage extends Image
{
    private PNGImageImpl impl;


    public PNGImage (String url, int width, int height)
    {
        impl = (PNGImageImpl) GWT.create(PNGImageImpl.class);
        
        setElement(impl.createElement(url, width, height));
        sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.ONLOAD | Event.ONERROR);
    }

    
    public String getUrl ()
    {
        return impl.getUrl(this);
    }
   
    /**
     * Should not be used. Throws RuntimeException
     */
    public void setUrl (String url)
    {
        throw new RuntimeException("Not allowed to set url for a PNG image");
    }
}

/*
 * Copyright 2006 Robert Hanson <iamroberthanson AT gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *    http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 class PNGImageImpl
{
    
    public Element createElement (String url, int width, int height)
    {
        Element result = DOM.createImg();
        DOM.setAttribute(result, "src", url);
        DOM.setIntAttribute(result, "width", width);
        DOM.setIntAttribute(result, "height", height);
        return result;
    }

    public String getUrl (PNGImage image)
    {
        return DOM.getAttribute(image.getElement(), "src");
    }

}

/*
 * Copyright 2006 Robert Hanson <iamroberthanson AT gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *    http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

class PNGImageImplIE6 extends PNGImageImpl
{
    private String url;
    private boolean isPng;

    
    public Element createElement (String url, int width, int height)
    {
        this.url = url;
    
        if (url.endsWith(".png") || url.endsWith(".PNG")) {
            isPng = true;
        }
        else {
            isPng = false;
        }
        
        if (isPng) {
            Element div = DOM.createDiv();
            DOM.setInnerHTML(div, "<span style=\"display:inline-block;width:" + width + "px;height:" + height + "px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "', sizingMethod='scale')\"></span>");

            return DOM.getFirstChild(div);
        }
        else {
            return super.createElement(url, width, height);
        }
    }

    public String getUrl (PNGImage image)
    {
        if (isPng) {
            return url;
        }
        else {
            return super.getUrl(image);
        }
    }

    
}
public class BorderStyleConstant
{

        private String styleName;
        
        public BorderStyleConstant (String styleName)
        {
            this.styleName = styleName;
        }

        public String getBorderStyleName() {
            return styleName;
        }
        
}


 class BorderStyle
{
   
    
    final public static BorderStyleConstant BORDER_STYLE_NONE = new BorderStyleConstant("none");

    final public static BorderStyleConstant BORDER_STYLE_DOTTED = new BorderStyleConstant("dotted");

    final public static BorderStyleConstant BORDER_STYLE_DASHED = new BorderStyleConstant("dashed");

    final public static BorderStyleConstant BORDER_STYLE_SOLID = new BorderStyleConstant("solid");

    final public static BorderStyleConstant BORDER_STYLE_DOUBLE = new BorderStyleConstant("double");

    final public static BorderStyleConstant BORDER_STYLE_GROOVE = new BorderStyleConstant("groove");

    final public static BorderStyleConstant BORDER_STYLE_RIDGE = new BorderStyleConstant("ridge");

    final public static BorderStyleConstant BORDER_STYLE_INSET = new BorderStyleConstant("inset");

    final public static BorderStyleConstant BORDER_STYLE_OUTSET = new BorderStyleConstant("outset");

}

class Color
{
    public final static Color WHITE = new Color(255, 255, 255);
    public final static Color LIGHT_GRAY = new Color(192, 192, 192);
    public final static Color GRAY = new Color(128, 128, 128);
    public final static Color DARK_GRAY = new Color(64, 64, 64);
    public final static Color BLACK = new Color(0, 0, 0);
    public final static Color RED = new Color(255, 0, 0);
    public final static Color PINK = new Color(255, 175, 175);
    public final static Color ORANGE = new Color(255, 200, 0);
    public final static Color YELLOW = new Color(255, 255, 0);
    public final static Color GREEN = new Color(0, 255, 0);
    public final static Color MAGENTA = new Color(255, 0, 255);
    public final static Color CYAN = new Color(0, 255, 255);
    public final static Color BLUE = new Color(0, 0, 255);
    public static final Color NONE = new Color("");
    
    private int r, g, b;
    
    // only for special cases, like no color, or maybe named colors
    private String colorText = null;

    private Color (String colorText) {
        this.colorText = colorText;
    }

    public Color (int r, int g, int b)
    {
        this.r = r;
        this.g = g;
        this.b = b;
    }

    public int getRed ()
    {
        return r;
    }

    public int getGreen ()
    {
        return g;
    }

    public int getBlue ()
    {
        return b;
    }

    public String getHexValue ()
    {
        if (colorText != null) {
            return colorText;
        }

        return "#"
            + pad(Integer.toHexString(r))
            + pad(Integer.toHexString(g))
            + pad(Integer.toHexString(b));
    }

    private String pad (String in)
    {
        if (in.length() == 0) {
            return "00";
        }
        if (in.length() == 1) {
            return "0" + in;
        }
        return in;
    }

    public String toString ()
    {
        if (colorText != null) {
            return colorText;
        }
        return "red=" + r + ", green=" + g + ", blue=" + b;
    }
}


           
         
  








GWT-ToggleImageButton.zip( 7 k)

Related examples in the same category

1.Use GWT Resource To Load Images
2.Load image
3.Add Image to Canvas (Smart GWT)Add Image to Canvas (Smart GWT)
4.Load different images (Smart GWT)Load different images (Smart GWT)
5.Img shows images in the standard web formats (png, gif, jpg) (Smart GWT)Img shows images in the standard web formats (png, gif, jpg) (Smart GWT)