Round corners with GWT
486 views
Skip to first unread message
Paul van Hoven
Jul 12, 2008, 1:35:52 PM7/12/08
to Google Web Toolkit
I recently dicovered the RuzzeeBorders stuff on the internet. So I
tried to use it. But it doesn't work. Anyway I have two questions:
1. How can I create rounded corners with GWT?
2. The second question refers to the code I wrote for testing Ruzzee
Borders:
I copy and pasted Borders.java from this page http://gwt.components.googlepages.com/roundcorners
Then I wrote following (it's the example from the webpage):
public class Main implements EntryPoint {
public void onModuleLoad() {
HTML myHTML = new HTML("Cool");
Borders.simpleBorder( myHTML , 5 );
RootPanel.get().add( myHTML );
}
}
My Main.html looks like this:
<html>
<head>
<script language="javascript" src="RuzeeBorders/ruzeeborders.js"></
script>
<script language='javascript' src='RoundCorners.Main.nocache.js'></
script>
</head>
<body>
</body>
</html>
But I get the following error message when i try to run it in hosted
mode:
[ERROR] Unable to load module entry point class
RoundCorners.client.Main (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: JavaScript TypeError
exception: Null value
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
481)
at
com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
270)
at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:
137)
at RoundCorners.client.Borders.simpleBorder(Borders.java:13)
at RoundCorners.client.Main.onModuleLoad(Main.java:10)
at
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:
39)
at
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:
25)
at java.lang.reflect.Method.invoke(Method.java:585)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:342)
at
com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:
326)
Why doesn't it work?
tried to use it. But it doesn't work. Anyway I have two questions:
1. How can I create rounded corners with GWT?
2. The second question refers to the code I wrote for testing Ruzzee
Borders:
I copy and pasted Borders.java from this page http://gwt.components.googlepages.com/roundcorners
Then I wrote following (it's the example from the webpage):
public class Main implements EntryPoint {
public void onModuleLoad() {
HTML myHTML = new HTML("Cool");
Borders.simpleBorder( myHTML , 5 );
RootPanel.get().add( myHTML );
}
}
My Main.html looks like this:
<html>
<head>
<script language="javascript" src="RuzeeBorders/ruzeeborders.js"></
script>
<script language='javascript' src='RoundCorners.Main.nocache.js'></
script>
</head>
<body>
</body>
</html>
But I get the following error message when i try to run it in hosted
mode:
[ERROR] Unable to load module entry point class
RoundCorners.client.Main (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: JavaScript TypeError
exception: Null value
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:
481)
at
com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:
270)
at
com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:
137)
at RoundCorners.client.Borders.simpleBorder(Borders.java:13)
at RoundCorners.client.Main.onModuleLoad(Main.java:10)
at
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:
39)
at
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:
25)
at java.lang.reflect.Method.invoke(Method.java:585)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:342)
at
com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:
326)
Why doesn't it work?
Larry White
Jul 12, 2008, 4:13:57 PM7/12/08
to Google-We...@googlegroups.com
I may be wrong since I just skimmed it, but I think this question (how to do round borders on panels) was answered in the last week or so. I also believe one of the posters made some code available. You may want to search for that.
Cheers
Cheers
gregor
Jul 12, 2008, 6:42:08 PM7/12/08
to Google Web Toolkit
I think 1.5RCI may have DecoratorPanel in it now - this is a nine box
model (which is I believe the basis for rounded corner decorations)
and apparently there are is some CSS but I might be wrong
http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/cd8d5970b1601b13/a54f6d57e80e09c8?lnk=gst&q=decoratorpanel#
On Jul 12, 9:13 pm, "Larry White" <ljw1...@gmail.com> wrote:
> I may be wrong since I just skimmed it, but I think this question (how to do
> round borders on panels) was answered in the last week or so. I also believe
> one of the posters made some code available. You may want to search for
> that.
>
> Cheers
>
> On Sat, Jul 12, 2008 at 1:35 PM, Paul van Hoven <
>
model (which is I believe the basis for rounded corner decorations)
and apparently there are is some CSS but I might be wrong
http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/cd8d5970b1601b13/a54f6d57e80e09c8?lnk=gst&q=decoratorpanel#
On Jul 12, 9:13 pm, "Larry White" <ljw1...@gmail.com> wrote:
> I may be wrong since I just skimmed it, but I think this question (how to do
> round borders on panels) was answered in the last week or so. I also believe
> one of the posters made some code available. You may want to search for
> that.
>
> Cheers
>
> On Sat, Jul 12, 2008 at 1:35 PM, Paul van Hoven <
>
Ed
Jul 14, 2008, 10:31:48 AM7/14/08
to Google Web Toolkit
RuzzeeBorders works fine. I use it a lot..... Do a bit a debugging
and you will be fine...
Here an example of my methods in Borders:
public static native void simpleBorder(UIObject obj, int radius, int
borderWidth, int where) /*-{
var elem =
obj.@com.google.gwt.user.client.ui.UIObject::getElement()();
$wnd.ROUND.ShadedBorder.create({corner:radius,
border:borderWidth ,edges:@<packageNAME>.Borders::convertWhere(I)
(where)}).render(elem);
}-*/;
Don't forget to substitue the package name....
BTW:
I changed the javascript a bit, so the javascript method name is
different in my code above, so make sure you change ROUND to the
original call..
Check that your js file is correctly included by first testing it in a
simple html page.... like the example on the ruzee web page...
Cheers,
Ed
and you will be fine...
Here an example of my methods in Borders:
public static native void simpleBorder(UIObject obj, int radius, int
borderWidth, int where) /*-{
var elem =
obj.@com.google.gwt.user.client.ui.UIObject::getElement()();
$wnd.ROUND.ShadedBorder.create({corner:radius,
border:borderWidth ,edges:@<packageNAME>.Borders::convertWhere(I)
(where)}).render(elem);
}-*/;
Don't forget to substitue the package name....
BTW:
I changed the javascript a bit, so the javascript method name is
different in my code above, so make sure you change ROUND to the
original call..
Check that your js file is correctly included by first testing it in a
simple html page.... like the example on the ruzee web page...
Cheers,
Ed
Axel Kittenberger
Jul 14, 2008, 10:41:01 AM7/14/08
to Google Web Toolkit
There are 2 principle ways to go for rounded corners.
* use Images
* or to make little divs.
Both come with their advantages/disadvantages
Images: Uses less ressources on the client, Nasty work to organize all
the images on the server, especially if you have all kind of borders.
(use DecoratorPanel of 1.5 for this)
Divs: Uses more ressources on the client. No images are needed to
store on the server, can change size, style dynamically on the client
without bothering the server.(use RoundedPanel or FancyPanel (use
google to find))
On Jul 13, 12:42 am, gregor <greg.power...@googlemail.com> wrote:
> I think 1.5RCI may have DecoratorPanel in it now - this is a nine box
> model (which is I believe the basis for rounded corner decorations)
> and apparently there are is some CSS but I might be wrong
>
> http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse...
* use Images
* or to make little divs.
Both come with their advantages/disadvantages
Images: Uses less ressources on the client, Nasty work to organize all
the images on the server, especially if you have all kind of borders.
(use DecoratorPanel of 1.5 for this)
Divs: Uses more ressources on the client. No images are needed to
store on the server, can change size, style dynamically on the client
without bothering the server.(use RoundedPanel or FancyPanel (use
google to find))
On Jul 13, 12:42 am, gregor <greg.power...@googlemail.com> wrote:
> I think 1.5RCI may have DecoratorPanel in it now - this is a nine box
> model (which is I believe the basis for rounded corner decorations)
> and apparently there are is some CSS but I might be wrong
>
alex.d
Jul 15, 2008, 2:35:57 AM7/15/08
to Google Web Toolkit
Actually there is one good way to make it work - use DecoratorPanel
class(1.5 RC1)! Any widget can be put into the DecoratorPanel to
provide round corners. Here is how to give a grid round corners:
DecoratorPanel decPanel = new DecoratorPanel();
Grid grid = new Grid();
decPanel.add(grid);
It has only one flaw - if you set it's size explicitly it will
probably has broken borders. But setting the size of inner widgets
stretches DecoratorPanel accurately.
class(1.5 RC1)! Any widget can be put into the DecoratorPanel to
provide round corners. Here is how to give a grid round corners:
DecoratorPanel decPanel = new DecoratorPanel();
Grid grid = new Grid();
decPanel.add(grid);
It has only one flaw - if you set it's size explicitly it will
probably has broken borders. But setting the size of inner widgets
stretches DecoratorPanel accurately.
davidroe
Jul 17, 2008, 1:51:56 AM7/17/08
to Google Web Toolkit
if you are using 1.5, DecoratorPanel is probably the way to go.
I previously posted a RoundedPanel class to the list that I use in
1.4.
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/f46a518306aa6642/715febb212bf31d5?lnk=gst&q=RoundedPanel#715febb212bf31d5
HTH,
/dave
On Jul 12, 1:13 pm, "Larry White" <ljw1...@gmail.com> wrote:
> I may be wrong since I just skimmed it, but I think this question (how to do
> round borders on panels) was answered in the last week or so. I also believe
> one of the posters made some code available. You may want to search for
> that.
>
> Cheers
>
> On Sat, Jul 12, 2008 at 1:35 PM, Paul van Hoven <
>
I previously posted a RoundedPanel class to the list that I use in
1.4.
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/f46a518306aa6642/715febb212bf31d5?lnk=gst&q=RoundedPanel#715febb212bf31d5
HTH,
/dave
On Jul 12, 1:13 pm, "Larry White" <ljw1...@gmail.com> wrote:
> I may be wrong since I just skimmed it, but I think this question (how to do
> round borders on panels) was answered in the last week or so. I also believe
> one of the posters made some code available. You may want to search for
> that.
>
> Cheers
>
> On Sat, Jul 12, 2008 at 1:35 PM, Paul van Hoven <
>
Reply all
Reply to author
Forward
0 new messages