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
b29b0589	1999	Audi	Orange
3be38177	2006	Renault	Red
1b74b882	1986	Jaguar	White
d911326e	1987	Volvo	Orange
f2d4e86b	1972	Ford	Green
93295292	1982	Mercedes	Brown
50d3d38b	1961	Honda	Silver
4d97bbf1	1966	Volvo	Black
50fcbc92	1981	Honda	Maroon
d454b39c	1991	Volkswagen	Orange

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