Extension:WidgetsFramework

This page is under construction !

The WidgetsFramework extension adds widgets to MediaWiki. Integrating external services, such as social networks and multimedia players, can then be done using the wiki markup (no html, no js), like.

About
This extension was developed and is maintained for the needs of Seizam.com by Yann Missler and Clément Dietschy.

For the moment, the source code is hosted on the "seizamcore" repository at Seizam's github. This is a complete MediaWiki installation with extensions, currently running on Seizam.com and named WikiZam. We also created archives containing only the WidgetsFramework extension.

The 0.3 version is stable with MediaWiki 1.18.5, but we chose to mark it as experimental, as the architecture may change depending on the community reviews.

Why has this extension been created ?
On Seizam.com, we needed editors to integrate external services. At the beginning, we used the Widgets extension. We found lots of existing widgets, they were easy to use, it looked like perfect.

But:
 * there is a security problem that is still unresolved, which allows anyone to inject HTML on wiki pages (see bug 39883),
 * we would like to handle both parser functions and parser tags widgets in the same extension,
 * we would like to "catch" widgets syntax errors and internationalize the display,
 * we would like widgets to have full access to MediaWiki PHP backend (internal MediaWiki widgets? API query for visual editor?) and
 * we would like widgets to be version controlled (Git/Gerrit).

So, we decided to create this extension:
 * HTML cannot be injected any more, and because widgets are backend side in static PHP files, only system administrators manage widgets,
 * parser functions are already implemented, and parser tags will be in the next releases,
 * we integrated parameter validation, error messages, english and french languages are already available, and
 * widgets can access all of MediaWiki's functionalities.

The current state

 * The framework is fully functional for parser functions widgets.
 * Available widgets are: Bandcamp, Vimeo, Flickr, SoundCloud, AddThis, Twitter, Facebook, GooglePlus, Audio (HTML5 file player), Video (HTML5 file player), Dailymotion, and YouTube.
 * Documentation have been written for each widget on help pages at Seizam.com.

How will this extension evolve ?

 * 1) More and more widgets! You can request new ones in |the talk page.
 * 2) The extension will be made compatible with MediaWiki 1.20.0 (should work as it is, but not tested yet).
 * 3) Widgets arguments could be parsed by MediaWiki parser, in order to use magic words and templates as parameter values.
 * 4) Parser tags widgets could be added (the framework as been imagined to integrate both parser tags and parser functions, there will be some re factoring/designing to do, but it should not break existing widgets).
 * 5) Automatic documentation for widgets.

Your help is needed!
Don't hesitate to give feedback on |the talk page.

Pending discussion with admins and if this extension receives good reviews, we might request a commit access to the MediaWiki repository, whatever favors the community.

Currently, this extension is just at its beginning. Our goal is to improve it, add features and make it as easy to use for wiki editors and for widgets developers as possible.

We believe this extension adds a real value to MediaWiki websites by easily and safely including external services (or at least, that's what we tried to do).

Using widgets
Widgets are already installed in WidgetsFramework. For the moment, they are all parser functions with no "#" prefix.
 * See the quick overview or
 * browse widgets documentations with examples.

Widget parameters can be of types like boolean, string or integer. Each type validates only certain value format. The documentation of a widget recalls which values its parameters accept.

Parameters can either be set by name, or by order, or both. See example for the first 2 parameters of the Vimeo widget:
 * the first parameter named " " of type string, and
 * the second parameter named " " of type integer in pixel.

Set parameters by name
This is the clearest case. The order arguments are written doesn't matter:
 * is equivalent to
 * is equivalent to

Set parameters by order
When there is no name, the order in which the arguments are written must be same as the order of the parameters declaration in the widget PHP source code. See the documentation of the widget.
 * is equivalent to
 * (because  is the first widget parameter, and   is the second one)

Set some parameters by name and some by order
First, parameters are set by name, then the remaining parameters are set by order. Example with.
 * 1) Before the widget reads the arguments:
 * both parameters are not set,
 * " " is the first one and
 * " " is the second one.
 * 1) First read of the named arguments:
 * parameter " " is set to value ,
 * 1) Second read of the unamed arguments:
 * the first parameter (now it is " ") is set to.

Install new widgets

 * 1) The same way as you install MediaWiki's extensions, simply copy the new widget folder in the  directory.
 * 2) That's it! The WidgetsFramework extension detects the widget and installs it automatically.

For the moment, all available widgets are already in WidgetsFramework archive.

Fell free to contribute, develop your own widgets, and (for the moment) |contact us to add it in the Git repository!

How do widgets work?
Each widget consists of a folder containing the source files, all names are camel cased.

Let's have a look on the Vimeo widget to understand how it works.

The folder  inside   contains only 2 files.

Vimeo.php
This is the core file.

The framework uses PHP namespaces (require PHP >= 5.3.0). It avoids name collisions for classes/functions/constants without having extra long names. This allows shorter and cleverer names, without breaking MediaWiki or other extensions.

This creates the widget Vimeo as a parser function.

Theses are the parameter the widget accepts.

Then, there are the two methods a widget must have.

declareParameters
This method sets all the parameters up. See the PHP documentation in the code.

The first parameter is a string named " ".
 * This parameter must be set.
 * Its value is subject to an  escape (for now, available modes are the same as in smarty escape used in Widgets extension)
 * This parameter is finally added to the widget.

The second parameter is an integer in pixel called " ".
 * It is optionnal.
 * If not set, it's default value is . It's range goes from   to   (both included).

The third parameter is called " ". It is similar to " " parameter.

The fourth and final parameter is a xor parameter called " "
 * It is optional.
 * It contains 2 options:  and , this means that user either type:
 * (or, or  , or   ),
 * but should not set both  and
 * but should not set both  and

getOutput
When a widget is called and the framework validates successfully its parameters (required, min, max, ...), this rendering method is called. It returns the raw HTML.

To make the code easier to read, this widget has its CSS class selection in a separate method. CSS classes are selected according to the value of the parameters.

Vimeo.i18n.magic.php
As a parser function, the widget has to tell MediaWiki the keyword  is associated to it. Furthermore, the keyword is set case insensitive, so there will be no difference is someone type  or.

See MediaWiki documentation about magic words declaration

That's it!
Users can now embed Vimeo in the wiki :) See an example on here.