دليل JSF للمبتدئين

JSF

مرحبًا بك في دليل JSF للمبتدئين. تقنية Java Server Faces (JSF) هي إطار أمامي يسهل إنشاء مكونات واجهة المستخدم عن طريق إعادة استخدام مكونات واجهة المستخدم. تم تصميم JSF بناءً على نمط Model View Controller (MVC) الذي يفصل بين العرض والتحكم ومنطق الأعمال.

JSF Tutorial for Beginners

في نمط Model View Controller، يحتوي النموذج على منطق الأعمال اللازم لإنجاز السيناريو التجاري، ويُمثل العرض طبقة العرض مثل صفحات JSP أو JSF، ويُمثل المتحكم عملية التعامل مع التحكم في النموذج/العرض اعتمادًا على العملية المطلوبة. يوفر JSF العناصر التالية لإنشاء واجهة مستخدم:

عناصر إدخال أساسية قياسية مثل الحقول والأزرار وما إلى ذلك التي تشكل مجموعة من مكونات واجهة المستخدم الأساسية.
قدرة JSF على التقديم اعتمادًا على مواصفات العميل
مكتبة النواة
توسيع مكونات واجهة المستخدم المتاحة لإضافة المزيد من المكونات واستخدامها لتحقيق متطلبات العميل.

دليل تعليمي للمبتدئين في 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. الآن تحقق مما إذا كان الجافا مثبتة بنجاح على الجهاز عن طريق كتابة javac في نافذة الأوامر والتي يجب أن تعرض جميع الخيارات المتاحة أو “java -version” الذي يجب أن يعرض إصدار الجافا المثبت على الجهاز. لمزيد من التفاصيل، يمكنك الاطلاع على المقالة التالية: كيفية تثبيت الجافا على ويندوز

تثبيت بيئة التطوير المتكاملة (IDE)

بعض بيئات التطوير المتكاملة الشهيرة المتاحة تشمل إكليبس (Eclipse)، نت بينز (NetBeans) و إنتلي جي (IntelliJ IDEA). قم بتنزيل إكليبس من الرابط التالي https://www.eclipse.org/downloads/ وقم بتشغيل ملف النص الثنائي الذي تم تنزيله وقم بتثبيت إكليبس على جهازك. بالنسبة لـ NetBeans، قم بتنزيل بيئة تطوير NetBeans من https://netbeans.org/downloads/ وأكمل عملية التثبيت.

تثبيت Apache Tomcat

قم بتنزيل تومكات من الرابط التالي https://tomcat.apache.org/. قم بتشغيل ملف النص الثنائي الذي تم تنزيله وقم بتعيين المتغير CATALINA_HOME ليشير إلى مسار التثبيت. الآن قم بتشغيل الخادم وانتقل إلى https://localhost:8080 في متصفحك المفضل لعرض صفحة تومكات الافتراضية إذا تم التثبيت بنجاح. إعدادنا الأساسي جاهز، دعونا ننتقل إلى إنشاء أول تطبيق JSF.

دورة تعليم JSF للمبتدئين – تطبيق Hello World

لنقم الآن بإنشاء تطبيق ويب JSF بسيط للعالم. قم بتنزيل الجرار الآتية التي تعد ضرورية لتنفيذ الشيفرة المتعلقة بـ JSF. يمكن تحميلها من مستودع maven central 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 هي شريط مُدار. تشير الفئة @SessionScoped إلى أن الشريط حيّ حتى تكون HttpSession صالحة. هنا يتم تعريف سلسلة s1 وتهيئتها بقيمة “مرحبًا بالعالم” وتحديد الأساليب الجلب والتعيين لاسترجاع قيمة السلسلة s1. يمكننا أيضًا تقديم اسم الشريط مثل @ManagedBean(name="helloWorld"). إذا لم يتم تقديم اسم ، يتم استنتاجه وفقًا لمعايير تسمية جافا. الممارسة الجيدة هي توفير اسم الشريط دائمًا.

دليل JSF للمبتدئين – صفحة العرض

الآن قم بإنشاء صفحة JSF تُسمى helloWorld.xhtml تتفاعل مع الشريط HelloWorld وتسترجع القيمة من خلال الأسلوب المستلم وتطبع نفس القيمة في صفحة الاستجابة. 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>

هنا نقوم بتسمية الشريط تليها المتغير النصي المعلن في الشريط كـ “helloWorld.s1” الذي يسترد القيمة “مرحبًا بالعالم”.

تكوين وصف النشر

الجزء النهائي هو تكوين فئة تحكم 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