Component Index Component Index Component Index

contrib:MaskEdit
net.sf.tapestry.contrib.form.MaskEdit
MaskEdit
 
Description
Provides a mask edit HTML <input type="text"> form element. This component requires JavaScript to be enabled in the client browser.

Mask edit field validates the text the user enters against a mask that encodes the valid forms the text can take. The mask can also format text that is displayed to the user.

Mask characterMeaning in mask
 l Mixed case letter character [a..z, A..Z]
 L Upper case letter character [A..Z]
 a Mixed case alpha numeric character [a..z, A..Z, 0..1]
 A Upper case alpha numeric character [A..Z, 0..9]
 # Numeric character [0..9]
 _ Reserved character for display, do not use.
 others Non editable character for display.

See Also
TextField, ValidField
Parameters
Name Type Direction Required Default Description
value String in/out yes   The form text field value.
mask String in yes   The character filter mask. See mask characters table above for details.
diabled boolean in no false Controls whether the text field is active or not. Corresponds to the "disabled" HTML attribute.

Body: removed
Informal parameters: not allowed
Reserved parameters: none

Examples

This example provides a credit card payment page.

Please enter your credit card details and click 'Pay'.

Card Number:
Expiry Date:
 
<form jwcid="paymentForm">
 <table cellpadding="4">
  <tr align="left">
   <td colspan="2"><font color="blue"><i>Please enter your credit card details and click 'Pay'.</i></font><p/></td>
  </tr>
  <tr align="right">
  </tr>  
  <tr><td>Card Number:</td><td><input jwcid="cardNumberMaskEdit"/></td>
  </tr>
   <tr><td>Expiry Date:</td><td><input jwcid="cardExpiryMaskEdit"/></td>
  </tr>
  <tr align="right">
   <td>&nbsp;</td><td><input type="submit" value="  Pay  "/></td>
  </tr>
 </table>
</form>


<component id="paymentForm" type="Form">
   <binding name='listener' expression='listeners.formSubmit'/>
</component>

<component id="cardNumberMaskEdit" type="contrib:MaskEdit">
   <binding name='value' expression='cardNumber'/>
   <binding name='mask' expression='"####-#####-####-####"'/>
</component>

<component id="cardExpiryMaskEdit" type="contrib:MaskEdit">
   <binding name='value' expression='cardExpiry'/>
   <binding name='mask' expression='"##/##"'/>
</component>


public class PaymentPage extends BasePage {
    private String cardNumber;
    private String cardExpiry;
    
    protected void initialize() {
       cardNumber = null;
       cardExpiry = null;
    }
    
    public String getCardNumber() { return cardNumber; }
    
    public void setCardNumber(String value) {
       cardNumber = value;
    }

    public String getCardExpiry() { return cardExpiry; }
    
    public void setCardExpiry(String value) {
       cardExpiry = value;
    }

    public void formSubmit(IRequestCycle cycle) {
        // Process form submission and make payment
    }
}

Component Index Component Index Component Index