199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Auto-width Bootstrap Column XPages Controls
Tue, Mar 21st 2017 5
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 8
Swiper FP8 Integration Rollout
Wed, Mar 8th 2017 9
Markdown XPages UIControl
Sun, Mar 5th 2017 6
TextDiff XPages control – For visual comparison of text
Tue, Feb 28th 2017 4
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 7
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 10
Top 10
XPages PhoneNumber Control - Part 1 Creating a Converter
Wed, Feb 18th 2015 11
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 11
Build System for XPages and OSGi plugins
Fri, Aug 8th 2014 10
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 10
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 10
Tips for Creating a Webmail UI with XPages
Tue, Apr 19th 2016 9
Controlling the order of Script Resources (e.g. Jquery) with a Custom ViewRootRenderer
Mon, Sep 19th 2016 9
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 9
Swiper FP8 Integration Rollout
Wed, Mar 8th 2017 9
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 8


TextDiff XPages control – For visual comparison of text
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
camerongregor    

A few years back I stumbled across Google’s diff-match-patch project which provides some handy algorithms for text manipulation. At the time of discovery I was doing ‘classic’ notes development. Although I probably could have implemented something that worked in lotuscript with RichText or Mime, it wasn’t a priority at the time and I never bothered.

Since then, I have been doing mainly XPages, and now that I have been also doing a bit of XPages Control development. I was mainly interested in the ‘diff’ algorithm so I decided the time was right to turn the diff algorithm into a useful XPages control, which takes 2 input strings and displays a visual difference between them.

The diff-match-patch algorithm / project is licenced under Apache Licence 2.0 so it is the same licence as most OpenNTF projects.

Overview

Basically the control takes a ‘from’ and ‘to’ input, and displays the visual diff. I guess it is best to show the example!

Here is some From and To Input that we will use for our examples. I have bound these textareas to viewScope ‘fromText’ and ‘toText’ but they could be bound to whatever text field you like

So then we will use the text diff like so:

<gb:textDiff id="textDiff1" from="#{viewScope.fromText}" to="#{viewScope.toText}" disableTheme="true">
</gb:textDiff>

Note the following picture is from my demo page so the actual output from the textdiff control is only what is inside the black box.

Algorithm parameters

For a good explanation of the algorithm parameters, I suggest you have a look at the google diff-match-patch webpage. But here is my best explanation!

  • cleanup – whether to perform some sort of cleanup to produce some more human readable results. I find ‘semantic’ is a good option
  • edit cost – only used for ‘efficiency’ cleanup
  • Timeout – don’t spend longer than this amount of seconds

Here is an example of output after changing the ‘cleanup’ option to ‘semantic’. Note that it has lengthened the change from single words to a longer run of words

Styling

The control has style and styleClass properties for the insert, delete and equals operations. Basically the control outputs a bunch of ‘<span>’s for each chunk of the diff operation. These outputs are either an insertion, a deletion or ‘equals’, and they have associated ‘insertStyle’ and ‘insertStyleClass’ properties.

Themable

All the above properties are themable. You can use the ‘Text.Diff’ control type to set properties for all textdiff controls or you can come up with a new ThemeId that can be applied as needed.

Here is an example using the following theme properties with a custom ThemeId

<control>
		<name>Text.Diff.Funky</name>
		<property>
			<name>style</name>
			<value>background-color: black;</value>
		</property>
		
		<property>
			<name>insertStyle</name>
			<value>color: aqua;</value>
		</property>
		<property>
			<name>equalStyle</name>
			<value>color: lime;</value>
		</property>
		<property>
			<name>deleteStyle</name>
			<value>color: pink;</value>
		</property>
	
	</control>

Installation

You have 2 choices

  • install my ‘Gregorbyte’ extension library
  • scavenge the necessary files from my github repo and install to your nsf

Install my Gregorbyte Extension Library

Go and get the latest release which should be an update site zip file.

Install this to your domino designer, and also to your domino server using your favourite update site method.

To Scavenge the necessary files from my github repo

You’ll need to put these java files in your Java section of your NSF:

  • /com.gregorbyte.xsp.controls/src/com/gregorbyte/xsp/component/UITextDiff.java
  • /com.gregorbyte.xsp.controls/src/com/gregorbyte/xsp/renderkit/TextDiffRenderer.java
  • /com.gregorbyte.xsp.controls/src/name/fraser/neil/plaintext/DiffMatchPatch.java

And this xsp-config (place in your WebContent/WEB-INF directory in you NSF using package explorer)

  • /com.gregorbyte.xsp.controls/src/com/gregorbyte/xsp/config/gregorbyte-textdiff.xsp-config

and add this entry to your faces-config.xml

<render-kit>
	<renderer>
		<component-family>javax.faces.Output</component-family>
		<renderer-type>com.gregorbyte.TextDiff</renderer-type>
		<renderer-class>com.gregorbyte.xsp.renderkit.TextDiffRenderer</renderer-class>
	</renderer>
</render-kit>

