искаженное имя CSS при стилизации в UiBinder - PullRequest
Новая
       9

искаженное имя CSS при стилизации в UiBinder

2 голосов
/ 21 октября 2011

Для моего приложения GWT я хочу показать выбранную строку в FlexTable, и для этой цели я добавляю стиль к определенной строке: 

@UiField FlexTable productTable;
int row;
[...]
/* select row */
productTable.getRowFormatter().addStyleName(row, "row-selected");

В соответствующем файле ui.xml стиль добавлен следующим образом: 

ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:u="urn:import:myapplication.client.ui">
<ui:style>
    tr.row-selected {
        background: #92C1F0;
    }
</ui:style>
<g:VerticalPanel>
    <g:ScrollPanel>
        <g:FlexTable ui:field="productTable" width="100%" height="100%">
        </g:FlexTable>
    </g:ScrollPanel>
</g:VerticalPanel>
</ui:UiBinder>

Это не работает, в то время как добавление стиля в мой глобальный файл .css делает. В FireBug я вижу, что имя tr.row-selected искажено в нечто вроде: tr.GB1HWLGEI

Почему это не работает и как оно должно работать?

Ответы [ 2 ]

3 голосов
/ 22 октября 2011

UiBinder использует ClientBundle для ui:style, поэтому применяются правила и синтаксис / функции CssResource.

Это означает, что имена ваших CSS-классов будут запутаны (чтобы они были уникальными и не конфликтовали с одноименным классом CSS из другой CssResource или внешней таблицы стилей).

В вашем случае вы можете либо определить интерфейс CssResource и объявить ui:style, чтобы расширить этот интерфейс и внедрить экземпляр в @UiField; так что вы можете использовать запутанный стиль в вашем addStyleName; как в http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
Или вы можете использовать @external в вашем ui:style, чтобы отключить запутывание для класса CSS; см http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes.

2 голосов
/ 27 ноября 2011

Garbled действительно запутан, что будет быстрее в браузере и труднее для кого-то для обратного инжиниринга.Это также означает, что вам не нужно беспокоиться о конфликтах пространства имен css.

Итак, просто используйте следующую строку в файле ModuleName.gwt.xml во время разработки, чтобы отключить запутывание. 

<set-configuration-property name="CssResource.style" value="pretty" />
...