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

Dialog Framework Nested dialogs are supported to allow creating a dialog from another dialog. Demo here has 3 level of nested dialogs where last dialog returns data back to the root.

<a:form id="rootform">
    <a:growl id="growl" showDetail="true" />

    <a:commandButton id="rootbtn" value="View" icon="ui-icon-extlink" actionListener="#{dfRootView.openLevel1}">
        <a:ajax event="dialogReturn" listener="#{dfRootView.onReturnFromLevel1}" update="growl"/>
    </a:commandButton>
</a:form>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>Level 1</title>
        <style type="text/css">
            .ui-widget {
                font-size: 90%;
            }
        </style>
    </h:head>
    
    <h:body>        
        <a:form id="level1form">
            <p class="ui-widget">You are at Level 1.</p>

            <a:commandButton id="level1btn" value="Go into level 2" icon="ui-icon-extlink" actionListener="#{dfLevel1View.openLevel2}">
                <a:ajax event="dialogReturn" listener="#{dfLevel1View.onReturnFromLevel2}" />
            </a:commandButton>
        </a:form>
    </h:body>
    
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>Level 2</title>
        <style type="text/css">
            .ui-widget {
                font-size: 90%;
            }
        </style>
    </h:head>
    
    <h:body>        
        <a:form id="level2form">
            <p class="ui-widget">You are at Level 2.</p>
            
            <a:commandButton id="level2button" value="Go to Level 3" icon="ui-icon-extlink" actionListener="#{dfLevel2View.openLevel3}">
                <a:ajax event="dialogReturn" listener="#{dfLevel2View.onReturnFromLevel3}" />
            </a:commandButton>
        </a:form>
    </h:body>
    
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Level 3</title>
        <style type="text/css">
            .ui-widget {
                font-size: 90%;
            }
        </style>
    </h:head>
    <h:body>
        <a:form id="level3form">
             <p class="ui-widget">
                        Welcome to Level 3, enter value and click send to transfer data from level 3 back to level 2.
                    </p>

                    <h:panelGrid columns="2">
                        <a:outputLabel for="val" value="Return Value" />
                        <a:inputText id="val" value="#{dfLevel3View.val}" />
                    </h:panelGrid>

                    <a:commandButton value="Send" actionListener="#{dfLevel3View.closeDialog()}" />
        </a:form>
    </h:body>
</html>

package com.jarch.showcase.view.df;

import java.util.HashMap;
import java.util.Map;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.context.PrimeRequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean(name = "dfRootView")
public class DFRootView {
    
    public void openLevel1() {
        Map<String,Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        RequestContext.getCurrentInstance().openDialog("level1", options, null);
    }
    
    public void onReturnFromLevel1(SelectEvent event) {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Data Returned", event.getObject().toString()));
    }
}

package com.jarch.showcase.view.df;

import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import org.primefaces.context.PrimeRequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean(name = "dfLevel1View")
public class DFLevel1View {
    
    public void openLevel2() {
        Map<String,Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        RequestContext.getCurrentInstance().openDialog("level2", options, null);
    }
    
    public void onReturnFromLevel2(SelectEvent event) {
        //pass back to root
        RequestContext.getCurrentInstance().closeDialog(event.getObject());
    }
}

package com.jarch.showcase.view.df;

import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import org.primefaces.context.PrimeRequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean(name = "dfLevel2View")
public class DFLevel2View {
    
    public void openLevel3() {
        Map<String,Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        RequestContext.getCurrentInstance().openDialog("level3", options, null);
    }
    
    public void onReturnFromLevel3(SelectEvent event) {
        //pass back to level 1
        RequestContext.getCurrentInstance().closeDialog(event.getObject());
    }
}

package com.jarch.showcase.view.df;

import javax.faces.bean.ManagedBean;
import org.primefaces.context.PrimeRequestContext;

@ManagedBean(name = "dfLevel3View")
public class DFLevel3View {
    
    private String val;

    public String getVal() {
        return val;
    }

    public void setVal(String val) {
        this.val = val;
    }

    public void closeDialog() {
        //pass back to level 2
        RequestContext.getCurrentInstance().closeDialog(val);
    }
}