contrib: round corners

[gwt.com...@gmail.com]

Here you go: http://gwt.components.googlepages.com/

[Henry]

Thanks!

[joedoe]

Can I use this widget with build-in Panel widgets?

[Nandz]

Hi,

First of all thanks for the set of cool widget... the calendar was
really needed.

I followed the instructions you've given on your webpage for rounded
corners. When I execute my app in hosted mode I get the following
error:

[ERROR] Unable to load module entry point class
in.informationmatters.EPS.client.EPS
com.google.gwt.core.client.JavaScriptException: JavaScript TypeError
exception: $wnd.rzCrSimpleBorder is not a function

ruzeeborders.js is in the public/ folder along with the parent html
file (which in my case is EPS.html). The html file has the required
script tags to load ruzeeborders.js.

What could the problem be?

TIA
Nandz.

[Mike Stephen]

Hi,

I also tried to get this working. Is the way to use these components to
cut and paste the java code off the page, or is there a download link I
have missed?

Also, the code for Borders.java doesn't look a lot like java, it looks
more like c++ or maybe even c# (haven't used c# so can't say). I could
convert some of it I think, but I'm lost on the $wnd reference...

Looking forward to using this,

Mike.

[Nandz]

The code for Borders.java is probably raw Javascript embedded into a
Java file using JSNI (JavaScript Native Interface). Check out
http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.html
for more info about JSNI.

Nandz.

[Alexei Sokolov]

You need to include ruzeeborders.js before gwt.js in your host html page.

Alex

[dinho]

Thanks for these components. They look great. I was having trouble
with this one though and was wondering if other people had the same
problems.

DockPanel - My application has a main DockPanel that I add to my
Rootpanel. It has a green background added using a style, while my
main page background is white. When I had a shadowBorder this panel
just becomes completely white, with no indication of any kind of
border. Also the performance of my application slows considerably. I
tried adding "sborders" and "borders" elements in my CSS for the style
I add to the panel, but it made no difference(I could not find info on
what CSS tags the script uses but the Ruzee sites indicated it uses CSS
somehow). I also tried moving my DockPanel to a named element instead
of the default root element, but it made no difference either.

TextBox - when I add a border to a TextBox, I get the exception
attached below on load. It seems like it fails to get the DomElement,
but I am not sure.

I got it to work with Button, but that ended up not making sense.
Actaully, at first I had a rendering problem with that too, but worked
aroudn it by juggling around my code. What are you guys using this
with? It seems like a really cool feature, but I cannot get anything
useful out of it and it seems a bit flaky to me.

Thanks. And thanks again for posting all those useful components.

[ERROR] Unable to load module entry point class

com.ExpectValue.client.PokerCalc
java.lang.NullPointerException: null
at
com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNative(ModuleSpaceIE6.java:348)
at
com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid(ModuleSpaceIE6.java:254)
at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:127)
at com.gwt.components.client.Borders.shadowBorder(Borders.java:41)
at
com.ExpectValue.client.PokerCalc.initPlayersGrid(PokerCalc.java:200)
at com.ExpectValue.client.PokerCalc.onModuleLoad(PokerCalc.java:70)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:64)
at
com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:324)
at
com.google.gwt.dev.shell.ie.BrowserWidgetIE6.access$100(BrowserWidgetIE6.java:19)
at
com.google.gwt.dev.shell.ie.BrowserWidgetIE6$External.gwtOnLoad(BrowserWidgetIE6.java:45)

[Alexei Sokolov]

I noticed some problems with this particular widget too. It works fine for simple DIVs (i.e. HTML widget in GWT) and was not intended for anything else, actually. I'll take a look why it does not work for TextBox, but it seems like the problem lies in the javascript code.

Alex

com.google.gwt.dev.shell.ie.ModuleSpaceIE6.invokeNativeVoid (ModuleSpaceIE6.java:254)

        at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:127)
        at com.gwt.components.client.Borders.shadowBorder(Borders.java:41)
        at

com.ExpectValue.client.PokerCalc.initPlayersGrid (PokerCalc.java:200)

        at com.ExpectValue.client.PokerCalc.onModuleLoad(PokerCalc.java:70)
        at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:64)
        at

