Как конвертировать виджет в модуль для Joomla

В данной статье мы покажем процесс создания модуля Joomla от существующего виджета. Мы возьмем виджет от Mixcloud, изучим его, преобразуем его в модуль Joomla и добавим его в JED.

Это отличная статья для тех кто ещё не умеет создавать модули для Joomla.

Шаг 1. Подготовка файлов

joomla module

Основные файлы

Для каждого модуля Joomla, обязательно должны присутствовать два файла. Первый файл - конфигурационный XML файл, в котором будут описаны детали и параметры модуля, второй - PHP файл, который будет управлять нашим модулем. Создадим папку, назовем её mod_mixcloud_widget и при помощи текстового редактора, создадим два файла mod_mixcloud_widget.php и mod_mixcloud_widget.xml. Прежде, чем мы перейдем к следующему шагу, в корне проекта расположим - index.html. Этот файл будет использоваться для того чтобы скрыть содержимое папки модуля.

Файлы шаблона

Теперь, когда Вы добавили основные файлы, пора добавить файлы шаблона. Для этого, создадим новую папку tmpl (template), в которую добавим файлы default.php и index.html. Файл default.php шаблон модуля, который будет переводить генерируемую информацию в HTML формат на странице.

Языковые файлы

Далее в корне проекта, создадим новую папку под названием language. У этой папки будет два файла: en-GB.mod_mixcloud_widget.ini и en-GB.mod_mixcloud_widget.sys.ini, которые будут использоваться для выбора различных языков.

Структура

После выполнения всех этапов у Вас должна быть следующая структура:

  • language/en-GB.mod_mixcloud_widget.ini
  • language/en-GB.mod_mixcloud_widget.sys.ini
  • tmpl/default.php
  • tmpl/index.html
  • index.html
  • mod_mixcloud_widget.php
  • mod_mixcloud_widget.xml

Шаг 2. Подготовка XML файла

У каждого модуля Joomla есть XML файл, который упоминается как установочный файл. Этот файл содержит информацию о метаданных, такие как автор, версия, описание и т.д. Он также используется в качестве конфигурационного файла. В этом уроке мы научимся создавать такой файл для Joomla 2.5. Добавьте следующую часть кода к своему файлу XML.


<?xml version="1.0" encoding="utf-8"?> 
  <extension  type="module"  version="2.5"  client="site"  method="upgrade"> 
     <name>MOD_MIXCLOUD_WIDGET</name> 
     <author>B4ucode</author> 
     <creationDate>May  2012</creationDate> 
     <copyright>Copyright (C)  2011 - 2012. All rights reserved.</copyright> 
     <license>GNU General  Public License version 2 or later;</license> 
     <authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail> 
     <authorUrl>www.b4ucode.com</authorUrl> 
     <version>1.0.0</version> 
     <description>MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION</description> 

Основной тег extension имеет несколько атрибутов:

  • type: Говорит Joomla, какое расширение устанавливается, в нашем случае это модуль.
  • version: Сообщает инсталлятору, для какой версии Joomla мы создаем модуль.
  • method: имеет две опции: new и upgrade. Мы будем использовать upgrade, в случае обновлениях модуля, он просто модернизирует его содержимое.

Другой набор тегов - теги метаданных, которые содержат информацию об установке и администрировании модуля.

Файлы модуля

Как упомянуто выше, xml считает информацию о файлах, используемых в модуле. Во время установки, Joomla проверяет xml файл на присутствие остальных файлов, которые должны быть добавлены к системе. Если какой-либо из файлов будет отсутствовать, то Joomla выдаст ошибку. Любые файлы, которые не перечислены в файле XML, не добавляются к системе с другими. Добавьте следующий код к своему xml файлу.

<files> 
     <filename module="mod_mixcloud_widget">mod_mixcloud_widget.php</filename> 
     <folder>tmpl</folder> 
     <filename>index.html</filename> 
     <filename>mod_mixcloud_widget.xml</filename> 
  </files>

Вместо того, чтобы описывать отдельный код для каждого файла в папке, мы просто используем элемент директории. Благодаря этому элементу, инсталлятор установит все файлы в одну папку.

Языковые файлы

Следующая часть кода содержит языковые файлы, которые должны быть установлены с модулем. В этом уроке мы будем использовать только один язык. Если необходимо использовать больше языков, Вы можете просто изменить префикс файлов к другому языку, основанному на структуре Joomla.

<languages> 
     <language tag="en-GB">language/en-GB.mod_mixcloud_widget.ini</language> 
     <language tag="en-GB">language/en-GB.mod_mixcloud_widget.sys.ini</language> 
  </languages>

