juzu framework
TRANSCRIPT
Juzu frameworkWeb framework for portlet development
Kien NguyenPortal team
May 2012
www.exoplatform.com - Copyright 2012 eXo Platform 2
1
2
3
4
Agenda
−Some comparision to others−Webui portlets−Spring, Strut portlet
−Concepts in Juzu framework− Introduction−Main concepts
−Develop portlets based Juzu framework−Features−How to develop portlets
−Demonstrate building portlets−Setup environment−Build, deploy, Test
www.exoplatform.com - Copyright 2012 eXo Platform 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 4
Introduction
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 7
Concepts in JuzuMVC - Model-View-Controller
www.exoplatform.com - Copyright 2012 eXo Platform 8
Concepts in JuzuMVC - Model-View-Controller
→ Spring, Struts,.. and Juzu
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 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 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 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 14
Juzu running mode
- prod: production
- dev: development
www.exoplatform.com - Copyright 2012 eXo Platform 15
Juzu Application
Juzu app is a portlet application
- Package infoStore application information
- Controllers
- Templates
- Models
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 18
Develop portlets based Juzu framework
Demo simple Juzu portlet
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 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 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 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 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 25
Scope
- Flash@FlashScoped
- Request@RequestScoped
- Session@SessionScoped
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 28
Assets plugin
- Javascript
- Stylesheet
www.exoplatform.com - Copyright 2012 eXo Platform 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 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 31
Others
- I18n - #[foo.bar]- Bean Validation – JSR 303- Errors- Taglibs- Portlet events- Less compilation- etc
www.exoplatform.com - Copyright 2012 eXo Platform 32
Demonstrate building portlets
- Setup environment- Build- Deploy
www.exoplatform.com - Copyright 2012 eXo Platform 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 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
Setup Eclipse environment
www.exoplatform.com - Copyright 2012 eXo Platform 38
M2E APT for Juzu portlet
Install m2e-apt plugin on Eclipsehttp://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 39
Annotation processor log
- target/generated/org/juzu/processor.log
www.exoplatform.com - Copyright 2012 eXo Platform 40
Demonstration
www.exoplatform.com - Copyright 2012 eXo Platform 41
[Disscussion] comparision to others
- Webui- Spring 3- Strut 2- Stripes- Wicket- Tapestry- JSF...
www.exoplatform.com - Copyright 2012 eXo Platform 42
Criteria
- Speed to build: IDE tools- Clearly extensible/plugable- Documentation- Testability- Built-in features: Ajax, Validation, i18n, etc- Page decorator- Designer support- Portability
ResourcesDocumentations and Screenshots
- https://github.com/juzu/juzu- http://juzuweb.org/- https://github.com/vietj/gatein-people- https://github.com/kiennguyen/portlet-examples
Thank YouQuestions? Contact: [email protected]