--- 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. etter-than-delete-and-unshare Nextcloud server, a safe home for all your data: https://github.com/nextcloud/serverwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
blob: fdc1d31d10c10d391728a0c6aa2bacf719ff0644 (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88