Округлая панель gwt (стандартный виджет, похожий на DecoratorPanel)

Question

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

Мне интересно несколько вещей. Это то, что люди используют для создания div с закругленными углами в GWT? примечания к выпуску говорят, что оно не изменилось почти за год.

Кроме того, я не могу установить фиксированную высоту этого div (setHeight устанавливает его на div обертки, а не на внутренний). так что это бесполезно для меня, поскольку у меня есть приложение с фиксированной высотой.

Наконец, если кто-нибудь может предложить лучший механизм для создания округлых угловых делений в GWT, я все уши.

Answer 1

Существует прекрасный способ скругления углов с использованием CSS 3 (который, таким образом, не работает в IE <= 8, но будет работать в предварительном просмотре для IE9). Взгляните на <a href="http://css3please.com/" rel="nofollow noreferrer">http://css3please.com/, чтобы увидеть соответствующие стили. Это довольно просто, используя border-radius (или -moz-border-radius или -webkit-border-radius свойство). В GWT просто добавьте имя стилевого класса, которое вы хотите, к элементам, которые вы хотите иметь округлую границу, и все готово. Конечно, поддержка закругленных углов в старых браузерах сложнее, но нужно ли это делать?

Для устаревших браузеров это довольно сложно, в зависимости от реального контекста. Это всегда включает в себя изображения для границ. Вы должны создать изображения, которые маскируют границу рамки. Что работает, это трюк, описанный в этом ответе . Чтобы использовать это в GWT, вы можете использовать uibinder, htmlelement или создать свой собственный виджет. Более широкое объяснение техники также можно найти здесь .

Answer 2

Наиболее часто встречающееся решение decoratorPanel устарело в текущей версии GWT (например, если вы используете его с GWT 2.1.1, вы получите путаницу несовместимости между требуемым GWT-типом документа). , панель-декоратор и IE, особенно IE8).

Требуемый тип документа GWT 2.1.1 (! Doctype html) также отключает популярный файл roundnded-corners.htc для IE8.

Вы можете использовать ряд свойств закругленных углов CSS3 для добавления классов, но они не будут работать в версиях IE до 9.

JQuery и другие закругленные углы javascript имеют высокую вероятность конфликта с нативными JW GWT, поэтому мы отказались от них как возможного решения, хотя лично я не тестировал их.

Нам пришлось использовать изображения с закругленными углами, чтобы обеспечить по-настоящему кросс-браузерную совместимость и создать единообразный внешний вид.