Добавление параметров

Некоторые расширения из блоков, работают не правильно и нуждаются в определенных параметрах отдельных объектов, добавим эти объекты и внесем их в xml файл.

Первый объект - config, содержит дополнительные объекты, которые будут отображаться в HTML формате. Объект, field, определяет суть наших параметров. Этот объект имеет несколько признаков:

  • type: Тип  формы: text, textarea, checkboxes, radio и calendar.
  • name: имя формы.
  • default: Значение формы.
  • label: текст показанный в начале нашей формы.
  • description: Описание формы

Есть различные признаки, по которым они изменяются, тип формы (размер), фильтр, исключения, директория и т.д.

 
<config> 
        <fields name="params"> 
           <fieldset name="basic"> 
              <field type="text" name="feed" default="" label="MOD_MIXCLOUD_WIDGET_FEED_TITLE" description="MOD_MIXCLOUD_WIDGET_FEED_DESC" />
              <field name="color" type="color" default="" label="MOD_MIXCLOUD_WIDGET_COLOR_TITLE" description="MOD_MIXCLOUD_WIDGET_COLOR_DESC" /> 
              <field name="width" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_WIDTH_TITLE" description="MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION" /> 
              <field name="height" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE" description="MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION" />            </fieldset> 
           <fieldset 
              name="advanced"> 
              <field 
                 name="layout" 
                 type="modulelayout" 
                 label="JFIELD_ALT_LAYOUT_LABEL" 
                 description="JFIELD_ALT_module_LAYOUT_DESC" /> 
              <field 
                 name="moduleclass_sfx" 
                 type="text" 
                 label="COM_moduleS_FIELD_moduleCLASS_SFX_LABEL" 
                 description="COM_moduleS_FIELD_moduleCLASS_SFX_DESC" /> 
              <field 
                 name="owncache" 
                 type="list" 
                 default="1" 
                 label="COM_moduleS_FIELD_CACHING_LABEL" 
                 description="COM_moduleS_FIELD_CACHING_DESC"> 
                 <option value="1">JGLOBAL_USE_GLOBAL</option> 
                 <option  value="0">COM_moduleS_FIELD_VALUE_NOCACHING</option> 
              </field> 
           </fieldset> 
        </fields> 
     </config> 
  </extension> 

Вы можете заметить, что у нас есть элементы label и description, в таких параметрах как MOD_MIXCLOUD_WIDGET_FEED_TITLE. Эти строки, мы будем переводить в зависимости от наших языковых файлов.

Готовый XML файл

Если вы прошли все этапы, у вас должен получится вот такой XML файл:

<?xml version="1.0" encoding="utf-8"?> 
  <extension  type="module"  version="2.5"  client="site"  method="upgrade"> 
     <name>MOD_MIXCLOUD_WIDGET</name> 
     <author>B4ucode</author> 
     <creationDate>May  2012</creationDate> 
     <copyright>Copyright (C)  2011 - 2012 Open Source Matters. All rights reserved.</copyright> 
     <license>GNU General  Public License version 2 or later;</license> 
     <authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail> 
     <authorUrl>www.b4ucode.com</authorUrl> 
     <version>1.0.0</version> 
     <description>MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION</description> 
     <files> 
        <filename module="mod_mixcloud_widget">mod_mixcloud_widget.php</filename> 
        <folder>tmpl</folder> 
        <filename>index.html</filename> 
        <filename>mod_mixcloud_widget.xml</filename> 
     </files> 
     <languages> 
        <language tag="en-GB">language/en-GB.mod_mixcloud_widget.ini</language> 
        <language tag="en-GB">language/en-GB.mod_mixcloud_widget.sys.ini</language> 
     </languages> 
     <config> 
        <fields name="params"> 
           <fieldset name="basic"> 
              <field type="text" name="feed" default="" label="MOD_MIXCLOUD_WIDGET_FEED_TITLE" description="MOD_MIXCLOUD_WIDGET_FEED_DESC" /> 
              <field name="color" type="color" default="" label="MOD_MIXCLOUD_WIDGET_COLOR_TITLE" description="MOD_MIXCLOUD_WIDGET_COLOR_DESC" /> 
              <field name="width" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_WIDTH_TITLE" description="MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION" /> 
              <field name="height" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE" description="MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION" /> 
           </fieldset> 
           <fieldset 
              name="advanced"> 
              <field 
                 name="layout" 
                 type="modulelayout" 
                 label="JFIELD_ALT_LAYOUT_LABEL" 
                 description="JFIELD_ALT_module_LAYOUT_DESC" /> 
              <field 
                 name="moduleclass_sfx" 
                 type="text" 
                 label="COM_moduleS_FIELD_moduleCLASS_SFX_LABEL" 
                 description="COM_moduleS_FIELD_moduleCLASS_SFX_DESC" /> 
              <field 
                 name="owncache" 
                 type="list" 
                 default="1" 
                 label="COM_moduleS_FIELD_CACHING_LABEL" 
                 description="COM_moduleS_FIELD_CACHING_DESC"> 
                 <option value="1">JGLOBAL_USE_GLOBAL</option> 
                 <option  value="0">COM_moduleS_FIELD_VALUE_NOCACHING</option> 
              </field> 
           </fieldset> 
        </fields> 
     </config> 
  </extension>

