How to integrate HTML admin template (Metronic) with JSF?

Question

JavaScript

Good day.
The problem is in the admin template (Metronic) and JSF (2.2).
I work with JSF (Facelets).
I want to make an admin panel using this template.
It looks like a big, powerful .. In general, a good template with positive reviews.
But, apparently, I don’t understand this well enough ...
There is no proper documentation (or I can’t find it for some reason).
Can someone tell me how to knit an HTML template with JSF in general?
It is not clear whether I just need to prescribe some necessary classes to the elements that JSF generates ( xmlns:h="http://xmlns.jcp.org/jsf/html " family) - is that all?
Do I need to maintain any special markup?
What about the fact that I had templates that I inherit (

<ui:composition template="/resources/templates/main_template.xhtml"

...)?
Can I do something similar in this template (Metronic)?
What if I need Ajax, which will eventually render some block(s)?

<h:selectOneListbox value="#{bean}" size="1"
                                        class="chosen-select app-platform-selector">
                        <f:selectItems value="#{bean}"/>
                        <f:ajax execute="@this" render="@form :needed_id" listener="#{bean}"/>
                    </h:selectOneListbox>

Will it all work?

Answer 1

At one time, I found it easiest to use jQuery, a
bunch of simple examples here :
https://jqueryui.com/draggable/#sortable

Answer 2

It is not clear what specific problem you have, but in JSF you can do exactly the same thing as in regular html. JSF has a very good templating model, so templating shouldn't be a problem. JSF tags can be easily interspersed with regular HTML tags, the only thing I noticed in your code is that you incorrectly assign the CSS class to the element class="chosen-select app-platform-selector"you need styleClass="chosen-select app-platform-selector"
. Another best practice is to use decorators everywhere. Wrap the page in a decorator, describe all the elements on the page, and how they will be located is already described in the decorator. If there are specific problems, write, how I can help