Reusable Whiteboard Wicket Component for Apache Openmeetings

3,516 views
3,359 views

Published on

How the multi user whiteboard web application is build with Apache Wicket inside the Next Generation Video Conferencing tools: Apache Openmeetings

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,516
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Reusable Whiteboard Wicket Component for Apache Openmeetings

  1. 1. MULTI USER WHITEBOARD WEB APPLICATION
  2. 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. 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. 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. 5. WHAT IS APACHE OPENMEETINGS http://openmeetings.apache.org/
  6. 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
  7. 7. WHAT IS APACHE OPENMEETINGS
  8. 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.
  9. 9. WHAT IS APACHE OPENMEETINGS
  10. 10. WHAT IS APACHE OPENMEETINGS • Features • Audio and Video Conferencing • Meeting recording and Screen sharing • File Explorer • Moderating System • Multi-Whiteboard and Chat
  11. 11. WHAT IS APACHE OPENMEETINGS • Features • User and room management • Private message center • Plan meetings with integrated calendar • Polls and Votes • Backup
  12. 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. 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. 14. WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION? • Save Content, Load from Saved Content • Zooming, Navigating
  15. 15. WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION? • Multiple Users Simultaneously • Synchronization of Content Manipulation • Many Instances of Whiteboard
  16. 16. WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?
  17. 17. WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?
  18. 18. WHAT IS A MULTI USER WHITEBOARD WEB APPLICATION?
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. WHY APACHE WICKET? • Free and Open Sourced product which has a highly dynamic and very big developer community • Higher quality and stability
  31. 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. 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. 33. THE MULTI USER WHITEBOARD • Integrated via Maven <dependency> <groupId>org.wicketstuff</groupId> <artifactId>wicketstuff-whiteboard</artifactId> <version>6.11</version> </dependency>
  34. 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. 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. 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. 37. THE MULTI USER WHITEBOARD • Synchronization of Content, Save Content, Load Content functionalities use the JSON representation
  38. 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
  39. 39. DEMO
  40. 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. 41. WHAT IS NEXT ? • Adding, • Doc Sharing capability on Whiteboard • Adding complex drawing functionalities • Adding graph tools
  42. 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
  43. 43. 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
  44. 44. THANK YOU!

×