1. www.eu-etics.org INFSOM-RI-026753 The ETICS Web Portal WP5 activity Tomasz Kokoszka CERN/WP5

2. 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

3. 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 –Authentication –Web-service access –Mail sending –Exception handling –Common UI components –Configuration file handling Interaction between applicationsInteraction between applications That is exactly what ETICS portal is aboutThat is exactly what ETICS portal is about

4. 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

5. INFSOM-RI-026753 Embedded applications (portlets) User self registrationUser self registration AdministrationAdministration Web ClientWeb Client ETICS Repository browserETICS Repository browser My ETICSMy ETICS

6. INFSOM-RI-026753 Architecture - client-server Web browserApplication serverRemote services Rich client technology: GWT Java Script CSS Server technology: GWT, Java Web-Service build-system Web-Service repository Real simple RPC (GWT)

7. INFSOM-RI-026753 Implementation based on GWT Google Web Toolkit is a framework to program client side of web applications and interaction between client and server side using Java language.Google Web Toolkit is a framework to program client side of web applications and interaction between client and server side using Java language. Provides a compiler from Java 1.4 (with limitations) to JavaScript:Provides a compiler from Java 1.4 (with limitations) to JavaScript: –Generates separate sets of JS files for every supported browser –During execution time loads one proper for remote browser

8. INFSOM-RI-026753 Implementation based on GWT Main advantages:Main advantages: –Great performance and browser compatibility –Static code checking (compilation), types, build-in serialization mechanism –Isolates from HTML, all visual components and actions wrapped inside GWT widgets (similar to SWING approach) –Look customized by CSS GWT Real Simple RPC mechanism:GWT Real Simple RPC mechanism: –Automatic object serialization/deserialization (similar to java.io.Serializable) –Only asynchronous calls –Communication initiated only by client side

9. INFSOM-RI-026753 Architecture - components portal portlet 1 portlet 2 portlet N commons BA Module A depends on B

10. INFSOM-RI-026753 Architecture - components PortalPortal –Starting point: –Authenticates remote user, initializes server side –Initializes registered portlets, organizes portlets in tabs –Provides information exchange mechanism for portlets –ETICS component name: org.etics.portal.new-application –Artifact: eticsPortalWA.war

11. INFSOM-RI-026753 Architecture - components CommonsCommons –Provides common functionality: –Reusable UI components + CSS –Wrapper for build web-service based on 2 design pattern: façade & transport objects –Mail sender –Configuration file loader –Authentication –ETICS component name: org.etics.portal.web-commons –Artifact: eticsWebCommons.jar

12. INFSOM-RI-026753 Architecture - components Portlet:Portlet: –Emended application providing starting point in form of a Java class implementing dedicated interface –Implements both client & server side –ETICS component name: org.etics.*.web-portlet –Artifact: etics*Portlet.jar

13. INFSOM-RI-026753 Status Portal:Portal: –Prototype available –Missing parts: –Mechanism to exchange information between portlets –Mechanism to automatically add new portlets –Documentation Commons:Commons: –Prototype available –Missing parts: –Major UI components, like ETICS module hierarchy, Wizard creator etc. –CSS compliant with ETICS color scheme –Documentation Portlets:Portlets: –User self registration – available –Administration – in progress –My ETICS – in design stage

14. INFSOM-RI-026753 People involved Marc-Elian Bégin – managerMarc-Elian Bégin – manager Lorenzo Dini – consultance, designLorenzo Dini – consultance, design Alberto Conte – CSS refactorAlberto Conte – CSS refactor Tomasz Kokoszka – main developerTomasz Kokoszka – main developer

15. INFSOM-RI-026753 Questions QUESTIONS