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
b03a54c3	1989	Jaguar	Red
5cf92ff1	1979	Volvo	Blue
789986c9	1984	Jaguar	Red
2b3c09e3	1973	Honda	Silver
22d7badc	1960	Jaguar	Green
17a595b9	1996	Jaguar	Maroon
5a00d673	1963	Volkswagen	Orange
6c03f6f5	1991	Jaguar	Silver
8460b997	1986	Fiat	Red
2f475861	1978	Fiat	Red

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