README

Introduction

zf2-mobile-view is a Zend Framework 2 module that provides a device specific template resolver. This allows you to have device specific views in separate files e.g. one view for desktop and tablets and a different view for any other mobile devices.

To detect the device type the "mobiledetect/mobiledetectlib" library is used by default. The suffixes added to the resolved templated files are the following (by default):

Tablets: .tablet
Any other Mobile Devices: .mobile
Desktops: none

This will result in changing a resolved template file the following:

Resolved file: application/layout/layout.phtml

Will now resolve depending on the device to:

Tablet: application/layout/layout.tablet.phtml
Any other Mobile Device: application/layout/layout.mobile.phtml
Desktop: application/layout/layout.phtml (stays the same)

If a device specific template file does not exist, then the default template file will be used!

Requirements

Zend Framework 2 (latest master)
Mobile-Detect (latest master).

Installation

Main Setup

By cloning project

Install Mobile-Detect by cloning it into ./vendor/.
Clone this project into your ./vendor/ directory.

With composer

Add this project in your composer.json:

"require": {
    "gregblog/zf2-mobile-view": "dev-master"
}

Now tell composer to download zf2-mobile-view by running the command:
```
$ php composer.phar update
```

Post installation

Enabling it in your application.config.php file.

<?php
return array(
    'modules' => array(
        // ...
        'Gregblog\MobileView',
    ),
    // ...
);

Usage

Default usage

Once the module is included in your application.config.php file, you can simply create device specific layout files. E.g. if you'd like to have a specific layout for tablet devices for a given layout (e.g. "yourmodule/view/index/index.phtml"), simply create a tablet layout file with the same name and in the same directory, but using the suffix used for tablets: "yourmodule/view/index/index.tablet.phtml". And you're done, the tablet view script should now be loaded whenever it is requested using a tablet device!

Changing the renaming strategy

If you would like to change the renaming strategy, you have 2 options:

Change the configuration and provide custom suffixes
Implement your own RenameStrategy class

Change the configuration and provide custom suffixes

This method is sufficient, if you simply want to change the suffixes for different devices. E.g. your view scripts in your application are made for mobile devices, but now you want to add view scripts for desktops, too. If something similiar is the case, you can change the suffixes the following way:

In the configuration file, that suites your needs best (e.g. in config/autoload/global.php, add the following array:

  <?php
    return array(
      // ...
      'gregblog' => array(
        'mobile_view' => array(
          'resolver' => array(
            'rename_strategy' => array(
              'type' => 'Gregblog\MobileView\RenameStrategy\DefaultRenameStrategy',
              'options' => array(
                'desktop_suffix' => '.desktop',
                'mobile_suffix' => '',
                'tablet_suffix' => '',
              ),
            ),
          ),
        ),
      ),
      // ...
    );

Implement your own RenameStrategy class

If your needs are more complex, you can implement your own RenameStrategy by creating a class and let it implement the Gregblog\MobileView\RenameStrategy\MobileViewRenameStrategy interface or extend either 'Gregblog\MobileView\RenameStrategy\DefaultRenameStrategy' or 'Gregblog\MobileView\RenameStrategy\AbstractRenameStrategy'. If you extend from 'Gregblog\MobileView\RenameStrategy\AbstractRenameStrategy' you can utilize the setOptions method and provide and options array within your configuration to dynamically set properties.

If you class is ready to use, simply change the configuration as described above and change the type to your custom class (e.g. your class is Yournamespace/RenameStrategy/YourCustomRenameStrategy):

  <?php
    return array(
      // ...
      'gregblog' => array(
        'mobile_view' => array(
          'resolver' => array(
            'rename_strategy' => array(
              'type' => 'Yournamespace/RenameStrategy/YourCustomRenameStrategy',
            ),
          ),
        ),
      ),
      // ...
    );

Use a different mobile detection library

By default zf2-mobile-view uses the "mobiledetect/mobiledetectlib" library. If you want to use another library you can do so by following the next 2. steps:

Create a class which implements the Gregblog\MobileView\Detect\GregblogMobileDetect interface and either provides the methods to determine the device yourself or use it as a proxy class.
Define a service with the name Gregblog\MobileView\GregblogMobileDetect pointing to your created class or a factory which creates the class instance for you.

Example

Assuming we have a mobile detection library which consists of a class with the name YourMobileDetectionService

ExampleProxy.php

class ExampleProxy implements \Gregblog\MobileView\Detect\GregblogMobileDetect {
	private $detectionService;
	
	public function __construct(YourMobileDetectionService $detectionService) {
		$this->detectionService = $detectionService;
	}
	
	public function isDesktop() {
		return $this->detectionService->isDesktop();
	}

	public function isMobile() {
		return $this->detectionService->isMobile();
	}

	public function isTablet() {
		return $this->detectionService->isTablet();
	}
}

ExampleProxyFactory.php

class ExampleProxyFactory implements \Zend\ServiceManager\FactoryInterface {
	public function createService(\Zend\ServiceManager\ServiceLocatorInterface $serviceLocator) {
		$detectionService = $serviceLocator->get("YourMobileDetectionService");
		return new ExampleProxy($detectionService);
	}
}

Service Manager configuration

  //..
  'service_manager' => array(
    'factories' => array(
      'Gregblog\MobileView\GregblogMobileDetect' => 'ExampleProxyFactory',
    ),
  ),
  //..

gregblog / zf2-mobile-view

Maintainers

Details