Let me know if it works or doesn’t work in case I forgot something. I haven’t used this control heavily in production yet so there may be a bug here and there, please report it if so!

 



---------------------
http://camerongregor.com/2017/02/28/textdiff-xpages-control-for-visual-comparison-of-text/
Feb 28, 2017
5 hits



Recent Blog Posts
5
Auto-width Bootstrap Column XPages Controls
Tue, Mar 21st 2017 1:13p   Cameron Gregor
I’ve been stuck working with OneUI Version 3 for the past couple of years, due to a regretful decision made at the beginning of my major project. OneUI was better than nothing but very frustrating at times. Finally, I have moved on to my next project and I am now using bootstrap (version 3) A common task when laying out a page using bootstrap is to divide sections up into rows and columns, and use the appropriate css styles to do so. I’m going to assume you are familiar with bo
8
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 12:50p   Cameron Gregor
Last week I released the ‘alpha’ version of Swiper which was untested on FP8 but presumed to be ok. So far I have only had good reports from the pioneers who have gone ahead and installed FP8 + the alpha version. I have since managed to ugrade my home office setup to FP8 which unfortunately has broken my ability to launch designer from eclipse but I am seeking some advice on fixing this up. In the meantime I have to test the slow way of building plugins, import plugins, restart R
9
Swiper FP8 Integration Rollout
Wed, Mar 8th 2017 12:43p   Cameron Gregor
Notes Domino 9.0.1 FP8 is finally here and as far as I know (I have yet to download it) it includes the necessary changes which will allow Swiper to swipe whatever it wants, whenever it wants, which is good news for people who don’t like to have ‘Build Automatically’ turned on. Plan of Attack for release of Swiper version 2.0.0 So, I haven’t actually downloaded FP8 yet,  so I can’t say for sure that the updated version works perfectly. Here is a bit of backgrou
6
Markdown XPages UIControl
Sun, Mar 5th 2017 11:44a   Cameron Gregor
Often when I’m designing an xpage, there might be a section of the page in which I want to explain some instructions to the user. Some options here are to: write the Instructions using html and embed directly in the xpage markup write the Instructions directly in the design pane and format using designer’s ui e.g. bold, color, size etc use some native xpage controls to achieve the desired result. Write the instructions in a richtext field on a notes document that is loaded to dis
5
TextDiff XPages control – For visual comparison of text
Tue, Feb 28th 2017 12:00p   Cameron Gregor
A few years back I stumbled across Google’s diff-match-patch project which provides some handy algorithms for text manipulation. At the time of discovery I was doing ‘classic’ notes development. Although I probably could have implemented something that worked in lotuscript with RichText or Mime, it wasn’t a priority at the time and I never bothered. Since then, I have been doing mainly XPages, and now that I have been also doing a bit of XPages Control development. I was
7
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 11:12a   Cameron Gregor
In a previous post in this series I did a bit of an overview on how MIME works. We also did a little bit about how MIME works in XPages + Domino land. With this knowledge in hand we can now start to analyse the different ways a ‘Pretty words, pictures and attachments’ can be stored in the document. During development of the ‘XPages Webmail’ interface, I encountered many problems which could only be solved by investigating the MIME content in detail. To help me do this, I
10
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 10:00p   Cameron Gregor
Programs like ‘Snipping Tool’ on Windows, are super useful for users to make a quick snapshot, do some quick markup on the image, paste into chat/email and send. Unfortunately when using the default configuration of CKEditor in XPages (the inputRichText control), support for pasting images is not available for all browsers, and even for the ones that do support it, the images are only pasted as a PNG data URI. I have explained data URI images in a previous post, so check that out if
9
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 11:21p   Cameron Gregor
In the previous post, I showed how to prevent a user from pasting Images from the Clipboard into CKEditor. This post is of a similar nature but is designed to ensure that users don’t paste images with URLs to external / internal applications. This post is part of my XPages webmail tips series, and addresses a problem where, a user copies and pastes some HTML that includes images, from a webpage and pastes it into CKEditor for a message that is then sent via email. The recipient is then una
10
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 12:43a   Cameron Gregor
In the process of developing our XPages ‘Webmail’ interface, we discovered that many recipients were unable to view embedded images in the emails. After investigating, it was caused by the images being embedded using Data URIs. Support for Data URI Images is not universal, and because it is supported in IBM Notes, everything looked like it was working ok, but a quick test viewing an email in Gmail confirmed a problem when images could not be seen. What is a Data URI? You are most lik
9
Controlling the order of Script Resources (e.g. Jquery) with a Custom ViewRootRenderer
Mon, Sep 19th 2016 9:28a   Cameron Gregor
When loading Client Side Javascript libraries in XPages, sometimes the order that the libraries are ‘encoded’ (or written in HTML) in the tag is important. For example jQuery and some of it’s plugins can have some issues if Dojo is encoded first. By default in XPages you don’t have too much say in what is written out first, a nifty workaround for this has been shared by Sven Hasselbach (here and here) which utilises the lesser known tag. This workaround ensures t




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition