How to Extend the CC-Whiteboard

1. How to Extend the CC-Whiteboard Martin Mühlpfordt Fraunhofer IPSI Darmstadt martin.muehlpfordt@ipsi.fraunhofer.de

2. Today • Concepts of ConcertChat: • Principles • Overall architecture • Whiteboard: • From a user action to a drawing • Data model: object • Basic principle: Model-view-controller • Tools concept • How to register a tool • First extension: Simple Tables

3. Evolution of ConcertChat Bo Xiao MM Notebook Whiteboard Chatblocks Chat messaging layer CC Messaging layer Daniel Tietze DyCE Groupware framework Replication Axel Guicking Agilo messaging framework Aposdle Mapper VMT DigiMod L³ ALBA ConcertChat 2001 2002 2003 2004 2005 2006

4. ConcertChat Principles • Heavy-weight clients, light-weight server • Message-based • Channels • Sessions • channel + user list + awareness model • Modular, component-based, etc. pp.

5. ConcertChat Architecture Channel-based messaging • Lobby • Each room Object replication • Users • List of users • Rooms • Different lists of rooms Client Chat Whiteboard Awareness Object Actions Modifications Messages Information Channel = Room Replicated object Server Persistency

6. The ConcertChat Layers (Client side) Component/ Application Layer Chat Chat messages Login Pane Userlist User Room Whiteboard Commands Awareness Operations ConcertChat Layer Object replication Channels Login History Session Message container Framework Bridge Agilo Implementation AgiloChannel Agilo messages Agilo Message Handling Outqueue Message Router Inqueue Connection Layer Marshaller HTTP, NIO

7. Whiteboard

8. Whiteboard concept: Commands • All actions are Commands: • Creating and deleting objects, • resizing, moving, changing color etc • History: c1, c2, ... cn • Whiteboard states: 0, 1, ..., n • Whiteboard state m is reconstructed from state k • m>k: by executing ck+1, ... cm, or • m<k: by undoing cm, ... ck+1 • State: all existing objects in their appropriate configuration (size, location, content, ...)

9. Whiteboard concept: Commands II Depreceated

10. Flow of command User action ShownWorld Command VersionReconstructor CommandHandler CommandHistory E.g. ConcertChat

11. Whiteboard concept: objects  Stuffs Not yet used No longer needed

12. Editor View EditorManager: Maps all kinds of stuffs to editors RendererManager: Maps all kinds of stuffs to views Stuff Model-View-Controller: Overview Controller Model View Viewer Viewer CommandHandler CommandHistory ShownWorld: all objects of the current state

13. Model-View-Controller: Example Controller Model View Viewer Viewer CommandHandler CommandHistory ShownWorld: all objects of the current state TextStuffEditor TextView EditorManager: TextStuff TextStuffEditor RendererManager: TextStuff TextView TextStuff

14. Interaction concept: • By selecting a tool in the tool bar • Mouse events are delegated to tool specific MouseManipulator • Usually the mouse gesture describes the new object • When mouse is released, tool creates a command (or starts editing the content) • Double click on object: editor is instantiated • Resizing, moving, deleting, copy and paste you get for free

15. Resizing & moving & color changing ... • SelectTool: different manipulators for resizing and moving • After mouse released, an appropriate command is sent

16. Tools configuration • Registration in tools.xml

17. Example

18. First Example: Simple Tables • What is needed? • Description of a table: • Size, location, content: TableStuff • A view: TableView • An editor: TableEditor • A button: TableTool • A mouse handler: TableCreateManipulator • A change command: ChangeTableCommand

19. IDE setup • Install Java SDK 1.4_XX • Install IntelliJ Idea • Download http://home.old.mathforum.org/concertChat/dev.zip • Unpack dev.zip to C:\ • Double click on C:\dev\WhiteboardExtension.ipr • Check project settings

20. Next steps • Concurrency control: Handling conflicting actions • Side effects of actions: • deleting an object which has connectors • deleting a MindMap node • Deployment of extensions: • Building a JAR archive • Signing it with a certificate • Roll-out

21. How to deploy an extension?

22. Java Web Start ConcertChat (Web) Server Browser Java Web Start Client „http://old..../vmtClient.jsp“ vmtClient.jnlp vmtClient.jnlp Get Latest versions: vmt.jar, ...., myExtension.jar

23. Where is the web server? • It‘s the jetty module of the Agilo server: • Jetty: open source servlet container • runs inside the same JVM • is used for: • Deployment of client application via Java Web Start • Web interface • Repository for client configurations • Low level HTTP connection between clients and server

24. Server folder structure • bin: general configuration files and start up plus shut down scripts • modules: agilo modules configuration • libs: jar files used by server • logs: log files • htdocs: content root folder for http-server (used for task descriptions) • webapps: web applications folder • http-connection.war: Agilo http-connection • concertChat: ConcertChat web application Agilo Server Web Server

25. More Details Johann‘s great cc-map: Next two slides

