2. 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
3. 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
4. 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
5. WHAT IS APACHE OPENMEETINGS
http://openmeetings.apache.org/
6. 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
8. 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.
10. WHAT IS APACHE OPENMEETINGS
• Features
• Audio and Video Conferencing
• Meeting recording and Screen sharing
• File Explorer
• Moderating System
• Multi-Whiteboard and Chat
11. WHAT IS APACHE OPENMEETINGS
• Features
• User and room management
• Private message center
• Plan meetings with integrated calendar
• Polls and Votes
• Backup
12. 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
13. 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.)
14. WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
• Save Content, Load from Saved Content
• Zooming, Navigating
15. WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
• Multiple Users Simultaneously
• Synchronization of Content Manipulation
• Many Instances of Whiteboard
16. WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
17. WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
18. WHAT IS A MULTI USER WHITEBOARD WEB
APPLICATION?
19. 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
20. 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
21. 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.
22. 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
23. 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
24. WHAT IS APACHE WICKET?
• Apache Wicket, commonly referred to as Wicket, is a lightweight
component-based web application framework for the Java
programming language
25. 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>
26. 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!"));
}
}
27. 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
28. 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
29. 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
30. WHY APACHE WICKET?
• Free and Open Sourced product which has a highly dynamic and
very big developer community
• Higher quality and stability
31. 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
32. 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
33. THE MULTI USER WHITEBOARD
• Integrated via Maven
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>wicketstuff-whiteboard</artifactId>
<version>6.11</version>
</dependency>
34. 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);
35. 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);
36. 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“
},
}
37. THE MULTI USER WHITEBOARD
• Synchronization of Content, Save Content, Load Content
functionalities use the JSON representation
38. 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
40. 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
41. WHAT IS NEXT ?
• Adding,
• Doc Sharing capability on Whiteboard
• Adding complex drawing functionalities
• Adding graph tools
42. 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