четверг, 19 марта 2015 г.

Советы начинающему верстальщику с примерами. HTML5 и Bootstrap.

Заметил что в сети есть куча статей на эту тему, но большинство из них уже достаточно устаревшие, и большая часть из остальных - просто рассказывают минимум общими словами, поэтому я решил написать свою статью с преферансом и куртизанками с html5 и рекомендациями от backend специалиста.
Итак, начнем:




  1. Используйте Bootstrap, он здорово сокращает время на разработку верстки и позволяет использовать кучу довольно привлекательных элементов из коробки. Если надоел или не подходит дефолтный стиль Bootstrap то можно воспользоваться разнообразными дополнительными темами для него.
  2. Складывайте все файлы аккуратно по полочкам папочкам(css, js, img, fonts) и помещайте все в папку assets, чтобы к файлам, ответственным за верстку можно было попасть по путям assets/css, assets/js и т.д. Если вы последуете совету, то много разработчиков скажет вам спасибо.
  3. Если вы прочитали в какой-то древней мудрой книжке про то, что нужно верстать с помощью table и будет вам счастье, то не верьте! table используется только непосредственно для таблиц с данными(как в экселе) но ни в коем случае не для расположения элементов на странице! Верстайте как все нормальные люди с помощью div-ов и готовых классов bootstrap.
  4. Пользуйтесь всеми преимуществами HTML5, это прогрессивно, круто и очень удобно, и сейчас почти везде поддерживается. Вот несколько наиболее часто используемых приемов в HTML5: http://habrahabr.ru/post/136592/
  5. Выравнивайте верстку, так чтобы теги открывались и закрывались на одном уровне и не скакали по всей странице, все должно быть предельно аккуратно, стремитесь быть перфекционистом. Я серьезно! Выровненная верстка сэкономит кучу времени и вам и тем кто будет работать с ней в дальнейшем.
  6. Не засоряйте верстку лишними классами и тем более стилями, ниже я хочу показать пример из реального провекта: как НЕ следует верстать. На примере показана верстка модального окна, зеленым пункты указал стрелочками непосредственно, остальными цветами обозначены соответствующие недочеты(синие относится к синей надписи, красное к красной).

    А теперь пример: как следовало выполнить ту-же самую задачу но более правильными способами(не идеально, но лучше) с использованием Bootstrap.

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

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

понедельник, 9 марта 2015 г.

MIGX - компонент для ModX. Краткий обзор, готовые конфиги

MIGX - очень полезный компонент для ModX, позволяющий создавать дополнительные поля(TV) в виде удобных табличек с перетаскиванием и редактированием значений как в теле таблицы так и в отдельном модальном окне.

При нажатии "Добавить элемент" может открываться модальное окно с формой для ввода данных, а может просто добавляться строка в конец таблицы, которую можно тут же заполнить без лишних манипуляций:

Поведение и свойства отображения элементов можно гибко настраивать через менеджер MIGX, а можно просто экспортировать JSON объект с готовыми настройками.
Для начала MIGX нужно установить через стандартный установщик приложений ModX, в процессе установка предложит вам выбор: где расположить пункт меню, ведущий в Менеджер MIGX, я рекомендую расположить его в меню "Приложения"(Extras/Components).
Зайдя в Менеджер MIGX, перейдите на вкладку "MIGX":


Где вы увидите пустую табличку, в отличие от моей, это список конфигураций для дополнительного поля MIGX, чуть позже узнаете как связать TV и эту конфигурацию.
Для начала вам нужно добавить элемент, нажав на соотвествующую кнопку, в результате чего появится модальное окно c многочисленными настройками.

Я рекомендую для начала воспользоваться готовым конфигом моего производства для добавления партнеров (тот что на первом скрине):
https://github.com/Jonybang/ModX-tehniques/blob/master/MIGX/partners.js
Для этого просто назовите как-нибудь вашу конфигурацию(типа "my-config") и сохраните её, нажав "Выполнено".
После чего через контекстное меню откройте окно для экспорта/импорта JSON объекта конфигурации:

И вставьте туда содержимое моей конфигурации:

