<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<h:head>
<title>ApplicationScope sample</title>
<style>
.t{
background-color: red;
color: white;
}
.c{
background-color: blue;
color: white;
}
.button {
background: #A8A8A8;
background-image: -webkit-linear-gradient(top, #A8A8A8, #1C1C1C);
background-image: -moz-linear-gradient(top, #A8A8A8, #1C1C1C);
background-image: -ms-linear-gradient(top, #A8A8A8, #1C1C1C);
background-image: -o-linear-gradient(top, #A8A8A8, #1C1C1C);
background-image: linear-gradient(to bottom, #A8A8A8, #1C1C1C);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #FFFFFF;
font-family: Open Sans;
font-size: 36px;
font-weight: 100;
padding: 12px;
box-shadow: 1px 1px 20px 0px #000000;
-webkit-box-shadow: 1px 1px 20px 0px #000000;
-moz-box-shadow: 1px 1px 20px 0px #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button:hover {
background: #FFAB3D;
background-image: -webkit-linear-gradient(top, #FFAB3D, #EB6213);
background-image: -moz-linear-gradient(top, #FFAB3D, #EB6213);
background-image: -ms-linear-gradient(top, #FFAB3D, #EB6213);
background-image: -o-linear-gradient(top, #FFAB3D, #EB6213);
background-image: linear-gradient(to bottom, #FFAB3D, #EB6213);
text-decoration: none;
}
.center{
font-size:36pt;
text-align: center;
}
</style>
</h:head>
<h:body>
<center>
<h:form>
<h:panelGrid columns="2" columnClasses="center,center">
<f:facet name="caption">
<h:outputText value="Presidental Election" styleClass="center"/>
</f:facet>
<h:panelGroup>
<div class="t">TRUMP</div><h:outputText value="#{voteApplicationBean.trump}"/>
</h:panelGroup>
<h:panelGroup>
<div class="c">CLINTON</div><h:outputText value="#{voteApplicationBean.clinton}"/>
</h:panelGroup>
<h:commandButton value="Vote Trump" actionListener="#{voteApplicationBean.voteTrump()}" styleClass="button"/>
<h:commandButton value="Vote Clinton" actionListener="#{voteApplicationBean.voteClinton()}" styleClass="button"/>
</h:panelGrid>
</h:form>
</center>
</h:body>
</html>