<?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>