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

DataTable - Column Resize Columns can be resized in two ways, with a helper or live.

Basic Resize

Id	Year	Brand	Color
171b386b	1996	Fiat	Black
ce613568	1986	Renault	Yellow
7eccc9bb	1965	Volvo	Black
18a557ae	2004	Audi	Orange
34e829ee	2001	Volkswagen	Silver
7a52e590	2002	Volkswagen	Orange
c4d63387	1970	Honda	White
a4f4e52d	1988	Ford	Black
e8ce025a	2005	Jaguar	Yellow
35acceae	1971	Renault	Brown

Live Resize with Callback

Id	Year	Brand	Color

Expand Mode with Grouping

Manufacturer	Sale Rate
	Sales		Profit
	Last Year	This Year	Last Year	This Year
Apple	58%	52%	$ 89.353,00	$ 5.271,00
Samsung	50%	22%	$ 29.387,00	$ 77.987,00
Microsoft	3%	97%	$ 46.012,00	$ 48.686,00
Philips	67%	45%	$ 12.976,00	$ 68.220,00
Sony	20%	7%	$ 47.659,00	$ 76.295,00
LG	43%	18%	$ 99.586,00	$ 79.721,00
Sharp	20%	10%	$ 59.536,00	$ 31.271,00
Panasonic	44%	95%	$ 81.754,00	$ 10.266,00
HTC	69%	13%	$ 17.710,00	$ 81.488,00
Nokia	37%	88%	$ 31.436,00	$ 75.138,00
Totals:			$515.409	$554.343

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

    <h3 style="margin-top:0">Basic Resize</h3>
    <a:dataTable id="cars1" var="car" value="#{dtResizableColumnsView.cars1}" resizableColumns="true" style="margin-bottom:20px">
        <f:facet name="header">
            Basic Resize
        </f:facet>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Live Resize with Callback</h3>
    <a:dataTable id="cars2" var="car" value="#{dtResizableColumnsView.cars2}" resizableColumns="true" liveResize="true" style="margin-bottom:20px">
        <a:ajax event="colResize" update=":form:msgs" listener="#{dtResizableColumnsView.onResize}" />
        <f:facet name="header">

        </f:facet>
        <a:column headerText="Id" id="id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year" id="year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand" id="brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color" id="color">
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <h3>Expand Mode with Grouping</h3>
    <a:dataTable var="sale" value="#{dtGroupView.sales}" resizableColumns="true" resizeMode="expand">
        <f:facet name="header">

        </f:facet>

        <a:columnGroup type="header">
            <a:row>
                <a:column rowspan="3" headerText="Manufacturer" />
                <a:column colspan="4" headerText="Sale Rate" />
            </a:row>
            <a:row>
                <a:column colspan="2" headerText="Sales" />
                <a:column colspan="2" headerText="Profit" />
            </a:row>
            <a:row>
                <a:column headerText="Last Year" />
                <a:column headerText="This Year" />
                <a:column headerText="Last Year" />
                <a:column headerText="This Year" />
            </a:row>
        </a:columnGroup>

        <a:column>
            <h:outputText value="#{sale.manufacturer}" />
        </a:column>
        <a:column>
            <h:outputText value="#{sale.lastYearProfit}%" />
        </a:column>
        <a:column>
            <h:outputText value="#{sale.thisYearProfit}%" />
        </a:column>
        <a:column>
            <h:outputText value="#{sale.lastYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </a:column>
        <a:column>
            <h:outputText value="#{sale.thisYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </a:column>

        <a:columnGroup type="footer">
            <a:row>
                <a:column colspan="3" style="text-align:right" footerText="Totals:" />
                <a:column footerText="$#{dtGroupView.lastYearTotal}" />

                <a:column footerText="$#{dtGroupView.thisYearTotal}" />
            </a:row>
        </a:columnGroup>
    </a:dataTable>
</a:form>

package com.jarch.showcase.view.data.datatable;

import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.context.FacesContext;
import org.primefaces.event.ColumnResizeEvent;
import org.primefaces.showcase.domain.Car;
import org.primefaces.showcase.service.CarService;

@ManagedBean(name="dtResizableColumnsView")
public class ResizableColumnsView implements Serializable {
    
    private List<Car> cars1;
    private List<Car> cars2;
    
    @ManagedProperty("org.primefaces.showcase.service.CarService@2211f7a4")
    private CarService service;

    @PostConstruct
    public void init() {
        cars1 = service.createCars(10);
        cars2 = service.createCars(10);
    }
    
    public void onResize(ColumnResizeEvent event) {
        FacesMessage msg = new FacesMessage("Column " + event.getColumn().getClientId() + " resized", "W:" + event.getWidth() + ", H:" + event.getHeight());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
    
    public List<Car> getCars1() {
        return cars1;
    }
    
    public List<Car> getCars2() {
        return cars2;
    }

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

package com.jarch.showcase.service;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Car;

@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)];
	}
    
    public int getRandomPrice() {
		return (int) (Math.random() * 100000);
	}
    
    public 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);
    }
}