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

Michele Pegoraro (1.8k●14●119●103) | 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 (836●3●9) | 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 log in to post your answer.

Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.

It's all about the answers!

Related questions

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

Accepted answer

Your answer