A short one i figured is shareable;

After being spooked by the solutions i found on the developerworks forums to translate object id’s to guid’s, i figured there should be a OOTB api way of doing so.

Eventually i found the following:

String objectID = “{304C605E-0000-CE17-BD18-E0B728DC0483}”;
String guid = new filenet.vw.api.VWGuid(objectID).toByteString();

Cheers

TL;DR; I’ve created a serializer that converts DTO’s (PoJo’s) into HTML (backend) that in turn can be translated to a JSON object to be used by JS enabled browsers (e.g. upgrade snippet to Widget). These mechanic’s would allow a data first (see Progressive Enhanchment) approach. While the solution works and has potential, it does not produce a super fancy render – as it follows the PoJo data-structure and therefore is limited. These limitations could be canceled though by the use of additional directives (e.g. using different tags, including boiler-plating).

More discussion will be needed on this concept.

(Demo starts plain, adds CSS, then JS with a 2 sec interval)

Intro

As i’m currently prototyping a new product to reach a mvp status, i’m also thinking about the future. What technology stack would i use? Would i stick to familiar technologies? Or should i invest time in newer technologies better technologies? How would my architecture look like? What should be the most important aspects of the architecture?

One of the aspects that i’m currently evaluating is on how to realize a data-first approach as part of the requirement to adopt a data-first approach as part of a progressive enhancement approach (wiki).

Besides looking at js-frameworks that are capable of server-side rendering (React and Vue (with Nuxt.js on op)), i’ve also been experimenting with the idea to create a set of serializers that would be able to directly serialize a PoJo/DTO into viewable HTML, that in turn can be serialized into JSON for use in advanced/JavaScript-supported webpages.

Prototype: Converting PoJo/DTO to HTML, and HTML to JSON.

So after spending roughly 3 hours i made a prototype that just did that, consisting of roughly 3 components:

1. PoJo -> HTML serializer (Serializer.java)
   This basic serializer transforms PoJo’s into basic HTML, taking into account any Class/Field annotations to add additional attributes (e.g. classes) or change the tags used.Supports simple PoJo’s, references to other PoJo’s and Collections/Arrays.
2. DataFormatDirective.java annotation.
   A simple annotation that can be used to direct how a certain PoJo should be serialized. This prototype only supports tag and additionalAttrs. To change the tag to be used, and to provide additional attributes respectively.
3. HTML->JSON JavaScript-function
   A function that, given a domnode can recognize the data encapsulated by the HTML and is able to convert it ‘back’  into the same JSON that we would normally be the result of a webservice-call.This allows any JavaScript browser to use the data hidden in the HTML in the same way it would do if it were to access a webservice.

Indicative design

Sample output:

Running the serializer with default options could result in something like the below:

<div data-t="instance">
   <div data-t="value" data-f="id">0</div>
   <div data-t="value" data-f="name">"Dummy Jones"</div>
   <div data-t="value" data-f="email">"ivo@ivosmail.com"</div>
   <div data-t="array" data-f="friendsWith">
      <div data-t="element">
         <div data-t="instance">
            <div data-t="value" data-f="id">100</div>
            <div data-t="value" data-f="name">"John"</div>
            <div data-t="value" data-f="email">"John@johnsmail.com"</div>
            <div data-t="array" data-f="friendsWith">null</div>
         </div>
      </div>
      <div data-t="element">
         <div data-t="instance">
            <div data-t="value" data-f="id">100</div>
            <div data-t="value" data-f="name">"Rose"</div>
            <div data-t="value" data-f="email">"Rose@Rosemail.com"</div>
            <div data-t="array" data-f="friendsWith">null</div>
         </div>
      </div>
   </div>
</div>

Which without any js/css will result in a pretty dull render. The @annotation however, might be used to change the tag (default=div), add attributes, or even add boiler plating.

With JS enabled, the HTML can be converted to the following JSON, which – is the exact output the jax-rs api normally would return.

