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

DataView DataView displays data in grid or list layout.

<style type="text/css">
    /*demo*/
    .ui-dataview-list .ui-dataview-row {
        border-bottom: 1px solid #A8A8A8;
        padding: 25px 10px;
        /* with the exported variables from Nova and Luna Themes*/
        border-bottom-color: var(--input-border-color, #A8A8A8);
    }

    .logo {
        width: 5%;
    }
    .detail {
        width: 85%;
        padding-left: 25px;
    }
</style>

<h:form id="form">
    <p:dataView var="car" value="[org.primefaces.showcase.domain.Car@f67487ad, org.primefaces.showcase.domain.Car@3f66893, org.primefaces.showcase.domain.Car@fb37a7d9, org.primefaces.showcase.domain.Car@38d7736c, org.primefaces.showcase.domain.Car@2544ba2a, org.primefaces.showcase.domain.Car@860edb72, org.primefaces.showcase.domain.Car@9ad3a7b0, org.primefaces.showcase.domain.Car@726af3d, org.primefaces.showcase.domain.Car@3859b2ab, org.primefaces.showcase.domain.Car@842686e8, org.primefaces.showcase.domain.Car@84471e38, org.primefaces.showcase.domain.Car@ae394910, org.primefaces.showcase.domain.Car@cd3cdc61, org.primefaces.showcase.domain.Car@eee25419, org.primefaces.showcase.domain.Car@896ea6de, org.primefaces.showcase.domain.Car@85cf8d39, org.primefaces.showcase.domain.Car@9cd0138b, org.primefaces.showcase.domain.Car@1e013a21, org.primefaces.showcase.domain.Car@38ed07b6, org.primefaces.showcase.domain.Car@befa4d0f, org.primefaces.showcase.domain.Car@7b48188f, org.primefaces.showcase.domain.Car@4ad85127, org.primefaces.showcase.domain.Car@d48dd449, org.primefaces.showcase.domain.Car@24817f05, org.primefaces.showcase.domain.Car@cc0fbb46, org.primefaces.showcase.domain.Car@2f70e29f, org.primefaces.showcase.domain.Car@2768e6e2, org.primefaces.showcase.domain.Car@8567315a, org.primefaces.showcase.domain.Car@88e2c8d2, org.primefaces.showcase.domain.Car@16e87153, org.primefaces.showcase.domain.Car@2631f745, org.primefaces.showcase.domain.Car@3fe19318, org.primefaces.showcase.domain.Car@2f80da4e, org.primefaces.showcase.domain.Car@508452ed, org.primefaces.showcase.domain.Car@e4859c74, org.primefaces.showcase.domain.Car@dabb32ae, org.primefaces.showcase.domain.Car@e99f31f8, org.primefaces.showcase.domain.Car@7284ab9d, org.primefaces.showcase.domain.Car@4c9d6b54, org.primefaces.showcase.domain.Car@c3fcb1c8, org.primefaces.showcase.domain.Car@51e02571, org.primefaces.showcase.domain.Car@df9607e, org.primefaces.showcase.domain.Car@83f0324f, org.primefaces.showcase.domain.Car@47390aed, org.primefaces.showcase.domain.Car@fd51e780, org.primefaces.showcase.domain.Car@efc2cd99, org.primefaces.showcase.domain.Car@75243d5d, org.primefaces.showcase.domain.Car@26dc881c]" rows="12" paginator="true" rowsPerPageTemplate="6,12,16"
                paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                gridIcon="pi pi-th-large" listIcon="pi pi-bars">

        <p:dataViewGridItem>
            <p:panel header="" style="text-align:center">
                <h:panelGrid columns="1" style="width:100%">
                    <p:graphicImage name="demo/images/car/.gif"/>

                    <h:outputText value="" />

                    <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                        <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" />
                        <f:setPropertyActionListener value="" target="" />
                    </p:commandLink>
                </h:panelGrid>
            </p:panel>
        </p:dataViewGridItem>

        <p:dataViewListItem>
            <h:panelGrid columns="3" style="width:100%" columnClasses="logo,detail">
                <p:graphicImage name="demo/images/car/-big.gif" />

                <p:outputPanel>
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Id:" />
                        <h:outputText value="" style="font-weight: bold"/>

                        <h:outputText value="Year:" />
                        <h:outputText value="" style="font-weight: bold"/>

                        <h:outputText value="Color:" />
                        <h:outputText value="" style="font-weight: bold"/>
                    </h:panelGrid>
                </p:outputPanel>

                <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                    <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" />
                    <f:setPropertyActionListener value="" target="" />
                </p:commandLink>
            </h:panelGrid>
        </p:dataViewListItem>
    </p:dataView>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="false" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/-big.gif"/>
                </f:facet>

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

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

                <h:outputText value="Color:" />
                <h:outputText value="" style="color:"/>

                <h:outputText value="Price" />
                <h:outputText value="$" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>

@ManagedBean
@ViewScoped
public class DataGridView implements Serializable {

    private List<Car> cars;

    private Car selectedCar;

    @ManagedProperty("org.primefaces.showcase.service.CarService@34dc7e92")
    private CarService service;

    @PostConstruct
    public void init() {
        cars = service.createCars(48);
    }

    public List<Car> getCars() {
        return cars;
    }

    public void setService(CarService service) {
        this.service = service;
    }

    public Car getSelectedCar() {
        return selectedCar;
    }

    public void setSelectedCar(Car selectedCar) {
        this.selectedCar = selectedCar;
    }
}

public class Car implements Serializable {

    public String id;
    public String brand;
    public int year;
    public String color;
    public int price;
    public boolean sold;

    public Car() {}

    public Car(String id, String brand, int year, String color) {
        this.id = id;
        this.brand = brand;
        this.year = year;
        this.color = color;
    }

    public Car(String id, String brand, int year, String color, int price, boolean sold) {
        this.id = id;
        this.brand = brand;
        this.year = year;
        this.color = color;
        this.price = price;
        this.sold = sold;
    }

    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }

    public String getBrand() {
        return brand;
    }
    public void setBrand(String brand) {
        this.brand = brand;
    }

    public int getYear() {
        return year;
    }
    public void setYear(int year) {
        this.year = year;
    }

    public String getColor() {
        return color;
    }
    public void setColor(String color) {
        this.color = color;
    }

    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }

    public boolean isSold() {
        return sold;
    }
    public void setSold(boolean sold) {
        this.sold = sold;
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0);
        return hash;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final Car other = (Car) obj;
        if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) {
            return false;
        }
        return true;
    }
}

