Juzu framework

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


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


Introduction


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

https://github.com/juzu/juzu

http://juzuweb.org/


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


Concepts in JuzuMVC - Model-View-Controller


Concepts in JuzuMVC - Model-View-Controller

→ Spring, Struts,.. and Juzu


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)



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



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



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


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


Juzu running mode

- prod: production

- dev: development


Juzu Application

Juzu app is a portlet application

- Package infoStore application information

- Controllers

- Templates

- Models


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


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


Develop portlets based Juzu framework

Demo simple Juzu portlet


JuzuPortlet

- Is known as front controller of Juzu application

- Navigate to Controllers

- Navigate to running mode

- Navigate to dependency injection container

...


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/}


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'/}


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(); }


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>


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="" />


Scope

- Flash@FlashScoped

- Request@RequestScoped

- Session@SessionScoped


Portlet preferences

- Every portlet will be provided a PortletPreferences object

@InjectPortletPreferences preferences;

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

preferences.setValue("grade", grade);


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(); } }


Assets plugin

- Javascript

- Stylesheet


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;


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>


Others

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


Demonstrate building portlets

- Setup environment- Build- Deploy


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


Setup Eclipse environment








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

http://download.jboss.org/jbosstools/updates/m2e-extensions/m2e-apt


Annotation processor log

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


Demonstration


[Disscussion] comparision to others

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


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

https://github.com/vietj/gatein-people

Thank YouQuestions? Contact: [email protected]

Juzu framework

Technology

juzu view phase

juzu frameworkdemo simple

juzu controllerscontroller

juzu framework features

juzu frameworkweb framework

controller of juzu application

exo platform11

juzu applicationjuzu