contextSwitching on using Zend for mobile websites


Hello,

After many hours spent on searching for a solution on how to render specific views and layouts depending on the device used on Zend, I found a conveniant way to do that, contextSwitch helper:

What it does:

– you have a /my_module/my_controller/my_action/ url – zend, by default,zend  looks for the view script on /my_module/views/scripts/my_controller/my_action.phtml path. You can change that with contextSwitch and tell Zend to use some other view like my_action.mobile.phtml.
* In completing the idea of  rendering device-dependent content, you may also want to use a different main layout for your website.

How you do that:

1. Inject a plugin into your controller by this:

* in bootstrap file, create a method:
protected function _initPlugins ()
{
$this->_front->registerPlugin(new Fd_Controller_Dispatch_Plugin());
}

* and the plugin class:
<?php
class Fd_Controller_Dispatch_Plugin extends Zend_Controller_Plugin_Abstract {
private $_agents = array('mobile' => array('ipad'), 'webos' => false, 'Android' => false);

public function dispatchLoopStartup(Zend_Controller_Request_Abstract $req) {

//here we add the contextSwitch helper and set two contexts, html the default one
$contextSwitch = Zend_Controller_Action_HelperBroker::getStaticHelper('ContextSwitch');

$contextSwitch
-> clearContexts()
-> setContext('mobile', array('suffix' => 'mobile', 'headers' => array('Content-Type' => 'text/html;Charset=UTF-8'), ))
-> setContext('html', array('suffix' => 'html', 'headers' => array('Content-Type' => 'text/html;Charset=UTF-8'), ))
-> setAutoDisableLayout(false)
-> setDefaultcontext('html' )
-> initContext();

//the detection of the browser is done here by HTTP_USER_AGENT variable
$user_agent = $req->HTTP_USER_AGENT

//walking trough defined user agents and check if it needs context switching
foreach ($this->_agents as $agent => $negation) {
if (stripos($user_agent, $agent) !== false) {
if ($negation) {
foreach ($negation as $neg) {
if (stripos($user_agent, $neg) !== false) { //then we found an exception for this user agent, don't apply contextSwitch
return;
}
}
}

//this will add the format param witch will tell the controller that we can try to switch the view
$this->_request->setParam('format','mobile');

//this will switch the main layout
Zend_Layout::getMvcInstance()->setLayout('mobile');
return;
}
}

//by default set the param to html - in order to use the default context
$this->_request->setParam('format','html');

}

}
2. In your init method on the controller class, add the context to the requested action
public function init(){
parent::init();

$module = $this->getRequest()->getModuleName();
$controller = $this->getRequest()->getControllerName();
$action = $this->getRequest()->getActionName();

//before use a different script file, make sure it exists
if(file_exists(APPLICATION_PATH.'/modules/'.$module.'/views/scripts/'.$controller.'/'.$action.'.mobile.phtml')){
$this->_helper->contextSwitch()
->addActionContext($action, 'mobile')
->initContext();
}

}
That is it. Make sure you have the .mobile.phtml file on the right path and if you do, then it should use it.

You can also use Opera Mobile Emulator for quick tests.

It’s very useful, especially when you are using a html/css framework like twitter bootstrap. I have tried this and I think it do the job on http://12trade.ro website, where I am using twitter bootstrap and zend contextSwtich. I render basically the same type of content in two formats ( desktop and mobile ).

References:

http://www.eschrade.com/page/creating-separate-mobile-layout-zend-framework-application-4bcf7545/

http://static.zend.com/topics/Mobile-web-app-with-ZF.pdf

Reclame

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare /  Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare /  Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare /  Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare /  Schimbă )

Conectare la %s