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
a7ecaba2	1989	Renault	Yellow
0cb045fd	1997	Renault	Blue
26f3c651	2005	Jaguar	Maroon
2426b021	1973	Volkswagen	Brown
d35b4ce0	1984	BMW	Yellow
cbd740ee	1981	Audi	Brown
fa6b983e	2001	Volvo	Orange
27576af2	1980	Honda	Silver
e3757a4a	1965	Audi	Blue
781f234e	1974	BMW	Maroon

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	43%	95%	$ 98.598,00	$ 6.226,00
Samsung	25%	87%	$ 95.202,00	$ 7.836,00
Microsoft	99%	29%	$ 61.546,00	$ 49.943,00
Philips	47%	65%	$ 59.733,00	$ 70.859,00
Sony	23%	89%	$ 26.515,00	$ 44.331,00
LG	61%	17%	$ 91.009,00	$ 2.104,00
Sharp	56%	1%	$ 17.309,00	$ 27.587,00
Panasonic	46%	0%	$ 72.259,00	$ 79.385,00
HTC	66%	62%	$ 88.250,00	$ 64.500,00
Nokia	58%	45%	$ 63.674,00	$ 70.167,00
Totals:			$674.095	$422.938

<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@1f2f826")
    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);
    }
}