Friday, October 28, 2011

Converting M1.9 Plug-ins to M2 - Block Part 3 - Porting Code


This is part four of my series concerning porting Moodle 1.9 code to Moodle 2.

One of the problems I noticed with the M2 version of the block was that my configuration settings were missing. In 1.9, I could specify a twitter search string, the number of tweets to display and a refresh rate. When I click edit on the block now, those are missing. I'll start with that problem.

The base of this problem is simple: in Moodle 1.9, block instance configuration was handled by a file called "config_instance.html". In Moodle 2, this has changed. In Moodle 2, all blocks have a standard instance configuration to handle things like default page appearance and location. This configuration is always available. To add block-specific configuration elements, we need to include the "edit_form.php" file.
Note that the current documentation indicates that the function "instance_allow_config" needs to be present and needs to return "true" for the configuration form to be available. I believe this is an error in the documentation and is no longer true.
 So, I will take the settings specified in the "config_instance.html" and recode them into a new "edit_form.php" file, using the Moodle forms API. I end up with a file that looks like this:
<?php

class block_twitter_search_edit_form extends block_edit_form {
    protected function specific_definition($mform) {
        $mform->addElement('header', 'configheader', get_string('blocksettings', 'block'));

        $mform->addElement('text', 'config_search_string', get_string('searchterms', 'block_twitter_search'));
        $mform->setType('config_search_string', PARAM_MULTILANG);

        $mform->addElement('select', 'config_no_tweets', get_string('numoftweets', 'block_twitter_search'), range(0,20));

        $mform->addElement('text', 'config_polltime', get_string('polltime', 'block_twitter_search'));
        $mform->setType('config_polltime', PARAM_MULTILANG);
    }
}
This file ports the old HTML code into new Moodle formslib code. Other than changing the functions that generate the form elements, the biggest change is to the name of each form element. For this to work in Moodle 2, there needs to be a "config_" prefix added to each configuration element. Without this, the configuration variables will not save or load properly.

Once I've completed this addition, and deleted the old HTML file, I should be good to go. To check, I go to my block instance with editing turned on and click the "edit" icon. Now I see a new section at the top of the configuration page with my Twitter search settings, as shown below.


Now, we still have the issue that the tweets display doesn't look the same as it did in 1.9. There is no dividing line between the tweets. The simplest solution to this is really easy. In Moodle 1.9, a block could define its own CSS styles in a file called "styles.php". In Moodle 2, block-specific CSS is specified in a CSS file called "styles.css". In 1.9 you could specify PHP code with your CSS. In Moodle 2, you can only specify CSS.

In almost all cases, the 1.9 "styles.php" file never actually contained any PHP code, and was strictly CSS. In this block's case, that is also true. So the simplest solution to this problem is to just rename my "styles.php" file to "styles.css". Once I've done that, my display should look the same as it did in 1.9. And when I go look... Ummm... Hmmmm... It still looks wrong.

There's a good reason for this. In Moodle 2, as part of the new theme engine, CSS is cached. So, while I am now outputting new CSS with my block, Moodle is ignoring it, since it has already cached my block's CSS. There is an easy solution though. Moodle 2 allows us to enable a "Theme designer mode" which disables CSS caching. This can be found on the "Site administration / Appearance / Themes / Theme settings" page. Enabling this mode this will make my pages slower, but since this is a development site, I'm not going to worry about that. Its more important that I see my changes as I make them.

After enabling this mode, and going back to my page, I now see the CSS as I had defined it in my Twitter Search block.

There is more work I have to do to make things really M2'ish, plus there's still that display bug I keep seeing when the block refreshes. Next post, I'll track that down.