Как использовать файл компонента HTML (.htc) с GWT для применения CSS3?

Question

Скругленные границы не работают в IE.Я пытался использовать CSS3 для своего веб-приложения GWT, и я изо всех сил стараюсь внедрить * .htc в мой код.Как ссылаться на файл * .htc через GWT;1. Я пытался использовать ClienBundle, чтобы получить его как файл ресурса.2. Я ссылался на его относительный путь из файла CSS.Оба способа не могли мне помочь.Есть ли способ использовать CSS3 с GWT?Кто-нибудь использует * .htc с GWT или GWT еще не поддерживает CSS3? Обновлено Я хочу div с закругленными границами что-то вроде этого: demo Моя структура проекта:

public class Css3 implements EntryPoint {
interface MyResources extends ClientBundle {
    @ClientBundle.Source("myHTCfile.htc")
    DataResource htcResource();
}

public void onModuleLoad() {
    final MyResources myResources=(MyResources) GWT.create(MyResources.class);
    final FlowPanel  roundedDiv =new FlowPanel();
    roundedDiv.setStyleName("myClass");
    roundedDiv.add(new Label("lorem ipsum dolor sit amet lorem dolor" +
            "sit amet lorem ipsum dolor sit amet "));
    roundedDiv.setSize("200px","200px");
    myResources.htcResource().getUrl(); //For what is this necessary?
    RootPanel.get().add(roundedDiv);
}

} myResources.htcResource () GetURL ().// Для чего это нужно?

Css3.css

@url myHTCFile htcResource;

.myClass {
  behavoir: url(css3/myHTCFile);
  border-radius:10px;
  background-color:red;
  padding:10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Заранее спасибо !!!

Answer 1

Создайте каталог с именем public и поместите туда файл HTC:

src/
  - Module.gwt.xml
  - public/
       - myHTCfile.htc
  - other-directories/....

Тогда в вашем CSS-файле вы сможете ссылаться на файл HTC после компиляции:

.cssClassName {
    behavior: url(/GWT_MODULE_NAME/myHTCfile.htc);
}

Просто замените GWT_MODULE_NAME именем вашего модуля GWT.

Публичный каталог в GWT является хорошим местом для размещения статических ресурсов, связанных с модулем GWT.

Answer 2

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

Файл Css:

@url myHTCFile htcResource;

.myClass {
  behavior: myHTCFile;
}

Интерфейс ClientBundle:

interface MyResources extends ClientBundle {

  interface Css3Resource extends CssResource {
    String myClass();
  }

  @Source("myHTCfile.htc")
  DataResource htcResource();

  @Source("Css3.css")
  publicy Css3Resource css3();

}

Файл myHTCfile.htc и Css3.css должен находиться в той же папке, что и файл интерфейса MyResources.

РЕДАКТИРОВАТЬ:

Также необходимо поместить ссылку css в ClientBundle, см. ОбновленныйМои ресурсы выше.Используйте это следующим образом:

//Get instance
MyResources resources = GWT.create(MyResources.class);

//Make sure css is injected. This call needs to be done only once, more calls don't matter
resources.css3().ensureInjected();

//usage
roundedDiv.setStyleName(resources.css3.myClass());

Строка myResources.htcResource().getUrl(); может быть удалена, поскольку она ничего не делает.

Answer 3

А как насчет использования плагина типа css3pie ?На htc-файл ссылаются только из css-файла.Сервер просто должен иметь возможность обрабатывать файлы такого типа.

Answer 4

ОК, поскольку цель - округленные границы - как насчет использования условного CSS с некоторыми из маааких приемов для достижения закругленных углов (без использования файлов htc;))?Вы используете стандартный CSS3 border-radius для всех классных и модных браузеров (и IE9;)) и используете некрасивый хак для IE;)

Второе решение: в зависимости от ваших потребностей, DecoratorPanel может быть жизнеспособным вариантом.Javadocs говорят, что это работает "надежно" только в режиме причуд, но что они знают, а?;) Но вы можете проверить его исходный код для указателей о том, как реализовать собственное решение:)

Answer 5

Вы дали пирог? Кажется, у него есть довольно хорошая библиотека поведения для внедрения CSS3 в IE:

http://css3pie.com/