Drupman extensions

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
lexhung's picture

After a long time of experimenting, I've reach to a quite stable design of the user interface and the way Drupman will integrate with a Drupal site. Below, I will sketch some main points :

User interface

Drupman interface consist of the following components

  • A menu system an a title bar
    provides Drupman the look and feel of a desktop program.
  • The sidebar
    is used to navigate around the system and the keypoint to administrating tasks
  • The main view
    The main view consist of the main working pane and a toolbar. The toolbar is modelled
    after the Joomla/Mambo style where a toolbar is attach with a pane and will be changed to reflect actions that a content pane support.
  • A status bar
    may be useful but for now I just found it's no use :)

Views

The Drupman interface is organized into views - each view is a set of three including : a panel in mainView, a toolbar in mainToolbar, and a panel in sidebarPanel. (Notice that the mainToolbar and the mainView are two separated part. Which means a toolbar may be used by more than one view panel.).
To navigate between views the user may use the menu, the buttons on the sidebar or some special button on each panel or on the Navigation tree. The id of a view is the id of the panel in the mainView. Each panel in mainView may have some attributes (attachedToolbar and attachedSidebar) attached to it to specify which sidebar panel and toolbar come together with that view. We can swich view by calling function switchMainView (eg. To switch to the start screen we may use swichMainView('overview').

Workflow

Drupman have a start screen. This screen may show sites statistics and some quick guide of popular tasks. On the sidebar on the left there's a navigation tree. This tree show structure of administration tasks about Drupman and managing sites (I'm on working to make this tree become more extensible). This tree may be replaced by some other panel that implemented by different views. For example the Node Manager view may implement a tree that shows the taxonomy structure of sites that has been logged in and let user browse the sites' content by that tree.

Dealing with multiple sites

Managing multiple sites at the same time may lead to a confusing workflow. At a time the user must know which site(s) is he dealing with or all of them. I try not to turn Drupman into multiple instances of a single site manager but rather take a more flexible approach.

