How can I set a css file to a custom viewlet?
Hi,
I'm developing a custom viewlet following this topic. It seems to work quite good, but I cannot load the css style.
I've a this organization:
- com.example.web (plugin-project)
- resources/ui/internal/ExampleViewlet.js
- resources/ui/internal/template/ExampleViewlet.html
- resources/ui/internal/template/ExampleViewlet.css
In the html I've put this tag:
h1 class="com-example-web-ui-internal-ExampleViewlet">TEXT<
and in my css file I've
.com-example-web-ui-internal-ExampleViewlet .message{
color:#00ff00;
}
at last, in the js I've
templatePath: dojo.moduleUrl("com.example.web","ui/internal/templates/ExampleViewlet.html"),
Do I've missed something? How can I show the css to the widget?
Thanks,
Michele.
Accepted answer
Hi Michele,
The CSS gets loaded automatically by our code loader once you associate it to the javascript module. This can be done using an extension point in your plugin.xml. It will look like this:
<extension point="net.jazz.ajax.cssBindingSets">
<cssBindingSet id="com.example.web.CSSBindingSet" path="/ui/internal/templates">
<cssBinding jsModule="com.example.web.ui.internal.ExampleViewlet">
<cssModule path="/ExampleViewlet.css"/>
</cssBinding>
</cssBindingSet>
</extension>
The CSS gets loaded automatically by our code loader once you associate it to the javascript module. This can be done using an extension point in your plugin.xml. It will look like this:
<extension point="net.jazz.ajax.cssBindingSets">
<cssBindingSet id="com.example.web.CSSBindingSet" path="/ui/internal/templates">
<cssBinding jsModule="com.example.web.ui.internal.ExampleViewlet">
<cssModule path="/ExampleViewlet.css"/>
</cssBinding>
</cssBindingSet>
</extension>