JSF outputScript

El componente h:outputScript en JavaServer Faces (JSF) se usa para incluir código JavaScript o referencias a archivos JavaScript externos en una página web. Se puede utilizar para controlar la colocación y ejecución de código JavaScript en la página web y se puede configurar con atributos específicos para modificar su comportamiento.

Cómo usar JSF outputScript

Para usar el componente h:outputScript en JSF, debe agregar el componente a la sección head de una página web. Aquí hay un ejemplo de cómo usar el componente h:outputScript para incluir un archivo JavaScript externo:

<h:head>
	<h:outputScript library="js" name="script.js" target="head" />
</h:head>

En este código de ejemplo, el atributo library especifica la ubicación del archivo JavaScript, el atributo name especifica el nombre del archivo y el atributo target especifica la ubicación donde se debe colocar el código JavaScript en el documento HTML.

El código HTML generado es el siguiente:

<head id="j_idt2">
	<script type="text/javascript" src="/jsf-output-script/javax.faces.resource/script.js.jsf?ln=js"></script>
</head>

El archivo js debe estar ubicado en la carpeta de recursos javascript como se muestra en la siguiente imagen:

JSF outputScript

JSF outputScript nos permite especificar el área de la página en donde se renderizará el elemento <script>. Para hacer esto utilizamos el atributo target. Para target = “head” el script será ubicado dentro del head de la página. Si se especifica target = “body” el script se ubicará en la parte final del body de la página, y si no se asigna ningún valor el script se colocará en la misma ubicación de h:outputScript.

El siguiente ejemplo generará el elemento <script> en el head de la página:

<h:head>
	<h:outputScript library="js" name="script.js" target="head" />
</h:head>

El siguiente ejemplo generará el elemento <script> en el body de la página:

<h:head>
	<h:outputScript library="js" name="script.js" target="body" />
</h:head>

Un ejemplo práctico

A continuación se muestra un ejemplo práctico con una aplicación muy sencilla de h:outputScript con una página que muestra un mensaje cuando el usuario hace click en un h:commandButton.

El archivo script.js contiene la siguiente función:

function showMessage(){
	alert('Hello, world!');
}

La página se encuentra incluída en un template, por lo que la etiqueta h:outputScript se ubica dentro del h:head incluído en archivo del template (master.xhtml):

<!DOCTYPE html>
<html lang="en"
		xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title>
			<ui:insert name="title">JSF OutputScript Example</ui:insert>
		</title>
		<h:outputStylesheet library="css" name="styles.css" />
		<h:outputScript library="js" name="script.js" target="head" />
    </h:head>
    <h:body>
    	<div id="page-container">
        	<ui:insert name="content" />
        </div>
    </h:body>
    <ui:include src="../includes/footer.xhtml"/>
</html>

Por último, en el archivo inicio.xhtml, que engloba el contenido de la página se ubica el componente h:commandButton, que es el encargado de invocar a la función showMessage() desde el evento onlick:

<ui:composition template="../templates/master.xhtml"
		xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
	<ui:define name="content">
		<div style="border-bottom: 1px solid #CCC;padding:10px">
			<h:panelGrid columns="1" columnClasses="col-1" style="width:100%;">
				<h:outputText value="JSF OutputScript Example" />
			</h:panelGrid>
		</div>
		<div id="container">
			<h:form id="customerForm">
				<h:panelGrid columns="1" style="width:600px;margin-left:calc(50% - 300px);margin-bottom:25px;">
					<h:commandButton onclick="showMessage();" value="Mostrar Mensaje" />
				</h:panelGrid>
			</h:form>
		</div>
	</ui:define>
</ui:composition>

Al ejecutar la aplicación y hacer click sobre el botón se visualiza el alert de JavaScript, con lo que verificamos que el recurso fue localizado correctamente.

Conclusión

El componente h:outputScript es una herramienta esencial para los desarrolladores web que necesitan incluir código JavaScript o referencias en sus aplicaciones web basadas en JSF. Proporciona flexibilidad y control sobre la colocación y ejecución del código JavaScript y se puede utilizar junto con otros componentes JSF para crear interfaces de usuario dinámicas y receptivas.

Existe un mecanismo similar para referenciar a hojas de estilo CSS que necesitemos usar en nuestra aplicación, podrás verlo en este artículo.


Te puede interesar:

Facelets y uso de templates en JSF

Facelets es un lenguaje de declaración de vistas para JavaServer Faces, que permite crear vistas usando templates HTML.

Seguir leyendo →

Arquitectura y Ciclo de Vida JSF

Cómo funciona el ciclo de vida de una aplicación JSF. En el artículo relacionado se cubre el manejo de eventos.

Seguir leyendo →