202 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
XPages JDBC Configuration via NotesDocuments
Tue, Dec 5th 2017 150
My New Approach for Sharing XPages Controls and Extensions
Fri, Dec 1st 2017 36
Embedded Experiences not rendering after IBM Notes FP9
Wed, Sep 27th 2017 7
BuildXPages Deployment Automation Tools – v1.0.0
Thu, Sep 21st 2017 6
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 7
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 7
Swiper Official Version 2 Release
Fri, Jul 21st 2017 4
Top 10
XPages JDBC Configuration via NotesDocuments
Tue, Dec 5th 2017 150
My New Approach for Sharing XPages Controls and Extensions
Fri, Dec 1st 2017 36
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 12
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 12
XPages PhoneNumber Control - Part 2 Upgrades to the Converter
Mon, Feb 23rd 2015 11
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 11
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 10
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 8
Tips for Creating a Webmail UI with XPages
Tue, Apr 19th 2016 7
Review: JRebel with Domino OSGi development
Mon, Sep 5th 2016 7


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



Recent Blog Posts
150
XPages JDBC Configuration via NotesDocuments
Tue, Dec 5th 2017 11:34a   Cameron Gregor
If you have used the Extension Library’s Relational controls, then you are probably familiar with the process of configuring your JDBC Connection details. You have the option of setting up a ‘named’ connection so you can reference a database connection by name. This involves creating an xml file .jdbc in the WebContentWEB-INFjdbc directory. This xml file specifies the driver, url, username, password, and perhaps some information about connection pooling. Alternatively your can
36
My New Approach for Sharing XPages Controls and Extensions
Fri, Dec 1st 2017 12:33p   Cameron Gregor
Over the past few years I have shared a handful of controls and techniques on my blog, and most of these I have made available on github in one way or another. Originally I was creating a separate github project for each one such as EmailValidator, PhoneNumberControl and the Messages Controls. After these few I decided it would be more efficient to create a single project that I could put them all into, so I then began to contribute them via my GregorbyteXspLibrary. From time to time I had a fe
7
Embedded Experiences not rendering after IBM Notes FP9
Wed, Sep 27th 2017 5:36a   Cameron Gregor
Embedded Experiences are no longer rendering after upgrading to FP9. I suspect it is something to do with the changes to Embedded Browser, either removing it or upgrading it or something else. I haven’t had a chance to investigate fully. Perhaps there may be a workaround, or perhaps this is specific to the way we are using embedded experiences. We use embedded experiences quite a bit at our company so we have rolled back for now. If I figure anything out I will post an update but just be a
6
BuildXPages Deployment Automation Tools – v1.0.0
Thu, Sep 21st 2017 12:47p   Cameron Gregor
After quite a bit of work I have finally published the first release of BuildXPages! What is BuildXPages? BuildXPages is a project which is useful if you are interested in Automating tasks that are involved in building XPages. For example you may be interested in automating some of these tasks: Building NSFs from an On-Disk Project Building Plugins and Features Refreshing NSF Designs Setting Template Inheritance of NSFs Start, Stop and Restart Http server Uploading Plugins to an NSF Update
7
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 4:42p   Cameron Gregor
When developing an XPages application you may run into the need to generate files to be downloaded by the user. For example: Generating a PDF Report Exporting Data to Excel Spreadsheet Creating a Zip File of several attachments Achieving these tasks usually raises 2 main problems to solve; What temporary place can I use to generate the files? How do I allow the user to download the generated files? For the temporary place problem, some common solution is to either generate the files to some
7
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 12:26p   Cameron Gregor
A common task with XPages development is to installing some plugins that provide additional functionality. If you do any plugin development of your own, you end up doing this task a lot more as you create new plugins, install new versions etc. It is also common to encounter some problems after installing plugins to your Domino Server! Maybe your expected plugin doesn’t load up at all? maybe the wrong version is loading? The standard method of diagnosing these problems is to use the OSGi c
4
Swiper Official Version 2 Release
Fri, Jul 21st 2017 1:52p   Cameron Gregor
So I have finally posted Swiper version 2 to OpenNTF! (and Github of course) Swiper OpenNTF Project Page Swiper Github Releases The latest version is 2.0.1,  and is the same as 2.0.0beta but with a bug fix for the toolbar buttons. Swiper 2.0.0 beta has been available on the Github project site for a few months, and the core functionality of it works as planned. There was however a bug within the shortcut buttons that I added to the menu bar, and this is a bit of a nasty bug that can cause del
1
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
1
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
3
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




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