Vaadin Web应用开发课程(40):使用主题-创建和应用新主题

Vaadin Web应用开发教程(40):使用主题-创建和应用新主题

Vaadin中创建的主题必须放置在VAADIN/themes 目录下。目录名称即为新的主题名称，新主题中必须包含一个styles.css 文件。新主题也必须继承某个Vaadin内置主题，如：

Server-Side ComponentClient-Side WidgetCSS Class NameAbsoluteLayoutVAbsoluteLayoutv-absolutelayoutAccordionVAccordionv-accordionButtonVButtonv-buttonCheckBoxVCheckBoxv-checkboxCssLayoutVCssLayoutv-csslayoutCustomComponentVCustomComponentv-customcomponentCustomLayoutVCustomLayoutv-customlayoutDateFieldVDateFieldv-datefieldVCalendarv-datefield-entrycalendarVDateFieldCalendarv-datefield-calendarVPopupCalendarv-datefield-calendarVTextualDate EmbeddedVEmbedded-FormVFormv-formFormLayoutVFormLayout-GridLayoutVGridLayout-LabelVLabelv-labelLinkVLinkv-linkOptionGroupVOptionGroupv-select-optiongroupHorizontalLayoutVHorizontalLayoutv-horizontallayoutVerticalLayoutVVerticalLayoutv-verticallayoutPanelVPanelv-panelSelect  VListSelectv-listselectVFilterSelectv-filterselectSliderVSliderv-sliderSplitPanelVSplitPanel-VSplitPanelHorizontal-VSplitPanelVertical-TableVScrollTablev-tableVTablePagingv-tableTabSheetVTabSheetv-tabsheetTextFieldVTextFieldv-textfieldVTextArea VPasswordField TreeVTreev-treeTwinColSelectVTwinColSelectv-select-twincolUploadVUpload-WindowVWindowv-window-CalendarEntry--CalendarPanelv-datefield-calendarpanel-ContextMenuv-contextmenu-VUnknownComponentvaadin-unknown-VView--Menubargwt-MenuBar-MenuItemgwt-MenuItem-Timev-datefield-time
Vaadin 内置了两种主题，reindeer 和  runo, Vaadin 6.0 缺省使用reindeer 主题。 有关主题定义的常数定义在包com.vaadin.ui.themes 中。
Vaadin 的Eclipse插件可以帮助创建新主题，为项目添加一个新主题. New -> Other -> Vaadin -> Vaadin theme

按照向导一步一步，就可以创建一个新的主题，然后修改新主题下的styles.css ，就可以达到自己预期的显示效果。