It's all about the answers!

Ask a question

How can I set a css file to a custom viewlet?


Michele Pegoraro (1.8k12114101) | asked Nov 26 '12, 9:19 a.m.
edited Nov 26 '12, 9:47 a.m.

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


permanent link
Adam Archer (83639) | answered Nov 28 '12, 9:59 a.m.
FORUM MODERATOR / JAZZ DEVELOPER
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>
Michele Pegoraro selected this answer as the correct answer

Comments
Michele Pegoraro commented Nov 30 '12, 5:13 a.m.

Thanks, it works.

Best regards,

Michele.

Your answer


Register or to post your answer.