Создаем объекты для модуля Bootstarp на Русском Фоксе

19.08.18

Разработка - Языки и среды

Создавайте свой модуль с объектами для модуля Bootstrap, пакуйте их fxp-файлы и создавайте сайты из этих кубиков. Разберем, как это делать. Все гениальное должно быть простым, как теория относительности.

Скачать файлы

Наименование Файл Версия Размер
Создаем объекты для модуля Bootstarp на Русском Фоксе:
.rar 17,02Mb
0
.rar 17,02Mb Скачать

В предыдущей статье «РусскийФокс и 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».

РусскийФокс Bootstrap CSS HTML

См. также

Зачем нам 1С:Элемент

Мобильная разработка Языки и среды Бесплатно (free)

Flutter может быть использован с 1С:Предприятием для разработки кроссплатформенных мобильных приложений, обеспечивая единый интерфейс и функциональность на устройствах под управлением iOS и Android. Это позволяет создавать приложения с высокой производительностью благодаря использованию собственного движка рендеринга Flutter. Интеграция Flutter с 1С:Предприятием позволяет создавать мобильные приложения любого уровня сложности, интегрировать их в корпоративные информационные системы, а также реализовывать бизнес-логику

19.03.2024    6830    ROk_dev    56    

37

(Не) Строгая типизация 1С

Языки и среды Платформа 1С v8.3 Бесплатно (free)

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

16.01.2024    4216    SeiOkami    21    

55

Простое приложение на Dart

Языки и среды Бесплатно (free)

Пример небольшого приложения, с которого можно начать изучать язык программирования Dart.

08.08.2023    3191    acvatoris    6    

13

Статический анализатор кода 1С на Си

Языки и среды Платформа 1С v8.3 Россия Бесплатно (free)

Написание статического анализатора для 1С традиционным способом на Си.

30.06.2023    2982    prohorp    15    

12

Сквозная задача на Исполнителе - часть первая (IMAP)

Языки и среды Абонемент ($m)

Поставили нам задачу - вынести на отдельный сервер функционал получения заказов от клиентов по электронной почте, парсинг полученных XLS в приемлемый вид и трансформация заказов в красивый JSON, понятный нашей учетной системе на 1С. Всю эту красоту желательно запустить в отдельном докер - контейнере, по возможности не тратя лицензии, поэтому отдельно стоящую конфигурацию на БСП отвергаем сразу. Можно было бы собрать всё на Apache Airflow или Apache NiFi, но решили попробовать реализовать всю логику без Open Source, будем делать свой ETL, с Исполнителем, который в версии 3.0 научился взаимодействовать с электронной почтой по IMAP. Начнем с середины - сначала напишем скрипты, а потом соберем их в рабочую конструкцию

1 стартмани

01.06.2023    1894    0    kembrik    2    

7

1С# - Расширяем код 1С кодом на C#

Языки и среды Инструментарий разработчика Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Вставки кода на C# внутри кода на 1С.

7 стартмани

07.04.2023    9284    4    SerVer1C    56    

43

Независимая разработка совместимых компонент на ORM 1С – миф или истина где-то в аннотациях Java?

Языки и среды Платформа 1С v8.3 Бесплатно (free)

При работе с 1С ORM (object relation mapping) все время преследует ощущение постоянного создания монолитного приложения — один раз привязался к какой либо сущности (например, справочник Контрагенты), и весь код заполнен ссылками на эту конкретную реализацию. Можно ли независимо разрабатывать в ORM совместимые между собой справочник «Контрагентов» и использующий его документ «Платежное поручение», но при этом избежать жестких зависимостей? Спасут ли нас микросервисы? Пример на аннотациях Java демонстрирует, как это возможно делать.

13.03.2023    1024    1CUnlimited    0    

2

xPath в 1С

Файловый обмен (TXT, XML, DBF), FTP Языки и среды Платформа 1С v8.3 Бесплатно (free)

Опыт работы методами языка xPath в 1С.

04.03.2023    4934    DemetrKlim    40    

46
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Steelvan 302 20.08.18 16:31 Сейчас в теме
0 плюсов
0 скачиваний
0 комментариев

При всем уважении к автору, отсутствие обратной связи это тоже обратная связь.
2. w22u 30 28.08.18 15:42 Сейчас в теме
С дач и отпусков люди вернутся и этот материал наверняка будет интересен всем.
)))
Steelvan; +1 Ответить
3. pvlunegov 157 19.04.20 21:26 Сейчас в теме
Класс! Мне очень нравится технологический подход к разработке сайта.
Во первых русский синтаксис, во вторых, объектный подход к генерации контента.
Возможность алгоритмической генерации элементов html css из содержимого контента для сайта.
Возможность создания веб-сервисов, которые генерируют html содержимое динамически, по запросам.
andreosh; +1 Ответить
Оставьте свое сообщение