Файл mod_mixcloud_widget.php

Первое что нужно сделать с модулем, это добавить Ваши авторские права. Если Вы намереваетесь представить свой модуль JED, Вы должны добавить некоторую информацию о лицензии GPL, пример которой вы можете увидеть на сайте Уроки Джумла.

Нужно выполнить этот шаг прежде чем добавить модуль в JED. Непосредственно для этого, я использую определение defined (' _JEXEC') или die; которое используется в большинстве файлов PHP, чтобы защитить от хакеров.

<?php 
  /** 
   * @package    B4ucode 
   * @subpackage mod_mixcloud_widget 
   * @copyright  Copyright (C) 2011 -  2012 B4ucode, Inc. All rights reserved. 
   * @license    GNU General  Public License version 2 or later; 
   */ 
  // no direct access 
  defined('_JEXEC') or die; 

Разработчики иногда определяют свои параметры как переменные, что бы не было ничего лишнего в файлах шаблона. Чтобы обозначить параметры, мы используем $params->get() и определим параметры name в нашем xml файле. Наконец, мы вызовем функцию getLayoutPath. Первый аргумент функции получает имя модуля, которое мы укажем, затем второй аргумент ищет шаблон, который мы намереваемся создать для этого модуля. В этом случае мы получаем параметр layout, во втором аргументе layout принимает параметры по умолчанию. Это точное название файла, который находится в нашей tmpl папке.

$width = $params->get('width',300); 
  $height = $params->get('height',300); 
  $feed = $params->get('feed'); 
  $color = $params->get('color'); 
  $moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx')); 
  require JmoduleHelper::getLayoutPath('mod_mixcloud_widget',  $params->get('layout', 'default'));
  ?> 

Готовый файл

   <?php 
  /** 
   * @package    B4ucode 
   * @subpackage mod_mixcloud_widget 
   * @copyright  Copyright (C) 2011 -  2012 B4ucode, Inc. All rights reserved. 
   * @license    GNU General  Public License version 2 or later; 
   */ 
  // no direct access 
  defined('_JEXEC') or die; 
      $width = $params->get('width',300); 
      $height = $params->get('height',300); 
      $feed = $params->get('feed'); 
      $color = $params->get('color'); 
      $moduleclass_sfx =  htmlspecialchars($params->get('moduleclass_sfx')); 
      require JmoduleHelper::getLayoutPath('mod_mixcloud_widget',  $params->get('layout', 'default')); 
  ?> 

Шаг 4. Создание default.php

Мы создали xml файл, взяли те же самые параметры и превратили их в переменные. На этом шаге мы используем переменные в нашем файле шаблона. Файл шаблона создаст весь наш HTML код модуля. Отредактируйте default.php в папке tmpl и добавьте следующий код:

Уведомление об авторском праве и ограничение доступа:

<?php 
    /** 
   * @package    B4ucode 
   * @subpackage mod_mixcloud_widget 
   * @copyright  Copyright (C) 2011 -  2012 B4ucode, Inc. All rights reserved. 
   * @license    GNU General  Public License version 2 or later; 
   */ 
   // no direct access 
  defined( '_JEXEC' ) or die( 'Restricted access' ); 

Рекомендую добавить Уведомление об авторском праве и ограничение Доступа ко всем PHP файлам.

Добавление HTML

Наша цель - автоматически использовать весь код, без повторного подключения. По умолчанию код идет с некоторой дополнительной информацией о содержании виджета, в котором мы не нуждаемся. Таким образом для этого урока, я разделил его на части и подключил скрипт. Добавьте этот код к Вашему файлу default.php.

