מדריך למתחילים של JSF

ברוך הבא למדריך של JSF למתחילים. טכנולוגיית Java Server Faces (JSF) היא סביבת עבודה בצד הלקוח שמקלה על יצירת רכיבי ממשק משתמש על ידי השקעתם מחדש. JSF מתבססת על דגם ה-Model View Controller (MVC) המפריד בין התצוגה, הבקרה ולוגיקת העסקים.

מדריך JSF למתחילים

בדגם ה-Model View Controller, המודל מכיל את לוגיקת העסקים הדרושה לביצוע תרחיש עסקי, התצוגה מייצגת את שכבת ההצגה כמו דפי ה-JSP או JSF, והבקרה מייצגת את התהליך של מסירת השלטון למודל/תצוגה תלוי בפעולה המבוקשת. JSF מספקת את הרכיבים הבאים ליצירת ממשק משתמש:

  • רכיבי קלט בסיסיים כמו שדות, כפתורים וכו' המהווים את סט הרכיבים הבסיסיים של הממשק המשתמש.
  • יכולת עיבוד של JSF בהתאם למפרטי הלקוח
  • ספריית ליבה
  • הרחבת רכיבי ה-UI הזמינים להוספת רכיבים נוספים ושימוש בהם למימוש דרישות הלקוח.

מדריך JSF למתחילים – הגדרת הסביבה

כאן נעבור דרך כל השלבים הדרושים להגדיר את המחשב שלך על מנת ליצור את האפליקציה הראשונה שלך ב-JSF.

התקנת JDK

הורד את ה-JDK מאתר Oracle הבא: https://www.oracle.com/technetwork/java/javase/downloads/index.html הגדר את משתנה הסביבה JAVA_HOME כך שיצביע לנתיב ה-bin של ה-JDK שהותקן. לדוגמה, "C:\Program Files\Java\jdk1.7.0_60". יש להוסיף גם את JAVA_HOME\bin למשתנה הסביבה PATH כדי שהמערכת תוכל לאתר את הקבצים הבינאריים של Java. בדוק כעת האם Java מותקנת בהצלחה על המחשב על ידי הקלדת javac בחלון הפקודה, שצריך להציג את כל האפשרויות הזמינות, או "java -version" שצריך להציג את גרסת Java המותקנת על המחשב. למידע נוסף, ניתן לעיין בפוסט הבא: איך להתקין את Java ב-Windows

התקנת IDE

חלק מה- IDEs הפופולריים שזמינים כוללים Eclipse, NetBeans ו- IntelliJ IDEA. הורד את Eclipse מהקישור הבא https://www.eclipse.org/downloads/ והרץ את קובץ הבינארי שהורדת והתקן את Eclipse על המכונה שלך. עבור NetBeans, הורד את NetBeans IDE מ- https://netbeans.org/downloads/ והשלם את ההתקנה.

התקנת Apache Tomcat

הורד את Tomcat מהקישור הבא https://tomcat.apache.org/. הרץ את קובץ הבינארי שהורדת והגדר את המשתנה CATALINA_HOME להצבה בנתיב ההתקנה. עכשיו התחל את השרת וגש ל־ https://localhost:8080 בדפדפן המועדף עליך שיציג את דף התחלתי של Tomcat אם התקנת בהצלחה. ההתקנה הבסיסית שלנו מוכנה, בואו נמשיך ליצירת היישום הראשון שלנו ב־JSF.

מדריך JSF עבור מתחילים – יישום Hello World

בואו ניצור כעת יישום אינטרנטי פשוט של JSF Hello World. הורידו את ה־JARs הבאים שקריטיים להרצת קוד קשור ל־JSF. אתה יכול להוריד אותם ממחסן המרכזי של Maven https://search.maven.org/. דרך נוחה יותר לניהול תלותים היא על ידי שימוש במערכת בנייה כמו Maven. בכל הדוגמאות שלנו, נשתמש ב־Maven. נא הפנה ל־pom.xml לצורך תלותים. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.journaldev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

מדריך JSF עבור מתחילים – צור מנוהל בון

A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as

package com.journaldev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

האנוטציה @ManagedBean מציינת כי המחלקה HelloWorld היא managed bean. ה-bean @SessionScoped מציינת כי ה-bean חי עד שה-HttpSession תקפה. כאן מסומן מחרוזת s1 ומאתחלת אותה בערך "Hello World", והשיטות getter ו-setter מוגדרות כדי לקבל את ערך המחרוזת s1. אפשר גם לספק שם ל-bean כמו @ManagedBean(name="helloWorld"). אם לא נספק שם, הוא יופקד על פי סטנדרטי כתיבת הקוד ב-Java. הכלל הטוב ביותר הוא לספק תמיד את שם ה-bean.

מדריך JSF למתחילים – עמוד צפה

כעת יש ליצור עמוד JSF בשם helloWorld.xhtml המתקשר עם ה-bean HelloWorld ומחזיר את הערך דרך שיטת ה-getter ומדפיס אותו בעמוד התגובה. helloWorld.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

כאן אנו קוראים לשם ה-bean ואחריו למשתנה המחרוזת המוגדר ב-bean כמו "helloWorld.s1" המחזיר את הערך "Hello World".

תצורת מזהה התקן

החלק הסופי הוא להגדיר את מחלקת הבקרת JSF כך שתתמוך בבקשות הלקוח. הסרוולט של בקרת JSF הוא FacesServlet, התצורה הסופית של web.xml ניתנת למטה. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</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>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

מבנה הפרויקט של JSF Hello World ייראה כעת כך ב-Eclipse. ב-web.xml, אנו מציינים את רשומת קובץ התצורה של faces, מיפוי הסרוולט ל-faces, זמן הפגת עצם וקובץ הברכות שמתבצע טעינתו בהתחלת היישום. לאחר השינויים אלו, נפעיל את היישום שידפיס את הפלט הבא בדפדפן. זהו כל המדר של JSF למתחילים. נבחן את מרכיבי דף JSF שונים בפוסטים הבאים. בינתיים, תוכל להוריד את הפרויקט מהקישור למטה ולשחק איתו כדי ללמוד נוסף.

הורד פרויקט JSF Hello World

Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners