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
91fcb38e	2005	Renault	Yellow
625ce869	2004	Volkswagen	White
bf3287f5	1985	Honda	Silver
07b9a9b2	2000	Mercedes	Orange
98d031ec	1960	Mercedes	Yellow
73d88c42	1996	Fiat	Silver
f550cb59	1981	Volkswagen	Brown
c63fae20	2004	Renault	Orange
31d13e29	2000	Fiat	Brown
2caa26e0	1984	Fiat	Green

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