I am trying to create a library of customised JSF controls, but the customisation pertains only to the design (look and feel and maybe simple interactions) not the functionality. I am not sure what the best way to do this as I am new to Java/JSF... I have tried creating a custom tag, but it seems that one has to pass all the attributes from the container custom tag to the inner tag to be able to read/write the values (which is a hassle unless I am missing some feature in JSF). Also not sure how this will affect event handling in the backend code, that is usually handled directly on a JSF native tag.
Is there a way to separate the design from the functionality/attributes/events? The main goal is to create a nice textbox template where the default style is changed only in one place as opposed to going over pages where the control is used and adding/editing/removing classes...
Example below:
The below represents a custom tag:
<pk:inputText id="txtBx" value="Default Text Here" />
This is used in a page. It is a styled version of the regular JSF control using Tailwind CSS:
<h:inputText></h:inputText>
I would like the backend developers to use it smoothly without affecting their functions
The custom tag implementation:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition>
<h:inputText styleClass="appearance-none block w-full md:w-1/3 bg-gray-100 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" value = "#{value}" id = "#{id}">
</h:inputText>
</ui:composition>
</h:body>
</html>