silverlight-based rich text content editor for flexwiki

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


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


‘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 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)


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


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


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


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)


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


ResourcesResourcesResourcesResources


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/

http://www.flexwiki.com/

Merci!


silverlight-based rich text content editor for flexwiki

Documents