CSS generator in GWT
Hello, I was wondering if there was a way to generate CSS code with GWT. If for example I want to have a CSS background with gradient, I need to write it for every browser (-moz, -webkit, -o, etc...) as shown on http://www.colorzilla.com/gradient-editor/ As GWT is about generating javascript tailored for each browser, it would be great to have the same thing for CSS. And it already doeshttp://code.google.com/p/google-web-toolkit/wiki/CssResourceto some extent but I would really welcome a way to generate those -moz, -webkit, etc... Maybe there is already a http://lesscss.org/ equivalent for GWT that I am not aware of? emerix -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/QZsaJ1fNg6kJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: GWT Developer Plugin for Firefox 7
Hello, Would you mind sharing your xpi file ? I am on Ubuntu 64bit also and I am having trouble compiling the plugin :-/ Thanks! -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/MUcFx7_gcrwJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Simple UiBinder question about ui:image resource=....
Hi,
I'm also still looking for some documentation on this ui:image tag.
(and the other tags also : ui:data, ui:attribute, ...)
Do anyone know how to put absolute path in the src attribute ?
ui:image field=myImage src=com/mycompany/path/to/myImage.png/
ui:image
doesn't work :/
Using relative path works but I have to change it every time I copy
the code to another widget :/
++emerix
On Jan 17, 6:05 pm, Nico nicolas.antonia...@gmail.com wrote:
Thanks emerix for the src= tips. It helped me a lot.
I have the same problem when I use resource={res.myImage} ...
I have declared the ui:with field .. targeting the right Resource
class but I always have an error that says : No
com.google.gwt.resources.client.ClientBundle$Source annotation and no
resources found with default extensions
However, I don't know where to find doc about ui:image tag. Where
did you find that there was a src or a resource attribute ? directly
in the source code ?
Thanks a lot.
Nicolas
On 12 jan, 17:24, Chris Ramsdale cramsd...@google.com wrote:
Do you have the following in your ui.xml file:
ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/
...where 'com.google.gwt.sandbox.client.Resources' is replaced with your
resources class.
On Thu, Jan 7, 2010 at 5:24 AM, emerix rafa...@gmail.com wrote:
Hello,
I tried using relative paths for the resource property :
ui:image field='logo' resource='../resources/my_logo.png'/ui:image
but I got the error : No com.google.gwt.resources.client.ClientBundle
$Source annotation and no resources found with default extensions
if I use the src property, everything is ok :
ui:image field='logo' src='../resources/my_logo.png'/ui:image
hope someone find this useful :)
However what I really wanted is using your 2nd solution :
ui:image field='logo' resource='{res.logo}'/ui:image
but when I load the page I also get the error : No
com.google.gwt.resources.client.ClientBundle$Source annotation and no
resources found with default extensions
am I missing something ?
thanks a lot :)
++emerix
On Jan 4, 11:15 pm, Chris Ramsdale cramsd...@google.com wrote:
One option would be to use relative paths within the ui:image element.
For
example:
ui:image field='logo' resource='../resources/my_logo.png'/ui:image
Another option would be to use ui:with, get a hold of the
ClientBundle,
and reference an image within it.
public interface Resources extends ClientBundle {
@Source(com/google/gwt/sandbox/resources/my_logo.png)
ImageResource logo();
}
ui:UiBinder
...
ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/
ui:image field='logo' resource='{res.logo}'/ui:image
...
/ui:UiBinder
Underscores within the filename are completely valid (the above examples
compile and run w/o issue).
On Thu, Dec 31, 2009 at 3:30 AM, Daniel doubleagen...@gmail.com wrote:
Here's a valid ui.xml file:
?xml version=1.0 encoding=UTF-8?
!DOCTYPE ui:UiBinder SYSTEM http://dl.google.com/gwt/DTD/
xhtml.ent
ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder
xmlns:g=urn:import:com.google.gwt.user.client.ui
ui:style field=IekyStyle
.anchorWrapper a {
display: block;
}
�...@sprite .left {
gwt-image: 'left';
}
�...@sprite .logo {
gwt-image: 'logo';
background-position: 0 -197px;
height: 197px;
}
div.logo:hover {
background-position: 0 0;
}
�...@sprite .slogans {
gwt-image: 'animatedSloganArea';
}
�...@sprite .menuTop {
gwt-image: 'menuTop';
}
�...@sprite .right {
gwt-image: 'right';
}
�...@sprite .home {
gwt-image: 'home';
height: 25px;
}
div.home:hover {
background-position: 0 -25px;
}
�...@sprite .services {
gwt-image: 'services';
height: 25px;
}
div.services:hover {
background-position: 0 -25px;
}
�...@sprite .about {
gwt-image: 'about';
height: 25px;
}
div.about:hover {
background-position: 0 -25px;
}
�...@sprite .contact {
gwt-image: 'contact';
height: 25px;
}
div.contact:hover {
background-position: 0 -25px;
}
�...@sprite .menuBottom {
gwt-image: 'menuBottom';
}
�...@sprite .floatingBar {
gwt-image: 'floatingBarArea';
}
�...@sprite .bottom {
gwt-image: 'bottom';
}
/ui:style
ui:image field=about resource=about.png/ui:image
ui:image field=animatedSloganArea
resource=animatedSloganArea.png/ui:image
ui:image
Re: how to use CssResource.obfuscationPrefix to have semi-obfuscated css class name
thanks a lot for your replies !! that's exactly what I needed :) On Jan 7, 6:42 am, Brendan Kenny bcke...@gmail.com wrote: Yeah, I ran into the same problem. If the issue is just exposing the style names during development (and you're not looking for this particular solution for an additional reason), I would do as fvisticot suggests and then just remove that line from your module's xml file when you're ready for production mode. It's been a while since I looked at this, but I believe I also just used @external styleName; in the ui:style section to prevent particular style names from being obfuscated. I found the example here a little confusing, but the concept is simple enough:http://code.google.com/p/google-web-toolkit/wiki/CssResource#External... On Jan 6, 9:07 am, emerix rafa...@gmail.com wrote: Hi, I found on this pagehttp://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClien... that you can use the property CssResource.obfuscationPrefix to choose how to obfuscate your css selectors. However I don't know if it is possible to use it to have a custom obfuscation. During the development phase, I'm using firebug to adjust padding, margin... of my widgets and it became quite difficult with the obsucated css class names... What I would like is a way to have .G1qdtwdtK-MyWidgetName instead of .G1qdtwdtK for a css class named .MyWidgetName Is that feasible ? thanks ! -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Simple UiBinder question about ui:image resource=....
Hello,
I tried using relative paths for the resource property :
ui:image field='logo' resource='../resources/my_logo.png'/ui:image
but I got the error : No com.google.gwt.resources.client.ClientBundle
$Source annotation and no resources found with default extensions
if I use the src property, everything is ok :
ui:image field='logo' src='../resources/my_logo.png'/ui:image
hope someone find this useful :)
However what I really wanted is using your 2nd solution :
ui:image field='logo' resource='{res.logo}'/ui:image
but when I load the page I also get the error : No
com.google.gwt.resources.client.ClientBundle$Source annotation and no
resources found with default extensions
am I missing something ?
thanks a lot :)
++emerix
On Jan 4, 11:15 pm, Chris Ramsdale cramsd...@google.com wrote:
One option would be to use relative paths within the ui:image element. For
example:
ui:image field='logo' resource='../resources/my_logo.png'/ui:image
Another option would be to use ui:with, get a hold of the ClientBundle,
and reference an image within it.
public interface Resources extends ClientBundle {
@Source(com/google/gwt/sandbox/resources/my_logo.png)
ImageResource logo();
}
ui:UiBinder
...
ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/
ui:image field='logo' resource='{res.logo}'/ui:image
...
/ui:UiBinder
Underscores within the filename are completely valid (the above examples
compile and run w/o issue).
On Thu, Dec 31, 2009 at 3:30 AM, Daniel doubleagen...@gmail.com wrote:
Here's a valid ui.xml file:
?xml version=1.0 encoding=UTF-8?
!DOCTYPE ui:UiBinder SYSTEM http://dl.google.com/gwt/DTD/
xhtml.ent
ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder
xmlns:g=urn:import:com.google.gwt.user.client.ui
ui:style field=IekyStyle
.anchorWrapper a {
display: block;
}
�...@sprite .left {
gwt-image: 'left';
}
�...@sprite .logo {
gwt-image: 'logo';
background-position: 0 -197px;
height: 197px;
}
div.logo:hover {
background-position: 0 0;
}
�...@sprite .slogans {
gwt-image: 'animatedSloganArea';
}
�...@sprite .menuTop {
gwt-image: 'menuTop';
}
�...@sprite .right {
gwt-image: 'right';
}
�...@sprite .home {
gwt-image: 'home';
height: 25px;
}
div.home:hover {
background-position: 0 -25px;
}
�...@sprite .services {
gwt-image: 'services';
height: 25px;
}
div.services:hover {
background-position: 0 -25px;
}
�...@sprite .about {
gwt-image: 'about';
height: 25px;
}
div.about:hover {
background-position: 0 -25px;
}
�...@sprite .contact {
gwt-image: 'contact';
height: 25px;
}
div.contact:hover {
background-position: 0 -25px;
}
�...@sprite .menuBottom {
gwt-image: 'menuBottom';
}
�...@sprite .floatingBar {
gwt-image: 'floatingBarArea';
}
�...@sprite .bottom {
gwt-image: 'bottom';
}
/ui:style
ui:image field=about resource=about.png/ui:image
ui:image field=animatedSloganArea
resource=animatedSloganArea.png/ui:image
ui:image field=bottom resource=bottom.png/ui:image
ui:image field=contact resource=contact.png/ui:image
ui:image field=floatingBarArea resource=floatingBarArea.png/
ui:image
ui:image field=home resource=home.png/ui:image
ui:image field=left resource=left.png/ui:image
ui:image field=logo resource=logo.png/ui:image
ui:image field=menuBottom resource=menuBottom.png/ui:image
ui:image field=menuTop resource=menuTop.png/ui:image
ui:image field=right resource=right.png/ui:image
ui:image field=services resource=services.png/ui:image
g:HTMLPanel
div class={IekyStyle.anchorWrapper}
table border=0 cellspacing=0.0 cellpadding=0
tr
td rowspan=6div class={IekyStyle.left} //td
td rowspan=6a href=#homediv
class={IekyStyle.logo} //a/td
td colspan=5div class={IekyStyle.slogans}/div/td
/tr
tr
td colspan=4div class={IekyStyle.menuTop}/div/td
td rowspan=5div class={IekyStyle.right}/div/td
/tr
tr
tda href=#homediv class={IekyStyle.home} //a/
td
tda href=#business_servicesdiv
class={IekyStyle.services} //a/td
tda href=#aboutdiv class={IekyStyle.about} //a/
td
tda href=#contactdiv class={IekyStyle.contact} //
a/td
/tr
tr
td colspan=4div class={IekyStyle.menuBottom}/div/
td
/tr
tr
td colspan=4div class={IekyStyle.floatingBar}/div/
td
/tr
tr
td colspan=4div class={IekyStyle.bottom}/div/td
/tr
/table
/div
/g:HTMLPanel
/ui:UiBinder
It's the lines
how to use CssResource.obfuscationPrefix to have semi-obfuscated css class name
Hi, I found on this page http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#Selector_obfuscation that you can use the property CssResource.obfuscationPrefix to choose how to obfuscate your css selectors. However I don't know if it is possible to use it to have a custom obfuscation. During the development phase, I'm using firebug to adjust padding, margin... of my widgets and it became quite difficult with the obsucated css class names... What I would like is a way to have .G1qdtwdtK-MyWidgetName instead of .G1qdtwdtK for a css class named .MyWidgetName Is that feasible ? thanks ! -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
