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 - Edit Data displayed on datatable can be edited at row or cell level.

Row Editing

Id	Year	Brand	Color
2385afe0	1992	Fiat	Maroon
f29bb573	1960	Mercedes	Brown
267d0ebf	1991	Jaguar	Silver
151a2fc6	1999	Jaguar	Yellow
56bd66a0	1964	BMW	Silver
0f0c93c0	2008	Mercedes	Blue
7a503086	1985	Mercedes	Blue
7c761e02	1998	Fiat	Maroon
d0af52fe	1983	Fiat	Orange
55729d98	1967	Volkswagen	White

Cell Editing with Click and RightClick

Id	Year	Brand	Color

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

   <a:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
       <f:facet name="header">
           Row Editing
       </f:facet>

       <a:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
       <a:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />

       <a:column headerText="Id">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
               <f:facet name="input"><a:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
           </a:cellEditor>
       </a:column>

       <a:column headerText="Year">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
               <f:facet name="input"><a:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
           </a:cellEditor>
       </a:column>

       <a:column headerText="Brand">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
               <f:facet name="input">
                   <h:selectOneMenu value="#{car.brand}" style="width:100%">
                       <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                   </h:selectOneMenu>
               </f:facet>
           </a:cellEditor>
       </a:column>

       <a:column headerText="Color">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
               <f:facet name="input">
                   <h:selectOneMenu value="#{car.color}" style="width:100%">
                       <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                   </h:selectOneMenu>
               </f:facet>
           </a:cellEditor>
       </a:column>

       <a:column style="width:32px">
           <a:rowEditor />
       </a:column>
   </a:dataTable>

   <a:dataTable id="cars2" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell" widgetVar="cellCars">
       <f:facet name="header">
           Cell Editing with Click and RightClick
       </f:facet>

       <a:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs" />

       <a:column headerText="Id">
              <a:cellEditor>
                  <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
                  <f:facet name="input"><a:inputText id="modelInput" value="#{car.id}" style="width:96%"/></f:facet>
              </a:cellEditor>
          </a:column>

          <a:column headerText="Year">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
               <f:facet name="input"><a:inputText value="#{car.year}" style="width:96%" label="Year"/></f:facet>
           </a:cellEditor>
       </a:column>

       <a:column headerText="Brand">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
               <f:facet name="input">
                   <h:selectOneMenu value="#{car.brand}" style="width:100%">
                       <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                   </h:selectOneMenu>
               </f:facet>
           </a:cellEditor>
       </a:column>

       <a:column headerText="Color">
           <a:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
               <f:facet name="input">
                   <h:selectOneMenu value="#{car.color}" style="width:100%">
                       <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                   </h:selectOneMenu>
               </f:facet>
           </a:cellEditor>
       </a:column>
   </a:dataTable>

   <a:contextMenu for="cars2" widgetVar="cMenu">
       <a:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('cellCars').showCellEditor();return false;"/>
       <a:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>
   </a:contextMenu>

</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.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.CellEditEvent;
import org.primefaces.event.RowEditEvent;
import org.primefaces.showcase.domain.Car;
import org.primefaces.showcase.service.CarService;

@ManagedBean(name="dtEditView")
@ViewScoped
public class EditView implements Serializable {
    
    private List<Car> cars1;
    private List<Car> cars2;
        
    @ManagedProperty("#{carService}")
    private CarService service;
    
    @PostConstruct
    public void init() {
        cars1 = service.createCars(10);
        cars2 = service.createCars(10);
    }

    public List<Car> getCars1() {
        return cars1;
    }

    public List<Car> getCars2() {
        return cars2;
    }
    
    public List<String> getBrands() {
        return service.getBrands();
    }
    
    public List<String> getColors() {
        return service.getColors();
    }

    public void setService(CarService service) {
        this.service = service;
    }
    
    public void onRowEdit(RowEditEvent event) {
        FacesMessage msg = new FacesMessage("Car Edited", ((Car) event.getObject()).getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
    
    public void onRowCancel(RowEditEvent event) {
        FacesMessage msg = new FacesMessage("Edit Cancelled", ((Car) event.getObject()).getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
    
    public void onCellEdit(CellEditEvent event) {
        Object oldValue = event.getOldValue();
        Object newValue = event.getNewValue();
        
        if(newValue != null && !newValue.equals(oldValue)) {
            FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Cell Changed", "Old: " + oldValue + ", New:" + newValue);
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }
}

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);
    }
}