12. Front end
- 动机
现在我们有了Facade就位，我们可以继续并制定合适的前端。为此，我们将使用Spring MVC框架分离模型，视图和控制器部分。
- 任务
- 新建扩展：cuppytrailfrontend
- 添加需要的库文件
- 更新web.xml和配置Spring的DispatcherServlet
- 创建springmvc-servlet.xml中的配置文件
- 创建一个Helper类 - 处理编码
- 创建控制器部分：StadiumsController.java
- 创建StadiumListing.jsp和StadiumDetails.jsp
- 构建平台并重新启动服务器
- 进一步的步骤/评论
- 新建扩展：cuppytrailfrontend
- 打开Eclipse中的Ant视图，并调用platform的任务extgen。
- 在扩展模板选择yempty
- 输入名称cuppytrailfrontend为扩展名。
- 输入包前缀de.hybris.platform.cuppytrailfrontend.
- Ant脚本现在将创建一个扩展框架，在 YOURPATH/bin/custom/cuppytrailfrontend 但尚未导入到Eclipse中。
- 附加新的扩展 config/localextensions.xml
| config/localextensions.xml |
<extensions> ... <extension name="cuppytrailfrontend" /> </extensions>
- 停止hybris服务，运行 ant clean all（or ant all），然后在打开hybris 服务
- 导入生成扩展到Eclipse环境
- 打开cuppytrailfrontend/extensioninfo.xml and put requires-extension name=cuppytrail.
- 在Eclipse中添加cuppytrail项目引用。
- 停止hybris服务，运行 ant clean all（or ant all），然后在打开hybris 服务
- 添加需要的库文件
- 使用Spring MVC，我们需要以下库添加到 web/webroot/WEB-INF/lib 下
- spring-webmvc-3.1.1.RELEASE.jar
- standard.jar
- jstl-api-1.2.jar
-Standard.jar和JSTL-API-1.2.jar需要为Spring JSTLView工作是我们将在以后的采用。其他jar文件包含Spring MVC的类。
- 更新web.xml和配置Spring的DispatcherServlet
- Spring的DispatcherServlet注册在web.xml和被映射到/springmvc/*
- 以下内容添加到在你的cuppytrailfrontend的项目 web/webroot/WEB-INF/web.xml
| web/webroot/WEB-INF/web.xml |
<servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
- 创建springmvc-servlet.xml中的配置文件
- 默认情况下，Spring的DispatcherServlet会寻找一个配置的servlet-name-servlet.xml文件。正如我们为Spring的DispatcherServlet 命名 'springmvc' 。我们需要配置文件web/webroot/WEB-INF/springmvc-servlet.xml:
| web/webroot/WEB-INF/springmvc-servlet.xml |
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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"> <context:annotation-config /> <context:component-scan base-package="de.hybris.platform.cuppytrailfrontend" /> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> </beans>
- 这个bean的ViewResolver告诉Spring使用使用JSTL标记库作为视图的JSP页面。这样我们以后创建所有JSP页面将进入WEB-INF/jsp目录。实现视图所需要的文件后缀为.jsp。
- 我们还在我们的Web扩展增加了 component-scanning(扫描组件) 并启用了Spring 3 Annotations （注解）。
- 创建一个Helper类 - 处理编码
- 创建src/de/hybris/platform/cuppytrailfrontend/StadiumsNameEncoded.java并添加以下代码保存
| src/de/hybris/platform/cuppytrailfrontend/StadiumsNameEncoded.java |
package de.hybris.platform.cuppytrailfrontend;
import de.hybris.platform.cuppytrail.data.StadiumData;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import org.apache.log4j.Logger;
public class StadiumsNameEncoded
{
private final static Logger LOG = Logger.getLogger(StadiumsNameEncoded.class);
public static String getNameEncoded(final String name)
{
try
{
return URLEncoder.encode(name, "UTF-8");
}
catch (final UnsupportedEncodingException e)
{
LOG.error("Problems while encoding", e);
return "";
}
}
}
- 创建控制器部分：StadiumsController.java
- 创建 web/src/de/hybris/platform/cuppytrailfrontend/controller/StadiumsController.java 并添加以下代码保存
| web/src/de/hybris/platform/cuppytrailfrontend/controller/StadiumsController.java |
package de.hybris.platform.cuppytrailfrontend.controller;
import de.hybris.platform.cuppytrail.data.StadiumData;
import de.hybris.platform.cuppytrail.facades.StadiumFacade;
import de.hybris.platform.cuppytrailfrontend.StadiumsNameEncoded;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class StadiumsController
{
private StadiumFacade stadiumFacade;
@RequestMapping(value = "/stadiums")
public String showStadiums(final Model model)
{
final List<StadiumData> stadiums = stadiumFacade.getStadiums();
model.addAttribute("stadiums", stadiums);
return "StadiumListing";
}
@RequestMapping(value = "/stadiums/{stadiumName}")
public String showStadiumDetails(@PathVariable String stadiumName, final Model model) throws UnsupportedEncodingException
{
stadiumName = URLDecoder.decode(stadiumName, "UTF-8");
final StadiumData stadium = stadiumFacade.getStadium(stadiumName);
stadium.setName(StadiumsNameEncoded.getNameEncoded(stadium.getName()));
model.addAttribute("stadium", stadium);
return "StadiumDetails";
}
@Autowired
public void setFacade(final StadiumFacade facade)
{
this.stadiumFacade = facade;
}
}
我们使用多种注解在这个类文件。该@Controller注解告诉Spring来处理创建的类为Spring控制器组件。该StadiumFacade被@Autowired到这个控制器。Spring会自动寻找一个Spring bean该类实现StadiumFacade接口并注入到控制器。
接下来我们正在使用@RequestMapping注解注解的两种方法。此映射中的路径" /stadiums " 和 " /stadiums/{stadiumName} " 到控制器的方法。
而第一种方法，所述showStadiums方法是直接的，在showStadiumDetails方法也声明一个@PathVariable。参数stadiumName会自动由Spring来解决。We need to make sure we URLDecode the value as you'll later see that the Stadium name needs to be URLencoded in the views.
Both methods return simple Strings which will be picked up by the ViewResolver we declared. A returned String hello would therefore be mapped to WEB-INF/jsp/hello.jsp according to our setup.
To clearly separate the View from the Model part, we populate the passed Model object with the data we would like to retrieve in the view. Either the List of StadiumData or a single StadiumData instance will be part of the model passed to the View.
- 创建StadiumListing.jsp和StadiumDetails.jsp
- 最后，我们添加两个JSP文件到WEB-INF/ jsp目录。当我们需要显示的Stadiums 和 Stadiums 细节的列表，我们创建了一个StadiumListing和StadiumDetails.jsp。这些JSP使用JSTL标记库作为第一行声明。
- 创建 web/webroot/WEB-INF/jsp/StadiumListing.jsp
| web/webroot/WEB-INF/jsp/StadiumListing.jsp |
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<title>Stadium Listing</title>
<body>
<h1>Stadium Listing</h1>
<ul>
<c:forEach var="stadium" items="${stadiums}">
<li><a href="./stadiums/${stadium.name}">${stadium.name}</a></li>
</c:forEach>
</ul>
</body>
</html>
在控制器方法showStadiums，我们通过StadiumData对象列表的视图。使用JSTL核心库的forEach标记，我们现在遍历所有items。
- 创建 web/webroot/WEB-INF/jsp/StadiumDetails.jsp
| web/webroot/WEB-INF/jsp/StadiumDetails.jsp |
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<title>Stadium Details</title>
<body>
<h1>Stadium Details</h1>
Stadium Details for ${stadium.name}<br><br>
Capacity: ${stadium.capacity}<br>
Matches:<br>
<ul>
<c:forEach var="match" items="${stadium.matches}">
<li>${match.matchSummaryFormatted}</li>
</c:forEach>
</ul>
<a href="../stadiums">Back to Stadium Listing</a>
</body>
</html>
- 构建平台并重新启动服务器
- 停止服务 , 运行 ant clean all , 启动服务，刷新Eclipswe工作空间
- 访问 http://localhost:9001/cuppytrailfrontend/stadiums 查看体育场列表
- 您现在应该能够查看球场列表以及对个别场馆的详细信息。请注意，您不必重新启动服务器，如果你创建新的或修改现有JSP页面。这可能是在加快你的前端开发非常有帮助。
- 进一步的步骤/评论
- 扩展前端，以允许用户修改体育场细节。
- 引入新的方法，以Facade，以显示有关比赛的详细信息。
- 请注意，如果您更改Java代码，构建过程将重建，如果正在运行重新启动服务器。