{
	"id": 0,
	"name": "Dummy Jones",
	"email": "ivo@ivosmail.com",
	"friendsWith": [{
		"id": 100,
		"name": "John",
		"email": "John@johnsmail.com",
		"friendsWith": []
	}, {
		"id": 100,
		"name": "Rose",
		"email": "Rose@Rosemail.com",
		"friendsWith": []
	}]
}

Download the code:

Will upload to github after a quick sanitize.

Edit: As commented on by Calvin, IBM now has a github containing the up-to-date code with instructions on compiling it for NEON or Oxygen, please refer to https://github.com/ibm-ecm/ibm-content-navigator-samples/tree/master/eclipsePlugin .

I’m not quite sure why there isn’t a NEON version for the eclipse plugin’s yet, but in an effort to answer a question on stackoverflow i decided to see if there were possibilities to recompile the plugin-project for NEON.

It turned out that the reason the plugin doesn’t work for neon is due to a typo in the plugin’s manifest. Here’s what i posted on stackoverflow:

Steps to get it to work with Eclipse neon:

1. Download the 203 version of the plugin;
2. In eclipse: file->new->”Plug-in from Existing JAR-Archives”
3. Choose to include (into the plugin) the .jar file you’ve just downloaded
4. For the newly created project, fill in the blanks / choose the defaults
5. Replace the contents of the generated MANIFEST.MF with the contents of the jar’s original MANIFEST.MF
6. Notice that one of the dependencies/version cannot be resolved (org.eclipse.wst.jsdt.core) remove it, then add choose add to include the current version
7. Export the project as “Deployable plug-ins and fragments” to a folder
8. The folder contains your updated .jar file that goes into your eclipse/plugins directory

The resulting plugin can be found here,(tested on NEON 1, reported not to work on NEON 3) . Alternatively i have one for Oxygen here (tested on Oxygen 2) as well.Just place it in your eclipse/plugins folder, and you’re all set!

Note that i’m not quite sure if i’m allowed to redistribute this software, but i couldn’t find any license information anywhere. Besides, no code was added/modified and the original plugin was distributed freely into the open:). Maybe IBM could share this code on their github?

After sharing a strategy for a poor-man’s SSO solution last month (Logging-in from another application (poor man’s SSO)) I got into contact with one of my readers asking for similar functionality. As i helped t hem pro bono, i figured i could share the proof of concept, additionally giving insight in how to create a TAI.

The problem:

We want a certain Content Navigator Desktop to be accesible by everyone. If a person is not already authenticated, he should be authenticated as ‘guest’.

The solution:

A Trusted Association Interceptor, that intercepts url’s with a specific format (containing desktop=guest) and authenticates any un-authenticated users’s as guest.

The source can be found here, a compiled jar here.

Instructions:

1. Make sure the TAI.jar is loaded in WAS.

This can be done by placing it in the AppServer\lib\ext folder, or even better, by attaching the jar via a shared-library.

2. Configure the TAI

In the wasadmin (ibm/console) go to Security -> Global Security -> Trust association.

Check ” Enable trust association”  and configure the following interceptor:

Interceptor class-name: nl.ivojonker.icn.samples.GuestDesktopSSOLogin

Properties:

urlRegexPattern: <a pattern that will match the TAI to an url>  – e.g.; http.*9080.*desktop=guest

guestDN = <The guest account> e.g.: CN=GuestUser,CN=Users,DC=DEVELOPMENT,DC=LOCAL

3. Reboot websphere

These kind of changes require a websphere reboot.

Next: Access your guest desktop, without logging in and observe you’ll be entering as guest 🙂

Cheers!

When traditional SSO is not an option (e.g. due to the lack of infrastructure), it still is possible to move between web-applications while sharing authentication.

In this post i’ll share a possible strategy  for authenticating a user on a web-applicationg running on websphere, that was send there from another web-applicationg running on PHP/IIS.

The problem:

The client runs a custom-made intranet website running on PHP in IIS. The portal is pretty basic and requires the user to login using their corporate e-mail account and a password. The portal has it’s own database containing e-mails, no active connection to their LDAP is used.

