Yii 2.0: How to use BootstrapInterface

2 followers

Yii2 introduces the BootstrapInterface to ease our application initialization tasks, whether they are composer based or Application bootstrap (do not mistaken with Bootstrap CSS Framework) based tasks. On this article, I am going to explain how to use it on your Application bootstrap process.

For our example, our site has two themes, one for desktop and the other for mobile rendering respectively, and we wish to switch between themes after detecting user's platform. I am not going to explain how to install and configure your Yii2 Application (for a brief hint, please check my previous post on Yii2: Adding FontAwesome to your Yii2 Project Via Composer) so I assume that you have already a Yii2 application ready folder structure.

Install required extensions

In order to check whether our visitor is using a mobile, tablet or desktop device, we are going to use the wonderfully made class Mobile_Detect from mr Serban Ghitta (Thanks buddy!). In order to do that, we are going to include the following on our composer.json file:

"require": {
// ....
"mobiledetect/mobiledetectlib": "dev-master"
// ....
 
},

And run your composer update command at your terminal window.

Configure your desktop theme

Yep, before we forget, we need to configure our desktop theme. On this example, I am using the basic project template from Yii2, so the file where I am configure my theme is on config/web.php.

'view' => [
    'title' => '2amigOS! Consulting Group LLC',
    'theme' => [
       'baseUrl' => '@web/themes/desktop',
       'basePath' => '@app/themes/desktop'
    ]
],

As you can see, my themes are located under the application's root directory and within the folder named themes. Note: Even though it is not shown here, I have another theme named mobile under the same folder themes.

The ThemeBootstrap class

Ok, now that we have configured our desktop theme, lets code our ThemeBootstrap class. This class will extend from the already mentioned BootstrapInterface interface and as you can see it has only one public method that is required to be implemented: bootstrap. This method is fired on our application's init function per bootstrap class configured. For a closer look on how and where it occurs, please check Application::init method at github.

The following is our ThemeBootstrap class, placed in our app/extensions/components folder:

namespace app\extensions\components;
 
use yii\base\Application;
use yii\base\BootstrapInterface;
 
class ThemeBootstrap implements BootstrapInterface
{
    /**
    * Bootstrap method to be called during application bootstrap stage.
    * @param Application $app the application currently running
    */
    public function bootstrap(Application $app)
    {
        // create an instance of Mobile_Detect class
        $detector = new \Mobile_Detect();
 
        if ($detector->isMobile() || $detector->isTablet()) {
        // modify the configuration of our view component
        $app->set('view', [
            'class' => 'yii\web\View',
            'title' => '2amigOS! Consulting Group LLC',
            'theme' => [
                'baseUrl' => '@web/themes/mobile',
                'basePath' => '@app/themes/mobile'
            ]
        ]);
        }
    }
}

You probably are wondering what is going on? How come we change the component's configuration like this? Well, in case you don't know, Yii2 now supports DI (dependency injection) and our Application component extends from a Module, which extends from DI's ServiceLocator class (check ServiceLocator::setComponents and Application::preInit functions, and you will soon realize how the Application merges the required classes with their configuration).  What we are using, is the ServiceLocator::set method to override the configuration of the view.

Configure ThemeBootstrap

There is one more thing to do, we need to tell our Application that we wish the ThemeBootstrap::bootstrap to run when initialized and we do that by setting Application::bootstrap property.

// ...
'bootstrap' => [
    'app\extensions\components\ThemeBootstrap',
],
'components' => [
// ...

And that's it, now when your application starts Yii will automatically call ThemeBootstrap::bootstrap method thus modifying the theme of your application.

Be the first person to leave a comment

Please to leave your comment.

Write new article