РусскийФокс и BootStrap

Генерировать нужные коды в HTML-файл можно на Русском Фоксе, используя объект «BootStrap». Знания языков программирования для создания сайтов вам потребуются только, если вы захотите создать свои объекты на Русском Фоксе или дополнить существующие объекты.     

Объект «BootStrap» содержится в модуле bootstrap.fxp (см.вложение) и полностью написан на Русском Фоксе без применения Visual FoxPro 9 (предка Русского Фокса).

Объект «BootStrap» имеет один значимый метод СоздатьПроект(). После запуска этой функции создается файл index.html, содержащий HTML, CSS, JavaScript коды. Но перед тем, как запустить метод СоздатьПроект() следует присвоить свойству «Контейнер» массив с объектами для BootStrap.

Создание сайта теперь выглядит так:

ПРОЦЕДУРА Старт 
   ПодключитьМодуль("BootStrap")   // Подключаем модуль BootStrap
   Об = НовыйОбъект("BootStrap")    // Создаем объект BootStrap
   Об.ИмяПроекта = "УфЛи"          // Задаем заголовок и имя проекта ЛитКлуба г.Уфы
   Об.Заголовок = "УфЛи" 
   Сайт = НовыйОбъект("СайтУфЛи")           // Создаем объект нашего сайта
   Ф = НовыйОбъект("BootStrap_Функции")  // Создаем объект с функциями из модуля
   Г = НовыйОбъект("Генератор_CSS")                // функции для генерации CSS
   Об.Контейнер = Сайт.ПолучитьОбъекты(Ф,Г)   // Получаем список объектов 
   Об.СоздатьПроект()    //  Создаем HTML-файл
   Сообщить("index.html создан c помощью объекта BootStrap ")
КОНЕЦПРОЦЕДУРЫ

Каждый сайт удобно оформлять в виде единого объекта, типа “СайтУфЛи”. В зависимости от того, какой объект мы подключим, такой файл HTML и будет создан. Десятки наших сайтов могут быть в одном каталоге и перекомпилироваться после усовершенствования объектов. Благодаря этому себестоимость сопровождения и обновления большого числа разработок снижается.

Мы подключаем объект “BootStrap_Функции”, так как я рекомендую не создавать свободных функций, а создавать функции внутри объекта. Таким образом, для функций обеспечивается свое пространство имен, которое позволяет избежать проблемы с одинаковым названием функций в различных модулях. Мы можем создавать и переменные внутри объекта так же не беспокоясь о повторении в названии.

Существует объект “Генератор_CSS” для тех кому лень писать CSS-коды руками. Позже я расскажу, как им пользоваться. Свои CSS-коды теперь придется писать только, если вы желаете усовершенствовать объекты и создавать специфичное оформление.

Объект для вашего сайта на Русском Фоксе будет выглядеть так:

