Blogging Roller

WIP: Widgets and Gadgets

2012-02-22T07:52:11+00:00

This is the fifth in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Allow other web sites and applications to integrate your site into their web pages by providing an embeddable user interface, commonly known as a Gadget or Widget, which allows users to view and interact with your site in the context of other sites.

Motivations

By embedding Widgets in your site, you can make your site more useful and informative to your users. Users can access relevant information from other sites in the context of your web site.
By allow other sites to embed your Widgets, you can give your site and the services that it offers wider reach. Your users can access and interact with your services in the context of other sites.

Related Patterns

Dashboards and Portals
Social Network Plugins
Delegated Pickers

A Widget or Gadget is a piece of an application, a visual component or a chunk of user-interface that can be added to some other application. On the web, Widgets are implemented using HTML and JavaScript, or sometimes Flash. Here we'll discuss simple Widgets and leave discussion or more advanced usage of Widgets in Dashboards, Portals and Pickers for the more advanced patterns we'll discuss later.

Easy to "consume"

Widgets are easy, especially for widget "consumers" i.e. those who wish to add an existing Widget to their site. Adding a widget to your site or web application can be as easy as adding a couple of lines of HTML and JavaScript to the pages of your site. You can see some examples of Widgets in the two screen shots I've included here, below is the Wayin polling Widget, which shows my latest Wayins:

And below is the Flickr Widget, which shows a random selection of my photos from Flickr. You can see these two Widgets in action on the front page of my blog. And, by the way, the Like, Tweet and +1 buttons on the right of this entry (when viewed on my blog site) are also Widgets.

Relatively easy to create

Developing an entirely new Widget more complicated than using one that already exists. Creating a new Widget typically requires writing HTML and JavaScript code and employing some interesting tricks. The simplest way to implement a Widget is to use an iframe, allowing a portion of one site to be embedded in another site.

I'm not going to go into detail as there are already so many good resources on the web for learning about Widget crafting. For example, Alex Marandon wrote a pretty comprehensive blog post on creating Widgets covering basic issues like how to ensure that your widget code does not interfere with the page hosting the Widget, how to dynamically load resources and how to bypass browsers’ single-origin policy using JSON-P.

Widget and Gadget standards

For simple Widgets you don't really need any standards other than HTML and JavaScript. If you want to target specific web site Dashboards or Portals, like NetVibes, or enterprise web applications like Jive or Atlassian's software development tools, then you'll need to create your Widgets with specific APIs in mind. For example, NetVibes provides it's own Widget API, while Jive and Atlassian support the Open Social Gadget APIs. I'll talk more about these issues when I cover the related patterns Dashboards, Portals and Social Network Plugins.

Wrapping up...

That's it for Widgets and Gadgets. Next up: Feed-based Integration.

I want a Treo 650, but not from Sprint

2004-10-25T14:13:05+00:00

Slashdot announces The Official Launch of the Treo 650. This is perfect timing for me, because my existing phone - a Visor Platinum PDA with phone attachment - is about to die. Unfortunately, Sprint, which happens to be my carrier, has crippled the Treo 650 so that it cannot be used to connect a computer to the net. Guess it is time to ditch Sprint.

Airport Express and Linksys WRT45G router

2004-09-19T23:00:28+00:00

I fell for another one of those cute little Apple gadgets yesterday, an Airport Express. I bought it primarily to extend the range of my existing wireless network, but I also bought the cable pack so that I can use the Express to pipe music from iTunes to my stereo.

I had assumed that the "extend the range of my Airport wireless network" feature would work with Linksys WRT54G Wireless-G Broadband router right out of the box, but I was wrong. I hate it when that happens, but after much cursing and gnashing of teeth I found an answer. I found an Airport Express review on Arstechnica that indicated that the WRT54G would work, as long as I upgraded to a hacked open source version of the router firmware and learned how to us WDS (wireless distribution system). Then I found the open source firmware, had a bad run-in with some poorly written instructions, and then finally found a set of instructions that worked for me. For future reference, here are the details:

First, I downloaded and installed the Sveasoft Satori v4.0 WRT54G firmware on my router. Next I followed the instructions below (found in the foruns at http://www.xlr8yourmac.com):

Plug in, reset (push button with paperclip for >5 seconds), and attach the Airport Express (AX) to an Ethernet port on my (Linksys) WRT54G.
Run Airport Admin Utility (AAU) - make sure it's the latest version - installed from the CD that came with the AX. My WRT54G gave the AX an IP address (it's set to use DHCP). The default AX password is "public" (no quotes).

From Safari, go to 192.168.1.1 and log into the WRT54G (default login is blank, and password is "admin"), and display the channel (11), SSID, wireless MAC address (which differs by one hex digit from the LAN and WAN MAC addresses), in the format: 00:0c:41:5f:19:6e. I'm using WEP 128, so I copy the WEP key, too.

Then, in AAU:
Airport (tab) - select Create a Wireless Network, enter the SSID (from the WRT54G) as the Network Name, set the channel to match (channel 11). Click Security and enter "$" followed by my WEP key. Enter it again in the Verify box.

Next click on Internet (tab) - select Connect Using Airport (WDS), type in the wireless MAC address from the WRT54G, and then check Allow Wireless Clients. (I want to allow them but have not yet tested this.)

Click Network (tab) - and uncheck Distribute IP Addresses.

Click the WDS (tab) - and check Enable This Base Station as WDS, and select Remote Base Station. Check Allow Wireless Clients. Again, confirm that the MAC address is filled in with the wireless MAC address of the WRT54G.

Click Music (tab) - and check Enable Airtunes on this Base Station. Give a name to the location where the AX will be deployed (near my home theater room), like "Home Theater."

Now click on Update to load this configuration into the AX.
The Ethernet cable from the WRT54G port is then disconnected, and I unplug the AX, move it near my destination (room with home theater/stereo, 70 feet away and upstairs). After a minute, the AX resets and light stays green. This is good!