How to Extend the CC-Whiteboard Martin Mühlpfordt Fraunhofer

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

Today 4 Concepts of Concert. Chat: • Principles • Overall architecture 4 Whiteboard: • From a user action to a drawing • Data model: object • Basic principle: Model-view-controller • Tools concept • How to register a tool 4 First extension: Simple Tables © M. Mühlpfordt 2006

Evolution of Concert. Chat Bo Xiao MM Notebook Whiteboard Chatblocks Chat messaging layer Daniel Dy. CE Groupware framework CC Messaging layer Tietze Replication Axel Guicking Agilo messaging framework Aposdle Mapper VMT L³ © M. Mühlpfordt 2001 2006 Digi. Mod Concert. Chat ALBA 2002 2003 2004 2005 2006

Concert. Chat Principles 4 Heavy-weight clients, light-weight server 4 Message-based 4 Channels 4 Sessions • channel + user list + awareness model 4 Modular, component-based, etc. pp. © M. Mühlpfordt 2006

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

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

Whiteboard © M. Mühlpfordt 2006

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

Whiteboard concept: Commands II © M. Mühlpfordt 2006 Depreceated

Flow of command User action Shown. World Command. Handler © M. Mühlpfordt 2006 Version. Reconstructor Command. History E. g. Concert. Chat

Whiteboard concept: objects Stuffs Not yet used No longer needed © M. Mühlpfordt 2006

Model-View-Controller: Overview Controller Viewer Model Command. Handler Viewer Command. History Editor. Manager: Maps all kinds of stuffs to editors © M. Mühlpfordt 2006 Shown. World: all objects of the current state View Stuff Renderer. Manager: Maps all kinds of stuffs to views

Model-View-Controller: Example Controller Viewer Model Command. Handler Viewer Command. History Text. Stuff. Editor. Manager: Text. Stuff. Editor © M. Mühlpfordt 2006 Shown. World: all objects of the current state Text. View Text. Stuff Renderer. Manager: Text. Stuff Text. View

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

Resizing & moving & color changing. . . 4 Select. Tool: different manipulators for resizing and moving 4 After mouse released, an appropriate command is sent © M. Mühlpfordt 2006

Tools configuration Registration in tools. xml © M. Mühlpfordt 2006

Example © M. Mühlpfordt 2006

First Example: Simple Tables 4 What is needed? • Description of a table: • Size, location, content: Table. Stuff • A view: Table. View • An editor: Table. Editor • A button: Table. Tool • A mouse handler: Table. Create. Manipulator • A change command: Change. Table. Command © M. Mühlpfordt 2006

IDE setup 4 Install Java SDK 1. 4_XX 4 Install Intelli. J Idea 4 Download http: //home. old. mathforum. org/concert. Chat/dev. zip 4 Unpack dev. zip to C: 4 Double click on C: devWhiteboard. Extension. ipr 4 Check project settings © M. Mühlpfordt 2006

Next steps 4 Concurrency control: Handling conflicting actions 4 Side effects of actions: • deleting an object which has connectors • deleting a Mind. Map node 4 Deployment of extensions: • Building a JAR archive • Signing it with a certificate • Roll-out © M. Mühlpfordt 2006

How to deploy an extension? © M. Mühlpfordt 2006

Java Web Start Concert. Chat (Web) Server Java Web Start Client Browser „http: //old. . /vmt. Client. jsp“ vmt. Client. jnlp Get Latest versions: vmt. jar, . . , my. Extension. jar © M. Mühlpfordt 2006

Where is the web server? 4 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 © M. Mühlpfordt 2006

Server folder structure 4 bin: general configuration files and start up plus shut down scripts • modules: agilo modules configuration r ve 4 libs: jar files used by server r Se o gil 4 logs: log files A 4 htdocs: content root folder for http-server (used for task descriptions) 4 webapps: web applications folder r e rv • http-connection. war: Agilo http-connection Se eb • concert. Chat: Concert. Chat web application W © M. Mühlpfordt 2006

More Details Johann‘s great cc-map: Next two slides © M. Mühlpfordt 2006

