I need to implement a background in a Label, and also, probably just fill half of it with one color and the another half with another. Whats the best way of achieving it?! Using CSS?! Or is there another easier way.
Thanks in advance
This is what CSS is used for.
Label label = new Label("your text");
label.setStyleName("myStyle");
And in your .css file:
.myStyle {
background-color: #f00;
}
Or if you're using UIBinder:
<ui:style>
.myStyle {
background-color: #f00;
}
</ui:style>
<g:HTMLPanel>
<g:Label styleName="{style.myStyle}">Your text</g:Label>
</g:HTMLPanel>
The benefit of the UIBinder approach is that your style is in the same file as the Label and the CSS name will be obfuscated as well.
Related
I 've tried to give css to scrollpanel in GWT. But its not working.
The problem is I want to change the foregroung and background colors and also the width of scrollers.
Is it possible? can any1 suggest?
Generally it is based on the browser user agent.
For example : For Chrome You need to do something like,
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Please refer this Link
GWT scrollbars are simply html ones, so you can style them in the same way you would do with plain html: using css.
Add a class to your ScrollPanel and set the styles in your .css files, or set styles to it using java methods.
But you have to be aware that styling scroll-bars is not a standard thing, webkit supports it via vendor-css-properties and the same with IE, but unfortunately you will not be able to style FF.
UPDATE:
As #Andrea suggest in the comment below, if you can change in your app ScrollPanel by CustomScrollPanel you have much more options to customize bars.
In this case you have to provide your own bars because by default it uses browser native ones. This response can help you.
When using UiBinder what is the preferred method of creating a simple layout like this?
FlowPanel:
<!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>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:FlowPanel styleName="{style.outer}">
<g:FlowPanel styleName="{style.inner}">
<g:Label ui:field="someLabel"/>
</g:FlowPanel>
</g:FlowPanel>
</ui:UiBinder>
HTMLPanel:
<!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>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:HTMLPanel styleName="{style.outer}">
<div class="{style.inner}">
<g:Label ui:field="someLabel"/>
</div>
</g:HTMLPanel>
</ui:UiBinder>
Edit: I know they produce the same html when rendering, I'm wondering if there is any justification for using one style over the other.
The javadocs say that the FlowPanel is the simplest panel, but at what point does using an HTMLPanel become preferable. e.g.
<FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
</FlowPanel>
vs.
<HTMLPanel>
<div>
<Widget>
</div>
<div>
<Widget>
</div>
</HTMLPanel>
Thanks.
UiBinder - HTMLPanel vs. div is a fairly similar question but asks about using a div vs. a HTMLPanel.
Actually they will render same in your case - div. There is no difference unless you start adding more elements to FlowPanel.
You can try FlowPanel behaviour here:
http://examples.roughian.com/index.htm#Panels~FlowPanel
You should use HTMLPanel in cases when you need to write your own custom HTML code on the page. It allows to write HTML code inside of HTMLPanel tag.
For example you can't do such trick with FlowPanel.
I recently read Tags First GWT Programming. It seems to me, that the technique he describes would allow you to have much better control over the ultimate rendering of your page, while maintaining the advantages of GWT.
I think the dichotomy that you're asking about between FlowPanel and HTMLPanel isn't really the right question. Instead, it is best to recognize that they're meant for different things.
HTMLPanel is capable of a lot more than FlowPanel is. When you need to dynamically add and remove widgets that are embedded in some custom html, use an HTMLPanel. If you just want some widgets to align together on the page with normal html flow (like some text and pictures) use a FlowPanel.
My personal advice would be to use the simplest thing that can do what you need it to.
I recommend the second example. If possible you should prefer using a plain HTML tag such as "div" over a widget such as "FlowPanel" because of the overhead having an unused logical widget.
This may seems trivial first but it saves you a lot of headache (memory leaks, gquery operations, ...) when you have to deal with a lot of items.
I'm using GWT 2.4 and uiBinder to add widgets to a page. Now I want to layout two bottom buttons in one row, but I'm not sure of the correct way to do this.
I tried adding in a horizontalPanel like this:
<tr>
<td align="center">
<g:HorizontalPanel ui:field="horizontalPanel" borderWidth="1" spacing="50">
<g:Button ui:field="cancelButton" text="Cancel"></g:Button>
<g:Button ui:field="exitButton" text="Exit"></g:Button>
</g:HorizontalPanel>
</td>
</tr>
but it's not spacing the buttons far enough apart. Increasing the spacing is adding more height to the panel and pushing everything down away another button that is above it.
What is the proper way to do this?
There are two ways you can go about doing your layout in GWT:
depend on smartgwt or gxt.
bite the bullet and learn css.
I advise people to go the 2nd path. smartgwt and gxt will seem attractive for a simple project. However, as your project gets more and more complex, the incompatibilities with all the other GWT goodies become wider and wider.
Bite the bullet and learn how to integrate css into gwt.
<!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>
.trivial {
font-weight: bold;
margin-left: 50px;
margin-top: 0px;
margin-right: 50px;
margin-bottom: 0px;
}
</ui:style>
<g:HorizontalPanel>
<g:Button styleName="{style.trivial}" ui:field="button1">David Headley</g:Button>
<g:Button styleName="{style.trivial}" ui:field="button2">Debacle</g:Button>
</g:HorizontalPanel>
</ui:UiBinder>
I was wondering if anyone knew how to change the font size of a flextable in GWT? I've tried numerous attempts and looked online everywhere but no solution seems to work. I have a flexTable in GWT, and a number of labels like...
user_info.setText(5, 0, "Organization:");
Currently I've been trying to write a style in a CSS page with the code
.smallFont
{
font-size: 6pt;
background-color: #66ff66;
}
I set the flexTable to that style and the background of the table changes, but the font does not. Any help would greatly be appreciated. I've looked online everywhere. I've even tried changing the default styling page for each component by doing ...
.gwt-FlexTable
{
font-size: 6pt;
background-color: #66ff66;
}
but to no avail...
So discouraging = (
I used firebug to find out the CSS styles of GWT, then in my CSS file I used "!important" to override the existing CSS styles. There is an example below.
.gwt-TabPanelBottom {
border-width: 1px !important;
background: none no-repeat scroll center center #F6F6FF !important;
padding: 0 !important;
border: 2px solid #BFCC99 !important;
}
Override the CSS imported via your XML with the !important statement.
Or if needed, you can just download those base css files, manually include a copy of them, comment out everything in the xml, and have full style control.
Here's the clean.css file for example:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/theme/clean/public/gwt/clean/clean.css?r=10894
Specifically, to change the font in a GWT Flex Table (assuming you are importing clean.css), add this example to your custom css file and override the table td style you imported:
table td{
font: 18px Arial, sans-serif !important;
}
I'm trying to get my UiBinder-defined widget to display inline, but I can't. My current code is:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.section {
border: 1px solid #000000;
width: 330px;
padding: 5px;
display: run-in;
}
</ui:style>
<g:HTMLPanel>
<div class="{style.section}">
<div ui:field="titleSpan" class="{style.title}" />
<div class="{style.contents}">
<g:VerticalPanel ui:field="messagesPanel" />
</div>
</div>
</g:HTMLPanel>
</ui:UiBinder>
This works fine in terms of how the widget looks internally, but I want to throw a bunch of these widgets into a FlowPanel and have them flow when the window is resized. The HTMLPanel is a div, but I can't get the display attribute to assign. I can't force the style name, since the following throws an error:
<g:HTMLPanel styleNames="{style.section}">
And I can assign an additional style, but it doesn't apply the display setting.
<g:HTMLPanel addStyleNames="{style.section}">
This displays the border and sets the size, as expected, but it doesn't flow. Firebug shows the styles on the div are border, width, and padding, but no display.
Is there a way to make a widget in UiBinder so that it'll display inline instead of block? And if so, can I make it compatible with having a VerticalPanel inside (can I do it without making the entire widget pure HTML without any GWT widgets)?
PS: I saw question 2257924 but it hasn't had any answers lately, and he seems to be focused on getting a tag, not specifically getting inline layout. I don't care directly about , if I can just get the top-level tag for my widget to flow inline, I'm happy.
It seems your problem is caused by using display: run-in instead of the more "standard" display: inline. IE and Firefox don't support run-in and it seems that Firebug prunes the style upon adding.
Try changing the style to display: inline (or inline-block if you want some properties of a block, like width, but beware of the quirks of IE + inline-block).
It should be <g:HTMLPanel styleName="{style.section}">, not <g:HTMLPanel styleNames="{style.section}"> - styleNames is a typo (which appears in the UiBinder docs, so I'm sure that's where you got it from). styleName is the correct thing to use.
Also, Igor Klimer is correct that you should use display: inline or display: inline-block rather than display: run-in.
In general, you can tell the available attribute names by looking for setXXX methods on the UIObject class, and the attribute name is just the XXX. So, UIObject has a setStyleName method, which you access using the attribute called styleName.