com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace (BrowserWidget.java:324)

[dinho]

ok. It is still pretty cool, but I guess looking at the method
parameters, I thought it worked for all UIObjects. There might be an
underlying problem with getting the DOM elements for some of GWT
objects, but I think it still works for some of the simple ones.

I can try to use it with more simple HTML, like you suggest. But, do
you know if there is a way to use this to get a Panel with rounded
corners? Would HTMLPanel do the trick, or is that still too complex of
an object?

[Swashbuckler]

Nice!

BUT... this is licensed under the MIT license, not the LGPL license.
The components home page should be updated to reflect that (it
currently says "The souce code is licensed under LGPL 2.1 license.").
The MIT license is less restrictive than the LGPL therefore this
component might get uptake that other components licensed the LGPL
won't get.

[Alexei Sokolov]

Javascript code (ruzeeborders.js) is licensed under MIT. Java code is LGPL.

Alex

[Swashbuckler]

I understand that. What I'm saying is that the home page of the web
site says that all code is licensed under the LGPL, i.e., the home page
is wrong so it'd be a good idea to either:

a. change the licensing of the code to match the web site

or

b. change the web site to accurately reflect the licensing

[sluramod]

The source code is published under LGPL. Topic closed.

P.S. I'm tired of people complaining about licensing. Stop complaining,
or at least take your complains somewhere else if you think that the
site violated somebody's copyrights.

Alex

[Swashbuckler]

> The source code is published under LGPL.

That's not what one of the source file says.

> I'm tired of people complaining about licensing. Stop complaining,

I'm not complaining about licensing, LGPL license? MIT license? I
don't give a shit. What I am telling you that the web site and source
code on the web site say different things about licensing. If you're
unwilling to fix SIMPLE discrepencies like that then you cannot be
taken seriously.

[glongman]

This is a bunch of hoohaw over nothing. The site merely links to the
MIT licensed js. There is no distro from the site that contains it. So
the statement that all code *on the site* is LGPL is correct.

To make the arguers go away I would add a discliamer to that:

"3rd Party dependencies may be licensed under different terms."

Then add a bit of text next to the link to the ruzeeborders: (other
licence: MIT)

Geoff

[Swashbuckler]

> This is a bunch of hoohaw over nothing.

Accurate and easy to understand information is never nothing - and can
be especially important when it relates to legal matters. Not
understanding licenses and obligations under them can get you into hot
water, read this
http://trends.newsforge.com/article.pl?sid=06/05/04/0048248 for an
example.

> So the statement that all code *on the site* is LGPL is correct.

That's not the statement on the web site, the web site says "The souce
code is licensed under LGPL 2.1 license." But even if it were
technically correct, it would also be easy to overlook and quite
frankly would be splitting hairs. You shouldn't be trying to do the
Clintonesque "It depends on what the meaning of 'is' is."

The point is to give people access to accurate and easy to understand
information so that they can make informed decisions. Is it that
really so much to ask?

[Matt]

Alexei,

Thank you so much for making this contribution available.

I'm having trouble actually getting some of the borders to render. I
think I've followed all the instructions properly:
- ruzeeborders.js in the head, before the GWT.js include
- Borders.java defined within my client package
- HTML yourDiv = new HTML("Cool");
- Borders.simpleBorder(yourDiv, 5);

There's no errors, and I've followed the execution of the javascript,
putting in alerts so I can make sure it doesn't fail somewhere - it all
happens ok.

But then no border is actually displayed. I just get a white box.

Curiously, some borders work and some don't:

Borders.fadeBorder(yourDiv,5,4); --nope
Borders.simpleBorder(yourDiv, 5 /* radius */); --nope
Borders.glowBorder(yourDiv, 5 /* radius */, 4 /* width */, "#35e" /*
color */); --works
Borders.shadowBorder(yourDiv, 5 /*radius */, 4 /* width */); --works

I'm using the embedded GWT browser to do this. Is this is common
problem?

Thanks,
Matt.

[sluramod]

Matt,

You need to specify border properties in your css file, for example:

.gwt-HTML {
border: 2px solid black;
padding: 5px;
}

Alex

[Matt Bennett]

Alex,

