How to convert a Zend Framework site to a mobile site?

Fawad Ghafoor ( - https://web.archive.org/web/20110225213957/http://www.web-punk.com/2010/03/zend-framework-applications-for-iphone-blackberry-co/)

, , - .

Zend Framework iPhone, BlackBerry Co

. , , iPhone, BlackBerry ..

: , , - - MVC (//) , , Zend_Layout.

1.

, , , - , - : a) , b) V MVC ).

. , : (Zend_Layout), -, (Zend_Translation). , , ? , , , ( looong) ( , , ..)

, Zend Frameworks (http://framework.zend.com/manual/en/zend.controller.actionhelpers.html) - , ... ContextSwitch , " ". : JSON XML. "mobile".

... - : http://www.web-punk.com/wp-content/uploads/2010/03/mobile_wf-300x94.png

, , " " ( , ). http://mobile.example.com/controller/action, "". http://www.example.com/controller/action, , . , , -. , , , / ( , ).

, , http://www.qulpa.com

2. . , , . , WURFL. , true, false . , , . , .

. \plugins Mobile.php :

<?php
class Plugin_Mobile extends Zend_Controller_Plugin_Abstract
{
    // instead of defining all these parameters here,
    // you could also put them into your application.ini

    // if user is inactive for X minutes and surfs to
    // www.example.com, we'll ask him again if he wants
    // to user mobile or desktop version
    private $ask_again_after_x_minutes = 10;

    // used to test your mobile layout. Set this
    // to 1 to emulate a mobile device
    private $test_mobile = 0;

   public function dispatchLoopStartup(Zend_Controller_Request_Abstract $request)
    {
        // did we already ask the user?
        if (isset($_SESSION['mobileasked'])) {
            // is mobile session still valid?
            if (time() < $_SESSION['mobileasked']) {
                // update session
                $_SESSION['mobileasked'] = time() + $this->ask_again_after_x_minutes * 60;
                // continue with requested page
                return $request;
            }
        }

        // otherwise, check if user is using a mobile device
        // or if we are in test mode.
        if ($this->checkmobile() || ($this->test_mobile == 1)) {
            // if requested page != MOBILE.example.com
            if (!(Zend_Registry::isRegistered('directmobile') && Zend_Registry::get('directmobile') == '1')) {
                // set mobile session
                $_SESSION['mobileasked'] = time() + $this->ask_again_after_x_minutes * 60;
                // ask user if he wants to use mobile or desktop version
                $request->setControllerName('index')
                        ->setActionName('askmobile')
                        ->setParam('format', 'mobile')
                        ->setParams($request->getParams())
                        ->setDispatched(false);
            }
        }
        return $request;
    }

/**
  * This function returns true if user is using a mobile device. False otherwise.
  * (c) by http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers
  */

private function checkmobile(){
   if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
   if(preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) return true;
   if(isset($_SERVER["HTTP_USER_AGENT"])){
      // Quick Array to kill out matches in the user agent
      // that might cause false positives
      $badmatches = array("OfficeLiveConnector","MSIE\  8\.0","OptimizedIE8","MSN\ Optimized","Creative\ AutoUpdate","Swapper");

      foreach($badmatches as $badstring){
        if(preg_match("/".$badstring."/i",$_SERVER["HTTP_USER_AGENT"])) return  false;
      }

      // Now we'll go for positive matches
      $uamatches = array("midp", "j2me", "avantg", "docomo", "novarra",  "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\  ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia",  "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-",  "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg",  "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp",  "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox",  "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo",  "sgh", "gradi", "jb", "\d\d\di", "moto","webos");

      foreach($uamatches as $uastring){
        if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) return  true;
      }
   }
   return false;
}

, ! - :

// init PluginLoader. Adopt folder to your application...
$loader = new Zend_Loader_PluginLoader(array(
    'Plugin' => APPLICATION_PATH . '/application/controllers/plugins',
));

// define plugin names and classes
$pluginList = array(
    'plugin1' => $loader->load('Plugin1'),
    'plugin2' => $loader->load('Plugin2'),
//  [...]
    'mobile'      => $loader->load('Mobile'),
);

// get your front controller
$frontController = Zend_Controller_Front::getInstance();

// Register your plugins
foreach ($pluginList as $pluginClass) {
    $frontController->registerPlugin(new $pluginClass());
}

3.

, . , , , . . bootstrap.php - :

// set correct context
$domains = explode('.', $_SERVER['HTTP_HOST']);
if ($domains[0] == 'mobile' || $frontController->getParam('format') == 'mobile') {
    if ($domains[0] == 'mobile') {
        // if set, user will be redirected directly to requested page
        Zend_Registry::set('directmobile', '1');
    }
    Zend_Registry::set('context', '\mobile');
} else {
    Zend_Registry::set('context', '');
}

4.

, , . / (. 2).

IndexController.php askmobileAction:

public function askmobileAction()
{
    // nothing to do here...
}

... , ;-). . views, , , \views\scripts\index, askmobile.mobile.view - :