26. ConcertChat Server Architecture:usr/local/VMTconcertchat/ ./vmt-server/ ./vmt-server/libs/concert/ ./vmt-server/webapps/concertChat/res/ Awareness messages (e.g. Online, Active, etc.) Roles, not used? ./vmt-server/bin Export Transcript Through Web Interface. export_de.properties export_en.properties IReference-mapping.properties DB! * * gui_de.properties Tip tools, for non-whiteboard Elements inside room * ./vmt-server/libs/ext gui_en.properties gui_de.properties Insert Image dialogues gui_en.properties * gui_de.properties Login message for original concertChat gui_en.properties pages.properties Create new Room on the Web pages_de.properties pages_en.properties ./vmt-server/bin/modules gui_de.properties Not implemented? gui_en.properties concert_de.properties Not in use concert.properties * Port #! gui_de.properties Open, Save, SaveAs? gui_en.properties screenshot_de.properties * Tip tools for Screenshot screenshot_en.properties gui_de.properties OK, Cancel, Apply, etc. gui_en.properties * ./vmt-server/htdocs Lobby GUI (e.g. Tabs) gui.properties Version info LearnerAbout.properties ./vmt-server/logs/ Paste Icons, not in use? icons.properties Tasks! Whiteboard elements (e.g. default colors) ./vmt-server/webapps/ gui.properties

27. ./vmt-server/webapps/concertChat/ Configuration of the server Before starting you have to configure: - bin/emailServer.properties (see there) - bin/concertchat-persistency.properties - bin/modules/jetty-connector: the port must be the same as last time the server was used with the same database. Because the URLs (containing the port) of the Tasks must be the same! - server.bat or start.sh: let JAVA_HOME point to the jdk root * Phrases used by the jsps * Internationalization All phrases used by the application comes from files stored in webapps/concertChat/res. The concrete path to a *.properties file gives some hints about the scope of that file. For instance de/fhg/ipsi/chatblocks2/res/gui_en.properties defines the labels of the chat related ui elements. All phrases used by the jsps comes from files stored in webapps/WEB-INF/classes. The name of the property file corresponds with the name of the jsp. Adding new languages can be done by adding new language files. For naming convention see http://java.sun.com/j2se/1.4.2/docs/api/java/util/ResourceBundle.html#getBundle(java.lang.String, java.util.Locale, java.lang.ClassLoader) That is, if you want to add a spanish chatblocks version, you have to create a file "gui_es.properties" containing the translations. Last but not least: the Welcome page in the lobby is loaded from concertChat/lobby_welcome.jsp. You can add additional information there and you can localize it using the jsp mechanisms. Welcome Tab! * App! *

28. Client Deployment via JWS

29. JSP for creating vmt*.jnlp • <%@ page import="de.fhg.ipsi.vmt.client.XYZClient"%> • <% response.setContentType("application/x-java-jnlp-file");%> • <?xml version="1.0" encoding="utf-8"?> • <jnlp spec="1.0+" codebase="http://<%= • request.getServerName() + ":" + • request.getServerPort() + request.getContextPath()%>"> • <information> • … • </information> • <security><all-permissions/></security> • <resources> • <j2se version="1.4+"/> • <jar href="lib/vmt.jar"/> • <jsp:include page="/agiloclientconfig/cc-clientJars.jspf"/> • <jsp:include page="/agiloclientconfig/cc-clientExtJars.jspf"/> • <jsp:include page="/agiloclientconfig/cc-clientProps.jspf"/> • </resources> • <application-desc main-class="<%=XYZClient.class.getName()%>"/> • </jnlp>

30. Signing jars • All jars must be signed by same certificate • Get your keystore, alias, password • Use $JDK$/bin/jarsigner to sign the jars • For more details see http://java.sun.com/docs/books/tutorial/deployment/jar/signing.html

31. Deployment Steps • Check serialVersionUID. Do 2 to 11 on test server. TEST IT. • Bundle your extension into a jar (jar.exe or IDEA) • Sign ALL jars with your keystore. • Shut down server • Copy it into libs/ext • Copy it into webapps/concertChat/lib • Copy modified *.properties to webapps/concertChat/res • Modify webapps/concertChat/res/de/fhg/ipsi/whiteboard/system/ extension/res/tools.xml • Modify bin/startup.sh • Modify webapps/concertChat/agiloclientconfig/cc-clientExtJars.jspf • Start up server

32. Recommendations • Setup a version management • CVS/subversion integration in IDEA • Create a build file: ant script • See http://ant.apache.org/ • Integrated in IDEA

33. Accessing data from database

34. The ConcertChat components (server side) Agilo Jetty Agilo Modules ConcertChat web application: PersistencyBackend ChannelModule SessionModule VMTModule Object Manager ReplicationModule AwarenessModule Message Handling Connection Layer: webapps/http-connection.war

35. CC world on server side • Channel world: • PersistencyManager. getChannelStorage(id)  IChannelStorage: • getSize(), • getLastUse(), • getLastMessage(), • queryHistory(xyz) • Object world: • ObjectReference.getObject(id)  SharedObject • But here we need more details. Let’s do it later.

36. Conclusion: • Very restricted database access! • Requirements for changes needed