Silverlight-based Rich Text Content Editor for FlexWikiShankar Arunachalam & Raam Kumar Ganesan
PreamblePreamblePreamblePreamble
Abu, do another thing now: Belbo orders Abu to change all words, make each “a” become “akka” and each “o” become “ulla,” for a paragraph to look almost Finnish.Akkabu, dulla akkanullather thing nullaw: Belbulla ullarders Ak-kabu tulla chakkange akkall wullards, makkake eakkach “akka” be-cullame “akkakkakka” akkand eakkach “ulla” becullame “ullakka,” fullar akka pakkarakkagrakkaph tulla lullaullak akkalmullast Finnish.
Umberto Eco’s take on a word processor, Abulafia
Foucault’s Pendulum, 1988
2FlexWiki - WikiCreate
What is deal with FlexWiki?What is deal with FlexWiki?What is deal with FlexWiki?What is deal with FlexWiki?
• A collaborative web-based authoring environment implemented on the Microsoft .NET platform.
• Originally developed by Microsoft and released in SourceForge as an open source project in late 2004 (Microsoft’s 3rd open source initiative)
• 4 project administrators and 25 developers• Version control using SVN• Development using C#, ASP.NET 2.0 and Visual
Studio 2005 • Automated testing using NUnit
FlexWiki - WikiCreate 3
Is FlexWiki Open Source?Is FlexWiki Open Source?Is FlexWiki Open Source?Is FlexWiki Open Source?
• Yes. Because FlexWiki is filed under COMMON COMMON PUBLIC LICENSE 1.0PUBLIC LICENSE 1.0 which is a popular open source license approved by the Open Source Initiative and the Free Software Foundation
• Some of the popular open source applications that use CPL1.0 are phpMyAdmin, FileZilla, Azureus, 7-Zip etc
FlexWiki - WikiCreate 4
What is the deal with text editor?What is the deal with text editor?What is the deal with text editor?What is the deal with text editor?
FlexWiki - WikiCreate 5
• FlexWiki community was looking for an intuitive WYSIWYG interface for Rich Text Content creation
• The interface should be online with future provision for offline editing
• Should be in sync with the development platform of FlexWiki• Can be a plug-in or a standalone application that interacts with
FlexWiki• In the words of the lead developer:
Is the project about “Bold & Italics”?Is the project about “Bold & Italics”?Is the project about “Bold & Italics”?Is the project about “Bold & Italics”?
• Yes and no• Main focus was to build a silver-light
based, web application that will interface with FlexWiki through web services to exchange content
• Needed to choose the best option for developing a Rich Text Editor out of a set of options
FlexWiki - WikiCreate 6
‘LiveMesh’-enabled‘LiveMesh’-enabled
Live Mesh Features: • Synchronize data across devices that I own• A cloud called Live Desktop to access shared data• Access my other devices using remote desktop• Work offline with applications • Synchronize through the cloud when you go online later
Live Mesh Features: • Synchronize data across devices that I own• A cloud called Live Desktop to access shared data• Access my other devices using remote desktop• Work offline with applications • Synchronize through the cloud when you go online later
Analysis - Our perspective
Analysis - Our perspective
Analysis – Community perspective
Analysis – Community perspective
SolutionSolution
So, how does it work?So, how does it work?So, how does it work?So, how does it work?
FlexWiki - WikiCreate 7
FlexWiki Server
Web ServiceWeb Service
What is our contribution?What is our contribution?What is our contribution?What is our contribution?• Implementation of a Silverlight application, WikiCreate, which
hosts:– A Rich Text Editor user control based on an open source
initiative, RichTextEdit2.0 (MIT License)• Added features like Hyperlinks, Justification• Implemented hooks for undo, redo, select all, delete to be
consumed by hosting page• Consumed existing hooks in the hosting page
– Animated toolbar for Content Creation using open source images
– Establishing contact between WikiCreate and FlexWiki using FlexWiki’s EditService web service
– Content massaging to convert internal representation of rich text data in RichTextEdit2.0 into representation consumable by FlexWiki (ongoing process)
FlexWiki - WikiCreate 8
Development - UIDevelopment - UIDevelopment - UIDevelopment - UI
• Client UI developed in Silverlight (Extensible Application Markup Language - XAML) using Visual Studio 2008 and Microsoft Expression Blend 2
• Open Source Images from Tango Project (Creative Commons Attribution Share-Alike license)
• Implemented a hierarchy of Dialog box controls to handle ‘hyperlinks’, ‘find’ and ‘open’ functionalities with exposed events that help in passing data back to the parent control
• Implemented dynamic building of tool bar using .NET reflection, with information read from an XML file
• Discussion
FlexWiki - WikiCreate 9
Development – Web Service HandshakeDevelopment – Web Service HandshakeDevelopment – Web Service HandshakeDevelopment – Web Service Handshake
• FlexWiki has a hierarchy of namespaces and Wiki topics to organize content
• Consumed the following asynchronous Web Methods of EditService web service of FlexWiki:– GetAllNamespacesAsync – Used in Open Dialog– GetAllTopicsAsync – Used in Open Dialog– SetTextForTopic – Used in saving the content back
to FlexWiki server
• Discussion
FlexWiki - WikiCreate 10
Deployment and Version ControlDeployment and Version ControlDeployment and Version ControlDeployment and Version Control
• Have sent our signed copies of Assignment Agreement to Microsoft for registration and awaiting completion– First, the contract assigns ownership of the contribution to
Microsoft– Second, it gives us back the rights we need to do what we
want with our contribution
• Lead developer John Davidson has given access through LiveMesh to a shadow deployment of the FlexWiki for deployment and configuration
FlexWiki - WikiCreate 11
Was it easy sailing?Was it easy sailing?Was it easy sailing?Was it easy sailing?
• Yes and No • John Davidson was amazingly co-operative• Constant discussions in the forum helped a great deal
during conception and implementation• Hadn’t been exposed to Silverlight concepts (XAML
etc) before• Had to analyze and understand FlexWiki and
RichTextEdit2.0 code bases• Mesh-enabled web applications is a bleeding edge
technology (introduced at the Microsoft PDC 2008 on October 29th, 2008)
FlexWiki - WikiCreate 12
Road Ahead…Road Ahead…Road Ahead…Road Ahead…
• Loads of features yet to be implemented• Has to fine-tune the web service handshake
and content massaging• Has the potential to become the first fully
developed Rich Text Editor control in Silverlight
• Has to complete the ‘mesh enabling’ step to utilize the power of offline editing
FlexWiki - WikiCreate 13
ResourcesResourcesResourcesResources
FlexWiki - WikiCreate 14
Description Link
FlexWiki web site http://www.flexwiki.com
Discussion forum for WYSIWYG editor
http://www.flexwiki.com/default.aspx/DevDiscuss/WysiwygEditor.html
Source code for FlexWiki
http://www.flexwiki.com/default.aspx/FlexWiki/DeveloperSetup.html
FlexWiki SVN etc http://sourceforge.net/project/flexwiki
RichTextEdit2.0 http://www.codeplex.com/richtextedit
Tango Project http://commons.wikimedia.org/wiki/Tango_project
Application Test Bed http://silverlight.services.live.com/invoke/84800/WysiwygEditor/iframe.html
Mesh-enabled web applications – PDC 2008 web cast
http://channel9.msdn.com/pdc2008/BB30/
Merci!
FlexWiki - WikiCreate 15
Top Related