В предыдущей статье «РусскийФокс и Bootstrap» было анонсирована новая технология создания сайтов с помощью Русского Фокса. Суть ее заключена в том, что программист берет готовые объекты (Навигатор, Карусель слайдов и т.д.), заполняет их содержимым, регистрирует в нужном порядке в массиве и передает указатель на этот массив объекту «BootStrap», который генерирует HTML-файл с адаптивной страницей. По сути, РусскийФокс, начиная с версии 1.12 является программным генератором сайтов, но следует еще показать, как для данного генератора создавать свои объекты, которые можно упаковать в собственный модуль fxp и распространять для других пользователей данного генератора.
Рассмотрим, как самим создавать объекты для объекта BootStrap из одноименного модуля. Модуль Bootstrap содержит в себе несколько объектов, которые могут быть использованы, но их пока явно недостаточно для создания полноценных сайтов. Если для использования объектов вам не потребуется знаний HTML, CSS, JavaScript и PHP, то для создания объектов эти знания потребуются. Но создав объект, можно его распространять без исходных кодов на Русском Фоксе (расширение «RUS»), а в виде модуля «fxp».
Рассмотрим образец простого объекта, который можно регистрировать в объекте «BootStrap». Этот объект будет содержать только HTML-код и CSS-код не будет иметь JavaScript-кода. Данный объект будет выводить вертикальное меню.
ОПРЕДЕЛИТЬ_ОБЪЕКТ НавМенюВертикальноеОдинУровень2 КАК BootStrap_Объект
СписокПунктов = ПУСТО
Ширина = '300px'
ЦветФона = '#000032'
ЦветСимволов = '#FFFFFF'
ЦветАктивФона = '#711515'
ФУНКЦИЯ ПолучитьCSS()
ЛПЕРЕМ СтрокаВ, ИмяОбъекта
ЕСЛИ НЕ ТипЗнч(ЭТОТ_ОБЪЕКТ.Ширина) == 'Строка'
Предупреждение('В объекте НавМенюВертикальноеОдинУровень Свойство Ширина имеет строковый тип. '+;
'Следует присваивать строку типа "200px" ')
ВОЗВРАТ ""
КОНЕЦЕСЛИ;
ИмяОбъекта = ЭТОТ_ОБЪЕКТ.Имя
СтрокаВ = ' #'+ИмяОбъекта+' { Ширина: '+ЭТОТ_ОБЪЕКТ.Ширина+'; } #'+ИмяОбъекта+;
' ul { Список-Стиль: none; Поле: 0; Отступ: 0; }'
СтрокаВ = СтрокаВ+' #'+ИмяОбъекта+' li { border-bottom: 1px solid #ED9F9F; } #'+ИмяОбъекта+' li a:link, #'+;
ИмяОбъекта+' li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515;'+;
' border-right: 1px solid #711515; background-color: '+ЭТОТ_ОБЪЕКТ.ЦветФона+'; color: '+ЭТОТ_ОБЪЕКТ.ЦветСимволов+;
'; text-decoration: none; } #'+ИмяОбъекта+' li a:hover { background-color: '+ЭТОТ_ОБЪЕКТ.ЦветАктивФона+;
'; color: #FFFFFF; }'
СтрокаВ = СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстCSS
СтрокаВ = ЭТОТ_ОБЪЕКТ.BootStrap.ФункцииCSS.ПереводИзРусCSS(СтрокаВ)
ЭТОТ_ОБЪЕКТ.BootStrap.ФункцииCSS.КорректныйCSS(СтрокаВ)
ВОЗВРАТ СтрокаВ
КОНЕЦФУНКЦИИ
ФУНКЦИЯ ПолучитьОбъект()
ЛПЕРЕМ СтрокаВ, Значение, Номер, Команда
СтрокаВ = '<div id="'+ЭТОТ_ОБЪЕКТ.Имя+'"><ul>'
ЕСЛИ ТипЗнч(ЭТОТ_ОБЪЕКТ.СписокПунктов)=='Объект'
ДЛЯ Номер=1 ПО ЭТОТ_ОБЪЕКТ.СписокПунктов.Количество()
Значение = ЭТОТ_ОБЪЕКТ.СписокПунктов.Получить(Номер)
Команда = ОбъектСтрока.Между_Символами(1, Значение, '|')
Значение = ОбъектСтрока.Между_Символами(2, Значение, '|')
СтрокаВ=СтрокаВ+'<li><a href="'+Команда+'" >'+Значение+'</a></li>'
КОНЕЦЦИКЛА;
КОНЕЦЕСЛИ;
СтрокаВ = СтрокаВ+'</ul></div>'
ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML
КОНЕЦФУНКЦИИ
КОНЕЦ_ОПРЕДЕЛЕНИЯ_ОБЪЕКТА
Важно, чтоб такой объект был наследником объекта «BootStrap_Объект». Затем мы своему объекту добавляем нужные свойства и переписываем методы ПолучитьОбъект() и ПолучитьCSS(). Оба этих метода должны возвращать строки, первый код HTML, а второй код CSS. Разберем формирование кода CSS.
В предке нашего объекта «BootStrap_Объект» есть свойство «Имя» оно может быть переопределено, но изначально присваивается при инициализации и уникально. Вы можете его посмотреть командой Сообщить(ЭТОТ_ОБЪЕКТ.Имя) Если желаете его переопределить то следует это делать в начале метода ПолучитьCSS(), так как этот метод выполняется первым. Другой более сложный способ переопределить имя — это переписать метод ПРИ_ИНИЦИАЛИЗАЦИИ_ОБЪЕКТА(), в котором присваивать свое имя объекту.
В данном случае имя объекта мы используем как id
<div id="'+ЭТОТ_ОБЪЕКТ.Имя+'">
Но можем использовать и как имя класса, переделав код.
Для переменных, которые мы хотим дать возможность изменять пользователю данного объекта, мы создаем свойства (в данном примере созданы Ширина, ЦветФона, ЦветСимволов, ЦветАктивФона, СписокПунктов) Ширина — это ширина объекта, ЦветАктивФона — это цвет при наведении мышки на строку меню. СписокПунктов — это массив строк с командами нашего меню, который мы создаем данным объектом. В каждой строке данного массива через разделитель «|» будут записаны команда, вызываемая при нажатии строки меню, и текст в строке меню, который увидит пользователь.
Для примера, часть CSS-кода написано на русском (Ширина:, Список-стиль:, Поле: Отступ: ). Эти русские названия вновь заменяются на латинские в функции ПереводИзРусCSS(СтрокаВ). В архиве RusFox_v1_11.rar имеется текстовый файл, где вы можете посмотреть русскоязычные аналоги CSS-операторов и применять их, если считаете такой код более читабельным.
Конструкция ЭТОТ_ОБЪЕКТ.BootStrap.ФункцииCSS.ПереводИзРусCSS(СтрокаВ) означает, что у даного объекта (ЭТОТ_ОБЪЕКТ) имеется указатель в свойстве Bootstrap на объект (это указатель на головной объект Bootstrap, он заполняется после регистрации вашего объекта в объекте Bootstrap), у того объекта (Bootstrap) имеется указатель на объект «ФункцииCSS» (этот объект создается при создании объекта Bootstrap), а у объекта «ФункцииCSS» есть метод ПереводИзРусCSS(), который мы вызываем в данном коде. Так осуществляется доступ к функциям модуля Bootstrap. Хотя вы можете создать и новый объект «ФункцииCSS» и через глобальный указатель вызывать функции из объекта «ФункцииCSS»
В результате, при использовании нашего объекта мы пишем такой код
ФУНКЦИЯ НавигационноеМенюВертикальноеОдинУровень
ЛПЕРЕМ Меню, Меню2
Меню = НовыйМассив(1)
Меню.Добавить("|#|Пункт1|")
Меню.Добавить("|#|Пункт2|")
Меню.Добавить("|#|Пункт3|")
Меню.Добавить("|#|Пункт4|")
Меню2 = НовыйОбъект("НавМенюВертикальноеОдинУровень2")
Меню2.СписокПунктов = Меню
Меню2.Ширина = '300px'
ВОЗВРАТ Меню2
КОНЕЦФУНКЦИИ
Вид возвращаемой строки с CSS-кодом зависит от свойств объекта, которые можно переопределять после создания данного объекта до его использования объектом «BootStrap».
Несколько сложнее формируется строка HTML, так как ее окончательный вид зависит от массива строк переданных объекту, на который указывает свойство «СписокПунктов».
В каждой строке массива «СписокПунктов» содержатся два значения, разделенные символом «|» : команда, выполняемая при выборе пункта меню, текст строки меню.
Значение = ЭТОТ_ОБЪЕКТ.СписокПунктов.Получить(Номер)
Команда = ОбъектСтрока.Между_Символами(1, Значение, '|')
Значение = ОбъектСтрока.Между_Символами(2, Значение, '|')
В функции мы получаем каждый элемент массива по очереди методом Получить(Номер). Затем забираем первое значение через функцию Между_Символами() и второе значение. После чего для каждой строки меню формируем HTML-код
СтрокаВ=СтрокаВ+'<li><a href="'+Команда+'" >'+Значение+'</a></li>'
К возвращаемой строке добавляется строка из свойства «ТекстHTML», чтоб при использовании вашего объекта можно было добавить свой HTML-код
ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML
Аналогично, добавляется строка из свойства «ТекстCSS» для добавления в объект кодов CSS.
Если вам надо добавить JS-коды, то аналогично переопределяйте метод ПолучитьJavaScript() в в своем объекте. В возвращаемую строку так же добавляйте свойство «ТекстJavaScript».
Вступайте в нашу телеграмм-группу Инфостарт
