I am trying to use client bundle of css resource in JSNI but couldn't find any helpful code. I want to know how to call css resource in JSNI and how exaclty to use client bundle in JSNI.
My Normal code:--
Resource.INSTANCE.button().ensureInjected();
Resource res = GWT.create(Resource.class);
button.setStyleName(res.button().gwtbutton());
How to write in jsni?
Here Resource----> is interface extend clientbundle. gwtbutton ---> is css.
I have read in this link https://groups.google.com/forum/#!topic/google-web-toolkit/94v4tjCZiBo that we can use the CssResource through jsni. But I'm unclear about his usage its syntax.
There's no magic here (OK, there is a bit, but behind the scenes). Your Resource
interface's implementation is automatically generated by GWT, so when you call res.button().gwtbutton()
, it will return a proper name for the style you are referencing from a CSS file. This name could be obfuscated, with a prefix, etc. It doesn't matter to you - in the end it's just a string, a style's name. Just pass it as a String
to your JSNI method:
public native void addStyle(String style) /*-{
// Add style to a DOM element
}-*/;
// Invoke like so:
addStyle(res.button().gwtbutton());
If you want to use your ClientBundle directly in JSNI code:
// First, get Resource instance from a static field
var resource = @package.Resource::INSTANCE;
// Then, get the CssResource with the style
var button = resource.@package.Resource::button()();
// Finally, get the style's name
var gwtButton = button.@package.Button::gwtButton()();
Substitute package.Resource
for the proper qualified name (package + class name) of the Resource
interface. Use the code completion offered by Google Plugin for Eclipse if needed. Do the same for the type returned by the button
method (it's probably some interface extending CssResource
).
If you are troubled by the syntax, please dig through the documentation or look into some tutorials on Java Native Interface - it shares a lot of similarities with JSNI and might be better documented.