vBulletin 4 Widgets

.v0id

New Member
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:
blog_attachment.php


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.
blog_attachment.php


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.
blog_attachment.php

and a layout manager, which looks like this.
blog_attachment.php


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


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"
blog_attachment.php

and the page looks like this.
blog_attachment.php


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.
blog_attachment.php

or this
blog_attachment.php


by checking the boxes in the configuration interface here.
blog_attachment.php


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.
 

Curtis129

New Member
Wow that looks really easy to use, will save a lot of time making new templates and modifications. great stuff .v0id
 

monoxera

New Member
But void if you get too specific on what you've done won't VB do some kind of internal investigation on your ass?
 
Top