How to use BootstrapInterface – Yii2

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.

2 comments

  1. Damien   •  

    What is the physical path of your ThemeBootstrap.php class file? I’m trying something similar with it in common/app/extensions/components/ThemeBootstrap.php, and it just keeps throwing an exception saying Class app\extensions\components\DevBootstrap does not exist

    Thanks,

    Damien

  2. Antonio Ramirez   •     Author

    common/app/extensions/components? See the app? I think your namespace does not corresponds to your app structure. My class is in app/extensions/components and the Class namespace is app\extensions\components. Think of app as the root folder.

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>