Contents

Here, we show how to create a very simple blocktype that will add a class signature to a Mahara page. The tutorial assumes some knowledge of web development and php programming but is okay for persons with no prior experience developing for Mahara (I started exploring Mahara a week ago).

In this tutorial, we will produce a plugin that let the user add a classroom badge on its page:

The user can change the background color and the rooom number.

The easiest way to create a new blocktype is to copy an existing one and adapt it. Go for an existing blocktype that is as similar as possible in functionality to the plugin you want to write, copy and paste the base blocktype folder and start adapting it.

It may be a good idea to limit the color options. Let's provide four default colours. These values will in fact be saved in the Mahara database. The shorter the name, the better. Here a single letter is enough to differentiate the four colours.

Let's change the rendering to the one of a badge. It would be better to keep the CSS separate, but here that's not too much of an issue as the badge can be added once only on the page. Let's keep it this way for the sake of simplicity.

Now let's take care of the form that is displayed to the user when the plugin is dragged and dropped into the view, in edit mode. Let's have a look at what the code that was in use for creative commons, limiting it the bare skeleton.

has_instance_config defines whether the user has the option to customize the plugin content by editing a form. Keep it to true. We want the user to be able to edit the color and the label.

instance_config_form defines the look and feel of the form that will be shown to the user.

instance_config_save defines how the data that have been specified in the form get saved in the Mahara database. $values holds the data provided by the user when editing the form.

publicstaticfunctionhas_instance_config(){returntrue;}publicstaticfunctioninstance_config_save($values){$configdata=array();return$configdata;}publicstaticfunctioninstance_config_form($instance){// provides a shortcut to the folder <tt>roombadge/theme/raw</tt>global$THEME;// read the config data that have been saved by the user and parse them if necessary. $configdata=$instance->get('configdata');// return a configuration file for the form. returnarray();}

becomes:

publicstaticfunctionhas_instance_config(){returntrue;}publicstaticfunctioninstance_config_save($values){switch($values['colorIdx']){case0:$color=self::orange;break;case1:$color=self::red;break;case2:$color=self::blue;break;case3:$color=self::green;break;}$configdata=array('title'=>get_string('title','blocktype.roombadge'),'label'=>$values['title'],'color'=>$color,);return$configdata;}publicstaticfunctioninstance_config_form($instance){global$THEME;$configdata=$instance->get('configdata');// defaults to use$color='O';$label=get_string('defaultlabel','blocktype.roombadge');// if the user previously speficied some value, use the user values instead of the defaultsif(isset($configdata['label'])){$label=$configdata['label'];}if(isset($configdata['color'])){$color=$configdata['color'];}// Convert the one letter color name into the index value of the radio group. switch($color){caseself::orange:$colorIdx=0;break;caseself::red:$colorIdx=1;break;caseself::blue:$colorIdx=2;break;caseself::green:$colorIdx=3;break;}returnarray('title'=>array('type'=>'text','value'=>$label,),'colorIdx'=>array('type'=>'radio','title'=>get_string('config:selectcolor','blocktype.roombadge'),'options'=>array(0=>get_string('O','blocktype.roombadge'),1=>get_string('R','blocktype.roombadge'),2=>get_string('B','blocktype.roombadge'),3=>get_string('G','blocktype.roombadge')),'defaultvalue'=>$colorIdx,'separator'=>'<br>','help'=>true,'rules'=>array('required'=>true),),);}

We need to add any string used in the config form the language file roombadge/lang/en.utf8/help/blocktype.roombadge

Click Edit Content at the top right of the page. Select the tab General as we opted for category 'general' in our lib file. Select Classroom Badge and drop it into your view. Click on the form icon to configure.