Reusable Whiteboard Wicket Component for Apache Openmeetings

MULTI USER WHITEBOARD
WEB APPLICATION

I AM,
• Andun S.L. Gunawardana
• Co- Founder, Sith Solutions (Pvt) Ltd Sri Lanka and emoJot USA
• Undergraduate of Computer Science and Engineering Department
University of Moratuwa, Sri Lanka
• GSoC 2013 Student – Apache OpenMeetings
• Contributor – Apache WicketStuff, Apache Synapse, Apache Airavata,
Apache Axis2
• Software Engineering Intern @ WSO2 - A GSoC Mentoring Organization
Contributor for WSO2 ESB – World’s fastest ESB, WSO2 Identity Server,
WSO2 Application Server, WSO2 Clarity Framework

• Premier interest in SOA, Middleware and Cloud

MY AGENDA
What is Apache OpenMeetings
What is a Multi User Whiteboard Web Application?
How the Whiteboard is build using Google Closure and Apache Wicket
What is Apache Wicket?
Why Apache Wicket?
The Multi User Whiteboard
Demo

What is Next?
Useful Urls

WHAT IS APACHE OPENMEETINGS

http://openmeetings.apache.org/

• Apche Openmeetings provides video conferencing, instant
messaging, white board, collaborative document editing and other
groupware tools using API functions of the Red5 Streaming Server
for Remoting and Streaming.

• OpenMeetings is initiated as a separate Google Code Project
(http://code.google.com/p/openmeetings/) and later it joined
Apache

• All the groupware features of Apache OpenMeetings are designed
inside a one major component called Room. Users can create
rooms with number of groupware tools and share them among
group of people. People who enter these rooms can use these
groupware tools in their collaborative work.

• Features
• Audio and Video Conferencing
• Meeting recording and Screen sharing
• File Explorer
• Moderating System
• Multi-Whiteboard and Chat

• Features
• User and room management
• Private message center
• Plan meetings with integrated calendar
• Polls and Votes
• Backup

WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
• White board provides drawing, writing, Drag n' Drop, Resizing, Adding Images
(Drag n' Drop from File-Explorer), Adding Symbol(s)/Cliparts .

• Can add a wide range of document formats (PDF, DOC, ODT, PPT etc.)

APPLICATION?
• Save Content, Load from Saved Content
• Zooming, Navigating

APPLICATION?
• Multiple Users Simultaneously
• Synchronization of Content Manipulation

• Many Instances of Whiteboard

APPLICATION?

HOW THE WHITEBOARD IS BUILD USING GOOGLE
CLOSURE AND APACHE WICKET
• Whiteboard is a commonly used component in web application
development
• It is really useful if there is a generic whiteboard component which
is integrated to our development – A Reusable Component
• Considering that we have developed a generic whiteboard
component using Google Closure Library and Apache Wicket web
application development framework in my Google Summer of
Code Project

• We used the JavaScript based whiteboard which is developed
by Andrey Bogdanov (https://github.com/bay73/whiteboard)
• It is build using Google Closure Tools. Google Closure Tools is a set
of tools to help developers build rich web applications with
JavaScript. It was developed by Google for use in their web
applications such as Gmail, Google Docs and Google Maps.

• Prime target of my project was Apache OpeMeetings 3.1.0 release.
• Earlier versions of Apache OpeMeetings has been developed using
Openlaszlo Framework and Flash.

• 3.0.0 onwards, Apache OpeMeetings is completely developed
using HTML5, Apache Wicket

WHAT IS APACHE WICKET?
• Apache Wicket, commonly referred to as Wicket, is a lightweight
component-based web application framework for the Java
programming language

• XHTML part of a web page in Wicket,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
xml:lang="en" lang="en">
<body>
<span wicket:id="message" id="message">Message goes here</span>
</body>
</html>

• Java part of the same web page in Wicket,
package org.wikipedia.wicket;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;

public class HelloWorld extends WebPage {
public HelloWorld() {
add(new Label("message", "Hello World!"));
}
}

WHY APACHE WICKET?
• Less technologies
There are just two technologies: Java and XHTML.

• Separation between layout and logic / JSP-free
In Wicket all the logic is in Java-code which makes it compile-save, unit
testable and debugable

• Refactoring capabilities / Keep the business logic up-to-date

WHY APACHE WICKET?
• Components
Every web application is developed as components. The logic for a
business aspect is encapsulated in a component or in some
components which can interact with each other. Components are
reusable. Thus saves development time and avoids duplicated code

• Pure Object-Orientation
• No session wasting and safe flows
In classic MVC applications everything was stored in the session. The
developer forget to cleanup the session and it got bigger and bigger.
Nobody knows what's in it. This can cause performance and security
leaks

WHY APACHE WICKET?
• Free and Open Sourced product which has a highly dynamic and
very big developer community
• Higher quality and stability

THE MULTI USER WHITEBOARD
• Hosted in WicketStuff repository. Which is the main repository for reusable
Wicket Components.

• https://github.com/wicketstuff/core/wiki/Whiteboard
• Initial version of the Whiteboard provides,
• Draw basic geometric shapes like point, lines, circles, rectangles, curves, arrows
• Insert pictures & background images
• Basic manipulations like zooming, moving, undo
• Save/Load content

• Integrated via Maven
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>wicketstuff-whiteboard</artifactId>

<version>6.11</version>
</dependency>

• Can be added to web page with two lines,
XHTML,
<div wicket:id="whiteboardContainer"></div>

JAVA,
Whiteboard whiteboard = new Whiteboard("Unique Id for
Whiteboard","whiteboardContainer", "JSON String representing a saved Whiteboard.
Can be null", "Location of the Pictures Folder. Relative to Context Root. Can be null",
"Location of the Background Images Folder. Relative to Context Root. Can be null");
add(whiteboard);

• Whiteboard content is represented in JSON
{"background": {
"height": 326,
"width": 595.0481927710844,
"left": -297.5240963855422,
"type": "Background",
"url": "http://localhost:8080/Documents/gmaps.jpg",
"top": 163
}, "elements": [
{
"id": 5,
"p2": 4,
"color": "",
"p1": 3,
"trace": false,
"hidden": false,
"label": "",
"type": "PencilCircle“
},
}

• Synchronization of Content, Save Content, Load Content
functionalities use the JSON representation

WHAT IS NEXT ?
• Adding,

• Doc Sharing capability on Whiteboard
• Adding complex drawing functionalities
• Adding graph tools

USEFUL URLS
• https://github.com/wicketstuff/core/wiki/Whiteboard

• https://github.com/wicketstuff/core/tree/master/jdk-1.6parent/whiteboard-parent
• http://www.googlemelange.com/gsoc/proposal/review/google/gsoc2013/an
dunslg/5747559595245568
• https://github.com/wicketstuff/core

Reusable Whiteboard Wicket Component for Apache Openmeetings

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Reusable Whiteboard Wicket Component for Apache Openmeetings

Similar to Reusable Whiteboard Wicket Component for Apache Openmeetings (20)

Recently uploaded

Recently uploaded (20)

Reusable Whiteboard Wicket Component for Apache Openmeetings