how to add full screen feature to the JSF application

StackOverflow https://stackoverflow.com/questions/20842884

Pregunta

I searched similar topic to add full screen option in my jsf application. I tried to add into "https://stackoverflow.com/a/11820717/1194553" and "https://stackoverflow.com/a/7525760/1194553" solutions into my jsp file of jsf applicaton such as;

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Making Full Screen</title>
<script type="text/javascript">
    function cancelFullScreen(el) {
        var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
        if (requestMethod) { // cancel full screen.
            requestMethod.call(el);
        } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function requestFullScreen(el) {
        // Supports most browsers and their versions.
        var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

        if (requestMethod) { // Native full screen.
            requestMethod.call(el);
        } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
        return false;
    }
</script>
</head>
<body>
    <f:view>    
        <h:form id="mainForm">
            <div>   
                <h:commandButton id="topBtn" styleClass="topMenuItem topMenuItem" image="images/common/fullScrUfa.png" onmouseover="this.src='images/common/fullScrFa.png'" onmouseout="this.src='images/common/fullScrUfa.png'" onclick="requestFullScreen(document.body);"></h:commandButton>
            </div>
        </h:form>
    </f:view>
</body>
</html>

When I run the project and click the button of which id is "topBtn", I expect to make the browser-view showed in full screen. I tried on chrome vs.27.0.1453.116 and explorer 10.

However, when I push the button, the view is displayed in full screen mode and immediately returns back to normal mode without waiting any click or something. Although, this action is occured in less than one second, I can realized when I look carefully.

How can I solve this problem?

¿Fue útil?

Solución

You need to add return false; like this :

onclick="requestFullScreen(document.body);return false;"

to stop propagation of the click, and so stop the form submit.

Not related :

You don't need a <h:commandButton /> if you are not using any JSF functionnality. A simple <input type="button" onclick="..." />. This is only a matter of slighly better performance. You can use plain HTML in JSF. This is about the same for <h:panelGroup />, I don't abuse them, when not necessary I'll use <span /> or <div />

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top