After they bought Content Navigator licences the client figured it would be a great idea to include certain views in their application – and to be able to link to the application. But unfortunately they’re prompted for a second login every time.

The solution:

While normally SSO would be a solution, it isn’t due no policy servers e.t.c. exists. The solution is to create a mechanism where the web portal generate’s an identity token that can be used to access the Content Navigator allowing direct access.

The sequence explained:

When a user clicks a link to the Content Navigator (1), a snippet of javascript evaluates if the user is currently authenticated by requesting a resource on the application server (2). If by any chance a http 200 is issued, the user will be forwarded to the Content Navigator (3), otherwise in case of http 403 (forbidden), a request is made to the portal backend for a new login link.

As the portal backend keeps track of who is currently logged in, it will be able to append a Token to a database (6/7). This token contains a random-unique byte sequence, an expiry date and the current user’s e-mail address. The expiry date is used to make sure the token is only valid for a very short time, the unique token will act as a non guessable ‘secret’ between the portal and the application server.

The portal frontend receives the generated token, and appends it as a parameter to the original requested URL. The url is then loaded in  the browser (9/10).

When Websphere receives the request, it will determine that the current user is not authenticated and will try to use the Trusted Authentication Intercepter to authentiate the request(11).

The TAI will fetch the token from the URL parameter and tests it’s validity. If valid, it will translate the associated e-mail to a fully distinguished name for Websphere to authenticate (12-16). Websphere authenticates and handles the request, the user is now logged in.

Unfortunately i wont be able to share the client’s code, but i’d be happy to help you out on a similar solution if you need any directions.

After they recently moved all of the plants from our (clients) office due to new regulations ( i guess ), we decided it was time to grow our own plants and hold a contest as to who would be able to grow the largest plant. Everyone adopted a strategy ranging from artificial lighting setups to different fertilizer compositions. For me, it turned out i had the winning strategy using coffee as the main fertilizer:)

Now i wonder if this counts to ‘office humor’, but i surely like these collective nerdy things as they improve the team spirit greatly! So with this in mind, perhaps the next challenge could be to create an office ant-farm? 🙂

Previous office-challenge: On the fruits of software engineering (Literally)

I didn’t actually notice at first, but over time – while working on a case manager solution, the speed of my deployments slowly decreased finally taking up to 10 minutes.

It eventually turned out it had to do with a huge (and growing amount) of log files in the <WASProfile>\ICM folder that was clogging the process.

So, the tip of today: If you’re having slow deployments as well? Stop your WAS-server, and empty the folder!

edit: The post below finally became obsolete as IBM finally created the layout-widgets our client’s had been asking is for! Introduced as of 5.3.1. are: tabs, columns and titlepanes!

While i aimed this post to contain a first prototype of, what i call an advanced layout widget for IBM Case Manager, unfortunately i have only been able to create a proof of concept for the idea that configured widgets (page designer) can be reorganized, while maintaining their original wiring functionality.

While this knowledge will ultimately result in something cool, i guess at this point it’s only a boring prototype combining three widgets on a custom page within a tabcontainer.

Non the less, i figured to share these proceedings.

The below prototype code was part of a script-adapter triggered on pageOpened;

var page = this.page; 
/*Some arbitrary widgets defined in the pagedesigner */
var wInbasket=page.Inbasket4;
var wCustomWidget=page.MijnVWSICMWidget0;
var wWebsiteWidget=page.WebSiteDisplayer1;

/* this.page.domNode gives the page layout, usable but not for this prototype*/
var pageNode = wWebsiteWidget.getParent().domNode;

var createTabContainerAt=function (domNode){

	var tc = new dijit.layout.TabContainer({ style: "height: 100%; width: 100%;"});
	tc.placeAt(domNode);
	

	return tc;
}

