SlideShare a Scribd company logo
1 of 44
Download to read offline
Juzu framework
Web framework for portlet development




                                        Kien Nguyen
                                          Portal team
                                           May 2012
Agenda


1   −Concepts in Juzu framework
     − Introduction
     − Main concepts



2
    −Develop portlets based Juzu framework
     − Features
     − How to develop portlets



3   −Demonstrate building portlets
     − Setup environment
     − Build, deploy, Test



4   −Some comparision to others
     − Webui portlets
     − Spring, Strut portlet




                   www.exoplatform.com - Copyright 2012 eXo Platform   2
Introduction

- What is the juzu framework?

- MVC model

- Request life cycle
 + View, Action, Resource phases

- Juzu Controllers

- Juzu Application

- Juzu running mode

- Type safe parameters




                         www.exoplatform.com - Copyright 2012 eXo Platform   3
Introduction




               www.exoplatform.com - Copyright 2012 eXo Platform   4
What is the Juzu?

- Juzu is an open source project developed on GitHub project licensed under
the LGPL 2.1 license

- Source repository: https://github.com/juzu/juzu

- Website: http://juzuweb.org/

- Author: Julien Viet




                        www.exoplatform.com - Copyright 2012 eXo Platform     5
What is the Juzu?

- Juzu is a web framework based on MVC concepts for developing Portlet
applications.

- Develop powerful web applications

- Emphasises on simplicity and type safety




                      www.exoplatform.com - Copyright 2012 eXo Platform   6
Concepts in Juzu
MVC - Model-View-Controller




                    www.exoplatform.com - Copyright 2012 eXo Platform   7
Concepts in Juzu
MVC - Model-View-Controller




→ Spring, Struts,.. and Juzu


                      www.exoplatform.com - Copyright 2012 eXo Platform   8
Request lifecycle in Juzu

- View phase: Produce markup output aggregated within a page

- Action phase: Process an action

- Resource phase: produce any kind of output as a full response (i.e not in a
page)




                      www.exoplatform.com - Copyright 2012 eXo Platform         9
Request lifecycle in Juzu

View phase
- View phases are mapped on GET requests
- Idempotent
- View parameters are identified to query parameters




                      www.exoplatform.com - Copyright 2012 eXo Platform   10
Request lifecycle in Juzu

Action phase
- Processing a link
- The action phase is mapped on POST requests
- Not idempotent
- Action parameters are identified to form parameters
- Action phase and POST requests should not be invoked more than one time




                     www.exoplatform.com - Copyright 2012 eXo Platform      11
Request lifecycle in Juzu

Resource phase
- GET request
- Entire response
- Use for Ajax, static resources like image, javascript, etc




                       www.exoplatform.com - Copyright 2012 eXo Platform   12
Juzu Controllers

Controller is part C of MVC model
- They are annotated methods of juzu application
- Kinds of controllers are mapped to phases (View, Action, Resource)
     + @org.juzu.View
     + @org.juzu.Action
     + @org.juzu.Resource




                      www.exoplatform.com - Copyright 2012 eXo Platform   13
Juzu running mode


- prod: production

- dev: development




                     www.exoplatform.com - Copyright 2012 eXo Platform   14
Juzu Application


Juzu app is a portlet application

- Package info
Store application information

- Controllers

- Templates

- Models




                      www.exoplatform.com - Copyright 2012 eXo Platform   15
Type safe parameters


Say about expression parameters in templates:
- Easily to pass parameters from Controllers to templates
- type safe with error checking automatically
- By Annotation processor and Eclipse code completion




                      www.exoplatform.com - Copyright 2012 eXo Platform   16
Develop portlets based Juzu framework

- Simple demo

- Overview JuzuPortlet

- Define fragments with #insert, #decorator, #include, #title

- Template type safe parameters with #param

- Actions

- Bean mapping

- Scope

- Ajax

- Portlet preferences

- I18n

