How to Extend the CC-Whiteboard

© M. Mühlpfordt 2006

How to Extend the CC-Whiteboard

Martin Mühlpfordt

Fraunhofer IPSIDarmstadt

[email protected]


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


Evolution of ConcertChat

2001 2002 2003 2004 2005 2006

L³ ALBADigiMod

ConcertChat

VMTMapper

Aposdle

Chatblocks

MM Notebook

DyCEGroupware framework

Agilomessaging framework

Chat messaging layer CC Messaging layer

Whiteboard

Replication

Bo Xiao

Daniel Tietze

Axel Guicking


ConcertChat Principles

Heavy-weight clients, light-weight server

Message-basedChannelsSessions

• channel + user list + awareness model

Modular, component-based, etc. pp.


Channel-based messaging

• Lobby• Each room

Object replication

• Users• List of users• Rooms• Different lists of rooms

Server

Client

ConcertChat Architecture

Whiteboard

Channel = Room

Chat

Messages

Actions

Awareness

Information

Persistency

Object

Replicated object

Modifications


ConcertChatLayer

FrameworkBridge

Agilo

The ConcertChat Layers (Client side)

Connection Layer HTTP, NIO

Message Handling

Channels

Component/Application Layer

Chat

Whiteboard

Awareness

Object replication

Outqueue

Inqueue

Use

r

Use

rlist

Roo

m

Message container

Agilo Implementation

Marshaller

AgiloChannel

Agilo messages

Chat messages

Commands

Operations

MessageRouter

Ses

sion

Logi

n

His

tory

LoginPane


Whiteboard


Whiteboard concept: Commands

All actions are Commands:• Creating and deleting objects, • resizing, moving, changing color etc

History: c1, c2, ... cn

Whiteboard states: 0, 1, ..., nWhiteboard 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

Depreceated


Flow of command

CommandHandler CommandHistory

Command VersionReconstructor

ShownWorld

E.g. ConcertChat

User action


Whiteboard concept: objects Stuffs

Not yet used

No longer needed


Model-View-Controller: Overview

ShownWorld: all objects of the

current state

Stuff

Model View

Viewer

RendererManager:Maps all kinds of

stuffs to views

View

Viewer

Editor

Controller

EditorManager:Maps all kinds of stuffs to editors

CommandHandler

CommandHistory


CommandHandler

CommandHistory

Model-View-Controller: Example

ShownWorld: all objects of the

current state

TextStuff

TextView

Viewer

RendererManager:TextStuff

TextView

TextStuffEditor

Viewer

EditorManager:TextStuff

TextStuffEditor

Model ViewController


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


Resizing & moving & color changing ...SelectTool: different manipulators for

resizing and movingAfter mouse released, an appropriate

command is sent


Tools configuration

Registration in tools.xml

Configuration with tableConfiguration


Example


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


IDE setup

Install Java SDK 1.4_XX Install IntelliJ IdeaDownload http://home.old.mathforum.org/

concertChat/dev.zip

Unpack dev.zip to C:\Double click on C:\dev\

WhiteboardExtension.iprCheck project settings


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


How to deploy an extension?


Java Web Start

ConcertChat(Web) Server

Java Web Start Client

Browser

„http://old..../vmtClient.jsp“

vmtClient.jnlpvmtClient.jnlp

Get Latest versions: vmt.jar, ...., myExtension.jar


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


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 S

erver

Web S

erver


More Details

Johann‘s great cc-map: Next two slides


ConcertChat Server Architecture: usr/local/VMTconcertchat/./vmt-server/

./vmt-server/bin

./vmt-server/bin/modules

./vmt-server/htdocs

./vmt-server/libs/concert/

./vmt-server/libs/ext

./vmt-server/logs/

./vmt-server/webapps/

./vmt-server/webapps/concertChat/res/

IReference-mapping.properties

export_de.properties

export_en.properties

gui_de.properties

gui_en.properties

gui_de.properties

gui_en.properties

gui_de.properties

gui_en.properties

pages.properties

pages_de.properties

pages_en.properties

gui_de.properties

gui_en.properties

concert_de.properties

concert.properties

gui_de.properties

gui_en.properties

screenshot_de.properties

screenshot_en.properties

gui_de.properties

gui_en.properties

gui.properties

LearnerAbout.properties

gui.properties

icons.properties

*

*

**

*

DB!

Port #!

Tasks!

Version info

*

* Lobby GUI (e.g. Tabs)

Awareness messages(e.g. Online, Active, etc.)

Export Transcript Through Web Interface.

Tip tools, for non-whiteboardElements inside room

Insert Image dialogues

Login message fororiginal concertChat

Create new Roomon the Web

Not implemented?

Not in use

Open, Save, SaveAs?

Tip tools for Screenshot

OK, Cancel, Apply, etc.

Paste Icons, not in use?

Whiteboard elements(e.g. default colors)

Roles, not used?


./vmt-server/webapps/concertChat/

*

*

Configuration of the serverBefore 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 ofthe property file corresponds with the name of the jsp.

Adding new languages can be done by adding new language files. For naming convention seehttp://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 canadd additional information there and you can localize it using the jsp mechanisms.

*

Welcome

Tab!

App!

* Phrases used by the jsps


Client Deployment via JWS

vmtClient.jnlp


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>


Signing jars

All jars must be signed by same certificate

Get your keystore, alias, passwordUse $JDK$/bin/jarsigner to sign the

jars

For more details see http://java.sun.com/docs/books/tutorial/deployment/jar/signing.html


Deployment Steps

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 server5. Copy it into libs/ext6. Copy it into webapps/concertChat/lib7. Copy modified *.properties to webapps/concertChat/res8. Modify

webapps/concertChat/res/de/fhg/ipsi/whiteboard/system/ extension/res/tools.xml

9. Modify bin/startup.sh 10.Modify

webapps/concertChat/agiloclientconfig/cc-clientExtJars.jspf

11.Start up server


Recommendations

Setup a version management• CVS/subversion integration in IDEA

Create a build file: ant script• See http://ant.apache.org/ • Integrated in IDEA


Accessing data from database


The ConcertChat components (server side)

Agilo

Connection Layer: webapps/http-connection.war

Message Handling

Jetty

ConcertChat web application:

Agilo Modules

ChannelModule

SessionModule

VMTModule

AwarenessModule

PersistencyBackend

Object Manager

ReplicationModule


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.


Conclusion:

Very restricted database access!Requirements for changes needed

Documents

How to Extend the CC-Whiteboard