English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Spring MVC Tiles امثلة

أدوات عبر الإنترنت

يقدم Spring MVC دعمًا للتكامل مع إطار apache tile. لذلك، يمكننا الاستفادة من دعم Spring Tile بسهولة لإدارة تصميم واجهة المستخدم الخاصة ببرامج Spring MVC.

الإعادة الاستخدام: : يمكننا تكرار استخدام عنصر واحد في عدة صفحات، مثل عناصر رأس الصفحة وأقدام الصفحة.

التحكم المركزي في العناصر: يمكننا التحكم في تصميم الصفحة من خلال صفحة النمذجة الواحدة

سهولة تغيير التخطيط: : باستخدام صفحة النمذجة الواحدة، يمكننا تغيير تصميم الصفحة في أي وقت. لذلك، يمكن لموقعك الاستفادة بسهولة من التكنولوجيا الجديدة مثل الدليل، jQuery وما إلى ذلك.

Spring MVC Tiles امثلة

1-أضف بنود الاعتماد إلى ملف pom.xml.

pom.xml

 <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.1.RELEASE</version>
</dependency>
  <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>  
    <groupId>javax.servlet</groupId>  
    <artifactId>servlet-api</artifactId>  
    <version>3.0-alpha-1</version>  
</dependency>
    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-jasper -->
<dependency>
    <groupId>org.apache.tomcat</groupId>
    <artifactId>tomcat-jasper</artifactId>
    <version>9.0.12</version>
</dependency>
 <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.5</version>
</dependency>
    
    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.5</version>
</dependency>
    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.5</version>
</dependency>
   <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-el -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-el</artifactId>
    <version>3.0.5</version>
</dependency>

2- إنشاء فئة الحشوة

Contact.java

package com.w3codebox.form;
public class Contact {
    private String firstname;
    private String lastname;
    private String email;
    private String telephone;
    
    public String getEmail() {
        return email;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    public String getFirstname() {
        return firstname;
    }
    public String getLastname() {
        return lastname;
    }
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
    
}

3- إنشاء فئة التحكم

HelloWorldController.java

package com.w3codebox.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloWorldController {
    @RequestMapping("/hello")
    public String helloWorld(Model m) {
        String message = "Hello World, Spring MVC @ w3codebox";
        m.addAttribute("message", message);
        return "hello"; 
    }
}

ContactController.java

package com.w3codebox.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.SessionAttributes;
import com.w3codebox.form.Contact;
@Controller


    
    public String addContact(@ModelAttribute(\
        //كتابة الكود هنا لإضافة الاتصال
        return \
    }
    
    @RequestMapping("/contact")
    public String showContacts(Model m) {
        m.addAttribute("command", new Contact());
        return "contact";
    }
}

4、في ملف 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" 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">
  <display-name>SpringTiles</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>spring</servlet-name>
    <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>spring</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
</web-app>

5、في ملف xml تعريف Bean

spring-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd">






/WEB-INF/tiles.xml



6、提供tile.xml文件

tiles.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/jsp/layout.jsp">
        <put-attribute name="title" value="" />
        <put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
    </definition>
    <definition name="contact" extends="base.definition">
        <put-attribute name="title" value="مدير الاتصال" />
        <put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" />
    </definition>
    <definition name="hello" extends="base.definition">
        <put-attribute name="title" value="مرحبًا بكم في Spring MVC" />
        <put-attribute name="body" value="/WEB-INF/jsp/hello.jsp" />
    </definition>
</tiles-definitions>

7- إنشاء صفحة الطلب

index.jsp

<a href="hello.html">مرحبًا بكم في Spring</a> | 
<a href="contact.html">اتصل بنا</a>

8- إنشاء مكونات الرؤية الأخرى

hello.jsp

<html>  
<head>  
    <title>مثال Spring MVC</title>  
</head>  
<body>  
<h1>مرحبًا بكم في Spring MVC</h1>  
    <p>الرسالة هي: ${message}</p>  
</body>  
</html>

contact.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>  
<html>  
<head>  
    <title>Spring Tiles Contact Form</title>  
</head>  
<body>  
<h2>مدير الاتصال</h2>  
<form:form method="post" action="addContact.html">  
  
    <table>  
    <tr>  
        <td><form:label path="firstname">الاسم الأول</form:label></td>  
        <td><form:input path="firstname" /></td>   
    </tr>  
    <tr>  
        <td><form:label path="lastname">اسم العائلة</form:label></td>  
        <td><form:input path="lastname" /></td>  
    </tr>  
    <tr>  
        <td><form:label path="lastname">البريد الإلكتروني</form:label></td>  
        <td><form:input path="email" /></td>  
    </tr>  
    <tr>  
        <td><form:label path="lastname">الهاتف</form:label></td>  
        <td><form:input path="telephone" /></td>  
    </tr>  
    <tr>  
        <td colspan="2">  
            <input type="submit" value="إضافة الاتصال"/>  
        </td>  
    </tr>  
</table>    
      
</form:form>  
</body>  
</html>

header.jsp

<h2>الرأس</h2>  
<hr/>

footer.jsp

<hr/>  
<p>حقوق النشر 2010-2014 oldtoolbag.com.</p>

menu.jsp

<p>القائمة 1</p>  
<p>القائمة 2</p>

layout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>  
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=UTF-8">  
<title><tiles:insertAttribute name="title" ignore="true" /></title>  
</head>  
<body>  
        <div><tiles:insertAttribute name="header" /></div>  
        <div style="float:left;padding:10px;width:15%;"><tiles:insertAttribute name="menu" /></div>  
        <div style="float:left;padding:10px;width:80%;border-left:1px solid pink;">  
        <tiles:insertAttribute name="body" /></div>  
        <div style="clear:both"><tiles:insertAttribute name="footer" /></div>  
  
</body>  
</html>