How to develop nice portlet with Juzu framework
-
Upload
nguyen-tuyen -
Category
Software
-
view
176 -
download
1
Transcript of How to develop nice portlet with Juzu framework
![Page 1: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/1.jpg)
How to develop nice
JUZUPortlet for eXo Platform
Copyright 2015 eXo Platform
![Page 2: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/2.jpg)
A presentation
by Tuyen - Portal Team Copyright 2015 eXo Platform
![Page 3: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/3.jpg)
Agenda
Copyright 2015 eXo Platform
Enjoy...
1. Introduction to Juzu2. Juzu feature3. Develop Juzu Portlet for eXo Platform4. Migrate your 0.6.2 Juzu Portlet to 1.0.0
![Page 4: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/4.jpg)
You said
JUZUJuzu what…?
Copyright 2015 eXo Platform
![Page 5: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/5.jpg)
JUZU What…?
Copyright 2015 eXo Platform
Juzu is a Web Framework base on MVC
concepts for developing powerful web/portlets
applications
![Page 6: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/6.jpg)
But… WHY Juzu ?
Copyright 2015 eXo Platform
![Page 7: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/7.jpg)
History and technology
Copyright 2015 eXo Platform
● Inspired from Play framework
● Base on MVC concepts
● Modular oriented
● Integrates with IoC frameworks
● Groovy and Mustache template engine
![Page 8: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/8.jpg)
Juzu applications (Chat application)
Copyright 2015 eXo Platform
![Page 9: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/9.jpg)
Juzu applications (homepage and branding portlets)
Copyright 2015 eXo Platform
![Page 10: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/10.jpg)
A review of nice
FEATURESof Juzu
Copyright 2015 eXo Platform
![Page 11: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/11.jpg)
Features of Juzu
Copyright 2015 eXo Platform
● Simplicity
● Typesafe
● Extensibility
![Page 12: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/12.jpg)
Simplicity
Copyright 2015 eXo Platform
@Inject@Path("index.gtmpl")Template index;
@Viewpublic Response.Content index() { return index.ok();}
<action name="hello" class="com.tutorialspoint.struts2.HelloWorldAction" method="execute"> <result name="success">/HelloWorld.jsp</result> </action>● No more XML
● Use Annotation
![Page 13: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/13.jpg)
Typesafe (Detect error at Compile time)
Copyright 2015 eXo Platform
@Inject@Path("index.gtmpl")package.template.index index;
@Viewpublic Response.Content index() { return index.with().location("Ha Noi").ok();}
@Viewpublic Response.Content more() {...}
#{param name=location/}
You are at ${location}.
<a href="@{Controller.more()}">get more information</a>
![Page 14: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/14.jpg)
Typesafe (Detect error at Compile time)
Copyright 2015 eXo Platform
@Inject@Path("index.gtmpl")package.template.index index;
@Viewpublic Response.Content index() { return index.with().location("Ha Noi").ok();}
@Viewpublic Response.Content more() {...}
#{param name=myLocation/}
You are at ${location}.
<a href="@{Controller.more()}">get more information</a>
compile error
![Page 15: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/15.jpg)
Extensibility (Easy to develop and deliver plugin)
Copyright 2015 eXo Platform
public class AjaxService extends ApplicationService {...}
ajax-plugin.jar
org.exoplatform.commons.juzu.ajax.AjaxService
META-INF/services/juzu.impl.plugin.application.ApplicationService
uses the java.util.ServiceLoader discovery mechanism for finding plugin services
![Page 16: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/16.jpg)
How to develop nice
JUZU PORTLETfor eXo Platform
Copyright 2015 eXo Platform
![Page 17: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/17.jpg)
Develop Juzu portlet
Copyright 2015 eXo Platform
● Create new Juzu project● Controller● Business service and Injector● Template● Asset manager● Plugin: Ajax, WebJar
![Page 18: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/18.jpg)
JuZcret…
Copyright 2015 eXo Platform
● Funny Juzu application
● Tutorial: http://blog.exoplatform.com/en/2014/11/18/learn-how-to-develop-great-
juzu-portlets-for-exo-platform
![Page 19: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/19.jpg)
Create new Juzu project
Copyright 2015 eXo Platform
From maven archetype:mvn archetype:generate \ -DarchetypeGroupId=org.juzu \ -DarchetypeArtifactId=juzu-archetype \ -DarchetypeVersion=1.0.0-cr1 \ -DjuzuServer=gatein \ -DgroupId=org.juzu.tutorial \ -DartifactId=tutorial-juzcret \ -Dversion=1.0.0-SNAPSHOT \ -DinteractiveMode=false
![Page 20: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/20.jpg)
Project structure
Copyright 2015 eXo Platform
WEB-INFapplication deployment descriptor
package-info.javaconfiguration for application
ControllerJuzu controller
templatestemplates used in application
![Page 21: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/21.jpg)
Project structure (JuZcret application)
Copyright 2015 eXo Platform
![Page 22: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/22.jpg)
Juzu Controller (simple controller)
Copyright 2015 eXo Platform
public class JuZcretApplication {...}
@View
public Response.Content index() {
return Response.ok("Hello world!!!");
}
@Application(defaultController = org.juzu.tutorial.JuZcretApplication.class)
package org.juzu.tutorial;
package-info.java
![Page 23: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/23.jpg)
Juzu Service
Copyright 2015 eXo Platform
public interface SecretService {...}
@Application(defaultController = ...)@Bindings({ @Binding( value = org.juzu.tutorial.services.SecretService.class, implementation = org.juzu.tutorial.services.SecretServiceMemImpl.class )})package org.juzu.tutorial;
package-info.java
public class SecretServiceMemImpl implements SecretService {...}
![Page 24: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/24.jpg)
Juzu Service (inject to controller)
Copyright 2015 eXo Platform
public interface SecretService {...}
public class JuZcretApplication { @Inject SecretService secretService;
@Inject @Path("secretWall.gtmpl") templates.secretWall secretWall; ...}
@View
public Response.Content index() {
return secretWall.with()
.secretList(secretService.getScretsList()).ok();}
![Page 25: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/25.jpg)
Juzu Template
Copyright 2015 eXo Platform
public class JuZcretApplication { ... @Inject @Path("secretWall.gtmpl") org.juzu.tutorial.templates.secretWall secretWall; ...}
@View
public Response.Content index() {
return secretWall.with().secretsList("My list of secret").ok();
}
#{param name=secretsList/}Here is my secret list: ${secretsList}
secretWall.gtmpl
![Page 26: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/26.jpg)
Juzu Template (template expression)
Copyright 2015 eXo Platform
@View
public Response.Content index() {
return secretWall.with().secretsList(secretService.getSecrets()).ok();
}
#{param name=secretsList/}
<ul class="secret-wall-list"><% secretsList.each { secret -> %> <li> ${secret.message} </li><%}%></ul>
secretWall.gtmpl
![Page 27: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/27.jpg)
Form and Action controller
Copyright 2015 eXo Platform
<form action="@{JuZcretApplication.addSecret()}" method="POST" role="form">
...
<textarea rows="3" name="msg" placeholder="Write your secret here"></textarea> Image URL: <input name="imgURL" placeholder="..."> ... <button type="submit">Share</button></form>
@Actionpublic Response.View addSecret(String msg, String imgURL) { secretService.addSecret(msg, imgURL); return JuZcretApplication_.index();}
![Page 28: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/28.jpg)
JuZcret application
Copyright 2015 eXo Platform
![Page 29: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/29.jpg)
CSS and Javascript
Copyright 2015 eXo Platform
vs
![Page 30: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/30.jpg)
Asset manager (@Stylesheet and Less plugin)
Copyright 2015 eXo Platform
Less plugin will take care of compiling automatically the Less file to CSS file during the maven compilation
<dependency> <groupId>org.juzu</groupId> <artifactId>juzu-plugins-less4j</artifactId> <version>1.0.0-cr1</version></dependency>
@Less(@Stylesheet("styles/juzcret.less"))
@Stylesheets({@Stylesheet(value = "styles/my.css")})
@Assets("*")
package org.juzu.tutorial;
package-info.java
![Page 31: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/31.jpg)
JuZcret UI
Copyright 2015 eXo Platform
![Page 32: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/32.jpg)
Asset manager (@Script and WebJar plugin)
Copyright 2015 eXo Platform
@WebJars(@WebJar("jquery"))@Scripts({ @Script(id = "jquery", value = "jquery/1.10.2/jquery.js"), @Script(value = "javascripts/secret.js", depends = "jquery")}) @Assets("*")package org.juzu.tutorial;
package-info.java
<dependency> <artifactId>juzu-plugins-webjars</artifactId> <groupId>org.juzu</groupId></dependency>
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId></dependency>
![Page 33: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/33.jpg)
Resource Controller
Copyright 2015 eXo Platform
@Resourcepublic Response addComment(String secretId, @Mapped Comment comment, SecurityContext context) { ... Comment result = secretService.addComment(secretId, comment); if (result != null) { return Response.ok(new JSONObject(result).toString()).withMimeType("text/json"); } else { return Response.status(503); }}
@Resource
public Response addLike(String secretId, SecurityContext context) {...}
![Page 34: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/34.jpg)
Controller (map request parameter to Bean types)
Copyright 2015 eXo Platform
@Resourcepublic Response addComment(String secretId, @Mapped Comment comment, SecurityContext context) { ...}
public class Comment extends Model {
private String userId;
private String content;
...
}
![Page 35: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/35.jpg)
Ajax plugin
Copyright 2015 eXo Platform
@Ajax
@Resource
public Response addComment(String secretId, @Mapped Comment comment, SecurityContext context) {...}
$(document).on('click.juzu.secret.addComment', '.btn-comment', function () { ... var jLike = $(this); jLike.jzAjax('JuZcretApplication.addComment()', { data: {...}, success: function (data) { ... } }); return false;});
![Page 36: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/36.jpg)
JuZcret Like and Comment
Copyright 2015 eXo Platform
![Page 37: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/37.jpg)
Internalization and Localization
Copyright 2015 eXo Platform
Juzu support i18n natively in the core. We just need to modify all the labels in all our templates.
<form action="@{JuZcretApplication.enableComment()}" method="POST" role="form">
<h5>&{label.configuration}</h5> <input type="checkbox" name="enableComment" <%=enableComment ? "checked" : "" %>/>
&{label.enableComment} <button type="submit">&{label.save}</button></form>
@InjectResourceBundle bundle;
Controller.java
template.gtmpl
![Page 38: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/38.jpg)
Internalization and Localization
Copyright 2015 eXo Platform
![Page 39: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/39.jpg)
Template (tag)
Copyright 2015 eXo Platform
#{foo}bar#{/foo}
#{foo/}
#{include path=dispatched.gtmpl/}
#{decorate path=box.gtmpl/}
<div style="border: 1px solid black">
#{insert/}
</div>
#{title value=Home/}
#{param name=color/}
![Page 40: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/40.jpg)
Template (Java Custom tag)
Copyright 2015 eXo Platform
public class TitleTag extends TagHandler { public TitleTag() { super("title"); }
@Override public void render(TemplateRenderContext context, Renderable body, Map<String, String> args) throws IOException { String title = args.get("value"); if (title != null) { context.setTitle(title); } body.render(context); }}
![Page 41: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/41.jpg)
Template (Simple Custom tag)
Copyright 2015 eXo Platform
@Application@Tags(@Tag(name = "mytag", path = "mytag.gtmpl"))package my.application;
Hello ${parameters.name}
#{mytag name=”my name”/}
mytag.gtmpl
template
![Page 42: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/42.jpg)
Template (reuse simple custom tag)
Copyright 2015 eXo Platform
custom-tags.jar
my.application.tags.mytag
META-INF/services/juzu.template.TagHandler
@Application@Tags(@Tag(name = "mytag", path = "mytag.gtmpl"))package my.application;
![Page 43: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/43.jpg)
How to
MIGRATEfrom 0.6.2 to 1.0.0
Copyright 2015 eXo Platform
![Page 44: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/44.jpg)
Controller method
Copyright 2015 eXo Platform
Controller method must return Response object
@Viewpublic void index() { index.render(parameters);}
@Viewpublic Response index() { return index.ok(parameters);}
![Page 45: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/45.jpg)
Template#render() is removed
Copyright 2015 eXo Platform
use method juzu.template.Template#ok()
@Viewpublic void index() { index.render(parameters);}
@Viewpublic Response index() { return index.ok(parameters);}
![Page 46: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/46.jpg)
RenderContext is removed
Copyright 2015 eXo Platform
If you want to use these context objects:juzu.request.ApplicationContextjuzu.request.UserContextjuzu.request.SecurityContext….
Just inject them into controller method
@Viewpublic Response.Content index(ApplicationContext applicationContext, SecurityContext securityContext, UserContext userContext){...}
![Page 47: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/47.jpg)
Localization
Copyright 2015 eXo Platform
<form action="@{JuZcretApplication.enableComment()}" method="POST" role="form">
<h5>&{label.configuration}</h5> <input type="checkbox" name="enableComment" <%=enableComment ? "checked" : "" %>/>
&{label.enableComment} <button type="submit">&{label.save}</button></form>
@InjectResourceBundle bundle;
Controller.java
template.gtmpl
![Page 48: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/48.jpg)
class *Plugin is renamed to *Service
Copyright 2015 eXo Platform
public class AjaxService extends ApplicationService {...}
ajax-plugin.jar
org.exoplatform.commons.juzu.ajax.AjaxService
META-INF/services/juzu.impl.plugin.application.ApplicationService
ApplicationPlugin
rename to
META-INF/services/juzu.impl.plugin.application.ApplicationPlugin
rename to
![Page 49: How to develop nice portlet with Juzu framework](https://reader030.fdocuments.us/reader030/viewer/2022020218/55baed1bbb61eb507b8b4580/html5/thumbnails/49.jpg)
It’s time for
THANK YOUsee you soon ...
Copyright 2015 eXo Platform