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

#css #gwt #uibinder

Вопрос:

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

 @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>

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

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

Ответ №1:

UiBinder использует ClientBundle for 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 .

1. Спасибо, я буду использовать @external, потому что мне не нужен программный доступ к стилям, и его использование — это самый простой способ определить мой стиль в .ui.xml досье.

2. Ну, productTable.getRowFormatter().addStyleName(row, "row-selected"); для меня это подразумевает «программный доступ»: добавьте @UiField MyStyle style; и затем productTable.getRowFormatter().addStyleName(row, style.rowSelected()); , и вы получите гарантированную уникальность запутанного имени класса CSS.

Ответ №2:

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

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

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