- etc

                          www.exoplatform.com - Copyright 2012 eXo Platform   17
Develop portlets based Juzu framework


                Demo simple Juzu portlet




              www.exoplatform.com - Copyright 2012 eXo Platform   18
JuzuPortlet


- Is known as front controller of Juzu application

- Navigate to Controllers

- Navigate to running mode

- Navigate to dependency injection container

     ...




                            www.exoplatform.com - Copyright 2012 eXo Platform   19
Define UI fragments

- #{insert/}
Insert a template into a template

<div class="ShindigOAuth">
     <div class="ONavigation">
        <a href="@{OAuthStore.index()}"><<< Back to List</a>
     </div>
     <br />

     #{insert/}
</div>

- #{decorator}
Hook a template into a template

#{decorate path=main.gtmpl/}




                         www.exoplatform.com - Copyright 2012 eXo Platform   20
Define UI fragments

- #{include path=.../}
Include a template

<div id="myTabContent" class="tab-content">
       <div class="tab-pane fade active in" id="settings">
        #{include path=settings.gtmpl/}
       </div>
       <div class="tab-pane fade" id="layout">
        #{include path=layout.gtmpl/}
       </div>
       <div class="tab-pane fade" id="permission">
         #{include path=permission.gtmpl/}
       </div>
</div>

- #{title value=...}
Set portlet title

#{title value='Hello Juzu'/}


                           www.exoplatform.com - Copyright 2012 eXo Platform   21
Template type safe parameters

- Means errors checking during compile time

- Use tag #param in template
#{param name=location/}
#{param name=temperature/}

The weather temperature in ${location} is ${temperature} degrees.

- Use paramters in controller
  @Path("index.gtmpl")
  @Inject
  org.exoplatform.example.templates.index index;

 @View
 public void index()
 {
   index.with().location("Ha Noi").temperature("30").render();
 }



                         www.exoplatform.com - Copyright 2012 eXo Platform   22
Actions

Actions are method annotated by the @Action annotation

- In Templates:
   @{...}

- In Controllers:
   @Action
   public Response add(String location)
   {
   }

Example:
<form action="@{add()}" method="post">
  <input type="text" name="location" value=""/>
  <input type="submit"/>
</form>




                        www.exoplatform.com - Copyright 2012 eXo Platform   23
Form and Bean mapping

- org.juzu.Param
@Param
public class Setting
{
  private String path;
  public String getPath()
  {
    return path;
  }
  public void setPath(String path)
  {
    this.path = path;
  }
}
- Submit parameter meet to properties of @Param object
<input type="text" name="path" value="" />




                       www.exoplatform.com - Copyright 2012 eXo Platform   24
Scope


- Flash
      @FlashScoped

- Request
     @RequestScoped

- Session
     @SessionScoped




                      www.exoplatform.com - Copyright 2012 eXo Platform   25
Portlet preferences


- Every portlet will be provided a PortletPreferences object

@Inject
PortletPreferences preferences;

String grade = preferences.getValue("grade", "c");

preferences.setValue("grade", grade);




                         www.exoplatform.com - Copyright 2012 eXo Platform   26
Portlet mode and Window state


- By default, Juzu injects Portlet mode/Window state as a property in request context
object: JuzuPortlet.PORTLET_MODE, JuzuPortlet.WINDOW_STATE

Example:
@View
 public void index()
 {
   if (Request.getCurrent().getContext().getProperty(JuzuPortlet.PORTLET_MODE) ==
PortletMode.VIEW)
   {
      index.with().location("Ha Noi").temperature("30").render();
   }
   else
   {
      edit.render();
   }
 }



                         www.exoplatform.com - Copyright 2012 eXo Platform              27
Assets plugin


- Javascript

- Stylesheet




                www.exoplatform.com - Copyright 2012 eXo Platform   28
Assets plugin

