菊珠是佛教的佛珠。 一句話，我相信您已經學到了什么，印象深刻嗎？

好的，我在這里不談論佛教。
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。