diff options
author | elmot <elmot@vaadin.com> | 2015-09-25 16:40:44 +0300 |
---|---|---|
committer | elmot <elmot@vaadin.com> | 2015-09-25 16:40:44 +0300 |
commit | a1b265c318dbda4a213cec930785b81e4c0f7d2b (patch) | |
tree | b149daf5a4f50b4f6446c906047cf86495fe0433 /documentation/themes/themes-eclipse.asciidoc | |
parent | b9743a48a1bd0394f19c54ee938c6395a80f3cd8 (diff) | |
download | vaadin-framework-a1b265c318dbda4a213cec930785b81e4c0f7d2b.tar.gz vaadin-framework-a1b265c318dbda4a213cec930785b81e4c0f7d2b.zip |
Framework documentation IN
Change-Id: I767477c1fc3745f9e1f58075fe30c9ac8da63581
Diffstat (limited to 'documentation/themes/themes-eclipse.asciidoc')
-rw-r--r-- | documentation/themes/themes-eclipse.asciidoc | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/documentation/themes/themes-eclipse.asciidoc b/documentation/themes/themes-eclipse.asciidoc new file mode 100644 index 0000000000..bd35ce6fed --- /dev/null +++ b/documentation/themes/themes-eclipse.asciidoc @@ -0,0 +1,75 @@ +--- +title: Creating a Theme in Eclipse +order: 6 +layout: page +--- + +[[themes.eclipse]] += Creating a Theme in Eclipse + +The Eclipse plugin automatically creates a theme stub for new Vaadin projects. +It also includes a wizard for creating new custom themes. Do the following steps +to create a new theme. + +. Select "File > New > Other..." in the main menu or right-click the +[guilabel]#Project Explorer# and select "New > Other...". A window will open. + +. In the [guilabel]#Select a wizard# step, select the "Vaadin > Vaadin Theme" +wizard. + ++ +image::img/eclipse-theme-new.png[] + ++ +Click [guibutton]#Next# to proceed to the next step. + +. In the [guilabel]#Create a new Vaadin theme# step, you have the following +settings: + +[guilabel]#Project#(mandatory):: The project in which the theme should be created. + +[guilabel]#Theme name#(mandatory):: The theme name is used as the name of the theme folder and in a CSS tag +(prefixed with " [literal]#++v-theme-++#"), so it must be a proper identifier. +Only latin alphanumerics, underscore, and minus sign are allowed. + +[guilabel]#Modify application classes to use theme#(optional):: The setting allows the wizard to write a code statement that enables the theme +in the constructor of the selected application (UI) class(es). If you need to +control the theme with dynamic logic, you can leave the setting unchecked or +change the generated line later. + + + ++ +image::img/eclipse-theme-settings.png[] + ++ +Click [guibutton]#Finish# to create the theme. + + +The wizard creates the theme folder under the +[filename]#WebContent/VAADIN/themes# folder and the actual style sheet as +[filename]#mytheme.scss# and [filename]#styles.scss# files, as illustrated in +<<figure.eclipse.theme.created>>. + +[[figure.eclipse.theme.created]] +.Newly Created Theme +image::img/eclipse-theme-created-annotated-hi.png[] + +The created theme extends a built-in base theme with an [literal]#++@import++# +statement. See the explanation of theme inheritance in +<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and +Using Themes">>. Notice that the [filename]#reindeer# theme is not located in +the [filename]#widgetsets# folder, but in the Vaadin JAR. See +<<dummy/../../../framework/themes/themes-creating#themes.creating.builtin,"Built-in +Themes">> for information for serving the built-in themes. + +If you selected a UI class or classes in the [guilabel]#Modify application +classes to use theme# in the theme wizard, the wizard will add the +[literal]#++@Theme++# annotation to the UI class. + +If you later rename the theme in Eclipse, notice that changing the name of the +folder will not automatically change the [literal]#++@Theme++# annotation. You +need to change such references to theme names in the calls manually. + + + |