Подтвердить что ты не робот

Как объявить имена зависимых стилей с помощью 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 для writeable textarea выглядит следующим образом:

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

@external textBoxStyle, textBoxStyle-readonly;

Ответ 2

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

PS: из docs:

<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 символа;)).

Ответ 3

Почему бы вам не попробовать это сделать

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>

Ответ 4

Попробуйте сейчас этот, я надеюсь, вы его получите.
С элементом <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>

Ответ 5

Нет ли опечатки в вашем UIBinder?

У вас есть:

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

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

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

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

Ответ 6

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

Если вы используете @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 и т.д.