Table with clickable icons

j:svg	p:gi	jp:icon

Clickable

TODO:

Styling in j:svg and jp:icon need to be removed (to have no alignment in the p:panelGrid
Styling need to be added to styleClass=jeeslPanel to have icons right-aligned in the f:actions for p:panel
Styling need to be added to j:dtHeader to have to have icons right-aligned

*****

There are three different components available providing an icon and supporting a listener:

j:icon is using a type attribute for icons in the resource path. The use of j:icon is DEPRECATED, j:svg should be used instead!
jp:icon is using a value attribute for objects supporting EjbWithGraphic. The use of jp:icon is DEPRECATED, j:svg should be used with value instead!
j:svg is similar to j:icon, is using images in the resource-path with type or with value objects supporting EjbWithGraphic.

The following attributes are available for j:svg

ejb: Provides a object which has to support EjbWithId
ejbRendered : Additional rendering options based on the ID of the ejb: "saved" (only rendered if the id is > 0)
library : The library of the resource, jeesl graphics are using jeeslGfx

Tooltips are supported with different options

tooltip : text or EL expression
ttEntity+ttCode : Uling labeling engine
ttValue : To access attributes of a provided value.

<h:form id="fPanel">
	<p:panel header="Panel" styleClass="jeesl-panel">
		<f:facet name="actions">
			<j:svg type="jeeslSave" listener="#{iconClickBean.click()}" library="jeeslGfx" styleClass="jeesl-action-icon"/>
			<j:svg id="overlayButton" type="jeeslSearch" library="jeeslGfx" styleClass="jeesl-action-icon"/>
			<jp:icon value="#{iconClickBean.icon}" listener="#{iconClickBean.click()}"/>
		</f:facet>
		<p>
			The actions-facet has 3 icons in the following ordering:
		</p>
		<j:inputGrid labelWidth="9">
			<p:outputLabel value="j:svg"/>
			<j:svg type="jeeslSave" listener="#{iconClickBean.click()}"/>
			
			<p:outputLabel value="j:svg (without listener)"/>
			<j:svg type="jeeslSave" oncomplete="alert('CLick')"/>
			
			<p:outputLabel value="p:graphicImage"/>
			<p:graphicImage name="#{appIconBean.svg['jeeslSearch']}" library="jeeslGfx" height="12"/>
			
			<p:outputLabel value="jp:icon"/>
			<jp:icon value="#{iconClickBean.icon}" listener="#{iconClickBean.click()}"/>
			
			<p:outputLabel value="j:svg (value)"/>
			<j:svg value="#{iconClickBean.icon}" listener="#{iconClickBean.click()}"/>
		</j:inputGrid>
		<p:separator/>
		<p>
			The following examples demonstrates the ejb-options:
		</p>
		<j:inputGrid labelWidth="9">
			<p:outputLabel value="A unsaved EJB:"/>
			<jp:icon value="#{appIconBean.iconEjbUnsaved}" listener="#{iconClickBean.click()}"
						ejbRendered="unsaved" ejb="#{iconClickBean.unsavedEntity}"/>
		</j:inputGrid>
	</p:panel>
	<p:overlayPanel for=":fPanel:overlayButton:link" widgetVar="opDummy" appendToBody="false">

<h:form id="fConfirm">
	<p:panel header="Confirm" styleClass="jeesl-panel">
		<p>
			The attribute confirm=true will add a confirm dialog to the button
		</p>
		<j:inputGrid labelWidth="9">
			<p:outputLabel value="j:svg confirmedClick1"/>
			<j:svg type="jeeslSave" listener="#{iconClickBean.confirmedClick1()}" confirm="true"/>
			<p:outputLabel value="j:svg confirmedClick2"/>
			<j:svg type="jeeslSave" listener="#{iconClickBean.confirmedClick2()}" confirm="true"/>
		</j:inputGrid>
		<p:separator/>
		<p>
			The default messages are:
		</p>
		<j:inputGrid labelWidth="4">
			<p:outputLabel value="confirmHeader"/>
			<h:outputText value="#{appLabelBean.descriptions['JeeslCrudDialog']['confirmHeader'][localeCode].lang}"/>
			<p:outputLabel value="confirmMessage"/>
			<h:outputText value="#{appLabelBean.descriptions['JeeslCrudDialog']['confirmMessage'][localeCode].lang}"/>
			<p:outputLabel value="confirmYes"/>
			<h:outputText value="#{appLabelBean.descriptions['JeeslCrudDialog']['confirmYes'][localeCode].lang}"/>
			<p:outputLabel value="confirmNo"/>
			<h:outputText value="#{appLabelBean.descriptions['JeeslCrudDialog']['confirmNo'][localeCode].lang}"/>
		</j:inputGrid>
	</p:panel>
</h:form>

<h:form id="fTooltip">
	<p:panel header="Tooltips" styleClass="jeesl-panel">
		<p>
			xx
		</p>
		<p:panelGrid columns="3" columnClasses="jeeslGrid40,jeeslGrid50,jeeslGrid10">
			<p:outputLabel value="tooltip"/>
			<h:outputText value="Text can directly entered"/>
			<j:svg type="jeeslSave" tooltip="Direct TT"/>
			
			<p:outputLabel value="ttEntity + ttCode"/>
			<h:outputText value="Both attributes required"/>
			<j:svg type="jeeslSave" ttEntity="IoGraphic" ttCode="tooltip"/>

			<p:outputLabel value="ttValue"/>
			<h:outputText value="multiLang"/>
			<j:svg value="#{iconClickBean.icon}" ttValue="multiLang"/>
			
			<p:outputLabel value="ttValue"/>
			<h:outputText value="multiDescription"/>
			<j:svg value="#{iconClickBean.icon}" ttValue="multiDescription"/>
		</p:panelGrid>
	</p:panel>
</h:form>
</ui:composition>

<h:form id="fTableClick">
	<p:dataTable var="i" value="#{iconClickBean.items}" styleClass="jeesl-datatable">
		<f:facet name="header">
			<j:dtHeader title="Table with clickable icons">
				<j:svg type="jeeslSave" listener="#{iconClickBean.click()}" library="jeeslGfx"/>
				<p:graphicImage name="#{appIconBean.svg['jeeslSearch']}" library="jeeslGfx" height="12"/>
				<jp:icon value="#{iconClickBean.icon}" listener="#{iconClickBean.click()}"/>
			</j:dtHeader>
		</f:facet>
		<p:column headerText="j:svg" styleClass="jeeslCenter">  
			<j:svg type="jeeslSave" listener="#{iconClickBean.click()}"/>
		</p:column>
		<p:column headerText="p:gi" styleClass="jeeslCenter">  
			<p:graphicImage name="#{appIconBean.svg['jeeslSearch']}" library="jeeslGfx" height="12"/>
		</p:column>
		<p:column headerText="jp:icon" styleClass="jeeslCenter">  
			<jp:icon value="#{iconClickBean.icon}" listener="#{iconClickBean.click()}"/>
		</p:column>
	</p:dataTable>
</h:form>

@Named @ViewScoped
public class IconClickBean extends AbstractJeeBean implements Serializable
{
	final static Logger logger = LoggerFactory.getLogger(IconClickBean.class);
	private static final long serialVersionUID = 1L;

	private final List<String> items; public List<String> getItems() {return items;}
	private List<Integer> sizes; public List<Integer> getSizes() {return sizes;}
	
	private IoIcon icon; public IoIcon getIcon() {return icon;}
	private JeeIcon unsavedEntity; public JeeIcon getUnsavedEntity() {return unsavedEntity;}

	public IconClickBean()
	{
		items = new ArrayList<>();
		sizes = new ArrayList<>(Arrays.asList(12,18,24,36));
	}
	
	@PostConstruct public void init()
	{
		super.initSecurity();
		
		icon = fUtils.fByEnum(IoIcon.class,JeeslIcon.Code.jeeslWorkflow);

		unsavedEntity = new JeeIcon();
		
		for(int i=0;i<3;i++)
		{
			UUID uuid = UUID.randomUUID();
			String code = uuid.toString();
			code = code.substring(0,code.indexOf("-"));
			items.add(code);
		}
	}

	public void click()
	{
		logger.info("Click");
	}
	
	public void confirmedClick1() {logger.info("Confirmed Click 1");}
	public void confirmedClick2() {logger.info("Confirmed Click 2");}
}

	jeeslArrowUp	Up Arrow
	jeeslArrowDown	Down
	jeeslArrowLeft	Left
	jeeslArrowRight	Right
	jeeslArrowFlip	Flip
	jeeslUpload	Upload
	jeeslDownload	Download
	jeeslZip	ZIP
	jeeslFilter	Filter
	jeeslCalcMinus	Minus
	jeeslCalcPlus	Plus
	jeeslAi	AI Processing
	jeeslTafu0	Calendar (0)
	jeeslTafu1	Calendar (+1)
	jeeslTafu2	Calendar (+2)
	jeeslTafu3	Calendar (+3)
	jeeslTafu4	Calendar (+4)
	jeeslTafu5	Calendar (+5)
	jeeslTafu6	Calendar (+6)
	jeeslTafu7	Calendar (+7)
	jeeslAdd	Adding
	jeeslRemove	Remove
	jeeslDelete	Delete
	jeeslCancel	Cancel
	jeeslSave	Save
	jeeslClean	Clean
	jeeslCut	Cut
	jeeslClone	Clone
	jeeslEdit	Edit
	jeeslReset	Reset
	jeeslMagnet	Magnet
	jeeslSearch	Search
	jeeslReload	Reload
	jeeslDropZone	Drop Zone
	jeeslTranslate	Translate
	jeeslFavorite	Favorit
	jeeslAddressBook	Address Book
	jeeslEntityCompany	Company
	ejbUnsaved	New
	ejbInvisible	Invisible
	jeeslInfo	Information
	jeeslComment	Kommentar
	jeeslMegaphone	Megaphone
	jeeslWarn	Warn
	jeeslFrozen	Frozen
	jeeslProject	Project
	jeeslOnlineHelp	Online Help
	jeeslGallery	Image Gallery
	jeeslRevision	Revision
	jeeslRevisionMod	Revision MOD
	jeeslRevisionAdd	Revision ADD
	jeeslRevisionDel	Revision DEL
	jeeslEmail	E-Mail
	jeeslEmailSend	Send E-Mail
	jeeslHome	Home
	jeeslPageArea	Page Area
	jeeslPrint	Print
	jeeslWorkflow	Workflow
	jeeslSbLogging	Logging
	jeeslLink	Link
	jeeslLanguageSelect	Language Selection
	jeeslWizard	Wizard
	jeeslSecurityKey	Key
	jeeslSecurityUser	User
	jeeslSecurityDocumentation	Documentation
	jeeslTreeExpandTwo	Expand Two
	jeeslTreeExpandThree	Expand Three
	jeeslTreeExpandAll	Expand All
	jeeslTreeExpandRelevant	Expand Relevant
	jeeslTreeCollapseAll	Collapse All

Name	Required	Default	Description
listener	false
update	false
styleClass	false
disabled	false	false
oncomplete	false
onstart	false
process	false
value	false
textLink	false
type	false
height	false	12
immediate	false	false
ajax	false	true
library	false	gfx	The library attribute which is passed to h:graphicImage, can be empty for JEESL icons. Project specific icons can be overridden here or centrally in AppIconBean.
ejb	false		The related entity-ejb which will be evaluated for the ejbRendered attribute
ejbRendered	false
confirm	false	false
confirmHeader	false	#{appLabelBean.descriptions['JeeslCrudDialog']['confirmHeader'][localeCode].lang}
confirmMessage	false	#{appLabelBean.descriptions['JeeslCrudDialog']['confirmMessage'][localeCode].lang}
confirmYes	false	#{appLabelBean.descriptions['JeeslCrudDialog']['confirmYes'][localeCode].lang}
confirmNo	false	#{appLabelBean.descriptions['JeeslCrudDialog']['confirmNo'][localeCode].lang}
tooltip	false		Text for a tooltip which can either directly entered here or with a EL binding.
ttEntity	false		A tooltip utilizing the labeling engine (together with ttCode).
ttCode	false		A tooltip utilizing the description of the engine (together with ttEntity).
ttValue	false		A tooltip using common attributes of the entity (multiLang,multiDescription)
blockUi	false		Defines the UI elements to block (e.g. @(form) to block all forms on a page)

Name	Required	Default	Description
styleClass	false	pf-action-icon
height	false	12	THhe height in px for the image.
value	true		Any object implementing EjbWithGraphic.
tooltip	false
textLink	false
listener	false
update	false
immediate	false	false
process	false
onstart	false		JS will be executed before the listener is invoked.
oncomplete	false		JS will be executed after the listener is invoked.
ejb	false		Any oject implementing EjbWithId, used in conjunction with ejbRendered
ejbRendered	false		Valid values are: unsaved (icon only rendered when ejb onject is unsaved)

tooltip	Text can directly entered
ttEntity + ttCode	Both attributes required
ttValue	multiLang
ttValue	multiDescription