Concert. Chat Server Architecture: usr/local/VMTconcertchat /. /vmt-server/libs/concert/ . /vmt-server/webapps/concert. Chat/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 DB! * * * IReference-mapping. properties gui_de. properties gui_en. properties Insert Image dialogues gui_de. properties gui_en. properties * Tip tools, for non-whiteboard Elements inside room gui_de. properties gui_en. properties . /vmt-server/libs/ext Login message for original concert. Chat pages. properties Create new Room on the Web pages_de. properties pages_en. properties . /vmt-server/bin/modules gui_de. properties gui_en. properties Not implemented? concert_de. properties concert. properties ! Port # * * * . /vmt-server/htdocs. /vmt-server/logs/ gui_de. properties Open, Save. As? gui_en. properties screenshot_de. properties Tip tools for Screenshot screenshot_en. properties gui_de. properties gui_en. properties © M. Mühlpfordt 2006 . /vmt-server/webapps/ OK, Cancel, Apply, etc. gui. properties Learner. About. properties icons. properties s! Task Not in use gui. properties Lobby GUI (e. g. Tabs) Version info Paste Icons, not in use? Whiteboard elements (e. g. default colors)

. /vmt-server/webapps/concert. Chat/ * Phrases used by the jsps * Configuration of the server Before starting you have to configure: - bin/email. Server. 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 Internationalization All phrases used by the application comes from files stored in webapps/concert. Chat/res. The concrete path to a *. properties file gives some hints about the scope of that file. For instance de/fhg/ipsi/chatblocks 2/res/gui_en. properties defines the labels of the chat related ui elements. Welco Tab! me * 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/j 2 se/1. 4. 2/docs/api/java/util/Res ource. Bundle. html#get. Bundle(java. lang. String, java. util. Locale, java. lang. Class. Loader) 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 concert. Chat/lobby_welcome. jsp. You can additional information there and you can localize it using the jsp mechanisms. App! * © M. Mühlpfordt 2006

Client Deployment via JWS © M. Mühlpfordt 2006

JSP for creating vmt*. jnlp <%@ page import="de. fhg. ipsi. vmt. client. XYZClient"%> <% response. set. Content. Type("application/x-java-jnlp-file"); %> <? xml version="1. 0" encoding="utf-8"? > <jnlp spec="1. 0+" codebase="http: //<%= request. get. Server. Name() + ": " + request. get. Server. Port() + request. get. Context. Path()%>"> <information> … </information> <security><all-permissions/></security> <resources> <j 2 se version="1. 4+"/> <jar href="lib/vmt. jar"/> <jsp: include page="/agiloclientconfig/ccclient. Jars. jspf"/> <jsp: include page="/agiloclientconfig/ccclient. Ext. Jars. jspf"/> <jsp: include page="/agiloclientconfig/ccclient. Props. jspf"/> </resources> <application-desc main© M. Mühlpfordt class="<%=XYZClient. class. get. Name()%>"/> 2006 </jnlp>

Signing jars 4 All jars must be signed by same certificate 4 Get your keystore, alias, password 4 Use $JDK$/bin/jarsigner to sign the jars For more details see http: //java. sun. com/docs/books/tutorial/deploy ment/jar/signing. html © M. Mühlpfordt 2006

Deployment Steps © M. Mühlpfordt 2006 1. Check serial. Version. UID. Do 2 to 11 on test server. TEST IT. 2. Bundle your extension into a jar (jar. exe or IDEA) 3. Sign ALL jars with your keystore. 4. Shut down server 5. Copy it into libs/ext 6. Copy it into webapps/concert. Chat/lib 7. Copy modified *. properties to webapps/concert. Chat/res 8. Modify webapps/concert. Chat/res/de/fhg/ipsi/whiteboard/system/ extension/res/tools. xml 9. Modify bin/startup. sh 10. Modify webapps/concert. Chat/agiloclientconfig/ccclient. Ext. Jars. jspf

Recommendations 4 Setup a version management • CVS/subversion integration in IDEA 4 Create a build file: ant script • See http: //ant. apache. org/ • Integrated in IDEA © M. Mühlpfordt 2006

Accessing data from database © M. Mühlpfordt 2006

The Concert. Chat components (server side) Jetty Agilo Modules Channel. Module Persistency Backend Concert. Chat web application: Session. Module VMTModule Replication. Module Object Manager Awareness. Module Message Handling © M. Mühlpfordt 2006 Connection Layer: webapps/http-connection. war

CC world on server side 4 Channel world: • Persistency. Manager. get. Channel. Storage(id) IChannel. Storage: • get. Size(), • get. Last. Use(), • get. Last. Message(), • query. History(xyz) 4 Object world: • Object. Reference. get. Object(id) Shared. Object • But here we need more details. Let’s do it later. © M. Mühlpfordt 2006