开发者

How do I modify the markup generated by a Wicket link in a PagingNavigator?

I'm using a customized PagingNaviga开发者_高级运维tor component, and I'm looking for a way to change markup generated for the first, previous, and current page paging items.

Here's my PaginingNavigator:

 <wicket:panel>
<ul class="pagination">
    <li class="first">
        <a wicket:id="first">&lt;&lt;</a>
    </li>
    <li class="prev">
        <a wicket:id="prev">&#060;</a>
    </li>
    <li wicket:id="navigation" class="page">
        <a wicket:id="pageLink" href="#">
            <span wicket:id="pageNumber">5</span>
        </a>
    </li>
    <li class="dots">...</li>
    <li wicket:id="lastPage" class="jump"></li>
    <li class="next">
        <a wicket:id="next">&#062;</a>
    </li>
    <li class="last">
        <a wicket:id="last">&gt;&gt;</a>    
    </li>
</ul>

The markup generated within the LIs of inactive items (initially, the previous, first, and current page) is this:

<span title="Item Title" id="RandomID">
    <em>
      <span>ItemText</span>
    </em>
</span>

This makes it pretty difficult to style the content of inactive paging items and the current page differently. I'd prefer it to output something like this for the inactive items:

<a href="#" title=ItemTitle" id="RandomID" class="inactive">ItemText</a>

and this for the current page:

 <a href="#" title=ItemTitle" id="RandomID" class="currentPage">ItemText</a>

I also noticed that it inserts SPAN tags into the A tags when you start paging through results, and since these don't have particular classes on them, it gets pretty tedious to style correctly.

I've been digging around in our codebase and can't find anywhere that we'd be specifying this, but since I'm a front-end guy, it'd be pretty easy for me to overlook. They seem to be standard PagingNavigationLinks, as far as I can tell.

Any ideas?


If you look here:

Apache Wicket - Search Engine Optimization

under "Making Paging Stateless", you can get an idea of how to override the various parts of paging navigation.


You can extend the core PagingNavigator:

import org.apache.wicket.markup.html.navigation.paging.IPageable;
import org.apache.wicket.markup.html.navigation.paging.IPagingLabelProvider;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;

class MyPagingNavigator extends PagingNavigator {

    public MyPagingNavigator(String id, IPageable pageable) {
        super(id, pageable);
    }

    public MyPagingNavigator(String id, IPageable pageable, IPagingLabelProvider labelProvider) {
        super(id, pageable, labelProvider);
    }



}

Then you create a MyPagingNavigator.html where you can make your changes. But be sure that you don't remove any components from MyPagingNavigator.html

You can use the original content from the wicket source (src/wicket/src/main/java/org/apache/wicket/markup/html/navigation/paging/PagingNavigator.html):

<?xml version="1.0" encoding="UTF-8" ?>
<!--
   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You under the Apache License, Version 2.0
   (the "License"); you may not use this file except in compliance with
   the License.  You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<html xmlns:wicket>
<body>
  <wicket:panel>
    <a wicket:id="first">&lt;&lt;</a>&nbsp;<a wicket:id="prev">&lt;</a>
    <span wicket:id="navigation">
          <a wicket:id="pageLink" href="#"><span wicket:id="pageNumber">5</span></a>
    </span>
    <a wicket:id="next">&gt;</a>&nbsp;<a wicket:id="last">&gt;&gt;</a>
  </wicket:panel>
</body>
</html>


To solve this I had to extend a handful of classes. In particular, I needed to override the behavior of org.apache.wicket.markup.html.link.AbstractLink.disableLink(final ComponentTag tag)

It's in the disableLink function of AbstractLink that the "a" tag is changed to "span" and the href and onclick attributes are stripped out. I first backtracked to PagingNavigator and extended this as follows:

public class DreamPagingNavigator extends PagingNavigator {

    public DreamPagingNavigator(String id, IPageable pageable) {
        super(id, pageable);
    }

    public DreamPagingNavigator(String id, IPageable pageable, IPagingLabelProvider labelProvider) {
        super(id, pageable, labelProvider);
    }

    @Override
    protected PagingNavigation newNavigation(final String id, final IPageable pageable,
            final IPagingLabelProvider labelProvider) {
        return new DreamPagingNavigation(id, pageable, labelProvider);
    }

    @Override
    protected AbstractLink newPagingNavigationIncrementLink(String id, IPageable pageable,
            int increment) {
        return new DreamPagingNavigationIncrementLink<Void>(id, pageable, increment);
    }

    @Override
    protected AbstractLink newPagingNavigationLink(String id, IPageable pageable, int pageNumber) {
        return new DreamPagingNavigationLink<Void>(id, pageable, pageNumber);
    }

}

For my "Dream" theme, this allowed me to override the newPagingNavigationLink, newPagingNavigationIncrementLink, etc. My implementation for PagingNavigationLink (et. al) then modified the disable behavior, like this:

public class DreamPagingNavigationLink<T> extends PagingNavigationLink<T> {

    public DreamPagingNavigationLink(String id, IPageable pageable, long pageNumber) {
        super(id, pageable, pageNumber);
    }

    @Override
    protected void disableLink(final ComponentTag tag)
    {
        // if the tag is an anchor proper
        if (tag.getName().equalsIgnoreCase("a") || tag.getName().equalsIgnoreCase("link") ||
            tag.getName().equalsIgnoreCase("area"))
        {
            // Remove any href from the old link
            tag.remove("href");
            tag.remove("onclick");

        }
        // if the tag is a button or input
        else if ("button".equalsIgnoreCase(tag.getName()) ||
            "input".equalsIgnoreCase(tag.getName()))
        {
            tag.put("disabled", "disabled");
        }
    }

}

Rather than change the "a" tag to a "span", I just strip out the href and onclick attributes.

Now I get an anchor tag rendered without an href.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