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

PanelGrid PanelGrid is an extension to the standard panelGrid with theme integration, grouping and responsive features.

Basic


Name:	Kobe Bryant
Team:	Los Angeles Lakers
Position:	Shooting Guard
Number:	24

Responsive

Content

Grouping

1995-96 NBA Playoffs
Conf. Semifinals		Conf. Finals		NBA Finals		Champion
Finals MVP				Michael Jordan (Chicago)
Season MVP
Top Scorer
Seattle	4	Seattle	4	Seattle	2	Chicago
Houston	0	Seattle	4

Utah	4	Utah	3
San Antonio	2	Utah	3

Chicago	4	Chicago	4	Chicago	4
New York	1	Chicago	4

Atlanta	1	Orlando	0
Orlando	4	Orlando	0

panelGrid.xhtml

<h3>Basic</h3>
<a:panelGrid columns="2">
    <f:facet name="header">
        <a:graphicImage name="demo/images/misc/kobe.png" />
    </f:facet>

    <h:outputText value="Name:" />
    <h:outputText value="Kobe Bryant" />

    <h:outputText value="Team:" />
    <h:outputText value="Los Angeles Lakers" />

    <h:outputText value="Position:" />
    <h:outputText value="Shooting Guard" />

    <h:outputText value="Number:" />
    <h:outputText value="24" />
</a:panelGrid>

<h3>Responsive</h3>
<a:panelGrid columns="3" layout="grid">
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
</a:panelGrid>

<h3>Grouping</h3>
<a:panelGrid style="margin-top:20px">
    <f:facet name="header">
        <a:row>
            <a:column colspan="7">1995-96 NBA Playoffs</a:column>
        </a:row>
        <a:row>
            <a:column colspan="2">Conf. Semifinals</a:column>
            <a:column colspan="2">Conf. Finals</a:column>
            <a:column colspan="2">NBA Finals</a:column>
            <a:column>Champion</a:column>
        </a:row>

    </f:facet>

    <a:row>
        <a:column style="font-weight: bold;">Seattle</a:column>
        <a:column style="font-weight: bold;">4</a:column>

        <a:column rowspan="2" style="font-weight: bold;">Seattle</a:column>
        <a:column rowspan="2" style="font-weight: bold;">4</a:column>

        <a:column rowspan="5">Seattle</a:column>
        <a:column rowspan="5">2</a:column>

        <a:column rowspan="11" style="font-weight: bold;">Chicago</a:column>
    </a:row>

    <a:row>
        <a:column>Houston</a:column>
        <a:column >0</a:column>
    </a:row>

    <a:row>
        <a:column colspan="4" styleClass="ui-widget-header">
            <a:spacer height="0"/>
        </a:column>
    </a:row>

    <a:row>
        <a:column style="font-weight: bold;">Utah</a:column>
        <a:column style="font-weight: bold;">4</a:column>

        <a:column rowspan="2">Utah</a:column>
        <a:column rowspan="2">3</a:column>
    </a:row>

    <a:row>
        <a:column>San Antonio</a:column>
        <a:column >2</a:column>
    </a:row>

    <a:row>
        <a:column colspan="6" styleClass="ui-widget-header">
            <a:spacer height="0"/>
        </a:column>
    </a:row>

    <a:row>
        <a:column style="font-weight: bold;">Chicago</a:column>
        <a:column style="font-weight: bold;">4</a:column>

        <a:column rowspan="2" style="font-weight: bold;">Chicago</a:column>
        <a:column rowspan="2" style="font-weight: bold;">4</a:column>

        <a:column rowspan="5" style="font-weight: bold;">Chicago</a:column>
        <a:column rowspan="5" style="font-weight: bold;">4</a:column>
    </a:row>

    <a:row>
        <a:column>New York</a:column>
        <a:column >1</a:column>
    </a:row>

    <a:row>
        <a:column colspan="4" styleClass="ui-widget-header">
            <a:spacer height="0"/>
        </a:column>
    </a:row>

    <a:row>
        <a:column>Atlanta</a:column>
        <a:column >1</a:column>

        <a:column rowspan="2">Orlando</a:column>
        <a:column rowspan="2">0</a:column>
    </a:row>

    <a:row>
        <a:column style="font-weight: bold;">Orlando</a:column>
        <a:column style="font-weight: bold;">4</a:column>
    </a:row>


    <f:facet name="footer">
        <a:row>
            <a:column  colspan="4" style="text-align: right">
                Finals MVP
            </a:column>
            <a:column  colspan="3" rowspan="3">
                Michael Jordan (Chicago)
            </a:column>
        </a:row>

        <a:row>
            <a:column  colspan="4" style="text-align: right">
                Season MVP
            </a:column>
        </a:row>
        <a:row>
            <a:column  colspan="4" style="text-align: right">
                Top Scorer
            </a:column>
        </a:row>
    </f:facet>
</a:panelGrid>