JSF a closable div

In this sample I’ve achieved one of demanded tasks at work regarding a closable mobile app pane, when the site is visited on mobile devices This is a good example also to study how to pass and set values in the backbean. Because we know what JSF is more of action based although there are events as well

SessionInformation

@Component("sessionInfo")
@Scope("session")
public class SessionInformation {

	@Setter
	@Getter
	public String mobileFramePane;
}

BackBean

@Component("templateController")
@Data
@Scope("session")
@Lazy
@NoArgsConstructor
public class TemplateControllerImpl implements TemplateController {

	@Autowired
	private SessionInformation sessionInformation;

	public String getCurrentYear() {
		return String.valueOf(CalendarUtil.getCurrentYear());
	}


	public void closeMobilePane(){
		sessionInformation.setMobileFramePane("closed");
	}


}

Xhtml

<h:form id="mobilePaneForm">
        <h:inputHidden id="mobilePaneVisibility" value="#{templateController.sessionInformation.mobileFramePane}" />
        <div id="androidDeviceContent" style="display: none;"
             class="androidDevice close-action">
            <img class="android-logo" src="/images/logo.png"
                 style="float: left;"/>

            <div class="mobileAppContent">
                #{msg.template_macfit_title} <br/> #{msg.mobile_app_android_1}
            </div>

            <div class="mobileAppLink">
                <a
                        href="intent://macfit.adesso.com/#Intent;package=com.adesso.macfit;scheme=http;end;">#{msg.mobile_app_run_on_app}</a>
            </div>
            <h:commandButton styleClass="close-icon" onclick="closeMobilePane()" action="#{templateController.closeMobilePane}" />
        </div>
        <div id="iosDeviceContent" style="display: none;" class="iosDevice close-action">
            <img class="android-logo" src="/images/logo.png"
                 style="float: left;"/>

            <div class="mobileAppContent">
                #{msg.template_macfit_title} <br/> #{msg.mobile_app_ios_1}
            </div>

            <div class="mobileAppLink">
                <a href="#" onclick="iosDeviceLauncher()">#{msg.mobile_app_run_on_app}</a>
            </div>
            <h:commandButton styleClass="close-icon"  onclick="closeMobilePane()" action="#{templateController.closeMobilePane}"/>
        </div>
    </h:form>

Before

After