I am new in GWT. Here is my questions:
Form.css
.text{
color: orange;
font-size: 16pt;}
FormResources.java
public interface FormResources extends ClientBundle{
#Source("Form.css")
MyCSS style();
public interface MyCSS extends CssResource{
String text();
}}
Form.ui.xml
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:res="urn:with:com.org.yournamehere.client.FormResources">
<ui:with field='res' type='org.yournamehere.client.FormResources' />
<g:HTMLPanel>
<g:Label res:styleName="style.text">ABC</g:Label>
</g:HTMLPanel></ui:UiBinder>
Form.java
public class Form extends Composite {
private static final FormUiBinder uiBinder = GWT.create(FormUiBinder.class);
#UiTemplate("Form.ui.xml")
interface FormUiBinder extends UiBinder<Widget, Form> {}
#UiField(provided = true)
final FormResources res;
public Form() {
this.res = GWT.create(FormResources.class);
res.style().ensureInjected();
initWidget(uiBinder.createAndBindUi(this));
}}
My problem is can show the ABC word, but not in orange color and size is 16pt. The Css part cannot shown. Please help me to solve this problem. Thanks.
You are almost doing right.
Just replace below line in Form.ui.xml file.
<g:Label res:styleName="style.text">ABC</g:Label>
with
<g:Label res:styleName="{res.style.text}">ABC</g:Label>
screenshot:
Problem : "style.text" is not referring to your style defined in FormResources#MyCSS#text.
Always enclose the value in {...} if you want to use some dynamic values.
For more info have a look at sample on GWT UiBinder - Hello Stylish World
Related
I'd like my login page to have a background image in the body. Here's what I have so far:
public interface MyResources extends ClientBundle {
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("css/login.css")
public MyLoginCssResource loginCss();
#Source("css/GWT_App.css")
public CommonCss commonCss();
#Source("img/logo.png")
#ImageOptions(repeatStyle = RepeatStyle.Both)
ImageResource backgroundImage();
}
public interface CommonCss extends CssResource {
String body();
}
.body {
background-color: white;
gwt-image: 'backgroundImage';
}
How do I reference the commonCSS in my ui.xml-file if I already have the loginCss referenced?
<ui:with field='res' type='client.resources.MyResources' />
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv}">
</g:HTMLPanel>
</ui:UIBinder>
and also, how can I set a style for the body tag in a ui.xml-file?
How do I reference the commonCSS in my ui.xml-file if I already have the loginCss referenced?
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv} {res.commonCss.body}"/>
and also, how can I set a style for the body tag in a ui.xml-file?
As far as i know you can't access body from ui.xml file.
There're a few ways to have this background ONLY in the login page.
The simplest one is to wrap all the page in a container block
<g:FlowPanel addStyleNames="{res.commonCss.body}">
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv} "/>
</g:FlowPanel>
So on the navigation from the login page - the background won't stay there.
And in case you want a permanent effect - you can just add css in your index.html file, as a regular css for body tag
it's very difficult to find a complete step-by-step guidelines of How to properly use CSS in GWTP on internet.
I am using eclipse & GWTP to build my app & I want to set some simple Css styles for my widgets (button, textbox...).
Ok, here is what I got: a TestPresenter.java, TestView.java & TestView.ui.xml
-In TestView.ui.xml:
<ui:UiBinder .....>
<ui:style src='myStyle.css' />
<g:HTMLPanel>
<g:Button text="My But 1" addStyleNames="{style.myBut}" ui:field="myBut1"/>
<g:Button text="My But 2" ui:field="myBut2"/>
</g:HTMLPanel>
</ui:UiBinder>
myStyle.css is in the same folder that houses TestPresenter.java, TestView.java & TestView.ui.xml
-TestPresenter.java (has 2 buttons- myBut 1 & myBut 2): I added "myBut" for myBut2
getView().getMyBut2().addStyleName("myBut");
After running, it shows 2 buttons, the first myBut1 got the correct CSS but myBut2 still show the default Css. I changed to getView().getMyBut2().setStyleName("myBut"); but it still didn't work.
So i think probably i'm missing some classes here & that is why eClipse couldn't recognize "myBut" CSS so that it can apply for myBut2.
So, How to let myBut2 show the correct Css in eClipse?
the reason is that adding a CSS style sheet as a source to the uibinder causes the gwt compiler to generate a CssResource class for it, and therefore obfuscating the CSS class name to SHA1 hash.
That mean that in the final compiled version, instead of ".myBut" you actually end up with something like ".XYZXYZ".
this is purely GWT uibinder behavior that you can read about here
Specifically for GWTP, the textbook solution is:
in TestView.java add:
public TestView extends SomeGWTPViewClass implements TestPresenter.MyView
{
public interface MyStyle extends CssResource
{
String myBut();
}
#UiField MyStyle style;
#Override
MyStyle getStyle()
{
return style;
}
//rest of code here......
.....
...
}
in TestView.ui.xml change ui:style to:
<ui:style src='myStyle.css' type="fully.qualified.package.name.TestView.MyStyle"/>
in TestPresenter.MyView interface add:
MyStyle getStyle();
now you can access the myBut style in TestPresenter by:
getView().getMyBut2().addStyleName(getView().getStyle().myBut());
I want to change the font size and weight in a label. I did find this on Stack Overflow:
StackOverflow article
However it doesn't seem to fully answer the question OR there is something I am not getting.
Consider the following code:
package com.mycompany.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Label;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class StyleTest implements EntryPoint
{
private final Label lblATestLabel = new Label( "A Test Label" );
public void onModuleLoad()
{
RootPanel rootPanel = RootPanel.get();
lblATestLabel.setStyleName( "gwt-Label.TestStyle" );
rootPanel.add( lblATestLabel, 204, 187 );
lblATestLabel.setSize( "73px", "32px" );
HTML hlabel = new HTML();
hlabel.setStyleName("gwt-Label.TestStyle");
hlabel.setHTML("Brown <span class=\"brown\">fox</span>");
rootPanel.add(hlabel, 42, 36);
hlabel.setSize("335px", "41px");
}
}
And this style at the bottom of StyleTest.css:
.gwt-Label.TestStyle {
color: Green;
vertical-align: middle;
}
My expectation is that my text will be centered vertically and be green. The result is no change at all. I can set any styles I want and there is no change to either the Label or HTML label. It all looks normal, what am I doing wrong?
setStyleName sets the class attribute (actually, the className property, but that's equivalent) of the widget's element; so lblATestLabel.setStyleName("gwt-Label.TestStyle") will be equivalent to having a <div class="gwtLabel.TestStyle"> in HTML, that is an element with a single class of gwt-Label.TestStyle (class="" is whitespace-separated).
On the other hand, .gwt-Label.TestStyle as a selector in your CSS stylesheet will match any element with both the gwt-label and TestStyle classes; that would be an element such as <div class="gwt-Label TestStyle"> (remember: class="" is whitespace-separated)
So, depending on what you need, either fix your selector (.gwt-Label\.TestStyle, might not work in all browsers), rename your class (e.g. gwt-Label-TestStyle) or add a class to the existing (for a Label widget) gwt-Label one (lblATestLabel.addStyleName("TestStyle"))
I was trying to use a tiled image in an image resource, and i was refering to the GWT tutorial for it...
one section says you need to use sprites:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource
repeatStyle is an enumerated value
that is used in combination with
the#sprite directive to indicate that
the image is intended to be tiled
so, now i need to add a sprite directive .. Where ?
researching about sprites, i came here:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites
The example dictates the creation of two files :
MyCssResource
MyResources
where would I write this :
#sprite .mySpriteClass {gwt-image:
"imageAccessor"; other: property;}
?
some more quotes for reference:
#sprite is sensitive to the FooBundle
in which the CSSResource is declared;
a sibling ImageResource method named
in the #sprite declaration will be
used to compose the background sprite.
From what you've written I'm going to presume that MyResources is an interface that extends ClientBundle and MyCssResources is an interface that extends CssResource:
interface MyResources extends ClientBundle {
#Source("myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.BOTH)
ImageResource myImage();
#Source("myCss.css")
MyCssResource myCss();
}
interface MyCssResource extends CssResource {
String myBackground();
}
So now there are two ways to use the ImageResource obtained from MyResources. The first is to attach it to a CSS rule using the #sprite directive. myCss.css:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
Then, anything with the myBackground class will have myImage as its background. So, using UiBinder, for example:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>
One can also instantiate Image objects directly using the defined ImageResource. UiBinder:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>
Without UiBinder:
MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());
Just let me add this:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
becomes
.myBackground {
backgroud-image: url(-url of the image-)
width: *width of the image*
height: *height of the image*
}
Remember to override them in case u need it: for example setting height and width to auto:
#sprite .myBackground {
gwt-image: "myImage";
height: auto;
width: auto;
}
HTH, I struggled a lot to find that out ;)
I would like to add also
Remember to call ensureInjected() on MyCssResource.java or else
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
wont work..
If you are using gss, #sprite is not working in this case. You should use gwt-sprite like:
.myBackground {
gwt-sprite: "myImage";
}
I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:
TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
And:
public interface MyResources extends ClientBundle
{
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
String slickTab();
}
In the CSS
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
But the appearance don't change. What I am doing wrong?
You might be able to force this in CSS.
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000 !important;
font-weight: normal !important;
}
Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.
Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):
.gwt-TabBar.slickTab .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
The interface MyCssResource need to be inside MyResources.
Here's an exemple :
public interface Resources extends ClientBundle
{
public static final Resources INSTANCE =
GWT.create( Resources.class );
/***********************************************
* Home
***********************************************/
#Source( "./css/home.css" )
public HomeCss getHomeCss();
public interface HomeCss extends CssResource
{
String loginBtn();
}
/***********************************************
* Another Page
***********************************************/
#Source( "./css/AnotherPage.css" )
public AnotherPage getAnotherPageCss();
public interface AnotherPage extends CssResource
{
String title();
}
}
This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :
HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );
Don't hesitate to ask if there's anything you didn't understand.
.slickTab .gwt-TabBar .gwt-TabBarItem is going to match something with class gwt-TabBarItem inside something with class gwt-TabBar inside something with class slickTab. I think you just want .slickTab .gwt-TabBarItem for the CSS selector.
I highly recommend using FireBug to inspect the HTML structure generated by GWT and how your CSS selectors are applied to it.
The line:
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
Modifies the class element attribute. And INSTANCE.css().slickTab() does not do what you think. These methods without annotations bring back to java the #def's in the css. To make what you want add to MyCssResource:
#ClassName("slickTab")
String slickTab();
So, when GWT garbles the css upside down that method will return the corect class, ej "awEs". These GWT guys are obsessive about squeezing stuff :)
And remember, firebug & chrome-inspector are your friends.