ОПРЕДЕЛИТЬ_ОБЪЕКТ СайтУфЛи КАК БАЗОВЫЙ_ОБЪЕКТ
    Каталог='Projects/UfLi/'
    
    ФУНКЦИЯ ПолучитьОбъекты(Ф,Г)
       Объекты = НовыйМассив(1)
          Объекты.Добавить(ЭТОТ_ОБЪЕКТ.Навигатор())  
          Объекты.Добавить(ЭТОТ_ОБЪЕКТ.АнонсКарусели(Г))  
          Объекты.Добавить(ЭТОТ_ОБЪЕКТ.Карусель())  
          ВОЗВРАТ Объекты    
    КОНЕЦФУНКЦИИ

    ФУНКЦИЯ Навигатор()
         Навигатор = НовыйОбъект("BootStrap_Навигатор")
        Меню = НовыйМассив(1)
          Меню.Добавить("|#|Главная|Актив|")  
          Меню.Добавить("|#|Пункт 1|Меню|/#/ПодМеню 1.1/#/ПодМеню 1.2/|")  
          Меню.Добавить("|#|Пункт 2|Меню|/#/ПодМеню 2.1/#/ПодМеню 2.2/#/ПодМеню 2.3/|")  
          Меню.Добавить("|#|Это демонстрационная страница|||")  
          Навигатор.ПунктыМеню = Меню
        Профиль = НовыйМассив(1)
          Профиль.Добавить("|#myModal|Установки|wrench|")    //    
          Профиль.Добавить("|#|РазделительМеню||")  
         Профиль.Добавить("|#|Выход|off|")  
         Навигатор.МенюПрофиля = Профиль
         Навигатор.Логотип = "RusFox/images/RusFox2.ico"
      ВОЗВРАТ Навигатор    
    КОНЕЦФУНКЦИИ

    ФУНКЦИЯ АнонсКарусели(Г)
      ЛПЕРЕМ КодCSS
      АнонсКарусели = НовыйОбъект("BootStrap_ЗаголовокСПараграфом")
      КодCSS = Г.ЦветФона("#777777")+Г.ЦветСимволов("#FFFFFF")+Г.СкруглитьУглы(10)+;
                                                                             Г.ТеньЭлемента(1,1,10,"rgba(0,0,0,0.5)")+Г.Отступ("2 4 6 7px")
      АнонсКарусели.ТекстCSS = Г.ВыдатьCSS(КодCSS)
      АнонсКарусели.Заголовок = '<br><br><br><br><h2><span class="'+Г.Имя+;
                                                                       '">. Литературный клуб города Уфы "УфЛи" .</span></h2>'
      АнонсКарусели.ТекстПараграфа = 'Просматривайте видео заседаний клуба.<br> Кратко о клубе'+;
        ' <details> Литературный клуб "УфЛи" создан в .... году <br></details><br>'
      ВОЗВРАТ АнонсКарусели    
    КОНЕЦФУНКЦИИ
    
    ФУНКЦИЯ Карусель()
      Карусель = НовыйОбъект("BootStrap_Карусель")
      Карусель.КаталогКартинок = ЭТОТ_ОБЪЕКТ.Каталог+'images/'
      СписокСлайдов = НовыйМассив(1)  //  слайд 725х310 | слайд 940х410 | слайд 1170х502 |  три размера jpg для разных экранов   
      СписокСлайдов.Добавить("|180530_УфЛи_m.jpg|180530_УфЛи_s.jpg|180530_УфЛи.jpg|<h5>30 мая 2018 г.</h5>"+;
                                                                     "<p>Смотреть <a href='https:/"+"/youtu.be/2CAbmfyVbZs'>видео</a></p>|")  
      СписокСлайдов.Добавить("|180516_УфЛи_m.jpg|180516_УфЛи_s.jpg|180516_УфЛи.jpg|<h5>16 мая 2018 г.</h5>"+;
                                                                "<p>Смотреть <a href='https:/"+"/youtu.be/2CAbmfyVbZs'>видео</a></p>|")  
      СписокСлайдов.Добавить("|180510_УфЛи_m.jpg|180510_УфЛи_s.jpg|180510_УфЛи.jpg|<h5>10 мая 2018 г.</h5>"+;
                                                               "<p>Смотреть <a href='https:/"+"/youtu.be/_z3T91XqeF0'>видео</a></p>|")  
      СписокСлайдов.Добавить("|180418_УфЛи_m.jpg|180418_УфЛи_s.jpg|180418_УфЛи.jpg|<h5>18 апреля 2018 г.</h5>"+;
                                                           "<p>Смотреть <a href='https:/"+"/youtu.be/0oMp2d1VD7A'>видео</a></p>|")  
      СписокСлайдов.Добавить("|180411_УфЛи_m.jpg|180411_УфЛи_s.jpg|180411_УфЛи.jpg|<h5>14 апреля 2018 г.</h5>"+;
                                                          "<p>Смотреть <a href='https:/"+"/youtu.be/uV0GIdUKZys'>видео</a></p>|")  
      СписокСлайдов.Добавить("|180404_УфЛи_m.jpg|180404_УфЛи_s.jpg|180404_УфЛи.jpg|<h5>04 апреля 2018 г.</h5>"+;
                                                           "<p>Смотреть <a href='https:/"+"/youtu.be/uV0GIdUKZys'>видео</a></p>|")  
      Карусель.СписокСлайдов = СписокСлайдов
      ВОЗВРАТ Карусель    
    КОНЕЦФУНКЦИИ
КОНЕЦ_ОПРЕДЕЛЕНИЯ_ОБЪЕКТА 

В методе ПолучитьОбъекты(Ф,Г) устанавливается порядок следования объектов в HTML-файле. Для примера приведено только три объекта.

Указатель Ф указывает на полезные функции модуля BootStrap. Указатель Г указывает на набор функций для генерации кода CSS.

Метод Навигатор() создает верхнее двухуровневое меню с логотипом, строкой поиска и командами «Мой профиль». Подробней о настройках данного объекта я расскажу в будущем, но и просто, глядя на код, можно понять что к чему.

Метод Карусель() создает адаптивную «карусель слайдов», у надписи под каждым фото есть ссылка на видео материал YouTube.

Из данного краткого объяснения у вас должно сложится представление о новом технологическом подходе используемом в создании сайтов на Русском Фоксе. Показано, как использовать готовые объекты, наполняя их своим содержимым. Более подробно см.в файлах во вложении.

Планирую в будущем скрестить BootStrap с Joomla, научив Русский Фокс создавать адаптивные шаблоны для Joomla. В свое время я это уже пробывал сделать (но правда без использования BootStrap) на OneScript. На Русском Фоксе реализовать это будет проще.

Видео по теме (в конце видео моя пародийная песня про программистов в моем исполнении)

В КАТАЛОГ »