<div><object width="480" height="480"><param name="movie" value="<a href="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&stylecolor=&embed_type=widget_standard">http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&amp;embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&amp;stylecolor=&amp;embed_type=widget_standard</a>"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="/<a href="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&stylecolor=&embed_type=widget_standard">http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&amp;embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&amp;stylecolor=&amp;embed_type=widget_standard</a>" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="480" height="480"></embed></object></div> 

Создание конфигурационного скрипта

Если бы мы хотели подключить виджет, то мы могли бы просто добавить его в архив с модулем. Однако, мы собираемся заменить некоторые атрибуты с нашими параметрами модуля, такие как ширина, высота, цвет и ленту

<div><object width="<?php echo  $width; ?>" height="<?php  echo $height; ?>"> 
  <param name="movie" value="<a href="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=">http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=</a><?php echo $feed; ?>&amp;embed_uuid=&amp;stylecolor=<?php  echo $color; ?>&amp;embed_type=widget_standard"></param><param  name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param  name="allowscriptaccess" value="always"></param><embed src="/<a href="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=">http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=</a><?php echo $feed; ?>&amp;embed_uuid=&amp;stylecolor=<?php  echo $color; ?>&amp;embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="<?php echo $width; ?>" height="<?php echo $height;  ?>"></embed></object> 
  </div> 

Обратите внимание, как мы просто вызываем переменные из нашего файла.

Шаг 5. Создание языковых файлов

В первом шаге, мы создали папку language, с двумя файлами. Затем во втором шаге, мы добавили некоторый текст будет переводиться. В этом шаге мы собираемся перевести тот текст на английский язык. Вставьте следующий код к ini файлам, en-GB.mod_mixcloud_widget.sys.ini и en-GB.mod_mixcloud_widget.ini.

; B4ucode
; Copyright (C) 2011 - 2012 B4ucode. All rights reserved.
; License GNU General Public License version 2 or later;
; Note : All ini files need to be saved as UTF-8 - No BOM
 
MOD_MIXCLOUD_WIDGET="Mixcloud Widget"
MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION="This module displays the Mixcloud Widget using feed and other paramaters"
MOD_MIXCLOUD_WIDGET_ITEMS_LAYOUT_DEFAULT="Default"
MOD_MIXCLOUD_WIDGET_FEED_TITLE="Feed Url"
MOD_MIXCLOUD_WIDGET_FEED_DESC="Add the link to single/cloudcast"
MOD_MIXCLOUD_WIDGET_COLOR_TITLE="Color"
MOD_MIXCLOUD_WIDGET_COLOR_DESC="Add Style color"
MOD_MIXCLOUD_WIDGET_WIDTH_TITLE="Width"
MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION="Width of Widget"
MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE="Height"
MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION="Height of Widget"

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

Шаг 6. Архивация модуля

После выполнения всех шагов, Ваш модуль теперь можно устанавливать, но мы хотели бы сделать контрольный список файлов перед установкой и архивацией.

Добавить index.html к папкам

Рекомендую добавить файл index.html в каждую папку. Этот файл, как упомянуто ранее, не дает пользователям рассмотреть содержимое папки модуля непосредственно в браузере. Добавьте следующий код к своим файлам:

<html><body bgcolor="#FFFFFF"></body></html> 

Сравнение структуры файлов с XML Файлом

Сравните все файлы и папки, записанные в вашем xml файле и удостоверились, что они существуют и в вашей папке модуля. Любой файл, который не существует, может прервать установку модуля.

Архивация

Запакуйте все ваши папки и файлы в zip архив и установите модуль.

При помощи менеджера расширений, выберите модуль, затем Вы можете изменить параметры ширины, высоты, цвета и ленты.

joomla files

Шаг 7. Добавление в JED

create joomla module

После регистрации в JED важно отметить, что вы не можете добавить расширение а несколько категорий. Поэтому, выбор соответствующей категории очень важен. Найдите подходящую категорию, затем нажмите в правом верхнем углу кнопку Submit extension.

Заполнение деталей

Как только вы приняли решение предоставить расширение в JED, необходимо заполнить в форму:

joomla form jed joomla jed add exeption

Проверка

Как только все соответствующие поля заполнены и файлы были добавлены, вы уведете сообщение как на скриншоте выше; Оно покажет, через какое время ваш компонент проверят и добавят на сайт.

Заключение

Теперь вы знаете, как создать модуль для Joomla из виджета, можете попробовать создать свой собственный модуль.

Перевод статьи How to Convert a Widget into a Joomla Module

Тэги: JoomlaXML

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.