GWT: как иметь разные стили для сплиттеров в разных SplitLayoutPanels?

Question

Я знаю, что вы можете изменить стили разветвителей со стилями по умолчанию, указанным в документации:

.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger } 
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger } 

, и мы сделали это в более раннем развитии. Однако теперь я разрабатываю новый материал и хотел бы использовать другой стиль для сплиттеров в новой SplitLayoutPanel. К сожалению, мы не можем или не можем разбить приложение на разные модули, что может сделать это проще.

Я попытался создать новый стиль и применить его к моей новой SplitLayoutPanel, но, похоже, это не повлияло на сплиттеры. Я думал, что может быть способ получить дескриптор разделителей, чтобы применить новый стиль только к ним, но я не нашел такого метода.

Answer 1

Лучший способ сделать это - использовать CSS selectors и добавить название стиля в свои SplitLayoutPanels.

SplitLayoutPanel greenPanel = new SplitLayoutPanel(); 
greenPanel.addStyleName("green"); 
greenPanel.addEast(new Label("Green East"), 50); 
greenPanel.add(new Label("Green Center")); 
SplitLayoutPanel redPanel = new SplitLayoutPanel(); 
redPanel.addStyleName("red"); 
redPanel.addNorth(new Label("Red North"), 50); 
redPanel.add(new Label("Red Center")); 

StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: green; }"); 
StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: green; }"); 
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: red; }"); 
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: red; }"); 
RootLayoutPanel rlp = RootLayoutPanel.get(); 
rlp.add(greenPanel); 
rlp.setWidgetTopHeight(greenPanel, 0, PX, 50, PCT); 
rlp.add(redPanel); 
rlp.setWidgetBottomHeight(redPanel, 0, PX, 50, PCT);