JARCH ShowCase

AjaxCore

• Listener • Basic • PartialSubmit • Event • Counter • Selector • Process • Search • Validation • Poll • RemoteCommand • Fragment • Dropdown • Status

Input

• AutoComplete • DatePicker • InputTextarea • Calendar • CascadeSelect • BooleanButton • Editor • BooleanCheckbox • Signature • OneButton • Spinner • OneRadio • Slider • CheckboxMenu • InputText • OneMenu • Switch • TriStateCheckbox • Password • InputGroup • Keyboard • Form Layout • Rating • InputNumber • ColorPicker • InputMask • Inplace • Listbox • KeyFilter • ManyButton • Knob • ManyMenu • TextEditor • ManyCheckbox • FilterGroup • MultiSelectListbox • FilterOrder • ToggleSwitch • FilterPeriod • Chips • FilterSearch • FilterSelect • Address • Cep • Cnpj • CnpjBase • Cpf • CpfCnpj • Email • Im • Integer • Money • MonthYear • Phone

Button

• Button • Link • CommandButton • LinkButton • CommandLink • SplitButton • Cancel • Clean • Delete • Download • Insert • Login • Print • Return • Save • Search • SearchLookup • LinkPrint

Data

Panel

• Accordion • Panel • Dashboard • PanelGrid • Fieldset • Ribbon • Grid CSS • ScrollPanel • Layout • TabView • NotificationBar • Toolbar • OutputPanel • Wizard • FlexGrid • Dashboard

Overlay

• ConfirmDialog • Tooltip • OverlayPanel • Dialog • LightBox • Sidebar • FilterSearch • InsertListFilter • Select • Unique

• Breadcrumb • PanelMenu • ContextMenu • SlideMenu • Dock • Stack • MegaMenu • Steps • Menu • TabMenu • Menubar • TieredMenu • MenuButton

Charts

• Area • Export • Bar • Interactive • Bubble • Live • Donut • Static • Line • Zoom • Pie • Combined • MeterGauge • MultiAxis • OHLC • Date • Animate • Responsive

ChartJs

• Bar • PolarArea • Bubble • Radar • Donut • Mixed • Line • Interactive • Pie • Export • Scatter

Messages

• Growl • Messages • StaticMessage

Multimedia

• Compare • Barcode • GraphicImage • Media • ContentFlow • PhotoCam • Cropper • Switch • Galleria

File

• Upload • Download

DragDrop

• Draggable • DataTable • DataGrid • Custom

Client Side Validation

• Basic • Custom • Bean • Event

Dialog Framework

• Basic • Message • Data • Nested

Misc

• Responsive • PrimeIcons • AutoUpdate • FontAwesome • ThemeSwitcher • Lifecycle • OutputLabel • Log • BlockUI • Focus • Cache • Hotkey • Captcha • Printer • Clock • ProgressBar • Collector • Context • DefaultCommand • ResetInput • Effect • Resizable • ExceptionHandler • Separator • FeedReader • Spacer • IdleMonitor • Spotlight • ImportConstants • Sticky • ImportEnum • Terminal • CSP • Watermark

JARCH SHOWCASE

Client Side Validation - Basic Client Side Validation Framework implements JSF validation API within the browser.

Compatible with Server Side Implementation.
Conversion and Validation happens at client side.
Partial Processing support for Ajax.
I18n support along with component specific messages.
Client side Renderers for message components.
Easy to write custom client converters and validators.
Global or Component based enable/disable.
Little footprint using HTML5.
Advanced Bean Validation Integration.

basic.xhtml
ValidationView.java

<a:form>
    <a:panel header="Validate">
        <a:messages autoUpdate="true"/>

        <h:panelGrid id="grid" columns="4" cellpadding="5">
            <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>					
            <a:inputText id="name" value="#{validationView.text}" required="true" label="Name"/>
            <a:message for="name" />
            <h:outputText value="#{validationView.text}" />

            <h:outputLabel for="number" value="Number:" style="font-weight:bold"/>					
            <a:inputText id="number" value="#{validationView.integer}" label="Number">
                <f:validateDoubleRange minimum="5" maximum="8" />
            </a:inputText>
            <a:message for="number" />
            <h:outputText value="#{validationView.integer}" />

            <h:outputLabel for="dd" value="Double:" style="font-weight:bold"/>					
            <a:inputText id="dd" value="#{validationView.doubleNumber}" converterMessage="Cannot convert to double.">
                <f:validateDoubleRange minimum="5.5" maximum="8.5" />
            </a:inputText>
            <a:message for="dd" />
            <h:outputText value="#{validationView.doubleNumber}" />

            <h:outputLabel for="money" value="Currency ($):" style="font-weight:bold"/>					
            <a:inputText id="money" value="#{validationView.money}" label="Currency">
                <f:convertNumber type="currency" currencySymbol="$"/>
            </a:inputText>
            <a:message for="money" />
            <h:outputText value="#{validationView.money}">
                <f:convertNumber  type="currency" currencySymbol="$" />
            </h:outputText>

            <h:outputLabel for="regex" value="Regex (^[a-zA-Z]+$):" style="font-weight:bold"/>					
            <a:inputText id="regex" value="#{validationView.regexText}" validatorMessage="Value does not match pattern.">
                <f:validateRegex pattern="^[a-zA-Z]+$" />
            </a:inputText>
            <a:message for="regex" />
            <h:outputText value="#{validationView.regexText}" />

            <h:outputLabel for="date" value="Date" style="font-weight:bold"/>					
            <a:inputText id="date" value="#{validationView.date}" label="Date">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </a:inputText>
            <a:message for="date" />
            <h:outputText value="#{validationView.date}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="desc" value="Description" style="font-weight:bold"/>
            <a:inputTextarea id="desc" value="#{validationView.description}" required="true" label="Description">
                <f:validateLength minimum="3" maximum="10" /> 
            </a:inputTextarea>
            <a:message for="desc" />
            <h:outputText value="#{validationView.description}" />
        </h:panelGrid>

        <a:commandButton value="Non-Ajax" ajax="false" icon="ui-icon-check" validateClient="true" style="margin-right:10px"/>
        <a:commandButton value="Ajax" update="grid" icon="ui-icon-check" validateClient="true" style="margin-right:10px"/>
        <a:commandButton value="Partial" update="grid" process="name number" validateClient="true" icon="ui-icon-check" style="margin-right:10px"/>
        <a:commandButton value="Disabled" ajax="false" icon="ui-icon-check" />
    </a:panel>
</a:form>

package com.jarch.showcase.view.csv;

import java.util.Date;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class ValidationView {
    
    private String text;
    private String description;
    private Integer integer;
    private Double doubleNumber;
    private Double money;
    private String regexText;
    private Date date;

    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }

    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getInteger() {
        return integer;
    }
    public void setInteger(Integer integer) {
        this.integer = integer;
    }

    public Double getDoubleNumber() {
        return doubleNumber;
    }
    public void setDoubleNumber(Double doubleNumber) {
        this.doubleNumber = doubleNumber;
    }

    public Double getMoney() {
        return money;
    }
    public void setMoney(Double money) {
        this.money = money;
    }

    public String getRegexText() {
        return regexText;
    }
    public void setRegexText(String regexText) {
        this.regexText = regexText;
    }

    public Date getDate() {
        return date;
    }
    public void setDate(Date date) {
        this.date = date;
    } 
}

Name:
Number:
Double:
Currency ($):
Regex (^[a-zA-Z]+$):
Date
Description