summaryrefslogtreecommitdiffstats
path: root/documentation/themes/themes-eclipse.asciidoc
diff options
context:
space:
mode:
authorelmot <elmot@vaadin.com>2015-09-25 16:40:44 +0300
committerelmot <elmot@vaadin.com>2015-09-25 16:40:44 +0300
commita1b265c318dbda4a213cec930785b81e4c0f7d2b (patch)
treeb149daf5a4f50b4f6446c906047cf86495fe0433 /documentation/themes/themes-eclipse.asciidoc
parentb9743a48a1bd0394f19c54ee938c6395a80f3cd8 (diff)
downloadvaadin-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.asciidoc75
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.
+
+
+