Код IT
← Каталог

Первая программа на JavaServer Faces — Страница представления (XHTML)

Фрагмент из «Первая программа на JavaServer Faces»: Страница представления (XHTML).

XML / XAML main.xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Первая программа на JSF</title>
    <h:outputStylesheet library="css" name="style.css"/>
</h:head>

<h:body>
    <div class="container">
        <h:form id="mainForm">
            
            <h1>Моя первая программа на JSF</h1>
            
            <!-- Блок с приветствием -->
            <div class="greeting">
                <h:panelGroup rendered="#{not empty counterBean.name}">
                    <p style="color: green;">#{counterBean.message}</p>
                </h:panelGroup>
                
                <h:inputText value="#{counterBean.name}" 
                             placeholder="Введите ваше имя"
                             required="true"
                             requiredMessage="Поле имя обязательно для заполнения">
                    <f:ajax event="blur" listener="#{counterBean.validateName}" />
                </h:inputText>
                
                <h:message for="mainForm:name" style="color: red;" />
            </div>

            <!-- Блок со счетчиком -->
            <div class="counter">
                <h2>Счетчик: #{counterBean.count}</h2>
                
                <div class="buttons">
                    <h:commandButton value="-" action="#{counterBean.decrement}" />
                    <h:commandButton value="Сброс" action="#{counterBean.reset}" />
                    <h:commandButton value="+" action="#{counterBean.increment}" />
                </div>
            </div>

            <!-- Сообщения о событиях -->
            <h:messages globalOnly="false" layout="list" />

        </h:form>
    </div>
</h:body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Первая программа на JSF</title>
    <h:outputStylesheet library="css" name="style.css"/>
</h:head>

<h:body>
    <div class="container">
        <h:form id="mainForm">
            
            <h1>Моя первая программа на JSF</h1>
            
            <!-- Блок с приветствием -->
            <div class="greeting">
                <h:panelGroup rendered="#{not empty counterBean.name}">
                    <p style="color: green;">#{counterBean.message}</p>
                </h:panelGroup>
                
                <h:inputText value="#{counterBean.name}" 
                             placeholder="Введите ваше имя"
                             required="true"
                             requiredMessage="Поле имя обязательно для заполнения">
                    <f:ajax event="blur" listener="#{counterBean.validateName}" />
                </h:inputText>
                
                <h:message for="mainForm:name" style="color: red;" />
            </div>

            <!-- Блок со счетчиком -->
            <div class="counter">
                <h2>Счетчик: #{counterBean.count}</h2>
                
                <div class="buttons">
                    <h:commandButton value="-" action="#{counterBean.decrement}" />
                    <h:commandButton value="Сброс" action="#{counterBean.reset}" />
                    <h:commandButton value="+" action="#{counterBean.increment}" />
                </div>
            </div>

            <!-- Сообщения о событиях -->
            <h:messages globalOnly="false" layout="list" />

        </h:form>
    </div>
</h:body>
</html>