В GWT как я могу переопределить CSS DisclosurePanel, используя <ui: style> или ClientBundle

Question

У меня есть класс, который расширяет Composite и содержит DisclosurePanel на верхнем уровне связанного файла UiBinder.

В DisclosurePanel HTML-код выглядит следующим образом:

<table class="gwt-DisclosurePanel gwt-DisclosurePanel-closed>
  <tr>
    <td>
      <a href="javascript:void(0);" style="display: block;" class="header">
        <div class=""> <!-- an HTMLPanel I've shoved in to a <gwt:customHeader> block -->
           ...
        </div>
      </a>
...

В моем файле UiBinder я могу использовать addStyleNames = "{style. ???}" и стилизовать некоторые вещи, например, я могу стилизовать саму DisclosurePanel и я могу стилизовать мою HTMLPanel внутри, но я не могу стилизовать

<a>

кроме как делать это:

disclosurePanel.getHeader().getParent().getElement().getStyle().setTextDecoration(TextDecoration.NONE);
disclosurePanel.getHeader().getParent().getElement().getStyle().setColor("black");

в коде, но это ужасно, и стиль теперь находится в двух местах: код и файл UiBinder.

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

.gwt-DisclosurePanel a {
    text-decoration: none;
    text: black;
}

но тогда мне нужно будет сослаться на этот CSS-файл с моей домашней страницы (Client.html) или на ссылку из файла gwt.xml, но оба этих способа устарели.

Как мне сделать это лучше или это невозможно?

Answer 1

Хммм ... обеспечит Injected () делать то, что я хочу?Могу ли я просто определить CssResource и ClientBundle, который ссылается на этот CssResource, а затем вызывает sureInjected в CssResource, и он будет внедрять весь CSS, даже если я не ссылался на все методы в моем подчиненном интерфейсе CssResource?*

Да и нет - вам нужно отключить обфускацию CSS (<set-configuration-property name="CssResource.style" value="pretty" /> - предупреждение, это глобальное, так что, вероятно, не то, что вы хотите), чтобы оно работало.Но если вы ссылаетесь на эти имена классов только из своих шаблонов UiBinder как таковых, у вас все будет в порядке:

<!-- Insert usual UiBinder stuff here -->
<ui:with field='res' type='com.example.client.resource.SomeCoolBundle'/>
<!-- SomeCoolBundle has a CssResource defined and available via style() -->

<div class='{res.style.lbox}'></div>

Просто не забудьте пометить классы GWT как @external в вашем файле CSS илииначе вы не сможете переопределить их (поскольку они будут запутаны):

@external .gwt-TextBox, .gwt-PasswordTextBox, .gwt-Button, .gwt-CheckBox;

Если это не соответствует вашим потребностям (или является громоздким), во что бы то ни стало сделайте используйте один из этих "устаревших" (не совсем) методов.

Answer 2

Я бы объявил свой стиль в UIBinder, а затем добавил CssResource в мой код Java.

В UiBinder:

   <ui:style field="dPanelStyle" type="com.*.client.*.JavaFile.DisclosurePanelStyle">
        .main {
            padding-top:10px;
            padding-left:10px;
            width:492px;
        }
        .open {
        }
        .closed {
        }
        .header,
        .header a,
        .header td {
            text-decoration: none;
            color: black; 
            cursor: pointer;
            cursor: hand;
            font-weight: bold;
            background-color:#A2DCE8;
        }
        .content {
            border-left: 0px solid white;
            padding: 0px 0px 0px 8px;
            margin-left: 0px;
        }        
    </ui:style>

    <g:HTMLPanel>
        <g:DisclosurePanel ui:field="dPanel" styleName="{dPanelStyle.main}">
        </g:DisclosurePanel>
    </g:HTMLPanel>

В JavaFile.java:

public interface DisclosurePanelStyle extends CssResource {
    String main();
    String header();
    String content();
}

@UiField DisclosurePanelStyle dPanelStyle;
@UiField DisclosurePanel dPanel ;

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

    dPanel.getHeader().setStyleName( dPanelStyle.header() );
    dPanel.getContent().setStyleName( dPanelStyle.content() );
}