@ManagedBean(name = "carService")
@ApplicationScoped
public class CarService {

    private final static String[] colors;

    private final static String[] brands;

    static {
        colors = new String[10];
        colors[0] = "Black";
        colors[1] = "White";
        colors[2] = "Green";
        colors[3] = "Red";
        colors[4] = "Blue";
        colors[5] = "Orange";
        colors[6] = "Silver";
        colors[7] = "Yellow";
        colors[8] = "Brown";
        colors[9] = "Maroon";

        brands = new String[10];
        brands[0] = "BMW";
        brands[1] = "Mercedes";
        brands[2] = "Volvo";
        brands[3] = "Audi";
        brands[4] = "Renault";
        brands[5] = "Fiat";
        brands[6] = "Volkswagen";
        brands[7] = "Honda";
        brands[8] = "Jaguar";
        brands[9] = "Ford";
    }

    public List<Car> createCars(int size) {
        List<Car> list = new ArrayList<Car>();
        for(int i = 0 ; i < size ; i++) {
            list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
        }

        return list;
    }

    private String getRandomId() {
        return UUID.randomUUID().toString().substring(0, 8);
    }

    private int getRandomYear() {
        return (int) (Math.random() * 50 + 1960);
    }

    private String getRandomColor() {
        return colors[(int) (Math.random() * 10)];
    }

    private String getRandomBrand() {
        return brands[(int) (Math.random() * 10)];
    }

    private int getRandomPrice() {
        return (int) (Math.random() * 100000);
    }

    private boolean getRandomSoldState() {
        return (Math.random() > 0.5) ? true: false;
    }

    public List<String> getColors() {
        return Arrays.asList(colors);
    }

    public List<String> getBrands() {
        return Arrays.asList(brands);
    }
}