123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- ---
- title: Using A JavaScript Library Or A Style Sheet In An Add On
- order: 40
- layout: page
- ---
-
- [[using-a-javascript-library-or-a-style-sheet-in-an-addon]]
- = Using a JavaScript library or a style sheet in an add-on
-
- Including style sheets or JavaScript files in your add-ons or as a part
- of your application can now be done by adding a `@StyleSheet` or
- `@JavaScript` annotation to a `Component` or `Extension` class. Each
- annotation takes a list of strings with URLs to the resources that
- should be loaded on the page before the framework initializes the
- client-side `Component` or `Extension`.
-
- The URLs can either be complete absolute urls (e.g. https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js) or
- relative URLs (e.g. _redbutton.css_). A relative URL is converted to a
- special URL that will download the file from the Java package where the
- defining class is located. This means that e.g.
- `@StyleSheet({"redbutton.css"})` on the class `com.example.RedButton` will
- cause the file `com/example/redbutton.css` on the classpath to be loaded
- in the browser. `@JavaScript` works in exactly the same way - see
- link:IntegratingAJavaScriptComponent.asciidoc[Integrating a JavaScript component]
- for a practical example.
-
- [source,java]
- ....
- @StyleSheet("redbutton.css")
- public class RedButton extends NativeButton {
- public RedButton(String caption) {
- super(caption);
- addStyleName("redButton");
- }
- }
- ....
-
- In this simple example, the `RedButton` component just adds a `redButton`
- style name to a normal `NativeButton`. _redbutton.css_ is located in the
- same folder as _RedButton.java_ and has this content:
-
- [source,css]
- ....
- .redButton {
- background-color: red;
- }
- ....
-
- This new mechanism makes it very easy to include style sheet or
- JavaScript files with add-ons and automatically load them in the browser
- when the add-on is used.
|