onClick Event on Element in customComponent - ajax

Question

I am currently deep diving into JSF and I have a question.
I am using JSF 2.2 (Mojarra 2.2.9) in a small application. I have build a custom component to render a data structure as a menu. The code looks like something like this:
#FacesComponent(createTag = true, tagName = "UIRecursiveTree", namespace = "")
public class UIRecursiveTree extends UIComponentBase {
#Override
public String getFamily() {
return "";
}
#Override
public void encodeBegin(FacesContext context) throws IOException {
}
private void writeFolderStructure(Map<IContainer, ?> map, ResponseWriter writer, String prefix) {
}
}
I have stripped some code out and of course I have set the family and the namespace, just hid it. The control has a value attribute which receives a LinkedHashMap which is rendered in my application.
Everything works fine. Currently I am just printing some labels with a ResponseWriter which represent my structure. Problem is, the structure can be quite big and the mechanic to load the structure is not ideal, at least if I am loading everything at once, which takes ages.
So, my idea is that I want to bind my elements (currently just labels but will be replpaced by links or something like that) to an onClick event, which triggers the component to load itself again with new values (Ajax) (fetch the child elements of the current element and add them to my structure so that the values are only loaded when they are needed)
I know there are maybe some controls in some libraries which I could use to map such a structure, but I am learning JSF and using things already done teaches me nothing. =)
So, the question is, how can I bind an onClick event to my elements to force the component to refresh itself?
Thanks in advance.

Answer 1

after a bit of back and forth, I was able to solve my problem.
I delayed the "do it completely yourself" course and used the tree control from PrimeFaces.
<p:tree id="treeMap" value="#{treeView.root}" var="container" dynamic="true" selectionMode="single" selection="#{treeView.selectedNode}">
<p:ajax event="expand" update="treeMap" listener="#{treeView.onNodeExpand}" />
<p:ajax event="select" update=":form" listener="#{treeView.onNodeSelect}" />
<p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{container.getName()}" />
</p:treeNode>
<p:treeNode type="dummy" icon="ui-icon-video" rendered="false" styleClass="hidden" />
</p:tree>
<h:commandButton value="Reset Tree" action="#{treeView.reset()}" />
I use those actionListeners to build up my tree.
Initially I only fetch the first level of item, which is the root. Everything else is loaded when I expand the node. To be able to expand the node (I need a child node under the root node) I add a dummy node under every node. When I click on the expand symbol I fire the onExpand listener. This method calls my service which fetches the child nodes of the current node and puts them under the node in my bean and refresh the tree. That way I can build up my structure when I need the child nodes. The only problem is that of curse under every node there is a dummy node. I delete the dummy when I have expanded the parent node, but without a full refresh there is a expand icon in front of every node, no matter whether there is actually a node under it or not. But in my case that's not that important.
I hope I could help someone who is looking for a similar solution.