Как обмениваться типами таблиц стилей между виджетами GWT - PullRequest
Новая
       23

Как обмениваться типами таблиц стилей между виджетами GWT

3 голосов
/ 20 февраля 2010

Я пытаюсь создать составной виджет, который покажет «список» дочерних виджетов, но у меня возникли некоторые проблемы с получением CSS для работы в этом параметре. Построили простую демонстрацию, чтобы попытаться найти решение. Попытался указать родительский виджет как это 

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

 <g:FlowPanel ui:field="childPanel" stylePrimaryName='{res.style.parentStyle}'>

 </g:FlowPanel>

</ui:UiBinder>

с кодом 

public class CssParent extends Composite{

interface MyUiBinder extends UiBinder<Widget, CssParent> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

@UiField FlowPanel childPanel;

   public CssParent() {
      initWidget(uiBinder.createAndBindUi(this));

       CssChild child = new CssChild();
      childPanel.add(child);
   }  
}

дочерний виджет просто указан как 

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
   xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

    <g:HTMLPanel stylePrimaryName='{res.style.childStyle}'>
       Howdy folks
    </g:HTMLPanel>

  </ui:UiBinder>

Теперь, как вы можете видеть, они оба ссылаются на пакет ресурсов: 

public interface Resources extends ClientBundle {

@Source("CssDemo.css")
Style style();

  public interface Style extends CssResource{
     String parentStyle();
     String childStyle();
  }
}

, который снова ссылается на CssDemo.css: .parentStyle { цвет фона: серый; } 

.parentStyle .childStyle{
    background-color: yellow;
}

но по какой-то причине эти правила CSS никогда не применяются к двум элементам div, указанным выше. Есть идеи, почему это не удается? Или лучший способ совместного использования таблиц стилей .css между виджетами, когда стили включают правила зависимости между различными классами css?

Ответы [ 2 ]

2 голосов
/ 20 февраля 2010

Обнаружено, что вам нужно ввести стили, используемые таким образом 

 static{
     Resources.INSTANCE.style().ensureInjected();
 }

(добавило это поле экземпляра singleton-ish в комплект) 

public interface Resources extends ClientBundle {

    public static final Resources INSTANCE =  GWT.create(Resources.class);

    @Source("Resources.css")
    Style style();

теперь это работает, но мне действительно не нравится делать это так ("{res.style.someClass}") + все методы, которые я должен определить в интерфейсе CssResource

Было бы неплохо, если бы можно было сделать общее объявление стиля ui: style (возможно, на основе файла css) и просто использовать его как обычный внутренний блок стиля.

1 голос
/ 20 февраля 2010

Для меня не очевидно, что не так - ваш код по крайней мере близок к правильному (я использовал styleName=<whatever> вместо stylePrimaryName=<whatever>, так что это одна вещь, на которую вы могли бы обратить внимание).

Способ отладки подобных проблем - использовать Firebug, чтобы увидеть (1) какие имена классов были применены к элементам DOM и (2) какие правила CSS вступают в силу на основе этих стилей.

Если вы поместите @external parentStyle, childStyle; в начале вашего CSS-файла, то GWT не будет скрывать имена стилей, и вы сможете сказать в Firebug, какие имена были применены.

Еще пара предложений:

  1. Используйте DevMode и посмотрите, не отображаются ли какие-либо ошибки (они будут выделены красным цветом) при загрузке страницы - прокрутите до нижней части верхней панели окна DevMode.
  2. Вы можете попробовать это на более простом примере, с одним классом Composite, а не с двумя.
...