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
c924b3b7	1970	Audi	Silver
bbec5e4d	1986	Honda	Red
ba1b1b42	1989	Audi	Yellow
fe5eec12	1999	Volkswagen	White
c50af832	1984	Audi	White
51f62fbf	1982	Fiat	Red
c26ae0f6	1988	Mercedes	Blue
6a8d330c	1998	Volkswagen	Maroon
6e40f316	1974	Honda	Yellow
2b2c6c19	1965	Ford	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	1%	44%	$ 8.363,00	$ 36.471,00
Samsung	4%	91%	$ 1.663,00	$ 63.331,00
Microsoft	93%	39%	$ 86.850,00	$ 67.058,00
Philips	58%	7%	$ 90.646,00	$ 114,00
Sony	44%	84%	$ 42.358,00	$ 93.854,00
LG	19%	35%	$ 97.445,00	$ 55.791,00
Sharp	15%	4%	$ 69.456,00	$ 26.576,00
Panasonic	76%	0%	$ 32.384,00	$ 66.079,00
HTC	37%	30%	$ 89.133,00	$ 25.505,00
Nokia	73%	45%	$ 88.609,00	$ 28.254,00
Totals:			$606.907	$463.033

<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@3d22db")
    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);
    }
}