Re: Comment on CssResource in google-web-toolkit
codesite...@google.com
I have been unable to make this work. Please point out where I am making a
mistake. I am trying to use an external style sheet. I have got the
resources inherit in gwt.xml. The stylesheet is using @external for all
styles and I have defined an interface:
{{{
public interface AppBundle extends ClientBundle {
public static final AppBundle INSTANCE = GWT.create(AppBundle.class);
@Source("com/docobo/keswick/keswickweb/public/gxt-all.css")
public CssResource gxtall();
@Source("com/docobo/keswick/keswickweb/public/gxt-gray.css")
public CssResource gxtgray();
//.... other image etc resources here
}
}}}
and I am trying to inject the styles at runtime in onModuleLoad() as
follows:
{{{
boolean all = AppBundle.INSTANCE.gxtall().ensureInjected();
}}}
but all is false. I get an empty string when I do this :
{{{
String cssText = AppBundle.INSTANCE.gxtall().getText();
}}}
Am I missing anything here ??
For more information:
http://code.google.com/p/google-web-toolkit/wiki/CssResource
codesite...@google.com
Guys, check the other post on client bundle, {@nenchev / @shahidzaman}, I
answered both your questions there. @whoever-asked-about-resetting-rules,
I have some custom implementation that allows for dynamic / updateable
rules. Remember that all IE browsers only allow a max of 31 stylesheets
{inline or link}, even in IE8 {would 63 kill them, honestly?}. Also, there
is no reliable way to remove style elements properly in all browsers, so
instead I store and clear StyleElements manually. My implementation uses a
few custom data classes and whatnot, but you can get the important bits
you'll need from it.
if (styles.xHas( id )){
StyleElement el = styles.xCast( id ); //my own native JS map class. Use
hashmap
try{
Text txt = Document.get().createTextNode( "."+id+"{"
+toWrite.xGetStr( i )+
"}" );//id is a class name used in css, and as style element id
for(int o = el.getChildCount();o-->0;el.removeChild( el.getChild( o ) ));
//To clear elements, just remove all text nodes
xRNA asRna = el.cast(); //This is my custom js object.
if (asRna.xFalse( "styleSheet" )) //If styleElement has styleSheet
property...
el.appendChild( txt ); //We must add style as text node
else
asRna.xGetRna( "styleSheet" ).xSetStr( "cssText" , txt.getNodeValue() );
//This gets the styleSheet js object, and sets the cssText property as a
String
}catch(Throwable e){GWT.log( "ack" , e );}
}
If this confuses you, I can make up a jar for anyone who wants to use it.
codesite...@google.com
Guys, check the other post on client bundle, {@nenchev / @shahidzaman}, I
answered both your questions there. @whoever-asked-about-resetting-rules, I
have some custom implementation that allows for dynamic / updateable rules.
Remember that all IE browsers only allow a max of 31 stylesheets {inline or
link}, even in IE8 {would 63 kill them, honestly?}. Also, there is no
reliable way to remove style elements properly in all browsers, so instead
I store and clear StyleElements? manually. My implementation uses a few
custom data classes and whatnot, but you can get the important bits you'll
need from it.
//Styles is a JS object that stores StyleElements like HashMap
if (styles.xHas( id )){
//If the rule named id already has an element, get it
StyleElement el = styles.xCast( id );
try{
//We start with a text node. I auto-wrap {braces}, but this can be
confusing
Text txt = Document.get().createTextNode( "."+id+"{"
+toWrite.xGetStr( i )+
"}" );
//Next, clear the style elements. Rules are text nodes
for(int o = el.getChildCount();o-->0;el.removeChild( el.getChild( o ) ));
//xRNA is my own js <--> java overlay type.
xRNA asRna = el.cast();
//If the style element does NOT have a styleSheet property
if (asRna.xFalse( "styleSheet" ))
//Just append the text node to create rule
el.appendChild( txt );
else
//Otherwise, we set use the browser <style/>.styleSheet object's cssText
property
asRna.xGetRna( "styleSheet" ).xSetStr( "cssText" , txt.getNodeValue() );
//Note, I actually use deferred binding to do this now.
}catch(Throwable e){GWT.log( "ack" , e );}
}
//If there is no style element yet
else{
//Make one using the deprecated injectStylesheet method
styles.xSet( id , StyleInjector.injectStylesheet( "."+id+"{"
+toWrite.xGetStr( i )+
"}" ) );
}
If anyone finds this confusing, I can make a jar and upload somewhere. Or
you can wait a month when I release my full API in case I didn't test well
enough.
It would be very nice to StyleElement extended with a setStyle() method
that does all this internally instead of my haxored static classes, but...
What're you gonna do?
codesite...@google.com
Guys, check the other post on client bundle, {@nenchev / @shahidzaman}, I
answered both your questions there. @whoever-asked-about-resetting-rules, I
have some custom implementation that allows for dynamic / updateable rules.
Remember that all IE browsers only allow a max of 31 stylesheets {inline or
link}, even in IE8 {would 63 kill them, honestly?}. Also, there is no
reliable way to remove style elements properly in all browsers, so instead
I store and clear StyleElements?? manually. My implementation uses a few
custom data classes and whatnot, but you can get the important bits you'll
need from it.
{{{
String id, rule;
//Styles is a JS object that stores StyleElements like HashMap
if (styles.xHas( id )){ //If the rule named id already has an element, get
it StyleElement el = styles.xCast( id );
try{ //We start with a text node.
Text txt = Document.get().createTextNode( "."+id+"{" +rule+ "}" );
//Next, clear the style elements. Rules are text nodes
for(int o = el.getChildCount();o-->0;el.removeChild( el.getChild( o ) ));
//xRNA is my own js <--> java overlay type.
xRNA asRna = el.cast();
//If the style element does NOT have a styleSheet property
if (asRna.xFalse( "styleSheet" ))
//Just append the text node to create rule
el.appendChild( txt );
else
//Otherwise, we set use the browser <style/>.styleSheet object's cssText
property
asRna.xGetRna( "styleSheet" ).xSetStr( "cssText" , txt.getNodeValue() );
//Note, I actually use deferred binding, just modified this for 'clarity'
}catch(Throwable e){GWT.log( "ack" , e );} }
//If there is no style element yet
else{
//Make one using the deprecated injectStylesheet method
styles.xSet( id , StyleInjector.injectStylesheet( "."+id+"{"
+rule+ "}" ) ); }
codesite...@google.com
Guys, check the other post on client bundle, {@nenchev / @shahidzaman}, I
answered both your questions there. @whoever-asked-about-resetting-rules, I
have some custom implementation that allows for dynamic / updateable rules.
Remember that all IE browsers only allow a max of 31 stylesheets {inline or
link}, even in IE8 {would 63 kill them, honestly?}. Also, there is no
reliable way to remove style elements properly in all browsers, so instead
I store and clear StyleElements manually. My implementation uses a few
custom data classes and whatnot, but you can get the important bits you'll
need from it.
{{{
String id,rule;
//Styles is a JS object that stores StyleElements like HashMap
if (styles.xHas( id )){
//If the rule named id already has an element, get it
StyleElement el = styles.xCast( id );
try{
//We start with a text node. I auto-wrap {braces}, but this can be confusing
Text txt = Document.get().createTextNode( "."+id+"{" +rule+ "}" );
//Next, clear the style elements. Rules are text nodes
for(int o = el.getChildCount();o-->0;el.removeChild( el.getChild( o ) ));
//xRNA is my own js <--> java overlay type.
xRNA asRna = el.cast();
//If the style element does NOT have a styleSheet property
if (asRna.xFalse( "styleSheet" ))
//Just append the text node to create rule
el.appendChild( txt );
else
//Otherwise, we set use the browser <style/>.styleSheet object's cssText
poperty
asRna.xGetRna( "styleSheet" ).xSetStr( "cssText" , txt.getNodeValue() );
//You can do this in a jsni method if you like, just do
el.styleSheet.cssText='a{rule:0;}'
}catch(Throwable e){GWT.log( "ack" , e );} }
//If there is no style element yet
else{
//Make and store one using the deprecated injectStylesheet method
styles.xSet( id , StyleInjector.injectStylesheet( "."+id+"{" +rule+ "}"
) ); }
}}}
If anyone finds this confusing, I can make a jar and upload somewhere. It
actually uses Deferred binding to save the id, but that's not big deal. Or
you can wait a month when I release my full API in case I haven't tested
codesite...@google.com
actually uses Deferred binding to save the if, but that's not big deal. Or
codesite...@google.com
I have a problem with spriting;
I added the following style rule
@sprite #home
{
gwt-image:'imageHome';
}
but what I get is inline data image instead of one sprite that contains all
of my images...
codesite...@google.com
Sorry, here's the code:
'@sprite #home
{
gwt-image:'imageHome';
}'
codesite...@google.com
codesite...@google.com
Thanks all for this wonderful feature, I am wondering why it is not
possible to allow runtime reinjection of CssResource, most importantly,
allowing @eval to be evaluated again. It is also interesting why it is only
possible to use static methods.
whole thing would be more flexible if we could set variables using created
CssResource object, and then inject/reinject/refresh particular resource
codesite...@google.com
Has anybody solved the issue with style dependent names?
This is what I want to do:
HoverLabel.java
{{{
public class HoverLabel extends Composite {
private static HoverLabelUiBinder uiBinder =
GWT.create(HoverLabelUiBinder.class);
interface HoverLabelUiBinder extends UiBinder<Widget, HoverLabel> {}
interface Style extends CssResource {
String over();
}
@UiField Style style;
public HoverLabel(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
addDomHandler(new MouseOverHandler() {
public void onMouseOver(MouseOverEvent event) {
addStyleDependentName(style.over());
}
}, MouseOverEvent.getType());
addDomHandler(new MouseOutHandler() {
public void onMouseOut(MouseOutEvent event) {
removeStyleDependentName(style.over());
}
}, MouseOutEvent.getType());
}
}
}}}
HoverLabel.ui.xml
{{{
<!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 type="com.google.test.HoverLabel.Style">
.lbl {}
.lbl-over {
background-color: red;
}
</ui:style>
<g:Label styleName="{style.lbl}" />
</ui:UiBinder>
}}}
Note: I don't want to have the style name 'lbl' inside of my Style
interface. I want to be able to override the primary style name when
referencing to HoverLabel from another widget UIBinder, like this:
{{{
<!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"
xmlns:b="urn:import:com.google.test">
<ui:style type="com.google.test.HoverLabel.Style">
.blueLbl {}
.blueLbl-over {
background-color: blue;
}
</ui:style>
<g:HTMLPanel>
<b:HoverLabel styleName="{style.blueLbl}">Hover to make me
blue!</b:HoverLabel>
</g:HTMLPanel>
</ui:UiBinder>
codesite...@google.com
codesite...@google.com
It would be useful to allow usage of the @media rule in the resource's css
file:
http://www.w3.org/TR/CSS2/media.html#at-media-rule
That way making widgets that work both on the screen and when printed
wouldn't require any wacky workarounds.
(btw there's already an issue for this
http://code.google.com/p/google-web-toolkit/issues/detail?id=4911)
codesite...@google.com
Hi, I have a problem with the point 'removing all nessecary whitespaces'
(aktually I'm working with gwt 2.1.1, because the new gxt-version isn't in
mvn2rep)
my code usually looked like this (other user.agents omitted for
readability):
{{{
@if user.agent safari{
.top {background-color: silver;
background-image: -webkit-gradient(linear,left top,left
bottom,from(white),to(silver));}
}…
}}}
inspecting this with Chromium devtools I see, that the rule becomes to:
{{{.GEEGQDBNF {
background-color: silver;
background-image:
-webkit-gradient(linear,lefttop,leftbottom,from(white),to(silver));
}
}}}
Ok, looks like the whitespaces get optimized away, but what can I do
against it?
i tried this:
{{{
…
background-image: -webkit-gradient(linear,left\ top, left\ bottom,
from(white), to(silver));
…
/* but it became:*/
background-image: -webkit-gradient(linear,left topp,left
bottomm,from(white),to(silver))
}}}
Escaping other spaces led to similar results with other characters
duplicated.
I'm not sure if I understood the @literal-syntax, because I always get some
warnings and the poperties I use it with don't appear in the optimized
rules.
codesite...@google.com
codesite...@google.com
See http://code.google.com/p/google-web-toolkit/issues/detail?id=4877#c2
for an example of literal() with moz-linear-gradient.
codesite...@google.com
Would really like to see smth like that:
@sprite .myClass {
gwt-image: url("image.png");
}
because if i have external css with this class i would like to define image
there and not in UiBinder via <ui:image .../>
codesite...@google.com
The best poker blog http://poker-blogs-see.blogspot.com
Best PokerStars blog http://pokerstars-blogs.blogspot.com
Sexy, hot girls image http://china-sexy-girl-images.blogspot.com/