www.eu-etics.org

INFSOM-RI-026753

The ETICS Web PortalThe ETICS Web PortalWP5 activityWP5 activity

Tomasz KokoszkaTomasz Kokoszka

CERN/WP5CERN/WP5

INFSOM-RI-026753

Agenda

• Motivation and goals for the ETICS web-portalMotivation and goals for the ETICS web-portal• ArchitectureArchitecture• Technology behind (GWT)Technology behind (GWT)• Current status of workCurrent status of work

• 15 slides, ~20minutes15 slides, ~20minutes

INFSOM-RI-026753

Motivation, goals

• Single start point for all web base applicationsSingle start point for all web base applications• Common look and behaviorCommon look and behavior• Implementation of common functionality, likeImplementation of common functionality, like

– AuthenticationAuthentication– Web-service accessWeb-service access– Mail sendingMail sending– Exception handlingException handling– Common UI componentsCommon UI components– Configuration file handlingConfiguration file handling

• Interaction between applicationsInteraction between applications

• That is exactly what ETICS portal is aboutThat is exactly what ETICS portal is about

INFSOM-RI-026753

Example

• https://etics-test.cern.ch:8443/eticsPortal/https://etics-test.cern.ch:8443/eticsPortal/banner

user information

Tabs to select an application (portlet)

Selected application

Common UI components

INFSOM-RI-026753

Embedded applications (portlets)

• User self registrationUser self registration• AdministrationAdministration• Web ClientWeb Client• ETICS Repository browserETICS Repository browser• My ETICSMy ETICS

INFSOM-RI-026753

Architecture - client-server

Web browser Application server Remote services

Rich client

technology:

GWT

Java Script

CSS

Server

technology:

GWT, Java

Web-Service

build-system

Web-Service

repository

Real simple

RPC

(GWT)

INFSOM-RI-026753

Implementation based on GWT

• Google Web ToolkitGoogle Web Toolkit is a framework to program client is a framework to program client side of web applications and interaction between client side of web applications and interaction between client and server side using Java language.and server side using Java language.

• Provides a compiler from Java 1.4 (with limitations) to Provides a compiler from Java 1.4 (with limitations) to JavaScript:JavaScript:– Generates separate sets of JS files for every supported browserGenerates separate sets of JS files for every supported browser– During execution time loads one proper for remote browserDuring execution time loads one proper for remote browser

INFSOM-RI-026753

Implementation based on GWT

• Main advantages:Main advantages:– Great performance and browser compatibilityGreat performance and browser compatibility– Static code checking (compilation), types, build-in serialization Static code checking (compilation), types, build-in serialization

mechanismmechanism– Isolates from HTML, all visual components and actions wrapped Isolates from HTML, all visual components and actions wrapped

inside GWT widgets (similar to SWING approach)inside GWT widgets (similar to SWING approach)– Look customized by CSSLook customized by CSS

• GWT Real Simple RPC mechanism:GWT Real Simple RPC mechanism:– Automatic object serialization/deserialization (similar to Automatic object serialization/deserialization (similar to

java.io.Serializable)java.io.Serializable)– Only asynchronous callsOnly asynchronous calls– Communication initiated only by client sideCommunication initiated only by client side

INFSOM-RI-026753

Architecture - components

portal

portlet 1

portlet 2

portlet N commons

BA

Module A depends on B

INFSOM-RI-026753

Architecture - components

• PortalPortal– Starting point:Starting point:

– Authenticates remote user, initializes server sideAuthenticates remote user, initializes server side– Initializes registered portlets, organizes portlets in tabsInitializes registered portlets, organizes portlets in tabs– Provides information exchange mechanism for portletsProvides information exchange mechanism for portlets

– ETICS component name: org.etics.portal.new-applicationETICS component name: org.etics.portal.new-application– Artifact: eticsPortalWA.warArtifact: eticsPortalWA.war

INFSOM-RI-026753

Architecture - components

• CommonsCommons– Provides common functionality:Provides common functionality:

– Reusable UI components + CSSReusable UI components + CSS– Wrapper for build web-service based on 2 design pattern: faWrapper for build web-service based on 2 design pattern: faççade & ade &

transport objectstransport objects– Mail senderMail sender– Configuration file loaderConfiguration file loader– AuthenticationAuthentication

– ETICS component name: org.etics.portal.web-commonsETICS component name: org.etics.portal.web-commons– Artifact: eticsWebCommons.jarArtifact: eticsWebCommons.jar

INFSOM-RI-026753

Architecture - components

• Portlet:Portlet:– Emended application providing starting point in form of a Java Emended application providing starting point in form of a Java

class implementing dedicated interfaceclass implementing dedicated interface– Implements both client & server sideImplements both client & server side– ETICS component name: org.etics.*.web-portletETICS component name: org.etics.*.web-portlet– Artifact: etics*Portlet.jarArtifact: etics*Portlet.jar

INFSOM-RI-026753

Status

• Portal:Portal:– Prototype availablePrototype available– Missing parts:Missing parts:

– Mechanism to exchange information between portletsMechanism to exchange information between portlets

– Mechanism to automatically add new portletsMechanism to automatically add new portlets

– DocumentationDocumentation

• Commons:Commons:– Prototype availablePrototype available– Missing parts:Missing parts:

– Major UI components, like ETICS module hierarchy, Wizard creator etc.Major UI components, like ETICS module hierarchy, Wizard creator etc.

– CSS compliant with ETICS color schemeCSS compliant with ETICS color scheme

– DocumentationDocumentation

• Portlets:Portlets:– User self registration – availableUser self registration – available– Administration – in progressAdministration – in progress– My ETICS – in design stageMy ETICS – in design stage

INFSOM-RI-026753

People involved

• Marc-Elian BMarc-Elian Bégin – managerégin – manager• Lorenzo Dini – consultance, designLorenzo Dini – consultance, design• Alberto Conte – CSS Alberto Conte – CSS refactorrefactor• Tomasz Kokoszka – main Tomasz Kokoszka – main developerdeveloper

INFSOM-RI-026753

Questions

QUESTIONS