菊珠是佛教的佛珠。 一句话，我相信您已经学到了什么，印象深刻吗？

好吧，我在这里不谈论佛教。
Juzu还是一个用于快速开发Portlet（以及即将推出的独立应用程序）的新框架。 您可以在Juzu网站上找到所需的所有信息。

现在，让我们用Juzu创建我们的第一个portlet！

创建一个新项目

Juzu具有Maven原型。 我们可以使用它来快速创建第一个应用程序：

mvn archetype:generate \-DarchetypeGroupId=org.juzu \-DarchetypeArtifactId=juzu-archetype \-DarchetypeVersion=0.5.1 \-DgroupId=org.example \-DartifactId=myapp \-Dversion=1.0.0-SNAPSHOT

这将在myapp文件夹中创建juzu项目。

部署Juzu Portlet

在部署应用程序之前，您需要先构建它。
只需在myapp文件夹中运行mvn clean package 。 它将在myapp / target文件夹下生成一个myapp.war 。

现在，我们准备在门户容器中部署portlet。 我们将使用最新的GateIn版本（3.4），即tomcat捆绑软件版本 。 下载后，将其解压缩到您选择的位置进行安装。

您唯一需要做的就是将myapp.war文件拖放到webapps文件夹中，并使用bin / gatein.sh run启动GateIn。

启动后，将您的portlet添加到页面中。 您应该看到：

太好了！ 您刚完成第一个Juzu portlet！

让我们在增强项目之前先对其进行探索。

探索项目

项目结构如下所示：

强制性的web.xml在那里。 它不包含任何东西。

portlet.xml

该原型生成带有一些juzu init参数的基本portlet.xml：

<?xml version='1.0' encoding='UTF-8'?>
<portlet-app xmlns='http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd'version='2.0'xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'xsi:schemaLocation='http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsdhttp://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd'><portlet><portlet-name>SampleApplication</portlet-name><display-name xml:lang='EN'>Juzu Sample Application</display-name><portlet-class>juzu.portlet.JuzuPortlet</portlet-class><init-param><name>juzu.run_mode</name><value>prod</value></init-param><init-param><name>juzu.inject</name><value>weld</value><!--<value>spring</value>--></init-param><supports><mime-type>text/html</mime-type></supports><portlet-info><title>Sample Application</title></portlet-info></portlet>
</portlet-app>

portlet类是通用的Juzu portlet类juzu.portlet.JuzuPortlet 。
此类声明2个init参数：

• juzu.run_mode
  • dev ：对源文件所做的更改将自动进行热编译和重新加载，因此您无需重新部署应用程序即可对其进行测试。
• juzu.inject –定义注入实现。 当前支持两种实现： 焊接 （CDI参考实现）和弹簧 。

Juzu portlet类使用package-info.java文件收集所需的额外信息。

portlet.xml文件还包含有关portlet的基本信息： portlet-name ， display-name和portlet-info 。 您可以更改它们，或根据需要添加其他一些。

包信息.java

该文件包含应用程序的所有配置。
该文件允许激活插件，添加JS / CSS资源，…，但是现在让我们保持简单。
由于@ juzu.Application批注，唯一的强制性配置是应用程序的声明。 您必须声明应用程序的基本包，在本例中为org.sample 。

Controller.java

此类是Juzu控制器。 它由一个视图方法索引 （用@View注释）组成，该方法允许呈现索引模板。
索引模板的路径使用@Path注释设置。 默认情况下，Juzu使用应用程序的模板包作为其根路径。 因此，在本例中，模板位于org / sample / templates / index.gtmpl 。

切换至开发模式

现在，我们对什么是Juzu应用程序有了更多的了解，让我们对基本的helloworld应用程序进行一些改进。
首先，我们将从生产模式切换到开发模式，以便快速测试我们的更改。 为此，请编辑portlet.xml文件，并将init-param juzu.run_mode的值更改为dev 。 然后构建您的应用程序，并将战争放在GateIn的webapps文件夹中。 在这里，您无需停止/启动GateIn，因为Webapp将自动重新部署。

由于我们没有在应用程序的源文件中进行任何更改，因此您应该在portlet中看到相同的“ Hello World”消息。

为了测试开发模式，您可以例如将文件webapps / myapp / WEB-INF / src / org / sample / templates / index.gtmpl重命名为index2.gtmpl 。 刷新页面后，您将收到以下消息：

现在编辑webapps / myapp / WEB-INF / src / org / sample / Controller.java并进行更改

@Inject
@Path('index.gtmpl')
Template index;

通过

@Inject
@Path('index2.gtmpl')
Template index;

并再次刷新您的页面。
一切恢复正常！ 很酷，不是吗？

表单，动作和类型安全模板参数

我们将创建一个显示用户选择的位置地图的应用程序。
首先，更新您的index.gtmpl模板：

#{param name=location/}
#{param name=mapURL/}Location :
<form action='@{updateLocation()}' method='post'><input type='text' name='location' value='${location}'/><input type='submit'/>
</form>
<br/>
<%if(location) {%>
<div id='map'></div>
<%}%>