The sites list is manage through the site manager interface. The list is stored in a global array (DRUPMAN.SiteList[]), but we should manage the list through the interface provided in the namespace DRUPMAN. Whenever there's a change in the site list or site's attributes, an event should be fired.
Each module may choose to work with the current active site or any site it prefers. Modules may have a different approaches to deal with multiple sites problems. For example, the theme selector may only work with a site at a time, while the Node Manager may display all sites in the sidebar and let user navigate beetween sites. This may accomplish by attaching listener to site's related events.
Each site can have one of three statuses :

  • Unavailable - site is unreachable or xmlrpc service is turned off.
  • Offline - xmlrpc service is available but user has not logged in. (or the user doesn't have enough priviledge)
  • Online - user has logged in. (Drupman should have enough priviledge to administrate the site)

There are several cases where the behaviour is unclear now:

  • When no sites is available (the site list is empty)
  • When no site is logged in.

Developing Drupman modules

Drupman is supporting modules (extensions) now. In fact, it's based on XUL powerful extension mechanism and Firefox (XULRunner) extension management system. The extension mechanism of XUL is based on the concept of overlaying. XUL extension management is heavily depend on the chrome URL and manifest files.

Setting up development enviroment

  1. A good text/javascript/xml editor. (I use eclipse)
  2. Firefox 1.5 or later
  3. DOM Inspector extension (highly recommended, packaged with Firefox but not installed by default)
  4. Venkman debugger extension (slow, but required by some nasty bugs)

Before messing with this application, I assumed that you already have some basic knowledge about Mozilla XUL  and developing Firefox extensions (sure you all familiar with Drupal modules and (X)HMTL,CSS, isn't it?) . In order to develop reusable components, a quick look at XBLs are required.
Set "nglayout.debug.disable_xul_cache" to "true" in about:config. This setting will disable the XUL cache. This may increase Firefox startup time but you can update the code with just a refresh.

Quick start

To start developing a Drupman module/extension you should start with the template provided with Drupman. The template is a modified Firefox extension skeleton. Follow the guide in the README file and you'll have a workable extension.

Integrating strategies

Due to the fact that Drupal is a completely web-based system, most of drupal components are design toward a web interface and there's no way to integrate the whole system with a XUL client by single method. Instead, I provided with Drupman some different ways to integrate Drupal with the XUL Client :

  • Use a specialized API
  • Use a general remote Form API (Config API)
  • Use embeded iframe

Specialized API

A specialized API is an XMLRPC API provide by a module itself or by a corresponding interface module. The API is specified by the creator and needs to goes with a XUL part/module that support the API. This approach is most flexible but also hardest to maintain.

Remote Form API

The Remote Form API may be combined with a special XBLs widget to build a Drupal Form remotely. The remote Form API is not quite stable yet, but it can render some basic Drupal form remotely. To support it, developers also needs to implement some hooks in their modules. That should be quite easy if developers could follow some guide lines to ensuring compatibility between web forms and xul forms. However, this feature needs a long time to develop as it has a lot of compatibility issues with current form system, especially with custom themed forms. For now, this feature is used to render node editing forms and some configuration forms.

Embeded iframes

By using <iframe> we can maximized compatibility between the Drupal modules and the XUL client. And it's also the quickest way to integrate some modules into Drupman. However, developer can not take much advantages of XUL. Though it may provides a richer interface, Drupal only act as an AJAX navigation system for administrating.
To make content of iframe and the rest of the system have a consistent look and feel. We need to create a specialized theme that strips out all unnecessary parts like headers, footers, .. etc... and looks like a GUI form. We also need a mechanism to set theme on the fly (may be by a $_GET parameter). This will be very useful in previewing themes, blocks and nodes..., too.

Interface components

In order to provide overlays to extend Drupman, developers must know which file to overlay and id of element to be overlayed. The image below is showing some main elements for overlaying.
Interface components layout

  • mainHeaderBar - The title bar. This bar contains some global controller contained in a <hbox> named drupmanControllerContainer
  • mainMenubar - The menubar. Each menu on the main meneu and corresponding menupopup is named drupman[menu name] and drupman[menu name]Popup (e.g drupmanFile and drupmanFilePopup)
  • sideBar - The sidebar contains two parts:
    • sidebarPanel - a <deck> containing sidebar panels
    • sidebarButton - a <hbox> containing sidebar buttons. Each sidebar button is created by using the <sidebarbutton> tags.
  • mainViewContainer
    - contains two parts
    • mainToolbar - a <deck> containing system toolbars
    • mainView - a <deck> containing all system views
  • messageBar - the message bar will popup whenever user have a notice message. The message bar will hide after 10 seconds.

Quick test

Warning : this is for testing only. The node manager is under rewriting and doesn't work for now.
Below are a snapshot of Drupman and the XMLRPC extension. Download and install these XPIs as normal Firefox extensions.
drupman.xpi - Drupman itself
xmlrpcinstpector.xpi - XMLRPC Inspector extension for Drupman
template.zip - The zip file contains the template to create a Drupman extension

Vision

As I can stabilize the design and implement some interactive mechanism (I'm in experimenting to make the xul tree be able to update in real time instead of paging- this is very useful when browsing very long lists like the site log)

Hopefully we'll have a beta version at the mid of September (with Node manager, modules, taxonomy, theme, and log viewer)

I'm trying to make the feature complete (rc) version be available with the release of Drupal 4.8 (by the end of this year?)

AttachmentSize
siteman.PNG22.25 KB
start.png17.15 KB
xmlrpc.png24.36 KB
interface-layout.png27.79 KB

Comments

good job!

sugree's picture

This is what I'm looking for. It's worth the wait.

We are waiting for some time

Gerhard Killesreiter's picture

We are waiting for some time now, is there any progress being made?

This looks good. Nice work.

Jax's picture

This looks good. Nice work.

I'd like to use your XMLRPC

till's picture

I'd like to use your XMLRPC lib in another extension (not really Drupal-related). Any objections?