Juzu frameworkWeb framework for portlet development                                        Kien Nguyen                    ...
Agenda1   −Concepts in Juzu framework     − Introduction     − Main concepts2    −Develop portlets based Juzu framework   ...
Introduction- What is the juzu framework?- MVC model- Request life cycle + View, Action, Resource phases- Juzu Controllers...
Introduction               www.exoplatform.com - Copyright 2012 eXo Platform   4
What is the Juzu?- Juzu is an open source project developed on GitHub project licensed underthe LGPL 2.1 license- Source r...
What is the Juzu?- Juzu is a web framework based on MVC concepts for developing Portletapplications.- Develop powerful web...
Concepts in JuzuMVC - Model-View-Controller                    www.exoplatform.com - Copyright 2012 eXo Platform   7
Concepts in JuzuMVC - Model-View-Controller→ Spring, Struts,.. and Juzu                      www.exoplatform.com - Copyrig...
Request lifecycle in Juzu- View phase: Produce markup output aggregated within a page- Action phase: Process an action- Re...
Request lifecycle in JuzuView phase- View phases are mapped on GET requests- Idempotent- View parameters are identified to...
Request lifecycle in JuzuAction phase- Processing a link- The action phase is mapped on POST requests- Not idempotent- Act...
Request lifecycle in JuzuResource phase- GET request- Entire response- Use for Ajax, static resources like image, javascri...
Juzu ControllersController is part C of MVC model- They are annotated methods of juzu application- Kinds of controllers ar...
Juzu running mode- prod: production- dev: development                     www.exoplatform.com - Copyright 2012 eXo Platfor...
Juzu ApplicationJuzu app is a portlet application- Package infoStore application information- Controllers- Templates- Mode...
Type safe parametersSay about expression parameters in templates:- Easily to pass parameters from Controllers to templates...
Develop portlets based Juzu framework- Simple demo- Overview JuzuPortlet- Define fragments with #insert, #decorator, #incl...
Develop portlets based Juzu framework                Demo simple Juzu portlet              www.exoplatform.com - Copyright...
JuzuPortlet- Is known as front controller of Juzu application- Navigate to Controllers- Navigate to running mode- Navigate...
Define UI fragments- #{insert/}Insert a template into a template<div class="ShindigOAuth">     <div class="ONavigation">  ...
Define UI fragments- #{include path=.../}Include a template<div id="myTabContent" class="tab-content">       <div class="t...
Template type safe parameters- Means errors checking during compile time- Use tag #param in template#{param name=location/...
ActionsActions are method annotated by the @Action annotation- In Templates:   @{...}- In Controllers:   @Action   public ...
Form and Bean mapping- org.juzu.Param@Parampublic class Setting{  private String path;  public String getPath()  {    retu...
Scope- Flash      @FlashScoped- Request     @RequestScoped- Session     @SessionScoped                      www.exoplatfor...
Portlet preferences- Every portlet will be provided a PortletPreferences object@InjectPortletPreferences preferences;Strin...
Portlet mode and Window state- By default, Juzu injects Portlet mode/Window state as a property in request contextobject: ...
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 = ...
Ajax Plugin / Jquery extension- Resource method @Ajax @Resource public void addGadgetURIToKey(String gadgetURI, String key...
Others- I18n - #[foo.bar]- Bean Validation – JSR 303- Errors- Taglibs- Portlet events- Less compilation- etc              ...
Demonstrate building portlets- Setup environment- Build- Deploy                      www.exoplatform.com - Copyright 2012 ...
Create Juzu Application- Maven archetypemvn archetype:generate  -DarchetypeGroupId=org.juzu  -DarchetypeArtifactId=juzu-ar...
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 portletInstall m2e-apt plugin on Eclipsehttp://download.jboss.org/jbosstools/updates/m2e-extensions/m2e-a...
Annotation processor log- target/generated/org/juzu/processor.log                         www.exoplatform.com - Copyright ...
Demonstration                www.exoplatform.com - Copyright 2012 eXo Platform   40
[Disscussion] comparision to others- Webui- Spring 3- Strut 2- Stripes- Wicket- Tapestry- JSF...              www.exoplatf...
Criteria- Speed to build: IDE tools- Clearly extensible/plugable- Documentation- Testability- Built-in features: Ajax, Val...
Resources   Documentations and Screenshots- https://github.com/juzu/juzu- http://juzuweb.org/- https://github.com/vietj/ga...
Thank YouQuestions?Contact: kienna@exoplatform.com
Upcoming SlideShare
Loading in...5
×

Juzu framework

2,131

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,131
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Juzu framework

  1. 1. Juzu frameworkWeb framework for portlet development Kien Nguyen Portal team May 2012
  2. 2. Agenda1 −Concepts in Juzu framework − Introduction − Main concepts2 −Develop portlets based Juzu framework − Features − How to develop portlets3 −Demonstrate building portlets − Setup environment − Build, deploy, Test4 −Some comparision to others − Webui portlets − Spring, Strut portlet www.exoplatform.com - Copyright 2012 eXo Platform 2
  3. 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. 4. Introduction www.exoplatform.com - Copyright 2012 eXo Platform 4
  5. 5. What is the Juzu?- Juzu is an open source project developed on GitHub project licensed underthe 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. 6. What is the Juzu?- Juzu is a web framework based on MVC concepts for developing Portletapplications.- Develop powerful web applications- Emphasises on simplicity and type safety www.exoplatform.com - Copyright 2012 eXo Platform 6
  7. 7. Concepts in JuzuMVC - Model-View-Controller www.exoplatform.com - Copyright 2012 eXo Platform 7
  8. 8. Concepts in JuzuMVC - Model-View-Controller→ Spring, Struts,.. and Juzu www.exoplatform.com - Copyright 2012 eXo Platform 8
  9. 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 apage) www.exoplatform.com - Copyright 2012 eXo Platform 9
  10. 10. Request lifecycle in JuzuView 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. 11. Request lifecycle in JuzuAction 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. 12. Request lifecycle in JuzuResource phase- GET request- Entire response- Use for Ajax, static resources like image, javascript, etc www.exoplatform.com - Copyright 2012 eXo Platform 12
  13. 13. Juzu ControllersController 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. 14. Juzu running mode- prod: production- dev: development www.exoplatform.com - Copyright 2012 eXo Platform 14
  15. 15. Juzu ApplicationJuzu app is a portlet application- Package infoStore application information- Controllers- Templates- Models www.exoplatform.com - Copyright 2012 eXo Platform 15
  16. 16. Type safe parametersSay 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. 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. 18. Develop portlets based Juzu framework Demo simple Juzu portlet www.exoplatform.com - Copyright 2012 eXo Platform 18
  19. 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. 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. 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. 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. 23. ActionsActions 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. 24. Form and Bean mapping- org.juzu.Param@Parampublic 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. 25. Scope- Flash @FlashScoped- Request @RequestScoped- Session @SessionScoped www.exoplatform.com - Copyright 2012 eXo Platform 25
  26. 26. Portlet preferences- Every portlet will be provided a PortletPreferences object@InjectPortletPreferences preferences;String grade = preferences.getValue("grade", "c");preferences.setValue("grade", grade); www.exoplatform.com - Copyright 2012 eXo Platform 26
  27. 27. Portlet mode and Window state- By default, Juzu injects Portlet mode/Window state as a property in request contextobject: JuzuPortlet.PORTLET_MODE, JuzuPortlet.WINDOW_STATEExample:@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. 28. Assets plugin- Javascript- Stylesheet www.exoplatform.com - Copyright 2012 eXo Platform 28
  29. 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. 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. 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. 32. Demonstrate building portlets- Setup environment- Build- Deploy www.exoplatform.com - Copyright 2012 eXo Platform 32
  33. 33. Create Juzu Application- Maven archetypemvn 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. 34. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 34
  35. 35. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 35
  36. 36. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 36
  37. 37. Setup Eclipse environment www.exoplatform.com - Copyright 2012 eXo Platform 37
  38. 38. M2E APT for Juzu portletInstall m2e-apt plugin on Eclipsehttp://download.jboss.org/jbosstools/updates/m2e-extensions/m2e-aptSee 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. 39. Annotation processor log- target/generated/org/juzu/processor.log www.exoplatform.com - Copyright 2012 eXo Platform 39
  40. 40. Demonstration www.exoplatform.com - Copyright 2012 eXo Platform 40
  41. 41. [Disscussion] comparision to others- Webui- Spring 3- Strut 2- Stripes- Wicket- Tapestry- JSF... www.exoplatform.com - Copyright 2012 eXo Platform 41
  42. 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. 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
  44. 44. Thank YouQuestions?Contact: kienna@exoplatform.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×