@Application(defaultController =
org.sample.booking.controllers.Application.class)
@Portlet
@Assets(
  scripts = {
     @Script(id = "jquery", src = "/public/javascripts/jquery-1.7.1.min.js"),
     @Script(src = "/public/javascripts/jquery-ui-1.7.2.custom.min.js", depends =
"jquery"),
     @Script(src = "/public/javascripts/booking.js", depends = "ajax.app")
  },
  stylesheets = {
     @Stylesheet(src = "/public/stylesheets/main.css")
  }
)
package org.sample.booking;




                      www.exoplatform.com - Copyright 2012 eXo Platform             29
Ajax Plugin / Jquery extension
- Resource method
 @Ajax
 @Resource
 public void addGadgetURIToKey(String gadgetURI, String keyName){...}

- Jquery javascript api request
  var root = $(this).jz();
  root.find(".uris").jzLoad(
                 "OAuthStore.addGadgetURIToKey()",
                 {gadgetURI : gadgetURI,
                 keyName : keyName},
                 function() {});
- web.xml
<servlet>
   <servlet-name>AssetServlet</servlet-name>
   <servlet-class>org.juzu.impl.asset.AssetServlet</servlet-class>
   <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet-mapping>
   <servlet-name>AssetServlet</servlet-name>
   <url-pattern>/assets/*</url-pattern>
  </servlet-mapping>

                         www.exoplatform.com - Copyright 2012 eXo Platform   30
Others

- I18n - #[foo.bar]
- Bean Validation – JSR 303
- Errors
- Taglibs
- Portlet events
- Less compilation
- etc




                        www.exoplatform.com - Copyright 2012 eXo Platform   31
Demonstrate building portlets


- Setup environment
- Build
- Deploy




                      www.exoplatform.com - Copyright 2012 eXo Platform   32
Create Juzu Application

- Maven archetype

mvn archetype:generate 
 -DarchetypeGroupId=org.juzu 
 -DarchetypeArtifactId=juzu-archetype 
 -DarchetypeVersion=0.4.5-SNAPSHOT 
 -DgroupId=org.juzu 
 -DartifactId=juzu-sample 
 -Dversion=1.0




                       www.exoplatform.com - Copyright 2012 eXo Platform   33
Setup Eclipse environment




              www.exoplatform.com - Copyright 2012 eXo Platform   34
Setup Eclipse environment




              www.exoplatform.com - Copyright 2012 eXo Platform   35
Setup Eclipse environment




              www.exoplatform.com - Copyright 2012 eXo Platform   36
Setup Eclipse environment




              www.exoplatform.com - Copyright 2012 eXo Platform   37
M2E APT for Juzu portlet

Install m2e-apt plugin on Eclipse
http://download.jboss.org/jbosstools/updates/m2e-extensions/m2e-apt




See detail blog here:
https://community.jboss.org/en/tools/blog/2012/05/20/annotation-processing-support-in-
m2e-or-m2e-apt-100-is-out




                        www.exoplatform.com - Copyright 2012 eXo Platform                38
Annotation processor log

- target/generated/org/juzu/processor.log




                         www.exoplatform.com - Copyright 2012 eXo Platform   39
Demonstration




                www.exoplatform.com - Copyright 2012 eXo Platform   40
[Disscussion] comparision to others


- Webui
- Spring 3
- Strut 2
- Stripes
- Wicket
- Tapestry
- JSF
...




              www.exoplatform.com - Copyright 2012 eXo Platform   41
Criteria


- Speed to build: IDE tools
- Clearly extensible/plugable
- Documentation
- Testability
- Built-in features: Ajax, Validation, i18n, etc
- Page decorator
- Designer support
- Portability




                           www.exoplatform.com - Copyright 2012 eXo Platform   42
Resources
   Documentations and Screenshots



- https://github.com/juzu/juzu
- http://juzuweb.org/
- https://github.com/vietj/gatein-people
- https://github.com/kiennguyen/portlet-examples
Thank You
Questions?
Contact: kienna@exoplatform.com

More Related Content

What's hot

What's hot (20)

JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011
 
Angular js
Angular jsAngular js
Angular js
 
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
 
Java Portlet 2.0 (JSR 286) Specification
Java Portlet 2.0 (JSR 286) SpecificationJava Portlet 2.0 (JSR 286) Specification
Java Portlet 2.0 (JSR 286) Specification
 
Headless Drupal en pratique
Headless Drupal en pratiqueHeadless Drupal en pratique
Headless Drupal en pratique
 
Introduction to java standard portlets
Introduction to java standard portletsIntroduction to java standard portlets
Introduction to java standard portlets
 
Extend sdk
Extend sdkExtend sdk
Extend sdk
 
Symfony2, Backbone.js &amp; socket.io - SfLive Paris 2k13 - Wisembly
Symfony2, Backbone.js &amp; socket.io - SfLive Paris 2k13 - WisemblySymfony2, Backbone.js &amp; socket.io - SfLive Paris 2k13 - Wisembly
Symfony2, Backbone.js &amp; socket.io - SfLive Paris 2k13 - Wisembly
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Java Server Faces
Java Server FacesJava Server Faces
Java Server Faces
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
Ionic tabs template explained
Ionic tabs template explainedIonic tabs template explained
Ionic tabs template explained
 
Jetpack, with new features in 2021 GDG Georgetown IO Extended
Jetpack, with new features in 2021 GDG Georgetown IO ExtendedJetpack, with new features in 2021 GDG Georgetown IO Extended
Jetpack, with new features in 2021 GDG Georgetown IO Extended
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
 
Angular JS blog tutorial
Angular JS blog tutorialAngular JS blog tutorial
Angular JS blog tutorial
 
Building an app with Google's new suites
Building an app with Google's new suitesBuilding an app with Google's new suites
Building an app with Google's new suites
 
Jsf presentation
Jsf presentationJsf presentation
Jsf presentation
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 

Viewers also liked (7)

Guidelines notetaking
Guidelines notetakingGuidelines notetaking
Guidelines notetaking
 
Presentazione musella non vi dice ver b
Presentazione musella non vi dice ver bPresentazione musella non vi dice ver b
Presentazione musella non vi dice ver b
 
iOS UX by iMakeit4U
iOS UX by iMakeit4UiOS UX by iMakeit4U
iOS UX by iMakeit4U
 
Guidelines for Beginning Your Thesis Paper
Guidelines for Beginning Your Thesis PaperGuidelines for Beginning Your Thesis Paper
Guidelines for Beginning Your Thesis Paper
 
STIHL Southeast Direct Mail
STIHL Southeast Direct MailSTIHL Southeast Direct Mail
STIHL Southeast Direct Mail
 
Guidelines Note taking
Guidelines Note takingGuidelines Note taking
Guidelines Note taking
 
Library orientation bayshore
Library orientation bayshoreLibrary orientation bayshore
Library orientation bayshore
 

Similar to Juzu framework

MVC & SQL_In_1_Hour
MVC & SQL_In_1_HourMVC & SQL_In_1_Hour
MVC & SQL_In_1_Hour
Dilip Patel
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
Koubei Banquet
 
securing-portlets-with-spring-security.pdf
securing-portlets-with-spring-security.pdfsecuring-portlets-with-spring-security.pdf
securing-portlets-with-spring-security.pdf
jcarrey
 

Similar to Juzu framework (20)

How to develop nice portlet with Juzu framework
How to develop nice portlet with Juzu frameworkHow to develop nice portlet with Juzu framework
How to develop nice portlet with Juzu framework
 
Servlet 3.0
Servlet 3.0Servlet 3.0
Servlet 3.0
 
Jquery
JqueryJquery
Jquery
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
CRaSH: the shell for the Java Platform
CRaSH: the shell for the Java PlatformCRaSH: the shell for the Java Platform
CRaSH: the shell for the Java Platform
 
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
 
Job Managment Portlet
Job Managment PortletJob Managment Portlet
Job Managment Portlet
 
MVC & SQL_In_1_Hour
MVC & SQL_In_1_HourMVC & SQL_In_1_Hour
MVC & SQL_In_1_Hour
 
Java EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e MudançasJava EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e Mudanças
 
Batch Applications for the Java Platform
Batch Applications for the Java PlatformBatch Applications for the Java Platform
Batch Applications for the Java Platform
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
 
Banquet 42
Banquet 42Banquet 42
Banquet 42
 
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
 
AtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and Server
 
Introduction to struts
Introduction to strutsIntroduction to struts
Introduction to struts
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with example
 
Jsf
JsfJsf
Jsf
 
Advance jquery-plugin
Advance jquery-pluginAdvance jquery-plugin
Advance jquery-plugin
 
securing-portlets-with-spring-security.pdf
securing-portlets-with-spring-security.pdfsecuring-portlets-with-spring-security.pdf
securing-portlets-with-spring-security.pdf
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

Juzu framework

  • 1. Juzu framework Web framework for portlet development Kien Nguyen Portal team May 2012
  • 2. Agenda 1 −Concepts in Juzu framework − Introduction − Main concepts 2 −Develop portlets based Juzu framework − Features − How to develop portlets 3 −Demonstrate building portlets − Setup environment − Build, deploy, Test 4 −Some comparision to others − Webui portlets − Spring, Strut portlet www.exoplatform.com - Copyright 2012 eXo Platform 2
  • 3. Introduction - What is the juzu framework? - MVC model - Request life cycle + View, Action, Resource phases - Juzu Controllers - Juzu Application - Juzu running mode - Type safe parameters www.exoplatform.com - Copyright 2012 eXo Platform 3
  • 4. Introduction www.exoplatform.com - Copyright 2012 eXo Platform 4
  • 5. What is the Juzu? - Juzu is an open source project developed on GitHub project licensed under the LGPL 2.1 license - Source repository: https://github.com/juzu/juzu - Website: http://juzuweb.org/ - Author: Julien Viet www.exoplatform.com - Copyright 2012 eXo Platform 5
  • 6. What is the Juzu? - Juzu is a web framework based on MVC concepts for developing Portlet applications. - Develop powerful web applications - Emphasises on simplicity and type safety www.exoplatform.com - Copyright 2012 eXo Platform 6
  • 7. Concepts in Juzu MVC - Model-View-Controller www.exoplatform.com - Copyright 2012 eXo Platform 7
  • 8. Concepts in Juzu MVC - Model-View-Controller → Spring, Struts,.. and Juzu www.exoplatform.com - Copyright 2012 eXo Platform 8
  • 9. Request lifecycle in Juzu - View phase: Produce markup output aggregated within a page - Action phase: Process an action - Resource phase: produce any kind of output as a full response (i.e not in a page) www.exoplatform.com - Copyright 2012 eXo Platform 9
  • 10. Request lifecycle in Juzu View phase - View phases are mapped on GET requests - Idempotent - View parameters are identified to query parameters www.exoplatform.com - Copyright 2012 eXo Platform 10
  • 11. Request lifecycle in Juzu Action phase - Processing a link - The action phase is mapped on POST requests - Not idempotent - Action parameters are identified to form parameters - Action phase and POST requests should not be invoked more than one time www.exoplatform.com - Copyright 2012 eXo Platform 11
  • 12. Request lifecycle in Juzu Resource phase - GET request - Entire response - Use for Ajax, static resources like image, javascript, etc www.exoplatform.com - Copyright 2012 eXo Platform 12
  • 13. Juzu Controllers Controller is part C of MVC model - They are annotated methods of juzu application - Kinds of controllers are mapped to phases (View, Action, Resource) + @org.juzu.View + @org.juzu.Action + @org.juzu.Resource www.exoplatform.com - Copyright 2012 eXo Platform 13
  • 14. Juzu running mode - prod: production - dev: development www.exoplatform.com - Copyright 2012 eXo Platform 14
  • 15. Juzu Application Juzu app is a portlet application - Package info Store application information - Controllers - Templates - Models www.exoplatform.com - Copyright 2012 eXo Platform 15
  • 16. Type safe parameters Say about expression parameters in templates: - Easily to pass parameters from Controllers to templates - type safe with error checking automatically - By Annotation processor and Eclipse code completion www.exoplatform.com - Copyright 2012 eXo Platform 16
  • 17. Develop portlets based Juzu framework - Simple demo - Overview JuzuPortlet - Define fragments with #insert, #decorator, #include, #title - Template type safe parameters with #param - Actions - Bean mapping - Scope - Ajax - Portlet preferences - I18n - etc www.exoplatform.com - Copyright 2012 eXo Platform 17
  • 18. Develop portlets based Juzu framework Demo simple Juzu portlet www.exoplatform.com - Copyright 2012 eXo Platform 18
  • 19. JuzuPortlet - Is known as front controller of Juzu application - Navigate to Controllers - Navigate to running mode - Navigate to dependency injection container ... www.exoplatform.com - Copyright 2012 eXo Platform 19
  • 20. Define UI fragments - #{insert/} Insert a template into a template <div class="ShindigOAuth"> <div class="ONavigation"> <a href="@{OAuthStore.index()}"><<< Back to List</a> </div> <br /> #{insert/} </div> - #{decorator} Hook a template into a template #{decorate path=main.gtmpl/} www.exoplatform.com - Copyright 2012 eXo Platform 20
  • 21. Define UI fragments - #{include path=.../} Include a template <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="settings"> #{include path=settings.gtmpl/} </div> <div class="tab-pane fade" id="layout"> #{include path=layout.gtmpl/} </div> <div class="tab-pane fade" id="permission"> #{include path=permission.gtmpl/} </div> </div> - #{title value=...} Set portlet title #{title value='Hello Juzu'/} www.exoplatform.com - Copyright 2012 eXo Platform 21
  • 22. Template type safe parameters - Means errors checking during compile time - Use tag #param in template #{param name=location/} #{param name=temperature/} The weather temperature in ${location} is ${temperature} degrees. - Use paramters in controller @Path("index.gtmpl") @Inject org.exoplatform.example.templates.index index; @View public void index() { index.with().location("Ha Noi").temperature("30").render(); } www.exoplatform.com - Copyright 2012 eXo Platform 22
  • 23. Actions Actions are method annotated by the @Action annotation - In Templates: @{...} - In Controllers: @Action public Response add(String location) { } Example: <form action="@{add()}" method="post"> <input type="text" name="location" value=""/> <input type="submit"/> </form> www.exoplatform.com - Copyright 2012 eXo Platform 23
  • 24. Form and Bean mapping - org.juzu.Param @Param public class Setting { private String path; public String getPath() { return path; } public void setPath(String path) { this.path = path; } } - Submit parameter meet to properties of @Param object <input type="text" name="path" value="" /> www.exoplatform.com - Copyright 2012 eXo Platform 24
  • 25. Scope - Flash @FlashScoped - Request @RequestScoped - Session @SessionScoped www.exoplatform.com - Copyright 2012 eXo Platform 25
  • 26. Portlet preferences - Every portlet will be provided a PortletPreferences object @Inject PortletPreferences preferences; String grade = preferences.getValue("grade", "c"); preferences.setValue("grade", grade); www.exoplatform.com - Copyright 2012 eXo Platform 26
  • 27. Portlet mode and Window state - By default, Juzu injects Portlet mode/Window state as a property in request context object: JuzuPortlet.PORTLET_MODE, JuzuPortlet.WINDOW_STATE Example: @View public void index() { if (Request.getCurrent().getContext().getProperty(JuzuPortlet.PORTLET_MODE) == PortletMode.VIEW) { index.with().location("Ha Noi").temperature("30").render(); } else { edit.render(); } } www.exoplatform.com - Copyright 2012 eXo Platform 27
  • 28. Assets plugin - Javascript - Stylesheet www.exoplatform.com - Copyright 2012 eXo Platform 28
  • 29. Assets plugin @Application(defaultController = org.sample.booking.controllers.Application.class) @Portlet @Assets( scripts = { @Script(id = "jquery", src = "/public/javascripts/jquery-1.7.1.min.js"), @Script(src = "/public/javascripts/jquery-ui-1.7.2.custom.min.js", depends = "jquery"), @Script(src = "/public/javascripts/booking.js", depends = "ajax.app") }, stylesheets = { @Stylesheet(src = "/public/stylesheets/main.css") } ) package org.sample.booking; www.exoplatform.com - Copyright 2012 eXo Platform 29
  • 30. Ajax Plugin / Jquery extension - Resource method @Ajax @Resource public void addGadgetURIToKey(String gadgetURI, String keyName){...} - Jquery javascript api request var root = $(this).jz(); root.find(".uris").jzLoad( "OAuthStore.addGadgetURIToKey()", {gadgetURI : gadgetURI, keyName : keyName}, function() {}); - web.xml <servlet> <servlet-name>AssetServlet</servlet-name> <servlet-class>org.juzu.impl.asset.AssetServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping> <servlet-name>AssetServlet</servlet-name> <url-pattern>/assets/*</url-pattern> </servlet-mapping> www.exoplatform.com - Copyright 2012 eXo Platform 30
  • 31. Others - I18n - #[foo.bar] - Bean Validation – JSR 303 - Errors - Taglibs - Portlet events - Less compilation - etc www.exoplatform.com - Copyright 2012 eXo Platform 31
  • 32. Demonstrate building portlets - Setup environment - Build - Deploy www.exoplatform.com - Copyright 2012 eXo Platform 32
  • 33. Create Juzu Application - Maven archetype mvn archetype:generate -DarchetypeGroupId=org.juzu -DarchetypeArtifactId=juzu-archetype -DarchetypeVersion=0.4.5-SNAPSHOT -DgroupId=org.juzu -DartifactId=juzu-sample -Dversion=1.0 www.exoplatform.com - Copyright 2012 eXo Platform 33
  • 34. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 34
  • 35. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 35
  • 36. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 36
  • 37. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 37
  • 38. M2E APT for Juzu portlet Install m2e-apt plugin on Eclipse http://download.jboss.org/jbosstools/updates/m2e-extensions/m2e-apt See detail blog here: https://community.jboss.org/en/tools/blog/2012/05/20/annotation-processing-support-in- m2e-or-m2e-apt-100-is-out www.exoplatform.com - Copyright 2012 eXo Platform 38
  • 39. Annotation processor log - target/generated/org/juzu/processor.log www.exoplatform.com - Copyright 2012 eXo Platform 39
  • 40. Demonstration www.exoplatform.com - Copyright 2012 eXo Platform 40
  • 41. [Disscussion] comparision to others - Webui - Spring 3 - Strut 2 - Stripes - Wicket - Tapestry - JSF ... www.exoplatform.com - Copyright 2012 eXo Platform 41
  • 42. Criteria - Speed to build: IDE tools - Clearly extensible/plugable - Documentation - Testability - Built-in features: Ajax, Validation, i18n, etc - Page decorator - Designer support - Portability www.exoplatform.com - Copyright 2012 eXo Platform 42
  • 43. Resources Documentations and Screenshots - https://github.com/juzu/juzu - http://juzuweb.org/ - https://github.com/vietj/gatein-people - https://github.com/kiennguyen/portlet-examples