I executed but only FF and chrome moves the textarea 0px from top and 0px from left but in IE
textarea is in default position.
Here is my code:
public class MyGWT implements EntryPoint {
TextArea ta= TextArea.wrap(DOM.getElementById("t"));
public void onModuleLoad() {
ta.getElement().setAttribute("style", "position:absolute;top:0px;left:0px;");
}
}
is there any bug or how can i change style attribute programmatically from GWT ??
Don't set style via setAttribute. In JavaScript the style attribute is actually an array. Thus depending on how smart the browser is and understands you want to set the style attributes it will work by setting style or won't work.
You should set style attributes individually via getElement().getStyle().setProperty(). Or use the specific methods, like: ta.getElement().getStyle().setPosition(Position.ABSOLUTE) or via the setProperty method: ta.getElement().getStyle().setProperty("position", "absolute"). And the same for the 2 other properties. See the Style class for what specific methods are supported.
What about using style classes? I mean, you can write a style class like this:
.someClass {
position:absolute;
top:0px;
left:0px;
}
And then add the style class to the TextArea
ta.addStyleName("someClass");
It will help you to write a more concise code, without inline styling that could be difficult to maintain.
Related
I want to remove the injected CSSResource in GWT application.
I used the following code MyClass.INSTANCE.ensureInjected();
I want the above CSSResource for a particular page only. So the remaining pages should be work as per the actual css/theme.
Once I inject this then its applicable for the whole application. How can I overcome this?
You can inject your css bundle using directly StyleInjector utility class, instead of the ensureInjected() method
Then you will have a reference of the injected element which you can remove when you want.
// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());
// Remove the injected css element
e.removeFromParent();
Theoretically you could try to remove the injected style block from the DOM, but this would be quite difficult (and maybe not very reliable).
Much better to organize your 'special' CSS style sheet in a different way:
Turn selectors like
.some {
color: green;
}
.other {
color: red;
}
into
.special .some {
color: green;
}
.special .other {
color: red;
}
and then add/remove the 'special' class e.g. to/from your body element to activate/deactivate the special styles.
If you have embedded the same GWT application in more than 1 page and you want a different behavior based on the given page, you can for example call the
MyClass.INSTANCE.ensureInjected();
if a bootstrap parameter is set.
In the host page, set the parameter, like YourGwtApp.nocahe.js?css=inject and read it as it's explained here
In the onLoadMethod, call the ensureInjected accordingly to your bootstrap parameter.
I set a margin for a panel in css. Now I need to get the margin width in GWT. How could I do this?
For example, I set a css style for the panel
<ui:binder>
.panel{
margin: 5px;
}
<g:HTMLPanel Ui:field=myPanel styleName="{style.panel}" />
</ui:binder>
In GWT 2.4, how can I retrieve the margin value (5px) in GWT class.
I have tired these, DOM.getIntStyleAttribute(myPanel.getElement(), "margin"),
DOM.getIntStyleAttribute(myPanel.getElement(), "marginWidth"), and myPanel.getElement().getStyle().getMargin(). all of these return 0.
How can I get the margin width then?
Thanks for replying.
Regards
You're looking for the computed style, but are requesting the element style.
If you were to set the style attribute on an element directly, then you could query the element's margin like you tried.
<!-- style can only be set on html elements, not widgets -->
<div ui:field="divElement" style='margin:5px'></div>
divElement.getStyle().getMargin();
From what I could find, GWT does not provide a method for looking up the computed style. You will instead need to rely on an external library. A quick google search for gwt computed style will provide you with a few options.
Alternatively, you could define the margin width as a GWT CSS constant and use a CssResource to access it.
MyPanel.ui.xml
<ui:style field="style" type="com.myproject.client.MyPanel.MyStyle">
#def marginWidth 5px;
.panel{ margin: marginWidth; }
</ui:style>
MyPanel.java
#UiField MyStyle style;
interface MyStyle extends CssResource {
String marginWidth();
}
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created
I see nothing in the documentation except a reference to include some "CssResource" and get it with ClientBundle, but how do I exactly override the tbody and th of a CellTable?
Is this possible?
Create an interface:
interface TableResources extends CellTable.Resources {
#Source({CellTable.Style.DEFAULT_CSS, "<your css file>.css"})
TableStyle cellTableStyle();
}
interface TableStyle extends CellTable.Style {
}
and initialize the cell table:
CellTable.Resources resources = GWT.create(TableResources.class);
table = new CellTable<SomeProxy>(rowSize, resources);
In the cellview.client package you can find the default gwt css files. Yo use those as your starting point. In the "<your css file>.css" put you specific style changes.
You can also set colum style (on the col element):
table.addColumnStyleName(colNumer, "some_css_style_name");
or better use css resource name instead of string "some_css_style_name".
Just for the fun of it I might add something I just had a headache with... if you change cellTableStyle(); with something else it breaks... no warning or error, the CSS just does not appear as I thought it would. Dont know where this is documented, but I found it out after alot of fiddeling trying to find out why some CSS was correct and some not..
For some reason my cellTable.addColumnStyleName(colNumber, "cssStyle") just won't work. According to FireBug it doesn't add the style no matter what (if the style was incorrect, it at least could have added it to the classes attribute of the th-element...). Maybe it's because I am redrawing the columns, but it'S weird nevertheless.
I've used the solution above, however, if you have another table with default styling, it ends up making with your custom table. Are you required to override all your tables with custom styling, or is there some workaround?
Also, I find the CellTable constructors less than optimal... I have to specify pageSize to specify the style resource CellTable(pageSize, resources)... I've been putting Integer.MAX_VALUE for pageSize, not sure if that should be -1 or something else as there's no javadoc on that value.
I'm writing a GWT widget using UIBinder and MVP. The widget's default styles are defined in TheWidgetView.ui.xml:
<ui:style type="com.widgetlib.spinner.display.TheWidgetView.MyStyle">
.textbox {
border: 1px solid #red;
}
.important {
font-weight: bold;
}
</ui:style>
The widget's CssResource interface is defined in TheWidgetView.java:
public class TheWidgetView extends HorizontalPanel implements TheWidgetPresenter.Display {
// ... some code
#UiField MyStyle style;
public interface MyStyle extends CssResource {
String textbox();
String important();
}
// ... more code
}
I'd like the consumer of this widget to be able to customize part of the widget's styles and to have this in their MyExample.ui.xml:
<ui:style type="com.consumer.MyExample.MyStyle">
.textbox {
border: 2px solid #black;
}
</ui:style>
And this be their MyExample.java:
public class MyExample extends Composite {
// ... some code
#UiField MyStyle style;
interface MyStyle extends TheWidgetView.MyStyle{
String textbox();
}
// ... more code
}
Is there a way that my widget can have default styles, but that the consumer of the widget can override one of them? When an interface extends TheWidgetView.MyStyle, the of the widget consumer needs to define all the styles listed in that parent interface. I've seen some widget libraries have the widget's constructor take in a ClientBundle as parameter, which I suppose could apply to CssResource. Although, I'm not sure how I'd pass in this style object in a constructor invoked by UIBinder.
Thanks much in advance!
I have playing around with something similar to make my application skinable. I would start by looking at the source code for any of the cell widgets. They seem to take the resources as a constructor, however they also have constructors that use GWT.create(Resources.class) to create the resources if they are not provided. As far as your question about using this template for UIBinder, there are 3 options mentioned here. However you may run into chicken and the egg issues when trying to define the style inside the UIBinder.
The issue you are running into with your other code is that your 2 different implementations of the style because uibinder creates it's own resource bundle which doesn't reference the parent's css. There are 3 solutions:
1) Tear the css out of the ui binder file into it's own file and use ui:with combined with either a provided field or uifactory to inject the style using your own resource bindle where you can compound the sources (i.e. #Source({DEFAULT_CSS, "myCss.css"})).
2) Your other option is to look at the generated code and use the syntax they are using to refernce the css within the uibinder file, however there are 2 issues you will have to overcome: the chicken and the egg problem and the fact that google can change this without telling you and break your stuff. Here is an example of the generated client bundle from one of my files:
#Source("uibinder:com.foo.gwt.client.workspace.select.SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style.css")
SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style style();
3) The last solution is to use deferred binding to replace the default style.
<replace-with class="com.foo.gwt.laf.mpe.resource.CellTableResources">
<when-type-is class="com.google.gwt.user.cellview.client.CellTable.Resources" />
<when-property-is name="laf" value="MPE" />
</replace-with>