var appendWidgetToTC=function (widget, title, tc){
	var wrapper=document.createElement("div");
	wrapper.style="width:100%;height:100%;position:relative";
	
	var newTab = new dijit.layout.TabContainer({title:title});
	newTab.domNode.appendChild(wrapper);
	wrapper.appendChild(widget.domNode);
	
	tc.addChild(newTab);
}

var tc=createTabContainerAt(pageNode);

appendWidgetToTC(wInbasket,"Inbasket widget",tc);
appendWidgetToTC(wCustomWidget,"Custom widget",tc);
appendWidgetToTC(wWebsiteWidget,"Website viewer widget",tc);

And utlimately transformed this page:

into:

I’ve been playing with the idea to add new functionality to the CaseBuilder in order to overcome a few design issues my clients have been facing.

For instance i figured it would be nice to be able to add additional css properties to widgets, instead of only being able to set the width/height in px/%. Another idea was to create a tab-container widget to accommodate other widgets while preserving the wiring.

Great ideas and all, but after starting the development of the latter i discovered there isn’t actually a plugin model for the CaseBuilder. Of course it is possible to develop widgets, but unfortunately the widget’s json only has a few preview-icons, when it comes to the design-time part.

Eventually i figured the only way to execute code was to inject a bootstrap as part of the widget title. Anyway, this is what i came up with:

My widget json:

{
	"Name":"IvoJonker.nl - Widgets",
	"Description":"Custom widgets made by Ivo",
	"Locale":"",
	"Version":"1.0",
	"Categories":[
		{
			"id":"nl.ivojonker.icm",
			"title":"IvoJonker.nl - Widgets"
		}
	],
	"Widgets":[
		{
			"id":"AdvancedLayoutingAdapterWidget",
			"title":"Advanced Layouting Adapter<img onload='require({paths:{\"AdvancedLayoutingAdapterBootstrap\": \"/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap\"}});require([\"AdvancedLayoutingAdapterBootstrap/bootstrap\"], function(bootstrap){});' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>",
			"category":"nl.ivojonker.icm",
			"description":"Advanced Layouting Adapter",
			"definition":"AdvancedLayoutingAdapter.json",
			"preview":"images/comment_preview.png",
			"icon":"images/comment_icon.png",
			"runtimeClassName":"nl.ivojonker.icm.advancedlayoutingadapter.AdvancedLayoutingAdapter",
			"help":"",
			"previewThumbnail":"images/comment_thumb.png"
		}
	]
}

Notice the javascript that is part of the title:

require({
    paths: {
        "AdvancedLayoutingAdapterBootstrap": "/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap"
    }
});
require(["AdvancedLayoutingAdapterBootstrap/bootstrap"], function(bootstrap) {

});

So, wrapping it up: When the widget is displayed as part of the catalog, an image onload triggers the bootstrap code stored in an accomodating .ear file.

Now, as this hardly seems to be a future-proof way, i was wondering if any of my readers have better suggestions 🙂

When creating IBM Content Navigator plugins (or Case Manager Widgets), it may be a good idea to bundle generic services into a single plugin. The problem however is, that there is no straightforward way to invoke these services from within another plugin, as each plugin is loaded with its own classloader.

In order to overcome this architectural issue, i ‘hacked’  together a plugin-bridge allowing exactly that. (feel free to contribute improvements, as this is only a work in progress)

Simply add this jar to your plugin (or even better, as a shared library for your navigator.war), and you’re ready to do stuff such as:

/** Some service within some plugin */
public void execute(PluginServiceCallbacks callbacks, HttpServletRequest request, HttpServletResponse response) throws Exception {
	JSONObject result = new JSONObject();

	PluginBridge response=new PluginBridge().invoke("OtherPluginID","OtherServiceID", [optional params]);
       
	result.put("response","The other response was: "+response.getResponseAsString()); 

	response.getWriter().write(result.toString());
}

Useful, right? 🙂

Download the jar here (including source/javadoc licensed under MPL-2.0).

edit april 14:

I actually just recently discovered 2.0.3. introcued the com.ibm.ecm.extension.PluginAPI which is, by design a better solution to share functionality amonst different plugins. Check it out!