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@5a4d624b, org.primefaces.showcase.domain.Car@dc3caf3, org.primefaces.showcase.domain.Car@ddf56d, org.primefaces.showcase.domain.Car@f1cc43a8, org.primefaces.showcase.domain.Car@65712ef1, org.primefaces.showcase.domain.Car@5b184c96, org.primefaces.showcase.domain.Car@5dcfefd, org.primefaces.showcase.domain.Car@d329a7b4, org.primefaces.showcase.domain.Car@f8737010, org.primefaces.showcase.domain.Car@7a329341, org.primefaces.showcase.domain.Car@6fcd586b, org.primefaces.showcase.domain.Car@eb944f26, org.primefaces.showcase.domain.Car@74907b93, org.primefaces.showcase.domain.Car@6bac2d80, org.primefaces.showcase.domain.Car@fe9d46dc, org.primefaces.showcase.domain.Car@e2e9ad36, org.primefaces.showcase.domain.Car@c44c1002, org.primefaces.showcase.domain.Car@dffe7b9a, org.primefaces.showcase.domain.Car@c3e71f1, org.primefaces.showcase.domain.Car@82a163ac, org.primefaces.showcase.domain.Car@1cb23432, org.primefaces.showcase.domain.Car@b70073c4, org.primefaces.showcase.domain.Car@d3e00008, org.primefaces.showcase.domain.Car@11bfb0cb, org.primefaces.showcase.domain.Car@ecc52bdc, org.primefaces.showcase.domain.Car@329c7ad5, org.primefaces.showcase.domain.Car@4b50810, org.primefaces.showcase.domain.Car@80081014, org.primefaces.showcase.domain.Car@6e581a62, org.primefaces.showcase.domain.Car@64fd14ec, org.primefaces.showcase.domain.Car@74b9832c, org.primefaces.showcase.domain.Car@b7c6190b, org.primefaces.showcase.domain.Car@67d5aa2e, org.primefaces.showcase.domain.Car@d99250a1, org.primefaces.showcase.domain.Car@c534fbe6, org.primefaces.showcase.domain.Car@cafd897d, org.primefaces.showcase.domain.Car@46e59fc2, org.primefaces.showcase.domain.Car@863292a1, org.primefaces.showcase.domain.Car@55a667f9, org.primefaces.showcase.domain.Car@8bb6a8bb, org.primefaces.showcase.domain.Car@f28c7f2a, org.primefaces.showcase.domain.Car@dafe262e, org.primefaces.showcase.domain.Car@cd7769c6, org.primefaces.showcase.domain.Car@7474e753, org.primefaces.showcase.domain.Car@6dd37315, org.primefaces.showcase.domain.Car@67a5d45a, org.primefaces.showcase.domain.Car@fd823a3b, org.primefaces.showcase.domain.Car@e9b55c7b]" 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@73067dba")
    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);
    }
}