SlideShare a Scribd company logo
1 of 49
Download to read offline
How to develop nice
JUZU
Portlet for eXo Platform
Copyright 2015 eXo Platform
A presentation
by Tuyen - Portal Team
Copyright 2015 eXo Platform
Agenda
Copyright 2015 eXo Platform
Enjoy...
1. Introduction to Juzu
2. Juzu feature
3. Develop Juzu Portlet for eXo Platform
4. Migrate your 0.6.2 Juzu Portlet to 1.0.0
You said
JUZU
Juzu what…?
Copyright 2015 eXo Platform
JUZU What…?
Copyright 2015 eXo Platform
Juzu is a Web Framework base on MVC
concepts for developing powerful web/portlets
applications
But… WHY Juzu ?
Copyright 2015 eXo Platform
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
Juzu applications (Chat application)
Copyright 2015 eXo Platform
Juzu applications (homepage and branding portlets)
Copyright 2015 eXo Platform
A review of nice
FEATURES
of Juzu
Copyright 2015 eXo Platform
Features of Juzu
Copyright 2015 eXo Platform
● Simplicity
● Typesafe
● Extensibility
Simplicity
Copyright 2015 eXo Platform
@Inject
@Path("index.gtmpl")
Template index;
@View
public 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
Typesafe (Detect error at Compile time)
Copyright 2015 eXo Platform
@Inject
@Path("index.gtmpl")
package.template.index index;
@View
public Response.Content index() {
return index.with().location("Ha Noi").ok();
}
@View
public Response.Content more() {...}
#{param name=location/}
You are at ${location}.
<a href="@{Controller.more()}">get more information</a>
Typesafe (Detect error at Compile time)
Copyright 2015 eXo Platform
@Inject
@Path("index.gtmpl")
package.template.index index;
@View
public Response.Content index() {
return index.with().location("Ha Noi").ok();
}
@View
public Response.Content more() {...}
#{param name=myLocation/}
You are at ${location}.
<a href="@{Controller.more()}">get more information</a>
compile error
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
How to develop nice
JUZU PORTLET
for eXo Platform
Copyright 2015 eXo Platform
Develop Juzu portlet
Copyright 2015 eXo Platform
● Create new Juzu project
● Controller
● Business service and Injector
● Template
● Asset manager
● Plugin: Ajax, WebJar
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
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
Project structure
Copyright 2015 eXo Platform
WEB-INF
application deployment descriptor
package-info.java
configuration for application
Controller
Juzu controller
templates
templates used in application
Project structure (JuZcret application)
Copyright 2015 eXo Platform
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
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 {...}
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();
}
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
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
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>
@Action
public Response.View addSecret(String msg, String imgURL) {
secretService.addSecret(msg, imgURL);
return JuZcretApplication_.index();
}
JuZcret application
Copyright 2015 eXo Platform
CSS and Javascript
Copyright 2015 eXo Platform
vs
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
JuZcret UI
Copyright 2015 eXo Platform
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>
Resource Controller
Copyright 2015 eXo Platform
@Resource
public 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) {...}
Controller (map request parameter to Bean types)
Copyright 2015 eXo Platform
@Resource
public Response addComment(String secretId, @Mapped Comment comment, SecurityContext context) {
...
}
public class Comment extends Model {
private String userId;
private String content;
...
}
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;
});
JuZcret Like and Comment
Copyright 2015 eXo Platform
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>
@Inject
ResourceBundle bundle;
Controller.java
template.gtmpl
Internalization and Localization
Copyright 2015 eXo Platform
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/}
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);
}
}
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
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;
How to
MIGRATE
from 0.6.2 to 1.0.0
Copyright 2015 eXo Platform
Controller method
Copyright 2015 eXo Platform
Controller method must return Response object
@View
public void index() {
index.render(parameters);
}
@View
public Response index() {
return index.ok(parameters);
}
Template#render() is removed
Copyright 2015 eXo Platform
use method juzu.template.Template#ok()
@View
public void index() {
index.render(parameters);
}
@View
public Response index() {
return index.ok(parameters);
}
RenderContext is removed
Copyright 2015 eXo Platform
If you want to use these context objects:
juzu.request.ApplicationContext
juzu.request.UserContext
juzu.request.SecurityContext
….
Just inject them into controller method
@View
public Response.Content index(ApplicationContext applicationContext,
SecurityContext securityContext, UserContext userContext){...}
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>
@Inject
ResourceBundle bundle;
Controller.java
template.gtmpl
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
It’s time for
THANK YOU
see you soon ...
Copyright 2015 eXo Platform

More Related Content

Similar to How to develop nice portlet with Juzu framework

JMP103 : Extending Your App Arsenal With OpenSocial
JMP103 : Extending Your App Arsenal With OpenSocialJMP103 : Extending Your App Arsenal With OpenSocial
JMP103 : Extending Your App Arsenal With OpenSocialRyan Baxter
 
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocial
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocialIBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocial
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocialIBM Connections Developers
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirpetrosoininen
 
