Making a difference with Mendix
I recently released the module Diff to the Mendix App Store. It allows you to take two pieces of text and return a list of differences between them.
The module comes with a Java action called Diff_PrettyHTML which takes two Strings and returns some HTML highlighting the differences. It’s a simple process, so I wanted to show you how to do this in Mendix using the lower level Diff_Semantic Java Action.
Diff_Semantic takes two Strings and returns a list of Diff entities holding the differences. It’s a simple entity, it holds the Operation (of type ENUM_Operation which could be INSERT, DELETE, or EQUALS), and a String of Text.
To build our HTML generating microflow we first need to create it. Let’s call it SUB_PrettyHTML.
We know this microflow needs to take a List of Diff entities as an input parameter, so we can call this $DiffList. We also know it needs to return a String of HTML. We can call this string $vHTML and it will just be a blank to start with.
Next, we need to iterate over the $DiffList to see what the differences actually are.
In the loop, $IteratorDiff will the instance of Diff we are currently working with.
We need to see what the Operation is in this Diff and amend $vHTML accordingly. If it’s a DELETE, we need to wrap the Text with a <del> tag and add it to the end of $vHTML. If it’s an INSERT we wrap the Text with an <ins> tag and add it to $vHTML. Finally, if it’s anything else we just wrap the Text with a <span> tag and add it to $vHTML.
The DELETE Change variable action looks like this.
We’ve added a red background color as well, but this could easily be added in your CSS if you wanted a cleaner code. We do something similar for INSERT but make it green.
As this outputs HTML, we need to make sure the incoming text doesn’t contain any HTML tags. We could escape this using the EscapeHTML action in the Community Commons module. We can also roll our own by turning & into &, < into <, > into >, and newlines into <br>. This can be done using replaceAll.
The order we escape is important as we don’t want to escape our escapes. It should be &, <, >, and then newline. The final microflow should look like this.
Testing our microflow
We want to see if our microflow works. To do this we can build a simple test page to take two strings and show the difference once a button has been pressed.
Firstly, we create an entity to hold the original text, the new text, and the diff HTML we generate. We’ll call this entity DiffHTML.
Our page can take a DiffHTML instance and use the Format String widget from the Mendix App Store to render the generated HTML on screen.
Our microflow to run the difference will need to run Diff_Semantic over the two pieces of text, pass this into our new SUB_PrettyHTML microflow, update the DiffHTML instance, and finally show the page.
Running the application and adding some sample text, our final output looks like this.
We can see the removed text has been highlighted in red and struck through, while the changed text is in green and underlined. Text that hasn’t changed remains neutral.
Conclusion
In this article, we have seen how we can use the Diff_Semantic Java Action in the Diff module to recreate the Diff_PrettyHTML action in a microflow. We’ve seen the 3 types of difference and used them to highlight the changes between the two pieces of text.
