Search code examples
cssjsfjsf-2myfacesomnifaces

<o:form styleClass> not rendered when using MyFaces instead of Mojarra

I've been developing a website with JSF2.0 TomEE 1.7.3. In the last question I've asked :

What are the recommended JSF dependencies with TomEE1.7.x?

I got advices and decided to migrate from GlassFish(Mojarra) Faces to myFaces, because myFaces is the standard JSF implementation of TomEE.

Then I realized that "OmniFaces v1.8.3 Form" is not rendering css class attribute with "style" nor "styleClass", if I use the default myFaces of TomEE. It worked fine with Mojarra, but now I get my HTML layout broken, and I have to fix it.

Reason I use "OmniFaces Form" is, I really want to use includeRequestParams="true" feature, and this works in BOTH Mojarra and myFaces.

My xhtml looks like bellow:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:o="http://omnifaces.org/ui"
>
<h:body>
    <ui:composition template="templates/common.xhtml">
        <ui:define name="content">
            <o:form prependId="false" styleClass="form-horizontal" includeRequestParams="true">
                <!-- some inputText, labels, and buttons here -->
            </o:form>
        </ui:define>
    </ui:composition>
</h:body>
</html>

What I get in HTML is:

<form id="j_id_1k" name="j_id_1k" method="post" action="/foo.xhtml">

class="form-horizontal" is not rendered.

Am I missing something? are the xmlns wrong or deprecated? or is it just a inconsistency between modules and I cannot do anything about it? or is there something equivalent to includeRequestParams ?

I've tried something like this to attach css class to form tag with javascript (I know this is not a good approach):

(function() {
    var forms = document.forms;
    for (var i = 0; i < forms.length; i++){
        if (forms[i].id !== "headerForm"){
            forms[i].class = "form-horizontal";
        }
    }
})();

but it didn't fix the layout, maybe because css styles are attached to the objects INSIDE the form, not the form itself (I'm using css bootstrap).

Please help me out! thank you.

Solution

  • This was a mistake in <o:form>. It initially extended from UIForm class, but it doesn't have all non-common attributes definied. I fixed it to extend from HtmlForm instead and now it works for me in MyFaces too. It's available in today's 2.3-SNAPSHOT.