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

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

29 голосов
/ 13 января 2010

У меня есть простой виджет 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?

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

Ответы [ 6 ]

20 голосов
/ 05 октября 2011

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

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

@external textBoxStyle, textBoxStyle-readonly;
5 голосов
/ 23 апреля 2010

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

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>
5 голосов
/ 13 января 2010

Если вы хотите использовать этот стиль для всех ваших TextArea s только для чтения, тогда я бы предложил просто изменить стиль .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 - 12 символов, G1x26wpeN - 9 символов, X0 - 2 символа;)).

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

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

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

У вас есть: 

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

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

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

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

0 голосов
/ 09 августа 2013

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

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

...