Is it possible to access a regular CSS selector in a regular CSS, imported via module XML, in a GWT widget? Or do I, and should I, create a CssResource?
Edit: I forgot to specify that I want to access the CSS selector in a widget from a UiBinder XML file.
You can use widget.addStyleName("regularoldcssselectorname") and your parameter will come through in the final HTML as a class name.
I would say if the style is used across multiple widgets it's better to use a CssResource. It seems to be the way the google team is moving with everything, and it ensures that the style actually exists - using a arbitrary string allows typos and doesn't keep up with changes to the css file. Also, I believe I read on the gwt google group that including a stylesheet in the module was/is being deprecated, I can't find the posting now though.
So make the CssResource:
package the.package.of.the.client.bundle;
public interface MyBundle extends ClientBundle {
static MyBundle INSTANCE = GWT.create(MyBundle.class);
#Source("myCss.css")
MyCss myCss();
#Shared
public interface CommonCss extends CssResource {
String myStyle();
}
}
Then in the UiBinder:
<ui:with field='myname' type='the.package.of.the.client.bundle' />
<g:Label addStyleNames="{myname.myCss.myStyle}" text="My Label Text"/>
Related
In gwt how to get a widget's default style(CSS Selector).For example, gwt button has style name "gwt-button" which is referenced in gwt theme css file.
How to got that programmatically.
Is there any,
DOM.getStyleAttribute();
to accomplish this. GWT experts please help.
In your example of button (or any object that is a child of UIObject) can call getStyleName()
UIObject documentation
String com.google.gwt.user.client.ui.UIObject.getStyleName()
Gets all of the object's style names, as a space-separated list. If you wish to retrieve only the primary style name, call getStylePrimaryName().
Now as to why you need this information is the real question. It is my guess that you want to change the styling of an object (add or remove). This would best be done by either of the following methods.
1) Supplying a custom resources file to the object that has your styling
2) creating a class that extends Composite and create a custom UIBinder class with all of your styles within it.
I have used the ThemeBuilder to create a theme, but now I need to add an attribute in a CSS class so I can have a different font color in the selected element of a ListView, for example.
Ideally I would expect that the builder have support for specifying such a configuration in the .theme file, specially because font color is something that will not affect the image generation process that is used to support older browsers. In fact the builder should have support for all standard CSS3 attributes that don't affect the generated images.
Obviously it is possible to modify the ThemeBuilder jar to achieve this, but this is not a good idea.
I had a look in the appearance classes that are generated and my first try was to use the following constructor:
public Css3ContentPanelAppearance(Css3ContentPanelResources resources) {
this(resources, GWT.<Css3ContentPanelTemplate> create(Css3ContentPanelTemplate.class));
}
This did not work well, because all components using Css3ContentPanelAppearance are affected regardless of which Css3ContentPanelResources was used. I believe this happens because the CSS class name is based on the appearance class name and on the CssResource class name.
The solution was very simple: create a sub-class of the generated appearance class like this:
public class CustomCss3ListViewAppearance extends Css3ListViewAppearance {
public interface CustomCss3ListViewResources extends Css3ListViewAppearance.Css3ListViewResources {
// Load the original resources first and then the custom one, so the customizations will take precedence.
#ClientBundle.Source({"com/example/client/base/listview/Css3ListView.css","CustomCss3ListView.css"})
#Override
Css3ListViewAppearance.Css3ListViewStyle css();
}
public CustomCss3ListViewAppearance() {
super(GWT.<Css3ListViewAppearance.Css3ListViewResources>create(CustomCss3ListViewResources.class));
}
}
Then, you can create a separate JAR module that depends on the generated theme, specify some bindings in the .gwt.xml file and it will behave exactly as a plain generated theme (just need to add a dependency and import it in the application .gwt.xml file):
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='myCustomTheme'>
<inherits name="com.example.Theme"/>
<replace-with class="com.example.client.base.listview.CustomCss3ListViewAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
<when-property-is name="gxt.theme" value="myTheme" />
</replace-with>
<source path="myCustomTheme/client"/>
</module>
I want to change style of textbutton like i want to add background image and i want to change background color using GXT 3.0
someone help me plzzz
Thanks in advance
GXT 3 has a cleaner way to handle these kind of requirements. You have to use Appearance API which is provided in Sencha 3. Here is the key points which is involved in this process.
Appearance Interface, implementation and substitution
Styling with CssResource
Use ClientBundle to fetch css resources
XTemplates to apply styles/properties to mark-ups
In this case what you need to do is to implement an appearance for TextButtonCell (because TextButton uses TextButtonCell as the appearance) and provide required styles using css Style resource (annotating actual .css file path as source) . For example
public interface TextButtonResources extends ClientBundle
{
#Source("TextButton.css")
Style style();
}
Then substitute the built-in TextButtonCell appearance with your one.
<replace-with class="fullyQualifiedNameToYourButtonCellAppearanceClass">
<when-type-is class="com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance" />
</replace-with>
This blog post has a comprehensive details on this concept
Ext GWT 3.0 Appearance Design
First you set this style in your client side java code:
aButton.addStyleName("my_button_style");
Alternatively, you can use setStyleName() method or even change specific style attributes with setStyleAttribute().
After you've done that in your client side java code, you can define the style in a css file that's loaded for the page.
You can also change the style after component's been rendered. It should properly refresh appearance of your button.
I have an SWC which includes a number of Assets for my project. Within this SWC is also a static AS file which contains Class declarations for each image in the library.
For example, the SWF contains these images:
/assets/foo/bar/img1.jpg
/assets/foo/bar/img2.jpg
And it includes an AS file which is like this:
[Embed(source="/assets/foo/bar/img1.jpg")]
public static const IMG_1:Class;
[Embed(source="/assets/foo/bar/img2.jpg")]
public static const IMG_2:Class;
I would like to create a CSS declaration which uses these two images, but I don't want to embed the full path. Is it possible to do something like this?
<mx:Style>
.mySampleStyle {
upIcon: Assets.IMG_1;
downIcon: Assets.IMG_2;
}
</mx:Style>
At the moment, this particular syntax is invalid -- I'm getting compile errors for the "." character in the style declaration.
Is there another way of doing this without embedding the path (e.g. upIcon: Embed(source="/assets/foo/bar/img1.jpg")) in the CSS?
As stated here in order to reference class member of type Class using ClassReference in CSS, you should used "_" instead of "." in the fully qualified name of the field you want to use.
In your example,
<mx:Style>
.mySampleStyle {
upIcon: ClassReference("Assets_IMG_1");
downIcon: ClassReference("Assets_IMG_2");
}
should works.
Is there a way to change private static field of an alien class?
For example:
package mx.managers {
public class TooltipManager ... {
private static var _impl:IToolTipManager2; // <- assign my own value here
...
}
}
In Java it is possible to do it using Reflection API. What about Flex?
No, that is not possible.
If you are looking into changing the implementation of the TooltipManager, have a look at the Singleton class in the Flex SDK. You'll need to create a custom implementation and register it via the Singleton class before the application initializes. The best is to override the application preloader and do the registration there.
Well, if you feel like you can handle the extra responsibility, you can monkey patch the class by copying the source into your own source tree with the same package and apply the necessary modifications. That way the flex compiler will use your implementation rather than the SDK implementation.
This technique is sometimes used as a last resort to fix issues which cannot be fixed otherwise. Drawbacks include issues such as forwards compatibility and unintended side effects in the same or other classes dependant on the class your editing.