How to Extend the CC-Whiteboard
Martin Mühlpfordt
Fraunhofer IPSI
Darmstadt
martin.muehlpfordt@ipsi.fraunhofer.de
© M. Mühlpfordt
2006
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
© M. Mühlpfordt
2006
Evolution of ConcertChat
Bo Xiao
MM
Notebook
Whiteboard
Chatblocks
Chat messaging layer
Daniel
DyCE
Groupware framework
CC Messaging layer
Tietze
Replication
Axel Guicking
Agilo
messaging framework
Aposdle
Mapper
VMT
L³
© M. Mühlpfordt
2001
2006
DigiMod
ConcertChat
ALBA
2002
2003
2004
2005
2006
ConcertChat Principles
Heavy-weight clients, light-weight server
Message-based
Channels
Sessions
• channel + user list + awareness model
Modular, component-based, etc. pp.
© M. Mühlpfordt
2006
ConcertChat Architecture
Channel-based messaging
Chat
Client
Whiteboard
Object replication
Awareness
Object
Actions
Modifications
Messages
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
Commands
Awareness
Operations
Message container
AgiloChannel
Agilo messages
Message Handling
Agilo
© M. Mühlpfordt
2006
Object
replication
Channels
Agilo Implementation
Connection Layer
Message
Router
Marshaller
Room
Whiteboard
Session
History
ConcertChat
Layer
Login
Component/
Login
Application Pane
Layer
Chat messages
User
Chat
Userlist
The ConcertChat Layers (Client side)
Outqueue
Inqueue
HTTP, NIO
Whiteboard
© M. Mühlpfordt
2006
Whiteboard concept: Commands
© M. Mühlpfordt
2006
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, ...)
Whiteboard concept: Commands II
© M. Mühlpfordt
2006
Depreceated
Flow of command
User action
ShownWorld
© M. Mühlpfordt
2006
Command
VersionReconstructor
CommandHandler
CommandHistory
E.g. ConcertChat
Whiteboard concept: objects  Stuffs
Not yet used
No longer needed
© M. Mühlpfordt
2006
Model-View-Controller: Overview
Controller
Viewer
Model
CommandHandler
View
Viewer
CommandHistory
Editor
EditorManager:
Maps all kinds of
stuffs to editors
© M. Mühlpfordt
2006
ShownWorld:
all objects of the
current state
View
Stuff
RendererManager:
Maps all kinds of
stuffs to views
Model-View-Controller: Example
Controller
Viewer
Model
CommandHandler
View
Viewer
CommandHistory
TextStuffEditor
EditorManager:
TextStuff
TextStuffEditor
© M. Mühlpfordt
2006
ShownWorld:
all objects of the
current state
TextView
TextStuff
RendererManager:
TextStuff
TextView
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
© M. Mühlpfordt
2006
Resizing & moving & color changing ...
SelectTool: different manipulators for
resizing and moving
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
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
© M. Mühlpfordt
2006
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
© M. Mühlpfordt
2006
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
© M. Mühlpfordt
2006
How to deploy an extension?
© M. Mühlpfordt
2006
Java Web Start
ConcertChat
(Web) Server
Java Web
Start Client
Browser
„http://old..../vmtClient.jsp“
vmtClient.jnlp
vmtClient.jnlp
Get Latest versions: vmt.jar, ...., myExtension.jar
© M. Mühlpfordt
2006
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
© M. Mühlpfordt
2006
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
© M. Mühlpfordt
2006
More Details
Johann‘s great cc-map: Next two slides
© M. Mühlpfordt
2006
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
*
*
*
./vmt-server/libs/ext
*
gui_de.properties
gui_en.properties
Tip tools, for non-whiteboard
Elements inside room
gui_de.properties
gui_en.properties
Insert Image dialogues
gui_de.properties
gui_en.properties
Login message for
original concertChat
pages.properties
pages_de.properties
pages_en.properties
./vmt-server/bin/modules
Create new Room
on the Web
Not implemented?
gui_de.properties
gui_en.properties
concert_de.properties
concert.properties
*
*
gui_de.properties
Open, Save, SaveAs?
gui_en.properties
screenshot_de.properties
Tip tools for Screenshot
screenshot_en.properties
gui_de.properties
gui_en.properties
*
./vmt-server/htdocs
./vmt-server/logs/
© M. Mühlpfordt
2006
OK, Cancel, Apply, etc.
Lobby GUI (e.g. Tabs)
Version info
gui.properties
LearnerAbout.properties
icons.properties
./vmt-server/webapps/
Not in use
gui.properties
Paste Icons, not in use?
Whiteboard elements
(e.g. default colors)
./vmt-server/webapps/concertChat/
* Phrases used by the jsps
*
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
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/Res
ourceBundle.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.
*
© 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.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>
© M. Mühlpfordt
2006
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/deploy
ment/jar/signing.html
© M. Mühlpfordt
2006
Deployment Steps
© M. Mühlpfordt
2006
1. Check serialVersionUID. 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/concertChat/lib
7. Copy modified *.properties to webapps/concertChat/res
8. Modify
webapps/concertChat/res/de/fhg/ipsi/whiteboard/system/
extension/res/tools.xml
9. Modify bin/startup.sh
10. Modify
webapps/concertChat/agiloclientconfig/ccclientExtJars.jspf
Recommendations
Setup a version management
• CVS/subversion integration in IDEA
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 ConcertChat components (server
side)
Agilo
Jetty
Agilo Modules
ChannelModule
Persistency
Backend
ConcertChat web
application:
SessionModule
VMTModule
ReplicationModule
Object
Manager
AwarenessModule
Message Handling
© M. Mühlpfordt
2006
Connection Layer: webapps/http-connection.war
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.
© M. Mühlpfordt
2006
Conclusion:
Very restricted database access!
Requirements for changes needed
© M. Mühlpfordt
2006