Benefit of CodeIgniter php framework
Benefit of CodeIgniter php frameworkBenefit of CodeIgniter php framework
Benefit of CodeIgniter php frameworkBo-Yi Wu
 
Nuxeo Enterprise Platform (Nuxeo EP) - Technical Overview
Nuxeo Enterprise Platform (Nuxeo EP) - Technical OverviewNuxeo Enterprise Platform (Nuxeo EP) - Technical Overview
Nuxeo Enterprise Platform (Nuxeo EP) - Technical OverviewNuxeo
 
Front end microservices - October 2019
Front end microservices - October 2019Front end microservices - October 2019
Front end microservices - October 2019Mikhail Kuznetcov
 
GoogleDSC_ GHRCE_ flutter_firebase.pptx
GoogleDSC_ GHRCE_  flutter_firebase.pptxGoogleDSC_ GHRCE_  flutter_firebase.pptx
GoogleDSC_ GHRCE_ flutter_firebase.pptxGoogleDeveloperStude22
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Matt Raible
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Filippo Matteo Riggio
 
Let's build Developer Portal with Backstage
Let's build Developer Portal with BackstageLet's build Developer Portal with Backstage
Let's build Developer Portal with BackstageOpsta
 
Developer Student Clubs NUK - Flutter for Beginners
Developer Student Clubs NUK - Flutter for BeginnersDeveloper Student Clubs NUK - Flutter for Beginners
Developer Student Clubs NUK - Flutter for BeginnersJiaxuan Lin
 
Visual AI Testing Using Applitools
Visual AI Testing Using ApplitoolsVisual AI Testing Using Applitools
Visual AI Testing Using ApplitoolsMikhail Laptev
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》Koubei Banquet
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
 
Behavior & Specification Driven Development in PHP - #OpenWest
Behavior & Specification Driven Development in PHP - #OpenWestBehavior & Specification Driven Development in PHP - #OpenWest
Behavior & Specification Driven Development in PHP - #OpenWestJoshua Warren
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsMatteo Manchi
 

Similar to How to develop nice portlet with Juzu framework (20)

Juzu framework
Juzu frameworkJuzu framework
Juzu framework
 
Gwt.create
Gwt.createGwt.create
Gwt.create
 
JMP103 : Extending Your App Arsenal With OpenSocial
JMP103 : Extending Your App Arsenal With OpenSocialJMP103 : Extending Your App Arsenal With OpenSocial
JMP103 : Extending Your App Arsenal With OpenSocial
 
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocial
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocialIBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocial
IBM Connect 2014 - JMP103: Extending Your Application Arsenal With OpenSocial
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAir
 
Benefit of CodeIgniter php framework
Benefit of CodeIgniter php frameworkBenefit of CodeIgniter php framework
Benefit of CodeIgniter php framework
 
Nuxeo Enterprise Platform (Nuxeo EP) - Technical Overview
Nuxeo Enterprise Platform (Nuxeo EP) - Technical OverviewNuxeo Enterprise Platform (Nuxeo EP) - Technical Overview
Nuxeo Enterprise Platform (Nuxeo EP) - Technical Overview
 
Front end microservices - October 2019
Front end microservices - October 2019Front end microservices - October 2019
Front end microservices - October 2019
 
GoogleDSC_ GHRCE_ flutter_firebase.pptx
GoogleDSC_ GHRCE_  flutter_firebase.pptxGoogleDSC_ GHRCE_  flutter_firebase.pptx
GoogleDSC_ GHRCE_ flutter_firebase.pptx
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
 
Let's build Developer Portal with Backstage
Let's build Developer Portal with BackstageLet's build Developer Portal with Backstage
Let's build Developer Portal with Backstage
 
Developer Student Clubs NUK - Flutter for Beginners
Developer Student Clubs NUK - Flutter for BeginnersDeveloper Student Clubs NUK - Flutter for Beginners
Developer Student Clubs NUK - Flutter for Beginners
 
Visual AI Testing Using Applitools
Visual AI Testing Using ApplitoolsVisual AI Testing Using Applitools
Visual AI Testing Using Applitools
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
 
Banquet 42
Banquet 42Banquet 42
Banquet 42
 
.Net template solution architecture
.Net template solution architecture.Net template solution architecture
.Net template solution architecture
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
Behavior & Specification Driven Development in PHP - #OpenWest
Behavior & Specification Driven Development in PHP - #OpenWestBehavior & Specification Driven Development in PHP - #OpenWest
Behavior & Specification Driven Development in PHP - #OpenWest
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 

Recently uploaded

Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxAnnaArtyushina1
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisamasabamasaba
 
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrainmasabamasaba
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension AidPhilip Schwarz
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...masabamasaba
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplatePresentation.STUDIO
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2
 
