JSF 2-Körper- und Kopfbeispiel

Wenn die Webentwickler versuchen, eine Webanwendung mit a zu entwickeln JSF 2keine Notwendigkeit für die Verwendung von HTML-Tags wie z Und zur Bestimmung des Browserkörpers bzw. -kopfes. JSF 2 stellt beide als separate Komponenten in seinem Komponentenkit bereit. Die -Komponente rendert das HTML-Body-Element. Dies ermöglicht JSF-Entwicklern die flexiblere Implementierung von Komponenten, die von Ressourcen wie Bildern, Skripten und kaskadierenden Stylesheets abhängig sind, indem sie dem Framework mitteilen, wo diese Ressourcen zum Zeitpunkt der Anforderung gerendert werden sollen .

Lesen Sie auch:

  • JSF 2-Tutorials
  • JSF-Tutorials
  • Einführung in JSF

Das Konzept der Ressourcenverlagerung wird als neues Feature für JSF 2 Mojarra bereitgestellt. Darin die Kopf Und Körper Komponenten (Tags) sind hinsichtlich ihrer Attribute ziemlich einfach, aber ihr Hauptzweck besteht darin, zu wissen, wo verschobene Ressourcen ausgegeben werden sollen. Seit JSF 2.2 die Komponente (Tag) bietet keine Ziel Attribut wie um die Position von Stilen zu parametrisieren. Der Standardspeicherort für Ihre mit definierten Stile wird im eingeschlossen Falls es definiert ist, ist der Stil sonst nicht mehr zugänglich.

1. Die Aussicht

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>JavaBeat JSF2 Body & Head Components</title>
</h:head>
<h:body>
<h:form>
<h1>
<h:outputText value="JavaBeat JSF 2.2 Examples" />
</h1>
<h2>
<h:outputText value="Body & Head Example" />
</h2>
<h:outputStylesheet library="css" name="style.css"/>
<h:outputScript library="js" name="javascript.js" target="body"/>
<h:outputText value="Styled Text Using The Concept of Resource Re-location"
styleClass="java-beat-larger-text"/>
<br/>
<h:outputText value="Body & Head Should Be Defined To Make Such That Concept Applied"
styleClass="java-beat-larger-text"/>
</h:form>
</h:body>
</html>

2. Der verwendete Stil

style.css

.java-beat-larger-text {
font-size: xx-large;
font-family: fantasy;
font-weight: bolder;
}

3. Das verwendete JavaScript

javascript.js

function sayHello(){
alert("Hello JavaBeat !");
}

4. Body-Tag und Head-Tag im generierten HTML

Wenn Körper und Kopf beansprucht werden

<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>JavaBeat JSF2 Body & Head Components</title><link type="text/css" rel="stylesheet"
href="/JavaBeat-JSF-Installation/javax.faces.resource/style.css.xhtml?ln=css"></head>
<body>
<form id="j_idt5" name="j_idt5" method="post"
action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5">

<h1>JavaBeat JSF 2.2 Examples
</h1>
<h2>Body & Head Example
</h2><span  >Styled Text Using The Concept of Resource Re-location</span>
<br><span  >Body & Head Should Be Defined To Make Such That Concept Applied</span>
<br><a href="" onclick="sayHello();">Say Hello Using Resource Re-Location</a>
</form><script type="text/javascript" src="/JavaBeat-JSF-Installation/javax.faces.resource/javascript.js.xhtml?ln=js"></script>
</body></html>

Wenn Körper und Kopf nicht genutzt werden

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaBeat JSF2 Body & Head Components</title>
</head>
<body><form id="j_idt2" name="j_idt2" method="post"
action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt2" value="j_idt2">
<h1>JavaBeat JSF 2.2 Examples
</h1>
<h2>Body & Head Example
</h2><span  >Styled Text Using The Concept of Resource Re-location</span>
<br><span  >Body & Head Should Be Defined To Make Such That Concept Applied</span>
<br><a href="" onclick="sayHello();">Say Hello Using Resource Re-Location</a>
</form>
</body></html>
  • Die -Komponente (Tag) stellt einen Standard bereit Ziel Wert; es ist Kopf. Der definierte Stil wurde also im Inneren platziert beim Rendern des HTML.
  • Die -Komponente (Tag) stellt keinen Standard bereit Ziel Wert, für den der Entwickler in der Lage ist, einen bereitzustellen Wertausdruck oder ein Inline-Wert zur Bestimmung der Ziel des JavaScript. Der bereitgestellte Wert ist ein Inline-Wert und hat den Wert Körpersodass der JavaScript-Code von eingeschlossen wird Tag (Komponente).
  • Wenn der Entwickler und nicht bereitstellt, werden weder JavaScript noch das Stylesheet im generierten HTML berücksichtigt, wie im zweiten Beispiel deutlich wird (Wenn Body und Head nicht verwendet werden). ) und folglich wurden das JavaScript und das Stylesheet nie ausgeführt.
  • Wenn der Entwickler versucht, das zu entfernen Allein, wenn ihn verbraucht, wird der Stil nicht berücksichtigt und er wird nicht von den Komponenten verwendet, auf die er verweist.

5. Der Bereitstellungsdeskriptor (web.xml)

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5" metadata-complete="true">
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>

6. JSF 2 Body & Head-Beispiel

Die folgende Demonstration zeigt die Auswirkungen der Verwendung von Body- und Head-Tags auf die Komponenten.
JSF 2 Körper & Kopf Beispiel 1

  • Das Stylesheet wird geladen, da die Komponente vorhanden ist.
  • Der JavaScript-Code wird geladen, da die Komponente vorhanden ist.
  • Das verweist absichtlich auf den Textkörper, im Gegensatz zum , das dies nicht tut.

Der folgende Schnappschuss zeigt die Auswirkungen der Verwendung von Body- und Head-Tags auf die Komponenten.
JSF 2 Körper & Kopf Beispiel 2

  • Das -Tag wurde weggelassen, sodass das Stylesheet nicht geladen wird und daher nicht von den Komponenten verwendet wird, auf die es verweist.
  • Das -Tag wurde weggelassen, sodass der JavaScript-Code nicht geladen wird und daher nicht von den Komponenten verwendet wird, auf die er verweist.
  • Selbst wenn Sie das HTML-Tag verwenden, erkennt das JSF-Framework dieses HTML-Tag nicht.

(wpdm_file id=16)

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen