Yee Wei Law's Homepage

Recent site activity

Enhancing Javadoc-generated documentation

Javadoc by default generates an index.html that shows 3 frames, the bottom left of which is an "All classes" frame (file name allclasses-frame.html). Scrolling this particular frame to locate the right class is rather cumbersome if there are a lot of classes. Won't it be nice if we have a Search box where we can type in the class name and it will bring us straight to the documentation of the class? The following HTML and JavaScript code achieves just this.

<!-- [Custom] begin -->
<script language="javascript">
function find() {
    // preprocessing
    var target = document.getElementById("TARGET").value.replace(/\s+/g, "");
    var matchHead = document.getElementById("MATCHHEAD").checked;
    var matchAny = document.getElementById("MATCHANY").checked;    
    //window.alert(target+", "+partial);    // debug
    if (target == "") return;

    // matching
    var matched = false;
    var altHref = null;
    for (i = 0; i < document.links.length; i++) {
        var href = document.links[i].href;
        var slashPos = href.lastIndexOf('/');
        var dotPos = href.lastIndexOf('.');
        var className = href.substring(slashPos+1, dotPos);
        //window.alert(className);    // debug
        if (target.toLowerCase() == className.toLowerCase()) {            
            parent.frames["classFrame"].document.location = href;
            matched = true;
            return;
        } else {
            if (matchHead && altHref == null && className.search(new RegExp(target, "i")) == 0) {
                altHref = href;
            }
            if (matchAny && altHref == null && className.search(new RegExp(target, "i")) >= 0) {
                altHref = href;
            }
        }
    }
    if (!matched) {
        if ((matchHead || matchAny) && altHref != null) {
            parent.frames["classFrame"].document.location = altHref;
        } else {
            window.alert("Class not found.");
        }
    }
}
</script>
<div style="position: fixed; background: #f0f0f0; width: 100%; top: 0pt;">
    <!-- Note: Doing submit causes the page to be reloaded, which is slow. -->
    <form onsubmit="javascript:find();">
        <input type="text" size="20" id="TARGET"></input>
        <input type="button" size="6" value="Find" onclick="javascript:find();"></input><br>        
        <input type="radio" name="match_type" id="COMPLETE">Complete match only</input><br>
        <input type="radio" name="match_type" id="MATCHHEAD" CHECKED>Input maybe a prefix</input><br>
        <input type="radio" name="match_type" id="MATCHANY">Input maybe a sub-string</input>
    </form>
</div>
<div style="height: 5em;"></div>
<!-- [Custom] end -->

By sticking this code fragment right after the BODY tag in the file allclasses-frame.html, the functionality as depicted in the screenshot can be obtained:

Implementation note:

  • The entire class-finder panel is meant to be fixed at the top of the frame, however IE does not implement the required CSS feature correctly. Firefox does implement it correctly.
  • IE seems to perform better than Firefox when executing the JavaScript code.