tonesoftg
tonesoftgtonesoftg
tonesoftglanshi9
 
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open SourceWSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open SourceWSO2
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyviewmasabamasaba
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...Shane Coughlan
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park masabamasaba
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park masabamasaba
 

Recently uploaded (20)

Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptx
 
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security Program
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open SourceWSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 

How to develop nice portlet with Juzu framework

  • 1. How to develop nice JUZU Portlet for eXo Platform Copyright 2015 eXo Platform
  • 2. A presentation by Tuyen - Portal Team Copyright 2015 eXo Platform
  • 3. Agenda Copyright 2015 eXo Platform Enjoy... 1. Introduction to Juzu 2. Juzu feature 3. Develop Juzu Portlet for eXo Platform 4. Migrate your 0.6.2 Juzu Portlet to 1.0.0
  • 5. JUZU What…? Copyright 2015 eXo Platform Juzu is a Web Framework base on MVC concepts for developing powerful web/portlets applications
  • 6. But… WHY Juzu ? Copyright 2015 eXo Platform
  • 7. 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
  • 8. Juzu applications (Chat application) Copyright 2015 eXo Platform
  • 9. Juzu applications (homepage and branding portlets) Copyright 2015 eXo Platform
  • 10. A review of nice FEATURES of Juzu Copyright 2015 eXo Platform
  • 11. Features of Juzu Copyright 2015 eXo Platform ● Simplicity ● Typesafe ● Extensibility
  • 12. Simplicity Copyright 2015 eXo Platform @Inject @Path("index.gtmpl") Template index; @View public 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
  • 13. Typesafe (Detect error at Compile time) Copyright 2015 eXo Platform @Inject @Path("index.gtmpl") package.template.index index; @View public Response.Content index() { return index.with().location("Ha Noi").ok(); } @View public Response.Content more() {...} #{param name=location/} You are at ${location}. <a href="@{Controller.more()}">get more information</a>
  • 14. Typesafe (Detect error at Compile time) Copyright 2015 eXo Platform @Inject @Path("index.gtmpl") package.template.index index; @View public Response.Content index() { return index.with().location("Ha Noi").ok(); } @View public Response.Content more() {...} #{param name=myLocation/} You are at ${location}. <a href="@{Controller.more()}">get more information</a> compile error
  • 15. 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
  • 16. How to develop nice JUZU PORTLET for eXo Platform Copyright 2015 eXo Platform
  • 17. Develop Juzu portlet Copyright 2015 eXo Platform ● Create new Juzu project ● Controller ● Business service and Injector ● Template ● Asset manager ● Plugin: Ajax, WebJar
  • 18. 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
  • 19. 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
  • 20. Project structure Copyright 2015 eXo Platform WEB-INF application deployment descriptor package-info.java configuration for application Controller Juzu controller templates templates used in application
  • 21. Project structure (JuZcret application) Copyright 2015 eXo Platform
  • 22. 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
  • 23. 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 {...}
  • 24. 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(); }
  • 25. 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
  • 26. 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
  • 27. 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> @Action public Response.View addSecret(String msg, String imgURL) { secretService.addSecret(msg, imgURL); return JuZcretApplication_.index(); }
  • 29. CSS and Javascript Copyright 2015 eXo Platform vs
  • 30. 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
  • 32. 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>
  • 33. Resource Controller Copyright 2015 eXo Platform @Resource public 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) {...}
  • 34. Controller (map request parameter to Bean types) Copyright 2015 eXo Platform @Resource public Response addComment(String secretId, @Mapped Comment comment, SecurityContext context) { ... } public class Comment extends Model { private String userId; private String content; ... }
  • 35. 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; });
  • 36. JuZcret Like and Comment Copyright 2015 eXo Platform
  • 37. 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> @Inject ResourceBundle bundle; Controller.java template.gtmpl
  • 39. 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/}
  • 40. 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); } }
  • 41. 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
  • 42. 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;
  • 43. How to MIGRATE from 0.6.2 to 1.0.0 Copyright 2015 eXo Platform
  • 44. Controller method Copyright 2015 eXo Platform Controller method must return Response object @View public void index() { index.render(parameters); } @View public Response index() { return index.ok(parameters); }
  • 45. Template#render() is removed Copyright 2015 eXo Platform use method juzu.template.Template#ok() @View public void index() { index.render(parameters); } @View public Response index() { return index.ok(parameters); }
  • 46. RenderContext is removed Copyright 2015 eXo Platform If you want to use these context objects: juzu.request.ApplicationContext juzu.request.UserContext juzu.request.SecurityContext …. Just inject them into controller method @View public Response.Content index(ApplicationContext applicationContext, SecurityContext securityContext, UserContext userContext){...}
  • 47. 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> @Inject ResourceBundle bundle; Controller.java template.gtmpl
  • 48. 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
  • 49. It’s time for THANK YOU see you soon ... Copyright 2015 eXo Platform