Question

有没有办法在Wicket7中自定义YUI日历设计？据我所知，它带有一个css套装，它真的不是一个燃烧器。我能想到的唯一方法是覆盖使用过的css，但我想知道是否有更优雅的解决方案，比如主题。

Answer 1

在DatePicker类中对皮肤进行了硬编码，如果要更改它，在更改类时需要采取一些解决方法来使其正常工作。

首先想一想，您应该创建自己的行为派生自 DatePicker ，请参阅源代码https://github.com/apache/wicket/blob/build/wicket-7.1.0/wicket-datetime/src/main/java/org/apache/wicket/extensions/yui/calendar/DatePicker.java

替换 afterRender（Component）就足够了，但你应该从Wicket类中复制粘贴代码，然后替换皮肤。

重要提示：请勿拨打super.afterRender（组件）;因为它渲染要替换的HTML！

public class SkinnedDatePicker extends DatePicker
{

    /**
     * {@inheritDoc}
     */
    @Override
    public void afterRender(final Component component)
    {
        // NEVER CALL THIS: super.afterRender(component);

        // Append the span and img icon right after the rendering of the
        // component. Not as pretty as working with a panel etc, but works
        // for behaviors and is more efficient
        Response response = component.getResponse();
        response.write("\n<span class=\"yui-skin-MYSKIN\">&nbsp;<span style=\"");

        if (renderOnLoad())
        {
            response.write("display:block;");
        }
        else
        {
            response.write("display:none;");
            response.write("position:absolute;");
        }

        response.write("z-index: 99999;\" id=\"");
        response.write(getEscapedComponentMarkupId());
        response.write("Dp\"></span><img style=\"");
        response.write(getIconStyle());
        response.write("\" id=\"");
        response.write(getIconId());
        response.write("\" src=\"");
        CharSequence iconUrl = getIconUrl();
        response.write(Strings.escapeMarkup(iconUrl != null ? iconUrl.toString() : ""));
        response.write("\" alt=\"");
        CharSequence alt = getIconAltText();
        response.write(Strings.escapeMarkup((alt != null) ? alt.toString() : ""));
        response.write("\" title=\"");
        CharSequence title = getIconTitle();
        response.write(Strings.escapeMarkup((title != null) ? title.toString() : ""));
        response.write("\"/>");

        if (renderOnLoad())
        {
            response.write("<br style=\"clear:left;\"/>");
        }
        response.write("</span>");
    }
}

第二个地方是，当你想将它与 DateTimeField 一起使用时，你必须覆盖工厂方法 newDatePicker（），复制 - 粘贴Wicket代码再次到位，请参阅https://github.com/apache/wicket/blob/build/wicket-7.1.0/wicket-datetime/src/main/java/org/apache/wicket/extensions/yui/calendar/DateTimeField.java

public class SkinnedDateTimeField extends DateTimeField
{

    /**
     * The DatePicker that gets added to the DateTimeField component. Users may override this method
     * with a DatePicker of their choice.
     * 
     * @return a new {@link DatePicker} instance
     */
    @Override
    protected DatePicker newDatePicker()
    {
        return new SkinnedDatePicker()
        {
            private static final long serialVersionUID = 1L;

            @Override
            protected void configure(final Map<String, Object> widgetProperties,
                final IHeaderResponse response, final Map<String, Object> initVariables)
            {
                super.configure(widgetProperties, response, initVariables);

                DateTimeField.this.configure(widgetProperties);
            }
        };
    }
}

使用SkinnedDateTimeField组件而不是DateTimeField

如何在Java Wicket中自定义YUI日历主题

1 个答案: