Как объявить зависимые имена стилей с помощью UiBinder

Question

Как объявить зависимые имена стилей с помощью UiBinder

У меня есть простой виджет UiBinder, содержащий TextArea:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <g:TextArea visibleLines="3" />
</ui:UiBinder>

Я хочу контролировать цвет фона этого текстового поля для состояний записи и только для чтения. GWT использует "-readonly" стиль имени декоратора для достижения этой цели. Итак, я пытаюсь это:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

Очевидно, это не сработает, потому что имена стилей скрыты для CssResources, что приводит к чему-то вроде этого:

.G1x26wpeN {
    background-color:yellow
 }
.G1x26wpeO {
    background-color: lightgray;
}

Итоговый HTML для текстовой области для записи выглядит так:

<textarea tabindex="0" class="G1x26wpeN" rows="3"/>

Текст только для чтения выглядит следующим образом:

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>

Как мне объявить стиль, чтобы GWT запутывал основную часть, а не "-readonly" decdorator?

Я знаю, что могу отключить запутывание для всего имени стиля. Но я хотел бы сохранить запутывание при использовании декораторов.

29

css gwt obfuscation uibinder gwt2

Источник

user17428 12 янв '10 в 22:37

6 ответов

Другие вопросы по тегам css gwt obfuscation uibinder gwt2

user66416 05 окт '11 в 15:35 2011-10-05 15:35 · Answer 1 · 2011-10-05 15:35

На данный момент (GWT 2.4) он не поддерживается, и неясно, если / когда он будет поддерживаться, см. Проблему 4746 в системе отслеживания проблем GWT.

Обходной путь должен добавить @external, который отключает запутывание для этих стилей. В этом случае это будет:

@external textBoxStyle, textBoxStyle-readonly;

user181150 23 апр '10 в 17:15 2010-04-23 17:15 · Answer 2 · 2010-04-23 17:15

Почему бы тебе не попробовать вот что

public class MyFoo extends Widget {
  interface MyStyle extends CssResource {
    String normal();
    String readonly();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addStyle(enabled ? style.normal() : style.readonly());
    getElement().removeStyle(enabled ? style.readonly() : style.normal());
  }
}

это позволит вам изменить стиль, если текстовое поле "нормальное" или только для чтения...

И, конечно же, в UiBinder вы должны иметь что-то вроде

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }
    .normal { color:black; }
    .readonly { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div>

</ui:UiBinder>

user181497 13 янв '10 в 12:45 2010-01-13 12:45 · Answer 3 · 2010-01-13 12:45

Если вы хотите использовать этот стиль для всех ваших только для чтения TextAreas тогда я бы предложил просто изменить .gwt-TextArea-readonly стиль в CSS-файле вашей темы GWT.
В противном случае, я могу думать о добавлении вашего пользовательского стиля только программно, когда вы установите TextArea только для чтения.

PS: из документов:

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page.

Я рекомендую использовать это (с "пустым" или "X" или другим неиспользуемым префиксом) для гораздо более коротких имен классов - потому что при настройках по умолчанию вы не получаете столько за счет запутывания (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 символа;)).

user948379 12 окт '11 в 08:02 2011-10-12 08:02 · Answer 4 · 2011-10-12 08:02

Попробуйте сейчас, я надеюсь, вы получите это.
С <ui:style> элемент, вы можете определить CSS для вашего интерфейса именно там, где вам нужно
Замечания: <ui:style> элементы должны быть прямыми потомками корневого элемента

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui">
        <g:TextArea visibleLines="3" />
    </ui:UiBinder>

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style field='MyStyle'>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

user57344 11 ноя '11 в 20:31 2011-11-11 20:31 · Answer 5 · 2011-11-11 20:31

В вашем UIBinder нет опечатки?

У тебя есть:

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />

... но я думаю, что вам нужно использовать "stylePrimaryName", т.е.

    <g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />

Но я думаю, что на этот вопрос уже был дан ответ..

1

Источник

user57344 11 ноя '11 в 20:31

user2661223 09 авг '13 в 14:40 2013-08-09 14:40 · Answer 6 · 2013-08-09 14:40

Вот кое-что ценное, что я понял, соединив информацию из других сообщений в этой теме, особенно...

Если вы используете @external, вы можете переопределить стили gwt. Проблема в том, что это изменение применяется во всем мире! Однако возможно расширить и переопределить атрибуты выбора, не затрагивая каждый экземпляр типа виджета. (Это подобно программному стилевому методу создания класса css с именем класса gwt + суффикс и использованием addStyleDependantName().)

Вот пример использования UIBinder + CssResource для расширения стиля gwt. Я пропустил часть CssResource, но вы поймете идею...

В вашем файле xxxx.ui.xml представьте стиль gwt, но не связывайтесь с ним!

<ui:style>
    @external .gwt-Button; .gwt-Button {}
</ui:style>

Затем создайте стиль для виджета, указав 2 (или более) стиля в атрибуте styleName. Т.е. стиль gwt и тот (или более) из вашего ресурса.

<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" />

Вот класс CSS:

.submitButtonStyle{
   margin: 3px 5px 5px 0px;
}

В этом случае я определил кнопку, которая стилизована в стандартном методе (легко изменяется через наследование модуля), но с определенным полем, которое останется фиксированным. Это не испортило глобальный стиль, не потребовало определения всех атрибутов вручную и позволило по желанию менять глобальные стили с помощью clean.css, dark.css и т. Д.