How do you want to use this application?<br/>
<a href="<?= 'http://mobile.fopp.de' . $_SERVER["REQUEST_URI"]?>">MOBILE VERSION</a>
<br></br>
<a href="<?= 'http://dev.fopp.de' . $_SERVER["REQUEST_URI"] ?>">DESKTOP VERSION</a>

, ? , . , ContextSwitch , name.MOBILE.phtlm name.phtml, MOBILE.

5.

- . , , . . \layouts \mobile ( , , \application\layouts\mobile, ). layout.phtml - :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>        
 <?php echo $this->headTitle() . "\n" ?>
 <?php echo $this->headLink() . "\n" ?>
</head>
<body>
 <div id="header">This is your header</div>    
 <div id="content"><?= $this->layout()->content ?></div>
 <div id="footer">This is your footer</div>
</body>
</html>

. , , , , , CSS ..

6.

. - . init() IndexController, . , OO-Design (, MyMobileController, Zend_Controller_Action .ini), .

IndexController.php :   /**    *    *    * @return void    */   public function init()   {       :: INIT();

    // are we in the mobile context?
   if (Zend_Registry::get('context') == '\mobile' || $this->getRequest()->getParam('format') == 'mobile')
   {
        // Mobile format context
        $mobileConfig =
            array(
             'mobile' => array(
                    'suffix'  => 'mobile',
                    'headers' => array(
                        'Content-type' => 'text/html; charset=utf-8')),
            );

        // Init the action helper
        $contextSwitch = $this->_helper->contextSwitch();

        // Add new context
     $contextSwitch->setContexts($mobileConfig);

        // This is where you have to define
        // which actions are available in the mobile context
        // ADOPT THIS TO YOUR NEEDS!
        $contextSwitch->addActionContext('index', 'mobile');
        $contextSwitch->addActionContext('askmobile', 'mobile');

        // enable layout but set different path to layout file
        $contextSwitch->setAutoDisableLayout(false);
        $this->getHelper('layout')->setLayoutPath(APPLICATION_PATH . '/application/layouts/mobile');

        // Initializes action helper
        $contextSwitch->initContext('mobile');
    }
}

7.

, . , ( init() ), . , myaction, myaction.phtml myaction.mobile.phtml .

! -; -)

:

1, / . , , , .. , - , .

Basically, all you have to do is check in which context this application is and download the appropriate translation file.

Suppose you store the translation files in the \ application \ translations \ folder and you have the English and French versions of your application. In addition to the fr.php and en.php files, you must have a mobile version for each language in your translation folder: mobile_en.php and mobile_fr.php. The following code fragment will download the appropriate translation file:

// Init Zend_Locale with corresponding language (assuming that $lang is set to 'en' or 'fr')
// and store the Zend_Locale object in the registry
Zend_Registry::set('Zend_Locale', new Zend_Locale($lang));

// Load translation file and store it in the registry
$langFile = APPLICATION_PATH . '/application/translations/';
if (Zend_Registry::get('context') == '\mobile') {
    // if context = mobile, get translation file for mobile device
    $langFile.= 'mobile_' . Zend_Registry::get('Zend_Locale')->getLanguage() . '.php';
} else {
    $langFile.= Zend_Registry::get('Zend_Locale')->getLanguage() . '.php';
}
Zend_Registry::set(
'Zend_Translate', new Zend_Translate('array', $langFile)
);