Теперь можете сохранить и наконец создать привычное Дополнительное поле(TV), назвав его, к примеру, migx-partners и выбрав тип ввода "migx":
После чего появится поле "Конфигурации", в которое можно ввести имя нашего конфига:
Вы могли заметить что кроме "Конфигурации" в TV присутствуют другие поля. Эти поля также предназначенны для ввода конфигураций, но они гораздо менее удобны чем в Менеджере MIGX, я советую пользоваться именно менеджером, тем более что там есть интерфейс для редактирования конфига.
Теперь можно указать шаблон, в котором это TV будет появляться и зайти в ресурс с нашим шаблоном для того чтобы проверить результат:

Теперь вы можете  попробовать добавить в него элемент и посмотреть на поведение таблицы, но вы не увидите тех красивых галочек со столбца "Активный" как у меня на скринах, так как вы не добавили их изображения в папку assets/img.
Но не беспокойтесь, я подготовил для вас эти изображения в том же репозитории, где располагаются мои конфиги:
https://github.com/Jonybang/ModX-tehniques/tree/master/MIGX/assets/img
Пользуйтесь на здоровье, или поставьте те, которые вам больше нравятся.



Итак, давайте попробуем разобрать основные моменты конфигурации, чтобы не действовать совсем в слепую, а хоть немного понимать с чем работаем:
"formtabs" - вкладки модального окна, если присутствует только одна вкладка, то они скрываются;
"caption" - отображаемое название чего-либо(будь то вкладка или поле);
"field" - уникальное название поля формы
"fields" - перечисление полей формы, находящиеся на данной вкладке, среди них:
"name" - текстовое поле "Название"
"url" - текстовое поле "Ссылка"
"image" - поле с выбором изображения - "Изображение"
"active" - список с одиночным выбором ("Активный" или "Скрытый").
Как вы наверно уже догадались "inputTVtype" дает возможность задать тип поля. Список TV типов можно посмотреть здесь.

Все это можно задавать через интерфейс менеджера:

Там несомненно более удобно, но бывают случаи когда проще заглянуть в конфиг и подправить там значение чем лазить по модальным окнам интерфейса.





Ниже идет куча общих настроек, имена которых в большинстве случаев говорят сами за себя, в остальных же случаях скорее всего придется или экспериментировать или гуглить по поводу каждого имени интересующего поля, потому как я не смог найти хоть сколько-нибудь подробного объяснения по данным полям(даже в документации), что очень грустно.
На самом деле: если вам и понадобятся эти настройки(что бывает редко), то скорее всего все что нужно можно будет настроить через интерфейс менеджера, но там довольно часто требуется ввести просто JSON конфиг, который часто трудно угадать.




Последним фрагментом идет конфигурация непосредственно столбцов:



Здесь основными полями являются "header" - отображаемое имя и "dataIndex" - указание значения "field" из первого фрагмента конфига: "tabs".
"editor" - возможность, недавно появившаяся в MIGX - отвечает как раз за то, чтобы можно было редактировать значения прямо в теле таблицы, не заходя в модальное окно редактирования.

Честно говоря, "dataIndex" необязательно должно быть существующим "field" полем из  массива "tabs", бывают случаи когда нужно указать на несуществующее поле, например при использовании renderChunk, чтобы при сохранении сгенерированные значения в столбцах не испортили нам данные, как в случае на примере ниже:

И у меня в конфиге https://github.com/Jonybang/ModX-tehniques/blob/master/MIGX/yandex-maps.js :



Это один из хаков, который мне удалось кропотливым и методичным поиском найти на просторах интернета, он позволяет выводить в таблице столбец, в котором можно прописать шаблон для вывода значений из соседних столбцов, пользуйтесь на здоровье :)
При этом dataIndex должен указывать на несуществующее поле ввода.

В менеджере MIGX это будет выглядеть примерно так:

Еще, помимо такой краткой записи шаблона вывода, есть возможно создать свой(custom) renderer, в котором с помощью адской смеси PHP и JavaScript можно описать вывод поля в табличке MIGX. Для этого нужно зайти в конфиг migx и добавить свой рендер по примеру уже существующих:

