JSF doesn't generate HTML output, instead plain JSF source code is visible in HTML output

Question

I'm doing my Course Final Assignment and I'm having some issues with JSF and HTML5. Before ask this, I read this and this answer.

In my project settings (Properties -> Project Facets) I have:

Java: 1.6
Dynamic Web Project: 2.5
JSF: 2.0 (Mojarra 2.0.3)

I created my HTML5 files separeted, and now I want merge my Java software with my front-end code. But I'm having issues, JSF don't render .html files.

Here's my original HTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE HTML>
<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="Fernando Paladin">
        <title>Locus - Disciplinas </title>

        <link href="../../css/bootstrap.css" rel="stylesheet">
        <link href="../../css/custom.css" rel="stylesheet">
    </h:head>
    <h:body>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 center">
                    <h:form role="form">
                        <div class="form-group">
                            <div class="col-md-10">
                                <h:inputText id="disciplina" class="form-control" value="#{disciplinaMBean.nome}" />
                                <!--  <input type="text" size="20" class="form-control" id="disciplina" placeholder="Pesquise ou crie uma nova disciplina" 
                                required>  -->
                            </div>
                            <div class="col-md-2">
                                <h:commandButton class="btn btn-md btn-success" action="#{disciplinaMBean.cadastrar}">
                                    Adicionar
                                </h:commandButton>
                                <!--  <a type="button" href="#" class="btn btn-md btn-success">Adicionar</a> -->
                            </div>
                        </div>

                        <div class="col-md-10">
                            <div class="form-group">
                                <br/>
                                <h:dataTable value="#{disciplinaMBean.listaDisciplinas}" var="disciplina">
                                    <h:column>
                                        <f:facet name="header">Nome</f:facet>
                                        <h:outputText value="#{disciplinaMBean.nome}" />
                                    </h:column>
                                </h:dataTable>
                                <!-- <textarea class="form-control" placeholder="Aqui vão ser carregadas as disciplinas" rows="5"></textarea> -->
                            </div>
                        </div>
                    </h:form>
                </div>
            </div>


        </div>

        <!-- JavaScripts e Complementos -->
        <script src="../../js/jquery.js"></script>
        <script src="../../js/bootstrap.min.js"></script>
        <script src="../../js/bootstrap-progressbar.min.js"></script>

    </h:body>
</html>

And this is what's rendered:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE HTML>
<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="Fernando Paladin">
    <title>Locus - Disciplinas </title>

    <link href="../../css/bootstrap.css" rel="stylesheet">
    <link href="../../css/custom.css" rel="stylesheet">
</h:head>
<h:body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 center">
                <h:form role="form">
                    <div class="form-group">
                        <div class="col-md-10">
                            <h:inputText id="disciplina" class="form-control" value="#{disciplinaMBean.nome}" />
                            <!--  <input type="text" size="20" class="form-control" id="disciplina" placeholder="Pesquise ou crie uma nova disciplina" 
                            required>  -->
                        </div>
                        <div class="col-md-2">
                            <h:commandButton class="btn btn-md btn-success" action="#{disciplinaMBean.cadastrar}">
                                Adicionar
                            </h:commandButton>
                            <!--  <a type="button" href="#" class="btn btn-md btn-success">Adicionar</a> -->
                        </div>
                    </div>

                    <div class="col-md-10">
                        <div class="form-group">
                            <br/>
                            <h:dataTable value="#{disciplinaMBean.listaDisciplinas}" var="disciplina">
                                <h:column>
                                    <f:facet name="header">Nome</f:facet>
                                    <h:outputText value="#{disciplinaMBean.nome}" />
                                </h:column>
                            </h:dataTable>
                            <!-- <textarea class="form-control" placeholder="Aqui vão ser carregadas as disciplinas" rows="5"></textarea> -->
                        </div>
                    </div>
                </h:form>
            </div>
        </div>
    </div>

    <!-- JavaScripts e Complementos -->
    <script src="../../js/jquery.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-progressbar.min.js"></script>

</h:body>

As you can see, my original file is the rendered file. So, I can't click in any field, can't type text in the input, ultimately, I can do nothing.

How is this caused and how can I solve it?

BalusC BalusC · Accepted Answer · 2013-09-22T19:13:04

You forgot to invoke JSF's FacesServlet. It's the one responsible for that job. Look closer at the URL you typed in browser's address bar and make sure that it matches the <url-pattern> of the FacesServlet as you've definied in webapp's web.xml. Or, just change the <url-pattern> to *.xhtml (or *.html, if that's your physical file extension and you intend to run all .html URLs through JSF), so that you never need to fiddle with virtual URLs.

Please note that this problem has absolutely nothing to do with HTML5 as you originally complained.

JSF doesn't generate HTML output, instead plain JSF source code is visible in HTML output

1 Answers

See also: