vBulletin 4 Widgets

Discussion in 'vBulletin 4 Discussion' started by .v0id, Apr 24, 2009.

  1. .v0id

    .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:
    [​IMG]

    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.
    [​IMG]

    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.
    [​IMG]
    and a layout manager, which looks like this.
    [​IMG]

    Now I go to the content page. Here's my default page:
    [​IMG]

    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"
    [​IMG]
    and the page looks like this.
    [​IMG]

    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.
    [​IMG]
    or this
    [​IMG]

    by checking the boxes in the configuration interface here.
    [​IMG]

    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.
     
  2. Svebu2006

    Svebu2006 New Member

    Finally develops VB. It is also time.
     
  3. Curtis129

    Curtis129 New Member

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

    jdmasta New Member

    can wait till it comes out!
     
  5. monoxera

    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?
     
  6. Mr. C

    Mr. C New Member

    Void gets this from the dev's blogs, mono. ;)
     
  7. monoxera

    monoxera New Member

    LOL I'm so stupid
     
  8. charlie50

    charlie50 New Member

    wow nice thnx for this
     
  9. fritz

    fritz New Member

    thanks for share
     
  10. mazagang

    mazagang New Member

    thank you fo this
     
  11. maplecity

    maplecity New Member

    Thanks, I needed that. Reallyy! .. :)
     

Share This Page