roundings through pictures or javascript ?

[Ed]

Hellu,

When do you want to create rounded corners of a panel through css and
pictures, or through css and javascript (pictureless) (for example:
http://www.ruzee.com, or through http://gwt.components.googlepages.com/roundcorners)
?
I am not so sure what is better. please some feedback on this ?

I see that the Decorator panel in 1.5 uses css and pictures..... but
why not just javascript to create your corners ?... The only reason I
can think of is that javascript creates a lot of div's..

Btw: if I look at the pictures in the Decorator Panel that are used as
background, they contain several nested pictures.. who does this work,
and create/use them ?

Cheers,
Ed

[Peter Blazejewicz]

hi Ed,

you're on your own, There are many ways of achieveing the same results
in html (nearly all are cross-browsers),
Personally I'm using background scaled imaged which is set via CSS
atrributes (so wihtout taking into account IE6 crappy gift from
Microsoft, if IE6 then "sorry, let's go with rect shapes everywhere"),

regards,
Peter

On Apr 8, 5:20 pm, Ed <post2edb...@hotmail.com> wrote:
> Hellu,
>
> When do you want to create rounded corners of a panel through css and

> pictures, or through css and javascript (pictureless) (for example:http://www.ruzee.com, or throughhttp://gwt.components.googlepages.com/roundcorners)

[Ed]

Yep, it's a lonely feeling sometimes ;)

Thanks Peter

[davidroe]

here is how I tend to do it.

/dave

------------------------------------ 8<
------------------------------------

RoundedPanel roundedPanel = new RoundedPanel("rp");

**** RoundedPanel.java

package com.example.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.ClickListenerCollection;
import com.google.gwt.user.client.ui.ComplexPanel;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.MouseListenerCollection;
import com.google.gwt.user.client.ui.SourcesMouseEvents;
import com.google.gwt.user.client.ui.SourcesClickEvents;
import com.google.gwt.user.client.ui.Widget;

public class RoundedPanel extends ComplexPanel implements
SourcesMouseEvents, SourcesClickEvents {

protected String _styleName;
protected Element _frame,
_content;
protected MouseListenerCollection _mouseListeners;
protected ClickListenerCollection _clickListeners;

public RoundedPanel(String styleName) {

super();
_styleName = styleName;

String className = "className";

_frame = DOM.createDiv();
DOM.setAttribute(_frame,className,_styleName + "F");

Element top = DOM.createDiv();
DOM.setAttribute(top,"align","left");
DOM.setAttribute(top,className,_styleName + "T");
Element topChild = DOM.createDiv();
DOM.appendChild(top,topChild);
DOM.appendChild(_frame,top);

Element c1 = DOM.createDiv();
DOM.setAttribute(c1,className,_styleName + "C1");

Element c2 = DOM.createDiv();
DOM.setAttribute(c2,className,_styleName + "C2");

_content = DOM.createDiv();
DOM.setAttribute(_content,className,_styleName + "C3");

DOM.appendChild(c2,_content);
DOM.appendChild(c1,c2);
DOM.appendChild(_frame,c1);

Element bottom = DOM.createDiv();
DOM.setAttribute(bottom,"align","left");
DOM.setAttribute(bottom,className,_styleName + "B");
Element bottomChild = DOM.createDiv();
DOM.appendChild(bottom,bottomChild);
DOM.appendChild(_frame,bottom);

setElement(_frame);
sinkEvents(Event.MOUSEEVENTS | Event.ONCLICK);

}

public void add(Widget w) {
super.add(w,_content);
}

public void align(String alignment) {
DOM.setStyleAttribute(_content,"align",alignment);
}

public void addMouseListener(MouseListener listener) {

if (_mouseListeners == null) {
_mouseListeners = new MouseListenerCollection();
}
_mouseListeners.add(listener);

}

public void removeMouseListener(MouseListener listener) {

if (_mouseListeners != null) {
_mouseListeners.remove(listener);
}
}

public void addClickListener(ClickListener listener) {

if (_clickListeners == null) {
_clickListeners = new ClickListenerCollection();
}
_clickListeners.add(listener);

}

public void removeClickListener(ClickListener listener) {

if (_clickListeners != null) {
_clickListeners.remove(listener);
}
}

public void onBrowserEvent(Event event) {

super.onBrowserEvent(event);

switch (DOM.eventGetType(event)) {

case Event.ONMOUSEDOWN:
case Event.ONMOUSEUP:
case Event.ONMOUSEMOVE:
case Event.ONMOUSEOVER:
case Event.ONMOUSEOUT:
if (getElement() != null && _mouseListeners != null) {
_mouseListeners.fireMouseEvent(this,event);
}
break;

case Event.ONCLICK:
if (getElement() != null && _clickListeners != null) {
_clickListeners.fireClick(this);
}
break;

}

}

}

**** using CSS like this:

.rpT,
.rpB {
margin-left:10px;
height:10px;
}

.rpT div,
.rpB div {
height:10px;
width:10px;
position:relative;
left:-10px;
}

.rpC1 {
padding-left:6px;
}

.rpC2 {
padding-right:6px;
}

.rpC3 {
padding:0 5px;
}

.rpT {
background:url(i/round/box.gif) no-repeat 100% 0;
}
.rpT div {
background:url(i/round/box.gif) no-repeat 0 0;
}
.rpB {
background:url(i/round/box.gif) no-repeat 100% 100%;
}
.rpB div {
background:url(i/round/box.gif) no-repeat 0 100%;
}
.rpC1 {
background:url(i/round/borders.gif) repeat-y 0 0;
}
.rpC2 {
background:url(i/round/borders.gif) repeat-y 100% 0;
}
.rpC3 {
background-color:#FFF;
}

which allows me to use the technique described here:
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

HTH,
/dave