После этого новый рендерер появится в списке выбора:

И теперь с помощью него в табличке можно выводить все что угодно и как душе угодно:

Таким образом можно создавать не только шаблоны и renderer, но и всякие handler и тому подобное, что участвует в работе с таблицами в MIGX. Буду очень рад, если вы в комментариях опишите свои интересные приемчики, которые обнаружили при работе с MIGX.

Но мы отвлеклись от основной задачи - использования нашего TV по назначению: для вывода заполненной клиентом информации на страницу.
Если вы попробуете вывести на страницу гольный вызов нашего доп. поля(например таким образом: [[*migx-partners]]) то вы увидите JSON, который представляет из себя массив объектов (по обьекту на каждую строку таблицы) с полями fields и значениями, которые контент менеджер задал при заполнениями.
Вы можете самостоятельно обработать JSON используя $collection = $modx->fromJSON($value) в сниппете, а можете воспользоваться готовым сниппетом от MIGX: getImageList, который предназначен специально для этой задачи:
[[!getImageList? &tvname=`migx-partners` &tpl=`partnerItem`]]
Таким образом он будет работать при вызове из ресурса, в котором присутствует это TV, если же вы хотите вывести данные MIGX TV со стороннего ресурса(например на Главной вывести Партнеров из соотвествующего раздела) то можно дополнительно указать переметр &docid=`5`, где "5" - id ресурса "Партнеры".
getImageList работает по аналогии с getResources: в tpl кладется имя чанка, создается соответствющий чанк вида:
<li>[[+idx]]. [[+field1]] - [[+field2]]</li>
где [[+idx]] - автоматическое нумерование;
[[+field1]], [[+field2]] - поля, которые мы задавали в Formtabs;
После чего сниппет в цикле вызывает чанк для каждой строки из получившейся таблицы MIGX, вставляя на место плейсхолдеров соответствующие значения.

Обзор получился достаточно объемным для "краткого", но такой-уж MIGX, довольно сложный для тех кто его ни разу не пробовал, а я постарался ориентироваться именно на таких новичков. А я ведь не касался еще темы MIGX DB, позволяющего работать непосредственно с базой данных: выводить и редактировать значения из её таблиц. В этой статье я постарался разобрать эту тему.

Источники:
Мой репозиторий на Github с набором конфигов на MIGX
Оффициальная документация MIGX
Доки getImageList
Репозиторий MIGX на Github
Читать далее

воскресенье, 8 марта 2015 г.

Collections в ModX. Обзор возможностей, конфигурация для интернет магазина

Collections - дополнение для modx, создающее отдельную вкладку на странице редактирования ресурса для отображения дочерних ресурсов в виде подробной таблички с выводом и удобными возможностями изменения всех нужных полей(и основных и дополнительных).

Для использования этого компонента его следует установить любым удобным способом(например через стандартный менеджер пакетов ModX) и создать конфигурацию(вид), подходящую для вашей задачи.

Как зайти в менеджер видов:

При первом запуске в менеджере увидите стандартный вид "Blog", а на моем скрине вы также можете увидеть созданый мной "Products". Вы можете отредактировать имеющийся вид или создать новый.

На скрине ниже видно окно настроек вида

Мультивыбор "По умолчанию для шаблонов" позволяет автоматически устанавливаться данному виду для указанных шаблонов при выборе Типа ресурса "Коллекция". То есть мы заходим в редактирование ресурса, устанавливаем во вкладке "Настройки" Тип ресурса в "Коллекция" и после сохранения у нас появляется новая вкладка "Дочерние ресурсы", в которой и располагается табличка с видом "Products" если у ресурса шаблон "Подкатегория".
Поле "Размер страницы" устанавливает количество строк таблицы при постраничном выводе;
В "Поле сортировки" установлено значение menuindex, чтобы можно было управлять порядком вывода ресурсов(по средством перетаскивания или через столбец "Позиция", как у меня);
Остальные поля кроме таблицы столбцов думаю в объяснении не нуждаются.
В табличке же мы конфигурируем столбцы: их отображение и динамические редакторы(которые позволяют прямо в теле таблицы редактировать поля ресурсов)
Ниже я представлю свою конфигурацию, которую я обычно использую для интернет магазинов:
Заголовок
Название
Ширина
Редактор
Рендерер
Изображение
tv_image
20
-
Collections.renderer.image
Название
pagetitle
100
textfield
Collections.renderer.pagetitle
Описание
description
50
textarea
Collections.renderer.qtip
Цена
description
15
numberfield
h2
Опубликован
published
20
modx-combo-boolean
this.rendYesNo
Позиция
menuindex
15
numberfield
-

