Michael Biddle

I'm one of the developers here at VBulletin, and I've recently been building some widgets that are intended to be included with vB4. We're still cleaning up the editor interface, but what I'm showing here should be reasonably close to what we deliver.

I've done three widgets. These are

• static html. I've been testing with google gadgets, so you can encapsulate some significant functionality.
• rss feed. I've tested with atom v2 and rss v2. Other versions should work but I haven't tested yet.
• navigation widget. You'll see below

Just to illustrate, let's say I want to have two different page layouts. I will use a two-column layout, with a narrow column on the right for the widget and the wider column on the left for content. On some pages I want the right column to be navigation, and on other pages I want to have a fishpond.

Here's what I need to do:
Create Widgets
The system will come with several widget types. Currently we're expecting to ship the three types above. You need to create an instance of the types you want to use with type-specific configuration information. So for a static html widget you need to give it html. For a rss widget you need to give it the location for the rss feed. You create a widget in this interface:


And once it's created, you set the widget-specific information like this. Each widget has a different interface with the appropriate settings. I went to google, found a fish pond gadget, configured it, copied the html, and pasted it into this interface.


So make one of these for whatever gadgets you like. I made one rss feed, one navigation widget, two static html (a calculator and a fishpond).

Create Grid and Layouts
Now let's create the two layouts. We have a new CMS Option in admincp. That gives us a grid manager. Grids define the left-right column layout, some header information, etc.

and a layout manager, which looks like this.


Now I go to the content page. Here's my default page:


No, I don't like that. I'd rather have an RSS feed. Back to the layout editor, change the right widget to "Rss Feed"

and the page looks like this.


Now when I created the pages, I created some with this template and some with the second template. The second template uses the navigation widget. There are three configuration parameters for this widget

• Show children
• Show top-level (of the CMS) pages. I only have one top-level page, so I can't show you its' effect.
• Show parent- this shows the tree up to the top.

So here's a page with no children. Depending on the settings I can make it look like this.

or this


by checking the boxes in the configuration interface here.


Note that there is not a "show children" function. We always show the children of the displayed page.

For those of you who are comfortable writing php code, we've written the class structure so you can add your own gadgets. Writing the widget may be difficult or easy, but hooking it into vBulletin will not be difficult.

I hope you find this informative.


Ed Brown
Attached Thumbnails





More...