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

Программирование - Практика программирования

РусскийФокс FoxPro bootstrap HTML CSS

3
РусскийФокс вносит новый технологический подход в сайтостроение. Теперь вы можете ограничиться знанием Русского Фокса и не иметь знаний по HTML, CSS, JavaScript, PHP, чтоб создавать сайты.

Генерировать нужные коды в 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. На Русском Фоксе реализовать это будет проще.

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

3

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

Наименование Файл Версия Размер
РусскийФокс и BootStrap:
.rar 13,74Mb
16.08.18
1
.rar 13,74Mb 1 Скачать

См. также

Специальные предложения

Комментарии
Избранное Подписка Сортировка: Древо
1. blackhole321 812 17.08.18 07:24 Сейчас в теме
Я правильно понимаю, что это программная генерация html страниц, а не динамическая генерация в процессе обработки http-запроса?
3. andreosh 88 17.08.18 09:18 Сейчас в теме
(1) Правильно. Это своего рода программный конструктор для которого вы можете создавать свои объекты. Постепенно он будет обрастать объектами для Bootstrap, затем для Joomla и т.д.
5. andreosh 88 17.08.18 09:30 Сейчас в теме
Русский Фокс удобнее, чем SASS. SASS же генерирует только CSS-файл. Аналогично, Русский Фокс можно научить генерировать не только HTML, но и CSS, PHP и JS. В данной статье показана только идея. Пока это перспективный лабораторный вариант технологии.
2. Infactum 268 17.08.18 08:39 Сейчас в теме
Глядя на код, русский фокс представляется как-то так:
4. andreosh 88 17.08.18 09:19 Сейчас в теме
(2) Похоже. Но все начинается с такого, затем развивается.
6. andreosh 88 17.08.18 09:57 Сейчас в теме
(2) Нет РусскийФокс пока такой
Прикрепленные файлы:
7. Steelvan 17.08.18 15:54 Сейчас в теме
При всем уважении к вашему труду, Вы выдаете желаемое за действительное.

Что бы написать

"180530_УфЛи_m.jpg|180530_УфЛи_s.jpg|180530_УфЛи.jpg|<h5>30 мая 2018 г.</h5>"+; "<p>Смотреть <a h re f='https:/"+"/you/tu.be/2CAbmf/yVbZs'>видео</a1></p>"

нужно, как минимум, знать html.

Второе, пока выучишь ваш синтаксис, сильно отличающийся от 1С, уже освоишь html и css.
Третье, как Вас правильно спросили, на 1С можно получить реальный сервер с динамическим созданием содержимого.
Fox-trot; +1 Ответить
8. andreosh 88 18.08.18 11:27 Сейчас в теме
(7) Как получать реальный сервер с динамическим созданием содержимого я расскажу позже, после внедрения технологии Ajax в РусскийФокс (создания нужных объектов и функций). Такую задачу я решал на OneScript (см.мои статьи). Теперь эти наработки перенесу в РусскийФокс. Так же понятно, что можно легко упростить и строковый синтаксис, создав функции, генерирующие строки по заданным параметрам для тех, кто даже простые теги в HTML не освоил. В целом технологически на Русском Фоксе я повторяю то, что делает SASS, Joomla, многие конструкторы сайтов и т.д. Они генерируют те же коды, но на своем языке. SASS намного более корявый язык, чем РусскийФокс, менее читабельный, более ограниченный, но содержит больше наработок и имеет большее число тех, кто привык к этому языку. HTML освоить легко - это просто язык разметки, а вот вжиться в CSS обычному программисту весьма сложно, да и читать чужой код на JavaScript нелегкая задача.
9. Fox-trot 90 18.08.18 19:13 Сейчас в теме
(8)
Такую задачу я решал на OneScript (см.мои статьи)

и количество скачиваний как показатель...
10. andreosh 88 18.08.18 20:25 Сейчас в теме
(9) К сожалению, это не показатель. Не всех же интересует данная тема. Просто я ищу тех, кого интересует. OneScript пока так же мало людей использует. А перспективный проект NodeJS годами был не востребован, пока его пиарить не начали. А Русский Фокс появился весной 2018 года и сразу пытается охватить множество разнообразных задач. Следующая статья будет о том, как свои объекты создавать для формирования сайтов. В этой области есть масса проектов, но мой подход наиболее удобный.
11. andreosh 88 18.08.18 20:27 Сейчас в теме
(9) Кстати, на видео указываю альтернативный адрес скачивания без стартмани
12. Fox-trot 90 18.08.18 21:34 Сейчас в теме
(11)выдержка из правил публикаций
2.2.7. Запрещается указывать другой источник для загрузки файлов из Публикации.

так что не советую
13. andreosh 88 19.08.18 05:40 Сейчас в теме
(12) Учту. Но в статье я другой источник не указываю (ссылку на него не делаю).
14. СергейКа 661 19.08.18 20:37 Сейчас в теме
(13) Как минимум упоминать об этом не надо было ))
В целом по публикации. Оно конечно интересно, но на текущий момент мало применимо.
Возможно было при более востребовано, если например добавить еще и 1С в конкретной задаче. Как вариант - создавать корпоративный портал напрямую из базы. А уж на чем это будет написано - вопрос десятый. Сейчас по сути есть только Битрикс со своим недообменом.
И по поводу кода:
Г.ЦветФона("#777777")+Г.ЦветСимволов("#FFFFFF")+Г.СкруглитьУглы(10)

Согласитесь, выглядит несколько ... гм.
Напрашиваются некоторые нехорошие аналогии.
В остальном посмотрим.
15. andreosh 88 19.08.18 21:50 Сейчас в теме
(14) Это эксперименты для тех, кому не хочется писать CSS. В следующей статье еще будет руссификация CSS. Все это к применению не обязательно. ЦветФона("#777777") читать приятней, чем "background-color: #777777". Лабораторные опыты над пользователями ;-) Но все это дело привычки. Вначале раздражает так же, как меня поначалу раздражал русский язык программирования в 1С, а потом, что это удобней.
16. СергейКа 661 19.08.18 21:54 Сейчас в теме
(15) Да нет, ЦветФона меня не раздражает, давно уж в 1С.
А вот Г.ЦветФона выглядит уже не так ))
17. grin_64 36 11.12.18 11:29 Сейчас в теме
18. andreosh 88 11.12.18 17:02 Сейчас в теме
(17)https://youtu.be/MoGElxtXeTA
Под каждым видео на Ютубе ссылка на очередной архив.
РФокс версии 3.00 https://f2h.io/2pkn5bk7rbsz
Оставьте свое сообщение