1

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?

Community
  • 1
  • 1
Paladini
  • 4,522
  • 15
  • 53
  • 96

1 Answers1

2

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.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks BalusC, now this works! I just want know, don't have a way to do this from IDE? (I'm using eclipse). I say that because the answer of this question can help people. A lot of thanks for you! – Paladini Sep 22 '13 at 19:40
  • You're welcome. As to your new question, I don't understand what you're asking there. "Have a way"? Just start the server and open the page/bookmark in your favourite webbrowser. – BalusC Sep 22 '13 at 19:40
  • Sorry. When I configure my project in classroom, my teacher taught how to configure this by a graphical way, without need to go in web.xml and edit this file. I wanted mean, a graphical way to configure web.xml. – Paladini Sep 22 '13 at 19:45
  • Just doubleclick `web.xml` file and edit source code. No need to visually edit code. Just edit real code by text, otherwise you learn nothing. – BalusC Sep 22 '13 at 19:47
  • Oh, you understood wrong :( Yes, you're right, forget what I try to mean. Damn language barrier! hahah. Bye, and thanks. – Paladini Sep 22 '13 at 19:49