<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title><h:outputText value="#{msgs.title}"/></title>
            <link href="styles.css" rel="stylesheet" type="text/css"/>
            
            
        </head>
        <body>
            <div class="container">
                <div class="banner">
                    <h:outputText value="#{msgs.headerEx6}"
                                  styleClass="bannerText"/>
                </div>
                <hr/>
                
                <h:panelGrid columns="2" styleClass="heading">
                    <a4j:status id="status">
                        <f:facet name="start">
                            <h:graphicImage value="images/indicator_radar.gif"/>
                        </f:facet>
                    </a4j:status>
                    
                    <h:outputText value="#{msgs.informationPrompt}"
                                  styleClass="heading"  />
                </h:panelGrid>
                
                <h:form id="form">
                    <h:panelGrid columns="2">
                        <h:outputLabel for="zip"
                                       value="#{msgs.ex2Zip}"/>
                        <h:panelGroup>
                            <h:inputText id="zip"
                                         size="5"
                                         value="#{bb.zip}"
                                         required="true" maxlength="5">
                                
                                
                                <f:validateLength minimum="5"
                                                  maximum="5"/>
                                
                                <f:validator
                                    validatorId="ZipcodeValidator2"/>
                                
                                <a4j:support event="onblur"
                                             immediate="true"
                                             actionListener="#{bb.validateZip}"
                                             reRender="city, state, errorMessage"/>
                                
                            </h:inputText>
                            
                            <h:outputText id="errorMessage"
                                          value="#{bb.errorMessage}"
                                          style="color: red; font-style: italic;"/>
                        </h:panelGroup>
                        
                        <h:outputLabel for="city"
                                       value="#{msgs.ex2City}"/>
                        <h:inputText id="city" binding="#{bb.cityInput}"
                                     size="25"
                                     value="#{bb.city}"/>
                        
                        <h:outputLabel for="state"
                                       value="#{msgs.ex2Country}"/>
                        <h:inputText id="state" binding="#{bb.stateInput}"
                                     size="25"
                                     value="#{bb.state}"/>
                        
                        <h:commandButton id="submit"
                                         value="#{msgs.submitButtonText}"
                                         action="showBackingBean"/>
                        <h:commandButton value="#{msgs.button1Ex2}"
                                         action="nazad" immediate="true"/> 
                    </h:panelGrid>
                    
                    <h:messages layout="list" style="color: red; font-style: italic;"/>
                </h:form>
                <br/>
                <div class="footer">&copy;2008 Šerić Ivan</div>            
            </div>
        </body>
    </html>
</f:view>
