GWT - Проблемы со стилем TabLayoutPanel

Question

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

Но я не знаю, как переопределить default моделирование. Вот 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>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

Это не работает Но как я могу ссылаться на стили по умолчанию?

Answer 1

Я думаю, что прикрепить отдельный CSS - встроенные стили для использования с {style.xyz} в том же шаблоне. На самом деле есть второе решение. Если вы настаиваете на том, чтобы он был в ui.xml - используйте внешнюю область: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html

Answer 2

Чтобы уточнить ответ Атамура, второй вариант, который он предлагает, действительно лучший из двух, особенно если все другие ваши стили установлены с использованием UiBinder или клиентских пакетов. По сути, вы добавляете следующую строку ниже вашего начального <ui:style> тег:

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

Проблема в том, что GWT запутывает правила стиля, которые вы определили в своем шаблоне UiBinder. Поэтому, когда вы пишете "gwt-TabLayoutPanel", это скрывается под чем-то вроде "GMDW0RHDH", который затем никогда не применяется к элементам вашего TabLayoutPanel. Добавление "@external" отключает эту запутанность и позволяет применять стили в UiBinder так, как вы ожидаете.

Answer 3

Или вы можете просто добавить !important к вашим определениям стиля...

Answer 4

Вот пример, который работает

http://code.google.com/p/salvadordiaz/source/browse/trunk/gwt-exception-handler/src/fr/salvadordiaz/gwt/client/BlocImage.ui.xml?spec=svn56&r=56

Answer 5

Если вы хотите увидеть, как объявляется файл GWT css:

1. Откройте gwt-user.jar
2. Найдите пакет темы, например: com.google.gwt.user.theme.clean для Clean Theme, и откройте public/gwt/clean/clean.css.
3. Найдите как.gwt-TabLayoutPanel и посмотрите, как он объявлен.
4. Создайте свой собственный файл CSS и объявите его в your_module.gwt.xml

Вы можете изменить тему, если хотите.

Answer 6

<ui:style>
    @external onMouseOverBorderColor onMouseOutBorderColor;
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>

Answer 7

После некоторого исследования я использовал следующий подход, и он работал... я использую GWT 2.5

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}