"Название" в этой таблице означает имя поля ресурса(основного или дополнительного). Для того чтобы использовать дополнительное поле нужно использовать приставку tv_ (это вовсе не часть имени доп. поля).
"Редактор" указывает как поле будет редактироваться прямо в табличке (редактор вызывается двойным кликом на поле). 
В случае pagetitle, в нашем случае, нужно кликать на свободное место в ячейке, так как рендерер установлен в "Collections.renderer.pagetitle", а он формирует ссылку на редактирования ресурса, поэтому не стоит нажимать на саму надпись заголовка если хочешь его оперативно отредактировать.
Судя по документации Collections у нас имеются такие редакторы в распоряжении:
  • textfield - однострочный текстовый редактор;
  • textarea - многострочный текстовый редактор;
  • modx-combo-boolean - рендедит "Да" или "Нет" в зависимости от того поле true или false соответственно;
  • numberfield - числовой редактор;
  • {“type”:”number field”,”allowDecimals”:false,”allowNegative”:false} - конфигурация для тонкой настройки (подробного разбора возможностей ни в документации ни в исходниках ни в интернетах не смог найти, буду благодарен если кто-то подскажет)
"Рендерер" указывает как поле должно отображаться в таблице. На момент написания статьи имеются такие возможности как:
  • this.rendYesNo - выбор булевого значения: Да/Нет;
  • Collections.renderer.qtip - при наведении показывает многострочный блок с текстом;
  • Collections.renderer.pagetitleWithButtons - заголовок размера h2 с кнопками редактирования, просмотра, удаления и публикации;
  • Collections.renderer.pagetitle - заголовок размера h2 со ссылкой на редактирование ресурса
  • Collections.renderer.pagetitleLink - тоже самое только меньше размером
  • Collections.renderer.datetimeTwoLines - вывод даты и времени(дата на первой, время на второй строке)
  • Collections.renderer.datetime - дата и время в одну строку
  • Collections.renderer.image - вывод изображения (странно что его нет в документации, хотя удивляться нечему она у них раскидана по блогам)
Есть возможность создать свой Рендерер с помощью JS функции, которая примет значение поля и должна будет вывести содержимое в том виде, в котором вы хотите.
Я создал для себя функцию h2, как вы можете видеть в моей табличке конфигурации. 

Поместил эту функцию в файл assets/js/collections.js и указал в Настройках системы путь до моего файла с функциями:

Так-же разработчики добавили возможность указать сниппет для рендера, но в настоящее время с ним проблема в редактирование полей через "Редактор", в частности при использовании сниппета таким образом:

Редактор предлагает редактировать <h2>Значение</h2>, и даже при удалении этих лишних тегов в редакторе и сохранении - на месте значения поля появляется пустое место, в общем советую использовать JS функции.

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

С такой возможностью у меня появилась идея автоматической привязки ресурсов, которые находятся в подкатегориях к родительским категориям, таким образом чтобы например при структуре:

Каталог
---Деревянные сувениры
------Елочные игрушки
------Деревянные открытки
---Полиграфия
------Наборы открыток

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

Источники:
https://github.com/modxcms/Collections - репозиторий Collections на Github http://rtfm.modx.com/extras/revo/collections - официальная документация
http://modx.com/blog/2014/09/30/collections-easily-customizable-admin-views-for-content-types/ - блог, дополняющий документацию
http://www.bxr.cz/blog/collections-3/ - еще один блог, дополняющий документацию
Читать далее