UI IE 8 Support#
A reasonable, transparent IE8 support can be achieved in a Wicket application the following way.
Obviously, you’ll still run into slowdowns, bugs and limitations due to IE8 being IE8. But the most visible issues will be gone.
1. Add IE8-specific CSS#
Put these files beside your StylesLessCssResourceReference.java
:
IE8AndLesserLessCssResourceReference.java
:
public final class IE8AndLesserLessCssResourceReference extends LessCssResourceReference {
private static final long serialVersionUID = 4656765761895221782L;
private static final IE8AndLesserLessCssResourceReference INSTANCE = new IE8AndLesserLessCssResourceReference();
private IE8AndLesserLessCssResourceReference() {
super(IE8AndLesserLessCssResourceReference.class, "ie8-and-lesser.less");
}
public static IE8AndLesserLessCssResourceReference get() {
return INSTANCE;
}
}
ie8-and-lesser.less
:
@import "@{scope-core-bs3}bootstrap/variables.less";
@import "@{scope-core-bs3}bootstrap/override/variables.less";
@import "variables.less";
.placeholder { // Added by the "placeholder" jquery polyfill plugin. See jquery.placeholder.js
color: @input-color-placeholder;
}
.btn-icon-only.btn-placeholder, .btn-placeholder {
visibility: hidden;
}
/* Put any IE8-specific CSS here */
2. Add global listeners#
Add this in your Wicket Application’s init
method:
IELegacySupport.init(this);
With IELegacySupport.java
being:
public final class IELegacySupport {
private IELegacySupport() {
}
public static final String IE_LEGACY_CONDITION = "lte IE 8";
public static final String IE_UNSUPPORTED_CONDITION = "lt IE 8";
public static final String IE_8_CONDITION = "IE 8";
public static final int IE_LEGACY_VERSION = 8;
public static void init(WebApplication webApplication) {
webApplication.getComponentInstantiationListeners().add(new InstantiationListener());
webApplication.getAjaxRequestTargetListeners().add(new AjaxRequestTargetListener());
}
private static class IELegacyHeaderItemsContributorBehavior extends Behavior {
private static final long serialVersionUID = -1441191136903604013L;
private final Iterable<HeaderItem> headerItems;
public IELegacyHeaderItemsContributorBehavior(HeaderItem ... headerItems) {
this(ImmutableList.copyOf(headerItems));
}
public IELegacyHeaderItemsContributorBehavior(Iterable<HeaderItem> headerItems) {
super();
this.headerItems = headerItems;
}
@Override
public void renderHead(Component component, IHeaderResponse response) {
WebClientInfo clientInfo = (WebClientInfo) Session.get().getClientInfo();
ClientProperties properties = clientInfo.getProperties();
if (properties.isBrowserInternetExplorer() && properties.getBrowserVersionMajor() <= IE_LEGACY_VERSION) {
for(HeaderItem headerItem : headerItems) {
response.render(headerItem);
}
}
}
}
private static class InstantiationListener implements IComponentInstantiationListener {
@Override
public void onInstantiation(Component component) {
if (component instanceof Page) {
Page page = (Page) component;
// Support for the placeholder text of input fields in IE8 and lesser
page.add(new PlaceholderPolyfillBehavior());
page.add(new IELegacyHeaderItemsContributorBehavior(
// Support for media queries in IE8 and lesser
JavaScriptHeaderItem.forReference(RespondJavaScriptResourceReference.get()),
// IE8 and lesser specific CSS
CssHeaderItem.forReference(IE8AndLesserLessCssResourceReference.get())
));
}
}
}
private static class AjaxRequestTargetListener extends AjaxRequestTarget.AbstractListener {
@Override
public void updateAjaxAttributes(AbstractDefaultAjaxBehavior behavior, AjaxRequestAttributes attributes) {
WebClientInfo clientInfo = (WebClientInfo) Session.get().getClientInfo();
ClientProperties properties = clientInfo.getProperties();
if (properties.isBrowserInternetExplorer() && properties.getBrowserVersionMajor() <= IE_LEGACY_VERSION) {
attributes.getAjaxCallListeners().add(
new AjaxCallListener().onBefore(
// Prevents placeholder text from being submitted
PlaceholderPolyfillBehavior.disable().render()
)
);
}
}
@Override
public void onBeforeRespond(Map<String, Component> map, AjaxRequestTarget target) {
// Refresh the placeholder text (for instance when rendering a popup)
target.appendJavaScript(PlaceholderPolyfillBehavior.statement().render());
}
@Override
public void onAfterRespond(Map<String, Component> map, IJavaScriptResponse response) {
// Nothing to do
}
}
}