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 OrganizationContributor for WSO2 ESB – World’s fastest ESB, WSO2 Identity Server, WSO2 Application Server, WSO2 Clarity Framework

• Premier interest in SOA, Middleware and Cloud

MY AGENDAWhat 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

MY AGENDAWhat 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/

WHAT IS APACHE OPENMEETINGS

• 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

WHAT IS APACHE OPENMEETINGS

WHAT IS APACHE OPENMEETINGS

• 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.

WHAT IS APACHE OPENMEETINGS

WHAT IS APACHE OPENMEETINGS• Features

• Audio and Video Conferencing

• Meeting recording and Screen sharing

• File Explorer

• Moderating System

• Multi-Whiteboard and Chat

WHAT IS APACHE OPENMEETINGS• Features

• User and room management

• Private message center

• Plan meetings with integrated calendar

• Polls and Votes

• Backup

MY AGENDAWhat 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 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.)

WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION? • Save Content, Load from Saved Content

• Zooming, Navigating

WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION? • Multiple Users Simultaneously

• Synchronization of Content Manipulation

• Many Instances of Whiteboard

WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?

WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?

WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?

MY AGENDAWhat 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

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

HOW THE WHITEBOARD IS BUILD USING GOOGLE CLOSURE AND APACHE WICKET

• 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.

HOW THE WHITEBOARD IS BUILD USING GOOGLE CLOSURE AND APACHE WICKET

• 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

MY AGENDAWhat 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 WICKET?

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

WHAT IS APACHE WICKET?

• 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>

WHAT IS APACHE WICKET?

• 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!"));

}

}

MY AGENDAWhat 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

WHY APACHE WICKET?

• Less technologiesThere are just two technologies: Java and XHTML.

• Separation between layout and logic / JSP-freeIn 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?

• ComponentsEvery 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

MY AGENDAWhat 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

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

THE MULTI USER WHITEBOARD

• Integrated via Maven

<dependency>

<groupId>org.wicketstuff</groupId>

<artifactId>wicketstuff-whiteboard</artifactId>

<version>6.11</version>

</dependency>

THE MULTI USER WHITEBOARD

• 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);

THE MULTI USER WHITEBOARD

• 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);

THE MULTI USER 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“ },}

THE MULTI USER WHITEBOARD

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

MY AGENDAWhat 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

DEMO

MY AGENDAWhat 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 NEXT ?

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

MY AGENDAWhat 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

USEFUL URLS

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

github.com/wicketstuff/core/tree/master/jdk-1.6-parent/whiteboard-parent• http://

www.google-melange.com/gsoc/proposal/review/google/gsoc2013/andunslg/5747559595245568• https://github.com/wicketstuff/core

THANK YOU!