Kaptcha (1)

Here we demonstrate 2 Tapestry components, KaptchaField and KaptchaImage, which provide CAPTCHA.

What characters are shown in the box above?

The kaptcha components are NOT part of Tapestry's corelib. To use them, put the following jars in the classpath:

References: Form Components, KaptchaField, KaptchaImage.

Home 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>Kaptcha (1)</h3>

    <p>
        Here we demonstrate 2 Tapestry components, KaptchaField and KaptchaImage, which provide <a
            href="http://en.wikipedia.org/wiki/CAPTCHA">CAPTCHA</a>.
    </p>

    <div class="eg">
        <div class="kapbox">
            <t:form t:id="verify">
                <div class="kap">
                    <t:kaptchaimage t:id="kaptchaImage" />
                </div>
                <div class="kap">What characters are shown in the box above?</div>
                <div class="kap">
                    <t:kaptchafield image="kaptchaImage" visible="true" label="characters" />
                </div>
                <div class="kap">
                    <t:submit/>
                </div>
            </t:form>
        </div>
    </div>

    <p>The kaptcha components are NOT part of Tapestry's corelib. To use them, put the following jars in the classpath:</p>
    <ul>
        <li>tapestry-kaptcha-5.4.n.jar, for compile and runtime.</li>
        <li>
            kaptcha-0.0.8.jar, for runtime. You can get it from:
            <ul>
                <li>http://repo1.maven.org/maven2/com/github/axet/kaptcha/0.0.8/kaptcha-0.0.8.jar</li>
            </ul>
        </li>
        <li>
            filters-2.0.235.jar, for runtime. You can get it from:
            <ul>
                <li>http://repo1.maven.org/maven2/com/jhlabs/filters/2.0.235/filters-2.0.235.jar</li>
            </ul>
        </li>
    </ul>

    <p>
        References: <a href="http://tapestry.apache.org/component-reference.html#ComponentReference-FormComponents">Form
            Components</a>, <a
            href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/kaptcha/components/KaptchaField.html">KaptchaField</a>,
        <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/kaptcha/components/KaptchaImage.html">KaptchaImage</a>.
    </p>

    <p>
        <t:eventlink event="Home">Home</t:eventlink>
    </p>

    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/Kaptcha1.tml" />
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/Kaptcha1.java" />
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/kaptcha1.css" />
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.component;

import jumpstart.web.pages.Index;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.ioc.annotations.Inject;

@Import(stylesheet = "css/examples/kaptcha1.css")
public class Kaptcha1 {

    // Other pages

    @InjectPage
    private Kaptcha2 page2;

    // Generally useful bits and pieces

    @Inject
    private ComponentResources componentResources;

    // The code

    Object onSuccess() {
        componentResources.discardPersistentFieldChanges();
        return page2;
    }
    
    Object onHome() {
        componentResources.discardPersistentFieldChanges();
        return Index.class;
    }
}



.eg {
                margin: 20px;
                border: none;
}

.kapbox {
                width: 280px;
                text-align: center;
                padding: 14px ;
                font-size: 11px;
                background-color: #eee;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

form {
                margin: 0;
}

.kap {
                padding: 4px 0;
}