读书人

Vaadin Web应用开发课程(40):使用主题

发布时间: 2012-09-22 21:54:54 作者: rapoo

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
Vaadin Web应用开发课程(40):使用主题-创建和应用新主题
按照向导一步一步,就可以创建一个新的主题,然后修改新主题下的styles.css ,就可以达到自己预期的显示效果。


读书人网 >Web前端

热点推荐