Как преобразовать сайт Zend Framework на мобильный сайт?

Question

Я сделал огромный сайт (front & admin side) в Zend Framework теперь я хочу сделать тот же проект в ZF, но для мобильных устройств.

Я обязательно использую HTML5 & jQuery mobile, но перед тем, как продолжить & Запустите мою разработку для моего мобильного сайта. Я хочу спросить экспертов, что это хороший, простой, эффективный и оптимизированный способ сделать это ???

Answer 1

Возможно, вы захотите проверить ContextSwitch View Helper - который позволяет вам переключать сценарий вида на основе параметра 'format'. Вы можете использовать это (или расширить его), чтобы переключить свое мнение на более удобный для мобильных устройств шаблон.

Посмотрите на JSON Context конкретно, это отключает макет - та же техника может быть использована для переключения макета, если обнаружен мобильный запрос.

Конечно, если вы можете выполнить то, что вам нужно с помощью некоторых запросов в формате CSS, это, безусловно, путь.

Вы также можете найти Zend_Http_UserAgent, который полезен для обнаружения доступных возможностей мобильного устройства. Опять же, похоже на то, что возможно с медиа-запросами, но может быть полезным, тем не менее.

Но в нижней строке нет необходимости «конвертировать» сайт, существует множество инструментов, позволяющих одному и тому же сайту быть доступным как для настольных, так и для мобильных пользователей.

Answer 2

Click меня, Прочти меня и я уверен, что вы хотели мне

Answer 3

Как anwser из Фавад Гафур, как исчез из интернета (по-прежнему доступны в веб-архиве 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. Что нам нужно

В принципе, единственное, что вы должны сделать при создании веб-приложение готово для мобильных устройств: а) обнаружить, если пользователь прибои на ваш сайт с помощью мобильного телефона или не -мобильное устройство и b) изменить V в MVC в соответствии с результатом a).

Тем не менее, мне очень полезно расширить этот подход. Помимо замены ваших просмотров на мобильные устройства, мы сделаем еще две вещи: мы также заменим макет (Zend_Layout), используемый для вашего веб-приложения, и мы будем использовать другой файл перевода (Zend_Translation). Очевидно, почему замена макета полезна, но зачем нам использовать другой файл перевода?Ну, на самом деле нам это не нужно, но я нашел его весьма удобным, если у вас есть файл перевода для большого экрана (где вы можете использовать текстовые описания looong) и файл перевода для ваших мобильных устройств (с четкими описаниями, ошибкой сообщения, ярлыки и т. д.)

Как мы увидим позже, контекстный коммутатор Zend Framework (http://framework.zend.com/manual/en/zend.controller.actionhelpers.html) - это почти все, что нам нужно ... ContextSwitch - помощник действий, который «предназначен для облегчения возвращения различных форматов ответов на запрос". Этот помощник действий имеет два разных готовых контекста: JSON и XML. В нашем примере мы создадим дополнительный контекст с именем «мобильный».

Управление потоком схемы теряется ... в какой-то момент он был здесь: http://www.web-punk.com/wp-content/uploads/2010/03/mobile_wf-300x94.png

В принципе, наш поток управления должен работать, как показано на рисунке «Control Flow» (нажмите на рисунке, чтобы увеличить его). Если пользователь работает до http://mobile.example.com/controller/action, мы прямо устанавливаем правильный контекст «мобильный». Если пользователь работает до http://www.example.com/controller/action, мы проверяем, пользуется ли он мобильным устройством. Если он использует мобильное устройство, мы спросим пользователя, хочет ли он использовать мобильную или настольную версию нашего веб-приложения. Поскольку мы не хотим спрашивать пользователя, хочет ли он использовать мобильную версию каждый раз, когда он запрашивает страницу, мы храним ее/ее решение в переменной сеанса (и только спрашиваем ее, если она неактивна для несколько минут).

В качестве примера для этого процесса, пожалуйста, посмотрите на http://www.qulpa.com

2. Создание нашего мобильного Plugin Для достижения наших целей, мы реализуем небольшой плагин. Перед внедрением этого плагина нам нужна функция, которая проверяет, использует ли текущий пользователь мобильное устройство. Для этого вы можете использовать интеллектуальное решение, такое как WURFL. Однако для нашего примера мы будем использовать простую функцию, которая возвращает true, если пользователь использует мобильное устройство и false в противном случае. Вы найдете десятки функций, которые будут выполнять эту работу, если вы запустите Google. Я воспользуюсь функцией, которую я нашел в Brain Handles.

Теперь давайте создадим наш плагин. В папке \ плагинов, создать файл с именем 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, которая, вероятно, будет \ вид \ Сценарии \ индекса создать файл с именем 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> 

That's наш очень простой макет для мобильного контекста. Весьма вероятно, что ваш макет будет гораздо более сложным, даже если вы создаете его для мобильных устройств, как вы, вероятно, включать в файл CSS и т.д.

6. Собираем все вместе

Мы уже почти законченный. Последний шаг - использовать контекст в ваших контроллерах. Для этого урока мы будем использовать метод init() IndexController, который вы можете использовать в качестве шаблона для всех других контроллеров в своем приложении. Собственно, вместо копирования этого кода ко всем вашим контроллерам я предпочитаю более разумный способ использования парадигм OO-Design (например, создать класс MyMobileController, который расширяет Zend_Controller_Action и получить все необходимые параметры из вашего приложения.ini), однако это выполнит эту работу.

Откройте файл IndexController.php и скопируйте и вставьте следующий исходный код в него: /** * инициализирует контекст контроллер & * * @return недействительного */ общественной функция Init() { parent :: 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 мы будем использовать другой файл перевода для нашего мобильного устройства/мобильный контекст , Это очень удобно, так как вы можете захотеть иметь более короткие ярлыки, тексты описания, сообщения об ошибках и т. Д. Конечно, если вам не нужно что-то подобное, вы можете просто пропустить это приложение.

В принципе, все, что вам нужно сделать, это проверить, в каком контексте это приложение, и загрузить соответствующий файл перевода.

Предположим, что вы храните файлы перевода в папке \ application \ translations \ и у вас есть английский и французская версия приложения. Помимо файлов fr.php и en.php у вас должна быть мобильная версия для каждого языка в вашей папке переводов: mobile_en.php и mobile_fr.php. Followin фрагмент кода загружает соответствующий перевод файла:

// 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) 
);