I already have border properties specified in my css file. I apply
them to my Widgets with widget.setStyleName("gwt-HTML");

If I don't add rounded corners to my widget, I get my css defined
border. If I do, I get no border at all.

Matt.

[Matt]

I'm still having problems with this. I've fiddled with it a bunch more
and nothing has changed. With a single HTML object, and the following
in the css file:

.gwt-HTML {
border: 2px solid black;
padding: 5px;
}

I still get exactly the same results: shadow and glow will render, but
simple gets nothing.

Has anyone got this working reliably? If so, I'd love to share the
secret.

Thanks,
Matt.

[Mister Pretzel]

Hi,

I had a similar problem. Turns out I had to run the Borders *after* I
added the elemented to the pane. Makes sense, but not until I did it.

//CSS
.test {
width: 100%;
padding: 20px;;
background: #afbfff;
border: 1px solid black;
}

//Java

HTML yourDiv = new HTML("Cool");

yourDiv.setStyleName("test");
RootPanel.get().add(yourDiv);
Borders.simpleBorder(yourDiv, 5); //MUST BE AFTER THE ADD

It would have been nice if this was explained a little better as I had
no idea why my elements were blanking out.

Hope this helps.

[Matt]

Works like a charm!

Thanks Mister Pretzel.

Matt.

[Mister Pretzel]

Just as a note however, no matter what I do I can not get Panels with
styles to render the corners. It just removes the border all together.

Hmmm.

[Mister Pretzel]

Okay, I found out why this does not work with panels. The getElement()
used by the Borders class returns the div tag for the HTML object. But
for the panel, it returns a table along with the inner components. This
probably is what is breaking RUZEE.Borders.

For example:

VerticalPanel yourDiv = new VerticalPanel();
yourDiv.add(new Label("test"));
yourDiv.setStyleName("test");
RootPanel.get().add(yourDiv);

HTML yourDiv2 = new HTML("COOL");
yourDiv2.setStyleName("test");
RootPanel.get().add(yourDiv2);

System.out.println("PANEL");
System.out.println(yourDiv.getElement().toString());

System.out.println("HTML");
System.out.println(yourDiv2.getElement().toString());

Borders.simpleBorder(yourDiv, 15);
Borders.simpleBorder(yourDiv2, 15);

Outputs:

PANEL

<TABLE class=test cellSpacing=0 cellPadding=0><TBODY>
<TR>
<TD style="VERTICAL-ALIGN: top" align=left>
<DIV class=gwt-Label style="POSITION: static" __eventBits="125"
onchange="null" onload="null"
onerror="null">test</DIV></TD></TR></TBODY></TABLE>
HTML

<DIV class=test __eventBits="125" onchange="null" onload="null"
onerror="null">COOL</DIV>

As you can see the last one for the HTML component is a DIV. So RUZEE
must not work with tables? I don't know enough about RUZEE, I just
started using RUZEE and Borders GWT class today. I'll do some digging
and let you guys know.

Perhaps this could be remedied by somehow wrapping the table in a DIV?
Probably best would be if RUZEE would add any necessary divs itself,
within in the library.

[mP]

RuzeeBorders seem to fail to render with IE 6.0 when given a TABLE
element. I have a simple fix which simply checks if the given element
is a TABLE. If it is then SPAN is created and places the original TABLE
element. The TABLE is added to the new SPAN previously created. Ruzee
is then asked to do its thing on the SPAN.
IE doesnt seem to be able to handle the TABLE DIV DIV DIV TR thing -
unlike FF. My fix moves the multiple Divs before the TABLE.

I have included the code necessary below - ideally this should occur as
the first step for all the *public* Ruzee methods to fix up the element
reference.

The only requirement i have is that my name is added somewhere as an
author:)
function visitElement( element ){
if( -1 != navigator.userAgent.indexOf( "MSIE" )){
var span = document.createElement ( "span" );

var parent = element.parentNode;
parent.replaceChild( span, element );
span.appendChild( element );

span.style.backgroundColor =
element.currentStyle.backgroundColor ;
element = span;
}
return element;
}

I have posted the above fix to gwt-components and the ruzee www. I only
included the above for people like Mister Pretzel getting nasty
problems in IE.