• ＃{param name = location /}和＃{param name = mapURL /}声明2种类型的安全模板参数，这些参数稍后将在我们的Controller中使用
• 该表单包含输入文本，并提交给我们的juzu控制器操作updateLocation
• 最后，如果指定了位置，则显示地图

现在，让我们更新更新Controller.java：

package org.sample;import juzu.Action;
import juzu.Path;
import juzu.Resource;
import juzu.Response;
import juzu.View;
import juzu.template.Template;import javax.inject.Inject;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;public class Controller {@Inject@Path('index.gtmpl')org.sample.templates.index index;@Viewpublic void index() throws IOException {index('', '');}@Viewpublic void index(String location, String mapURL) throws IOException {index.with().location(location).mapURL(mapURL).render();}@Actionpublic Response updateLocation(String location) throws IOException {String mapURL = 'https://maps.google.fr/maps?f=q&source=s_q&hl=en&geocode=&q=' + location + '&aq=&t=m&ie=UTF8&hq=&hnear=' + location + '&z=12&output=embed';return Controller_.index(location, mapURL);}
}

• 索引模板现在的类型为org.sample.templates.index 。 此类是通过注释生成的，并且是Template的子类。 使用这种特定类型将使我们能够利用已声明的模板参数， 位置和mapURL 。
• 默认索引视图现在调用一个新的索引视图，该视图接受location和mapURL参数。 这个新视图使用索引模板类及其流利的语法（您喜欢它吗？我是个人角色）。 由于在模板中声明了location和mapURL参数，因此org.sample.templates.index模板类接受了location方法和mapURL方法来设置其值。
• 通过@Action批注，将updateLocation方法定义为动作。 表单会调用它来检索正确的URL（构建地图URL是一个基本示例，通常会在这里调用您的服务）。 然后，它重定向到index View方法以呈现索引模板。 请注意控制器名称末尾的_。 Controller_类是Controller类的“已处理注释”版本。

如果在应用程序的已部署版本中进行了所有这些更改（在webapps / myapp中），则只需刷新即可，您应该能够输入位置，然后查看相应的地图：

阿贾克斯

Juzu使您可以轻松地在应用程序中使用Ajax。 在表单中提交新位置时，我们将使用它们来避免重新加载页面。
Ajax插件需要JQuery。 我们可以通过简单地将JQuery js文件拖放到项目中并使用Asset插件在package-info.java文件中声明它来将其添加到我们的应用程序中（我将JQuery js文件拖放到public / scripts中）：

@juzu.plugin.asset.Assets(scripts = {@juzu.plugin.asset.Script(id = 'jquery',  src = 'public/scripts/jquery-1.7.1.min.js')}
)

现在，我们将更新控制器，以添加仅提供地图URL的新方法：

@Ajax@Resourcepublic Response.Content<Stream.Char> getMapURL(String location) throws IOException {String mapURL = 'https://maps.google.fr/maps?f=q&source=s_q&hl=en&geocode=&q=' + location + '&aq=&t=m&ie=UTF8&hq=&hnear=' + location + '&z=12&output=embed';return Response.ok('{\'mapURL\': \'' + mapURL +'\'}').withMimeType('application/json');}

请注意，此新方法不再使用@Action进行注释。 使用@Ajax注释方法将使其可用于Ajax调用。 @Resource批注使此方法将整个响应发送到客户端。 这就是我们想要的，因为此方法只是创建新的URL并将其作为JSON响应发送回客户端。

最后，我们必须更新模板文件以添加Ajax调用：

#{param name=location/}
#{param name=mapURL/}<script>
function submitLocation(location) {$('#map').jzAjax({url: 'Controller.getMapURL()',data: {'location': location}}).done(function(data) {$('#map > iframe').attr('src', data.mapURL);});return false;
}
</script>Location :
<form onsubmit='return submitLocation(this.location.value)'><input type='text' name='location' value='${location}'/><input type='submit'/>
</form>
<br/><div id='map'></div>

表单的提交现在调用了SubmitLocation javascript函数。 该函数使用juzu Ajax函数jzAjax （在后台使用ajax JQuery函数）。 此函数使用data中提供的参数调用url参数中提供的URL 。 因此，在这里它将调用Controller的新创建的方法，并以JSON接收新的地图URL：

{'mapURL': 'https://maps.google.fr/maps?f=q&source=s_q&hl=en&geocode=&q=nantes&aq=&t=m&ie=UTF8&hq=&hnear=nantes&z=12&output=embed'}

然后，我们仅使用JQuery来更新地图。

再一次，只需刷新页面即可查看它的实际效果！

现在，您可以通过访问网站或观看截屏视频来了解有关Juzu的更多信息。

祝您编程愉快，别忘了分享！

参考： 您的第一个Juzu Portlet，来自TCG 博客博客中的JCG合作伙伴 Thomas Delhimenie。