As a developer, I’m always looking for easier ways to do things. Places to start, templates to use, basically leveraging the work of others.
Now let’s say I have a team of web developers, and while brilliant at data, logic, mathematics, science and memes involving Gene Wilder or grumpy cat, as a lot they are kind of clueless when it comes to aesthetics. Specifically, the area of color. For my UK friends, colour.
So in my search for assistance for the team, I ran across Wolfram Alpha, the computation search engine. If you’ve not used it when you want to know a lot about something, you’re in for a treat. At the risk of losing you for a while, head on over to the site and type in the following: “cheapest toaster”
Tell me you’re not impressed. Seriously. Toasters!
OK back to my team of developers who think 70s bathmats are all the rage. After poking around the Wolfram Alpha site for a while I noticed that there’s a developer area. There’s also a $5/month Pro subscription, which I have, but you don’t need that to play around with the developer tools.
Well it turns out that using Wolfram Alpha, you can create widgets that include input fields, and the output is handled by their servers. Meaning, you can take advantage of the processing power of the computational search engine, create and consume your own custom widget, and embed it in your own website. Pretty cool? It gets better.
As for my developers I decided they needed help to figure out complementary colors for their applications. You know, color theory stuff. So I whipped together a widget (actually modified one that was there) and called it the Color Advisor. The image below has a link to it, go ahead and give it a try. Basically you enter a hex code color (web developers know what these are) and Wolfram Alpha will supply you with an abundance of information about the color, including its most complementary counterparts.
You can also type a standard color name in there like “red” and it works. And hey, who hasn’t wanted a chromaticity diagram as part of their web experience?
Next while clicking around figuring out the best way to share this widget, I ran across the Embed section on the right. Wolfram Alpha gives you the option to copy embed code, or go directly to sites with special URLs, for standard script tag embeds, Blogger, WordPress code, WikiMedia, and iGoogle. Ooh, wait, iGoogle…which as we know is deprecated, as of November 1 2013, whose developer site has deprecated already, and moved off to OpenSocial.org…
Bam. That widget – could it be an OpenSocial gadget? So I hovered over the embed link and lo and behold…
I copied the link to the clipboard:
Nothing is more of a clue that it’s an OpenSocial gadget than the phrase “opensocial”
Why was I so giddy at this discovery? Because I know that OpenSocial gadgets are the way to add some cool functionality to IBM Connections. And what better way of sharing with my team than adding a gadget to Connections? Now all I had to figure out was how to drop it in.
You need a few things to happen in order to add an external OpenSocial gadget to Connections. first, you need the gadget XML file. Here’s some information on OpenSocial gadgets and their XML files…but in our case, it’s actually all provided. You see, the jsp in the URL above generates one for us. If you grab everything after “moduleurl=” in the line above and paste it into, say, Firefox, you’ll get a blank screen. But then, have a look at the source and you’ll see:
I recognized this immediately as an OpenSocial gadget XML file from my own presentation and other work with Connections the past year. In fact, it’s a complete file and I can copy and past it into my own file (or reference it remotely, but I wanted to play). So that’s what I did. The contents of this file became on my Connections server:
I just placed it in the htdocs subdirectory of my IBM HTTP Server, so it would be easy to reference.
Next, I needed to update the configuration to allow the gadget to be used in Connections. For ease of illustration, I placed it on the Homepage app. To do that, as an admin I needed to click “Administration” from my Homepage:
I clicked “Add another widget” on the right and started configuring my widget. The first choice is whether it’s an iWidget or OpenSocial Gadget, which we know, then I left some defaults in the next section as it refers to Share widgets and Activity stream widgets. Now for the meat of it all:
You can see I added the location of my gadget definition file, then found the Wolfram Alpha icon URL so I could use it to liven up the place. I only checked one box “Display on the Widgets page” which is the “My Page” link.
After saving this configuration and enabling the widget, I returned to My Page and clicked on “Customize” and voila, there’s my widget!
And I added the widget to the page:
Now the developers have no excuses. Well, one, that the boss prefers mauve with his teal.
OpenSocial gadgets are the future of IBM Connections development. If you look around, you’ll find that they are being adopted by a number of organizations and APIs, including this quite useful one at Wolfram Alpha. Developing an OpenSocial gadget from scratch is NOT the way to start learning about them – and this tale, nay, tutorial, showed you how to incorporate pre-made widgets into your own Connections environment.
Next steps for developers here would be to do a native UI, support the lightbox result set, or delve into the Connections SPIs for server-side handling of requests…depending on what you’re doing at the time, of course. Color matching isn’t quite important enough for that, but scientific or financial computations might just be.
What else do you want to know about IBM Connections development? Have you created any OpenSocial gadgets? I’ll post about native development soon…but for now go forth and choose appropriate swatches.