РусскийФокс. Модуль BootStrap

Материал из ТХАБ.РФ
Версия от 15:03, 6 декабря 2020; Админ (обсуждение | вклад) (Новая страница: «РусскийФокс. Модуль BootStrap. Модуль BootStrap (файл BootStrap.fxp) содержит объекты для использов…»)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

РусскийФокс. Модуль BootStrap.

   Модуль  BootStrap (файл BootStrap.fxp)  содержит объекты для использования в языках программирования РусскийФокс и Visual FoxPro 9.  Данные объекты позволяют генерировать HTML-файл для создания адаптивных сайтов. CSS и JavaScript коды упаковываются внутрь Index.html.
   В текущем каталоге вместе с генерируемым index.html должны находится каталоги BootStrap (CSS, JS файлы от BootStrap, а так же шрифты), RusFox (изображения и прочие файлы для объектов модуля BootStrap) и Projects (содержит каталоги проектов с изображениями и прочими файлами для конкретного проекта).  Каждый набор файлов для конкретного проекта содержится в отдельном каталоге внутри каталога  Projects.
   Для размещения сайта на хостинге следует копировать файл index.html, каталог BootStrap, каталог RusFox и каталог соответствующего проекта типа Projects/MySait/
   В модуле BootStrap.fxp  содержатся следующие объекты:  1)_BootStrap  2)_Генератор_CSS 3) BootStrap_Функции  4) BootStrap_Объект  5) BootStrap_Навигатор   6)_BootStrap_Карусель  7) BootStrap_Призыв 8) BootStrap_ЗаголовокСПараграфом    9)_BootStrap_ТриКолонки   10) BootStrap_ДвеКолонки  11) BootStrap_Вкладки  12)_BootStrap_МодальноеОкно   13) BootStrap_ГруппаПараграфов   11)_BootStrap_СсылкаСПодсказкой      14) НавМенюВертикальноеОдинУровень 15)_BootStrap_Таблица   
                      Как создать HTML-файл для сайта.
 Объект «BootStrap» в модуле «BootStrap» имеет основной значимый метод «СоздатьПроект()», но перед тем, как запустить его, следует объекту «BootStrap» передать массив объектов наследников объекта «BootStrap_Объект». Данный массив определяет объекты и их последовательность, которые будут сформированы в HTML-файле. В вышеприведенном перечне объектов наследниками объекта «BootStrap_Объект» являются все объекты, начиная с номера 5. Удобно для каждого сайта создавать свой объект сайта, в котором располагать методы по заполнению объектов для Bootstrap своим содержимым. В этом объекте рекомендуется разместить функцию (метод) ПолучитьОбъекты(), в которой создать массив из подключаемых на сайт объектов. Тогда перед запуском метода СоздатьПроект() из объекта  «BootStrap» достаточно написать:
  Об = НовыйОбъект("BootStrap")
  Сайт = НовыйОбъект("СайтУфЛи")   //  объект для сайта.
  Об.Контейнер = Сайт.ПолучитьОбъекты()   // Присваиваем массив объектов
  Об.СоздатьПроект()   // формируем HTML-файл
   После этого в свойстве «Контейнер» будет массив с указателем на объекты (наследников объекта «BootStrap_Объект»).

ПРОЦЕДУРА Старт

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

КОНЕЦПРОЦЕДУРЫ

    Целиком объект «СайтУфЛи» выглядит так:

ОПРЕДЕЛИТЬ_ОБЪЕКТ СайтУфЛи КАК БАЗОВЫЙ_ОБЪЕКТ

   Каталог='Projects/UfLi/'
   
   ФУНКЦИЯ ПолучитьОбъекты(Ф,Г)
     Объекты = НовыйМассив(1)
   //  Объекты.Добавить(ЭТОТ_ОБЪЕКТ.Навигатор())  
     Объекты.Добавить(ЭТОТ_ОБЪЕКТ.НавигационноеМенюВертикальноеОдинУровень())  
     Объекты.Добавить(ЭТОТ_ОБЪЕКТ.Карусель())  
     Объекты.Добавить(ЭТОТ_ОБЪЕКТ.АнонсКарусели(Г))  
     ВОЗВРАТ Объекты    
   КОНЕЦФУНКЦИИ
   
   ФУНКЦИЯ НавигационноеМенюВертикальноеОдинУровень
    ЛПЕРЕМ Меню, Меню2
     Меню = НовыйМассив(1)
     Меню.Добавить("|#|Пункт1|")  
     Меню.Добавить("|#|Пункт2|")  
     Меню.Добавить("|#|Пункт3|")  
     Меню.Добавить("|#|Пункт4|")  
     Меню2 = НовыйОбъект("НавМенюВертикальноеОдинУровень2") 
     Меню2.СписокПунктов = Меню
     Меню2.Ширина = '700px'
     ВОЗВРАТ Меню2    
   КОНЕЦФУНКЦИИ
   
   ФУНКЦИЯ Навигатор()
     Навигатор = НовыйОбъект("BootStrap_Навигатор")
     Меню = НовыйМассив(1)
     Меню.Добавить("|#|Главная|Актив|")  
     Меню.Добавить("|#|Пункт 1|Меню|/#/ПодМеню 1.1/#/ПодМеню 1.2/|")  
     Меню.Добавить("|#|Пункт 12|Меню|/#/ПодМеню 2.1/#/ПодМеню 2.2/#/ПодМеню 2.3/|")  
     Меню.Добавить("|#|Это демонстрационная страница|||")  
     Навигатор.ПунктыМеню = Меню
     Профиль = НовыйМассив(1)
     Профиль.Добавить("|#myModal|Установки|wrench|")    //    glyphicon.getbootstrap.com
     Профиль.Добавить("|#|РазделительМеню||")  
     Профиль.Добавить("|#|Выход|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)
АнонсКарусели.Заголовок = '



. Литературный клуб города Уфы "УфЛи" .

'
     АнонсКарусели.ТекстПараграфа = 'Просматривайте видео заседаний клуба.
Кратко о клубе'+; ' <details> Литературный клуб "УфЛи" создан в .... году
</details>
' ВОЗВРАТ АнонсКарусели КОНЕЦФУНКЦИИ ФУНКЦИЯ Карусель() Карусель = НовыйОбъект("BootStrap_Карусель") Карусель.КаталогКартинок = ЭТОТ_ОБЪЕКТ.Каталог+'images/' СписокСлайдов = НовыйМассив(1)
СписокСлайдов.Добавить("|180530_УфЛи_m.jpg|180530_УфЛи_s.jpg|180530_УфЛи.jpg|
30 мая 2018 г.
"+; "

Смотреть <a href='https:/"+"/youtu.be/2CAbmfyVbZs'>видео</a>

|") СписокСлайдов.Добавить("|180516_УфЛи_m.jpg|180516_УфЛи_s.jpg|180516_УфЛи.jpg|
16 мая 2018 г.
"+; "

Смотреть <a href='https:/"+"/youtu.be/-idnIF9ui1Q'>видео</a>

|") СписокСлайдов.Добавить("|180510_УфЛи_m.jpg|180510_УфЛи_s.jpg|180510_УфЛи.jpg|
10 мая 2018 г.
"+; "

Смотреть <a href='https:/"+"/youtu.be/_z3T91XqeF0'>видео</a>

|")
     Карусель.СписокСлайдов = СписокСлайдов
     ВОЗВРАТ Карусель    
   КОНЕЦФУНКЦИИ


КОНЕЦ_ОПРЕДЕЛЕНИЯ_ОБЪЕКТА

   В свойстве «Каталог» указан относительный путь к проекту. Затем он используется в функции Карусель() Карусель.КаталогКартинок = ЭТОТ_ОБЪЕКТ.Каталог+'images/'
   Для создания объектов и заполнения их своим содержимым внутри объекта создаем методы (функции).
   
    Рассмотрим функцию «НавигационноеМенюВертикальноеОдинУровень». Сначала создается массив Меню = НовыйМассив(1) Затем он заполняется структуированными строками. В каждой строке есть 2 раздела, разделенных символом «|». Первый раздел — это команда запускаемая при нажатии соответствующего пункта меню, а второй — это текст в пункте меню. В данном случае все команды меню у нас пустые (имеют символ «#»). После формирования массива создаем объект 

Меню2 = НовыйОбъект("НавМенюВертикальноеОдинУровень2")

  Свойству «СписокПунктов» присваиваем указатель на массив  Меню. Кроме этого свойства объект имеет свойства
   Ширина = '300px'          
   ЦветФона = '#000032'          
   ЦветСимволов = '#FFFFFF'  
   ЦветАктивФона = '#711515'   
     Любое из этих свойств может быть изменено на нужное нам значение. В примере мы меняем ширину Меню2.Ширина = '700px'   Затем указатель на объект возвращаем функцией для регистрации в методе ПолучитьОбъекты()
     
     Функция Навигатор() создает и заполняет объект «BootStrap_Навигатор». Подробнее работу с данным объектом см. в главе «BootStrap_Навигатор».
     Функция АнонсКарусели() использует объект "BootStrap_ЗаголовокСПараграфом". Функция Карусель() использует объект "BootStrap_Карусель". О работе с данными объектами можно прочитать в соответствующих разделах.
     При заполнении объекта АнонсКарусели() требуется заполнить два свойства объекта: Заголовок и ТекстПараграфа. Их можно заполнить либо простым текстом, либо оформленным в HTML-теги.  Например, заголовок мы оформляем в тег 

. Литературный клуб города Уфы "УфЛи" .

      При этом мы используем объект "Генератор_CSS" (указатель «Г» передан в параметре функции) для облегчения формирования CSS-кода, чтоб оформить строку в теге . Тегу  мы присваиваем класс = Г.Имя — имя объекта "Генератор_CSS". Сгенерированный CSS-код мы присваиваем свойству «ТекстCSS» нашего объекта, чтоб новый CSS-код добавился к CSS-коду объекта.  
      КодCSS = Г.ЦветФона("#777777")+Г.ЦветСимволов("#FFFFFF")+Г.СкруглитьУглы(10)+;
                           Г.ТеньЭлемента(1,1,10,"rgba(0,0,0,0.5)")+Г.Отступ("2 4 6 7px")
     АнонсКарусели.ТекстCSS = Г.ВыдатьCSS(КодCSS)     
   Для формирования CSS-кода облегчения его чтения мы используем функции объекта "Генератор_CSS": ЦветФона("#777777")  ЦветСимволов("#FFFFFF")   СкруглитьУглы(10)  ТеньЭлемента(1,1,10,"rgba(0,0,0,0.5)")  Отступ("2 4 6 7px").  Можно и не использовать данные функции, а просто написать CSS-код, если вам так привычней. Затем этот код обрабатывается функцией ВыдатьCSS(КодCSS), которая присваивает ему уникальное имя. Именно это имя мы присваиваем классу в теге .   Но мы можем указать и свое имя, если до вызова функции  ВыдатьCSS(КодCSS) выполним  Г.Имя='Name2', но тогда мы сами должны позаботится об уникальности имени.  Именно благодаря данной строке CSS, наш текст на сайте будет выглядеть так:
       
    Чтобы создать «Карусель» слайдов на сайте, достаточно создать массив с перечислением имен файлов картинок. Мы используем три разных размера одной картинки для адаптивности карусели. На маленьких экранах будет использоваться наименьший размер картинки.  
"|180516_УфЛи_m.jpg|180516_УфЛи_s.jpg|180516_УфЛи.jpg|
16 мая 2018 г.
Смотреть <a href='https:/"+"/youtu.be/-idnIF9ui1Q'>видео</a></p>|"
     В каждую строку массива записывается строка с разделителями «|», где первое значение — малая картинка, затем средняя, затем большая, а последнее значение — это комментарий к картинке, в котором есть ссылка на канал в YouTube.
       Cоздаем свой объект для объекта «BootStrap».
      Рассмотрим образец простого объекта, который можно регистрировать в объекте «BootStrap». Этот объект будет содержать только HTML-код и CSS-код не будет иметь JavaScript-кода.

ОПРЕДЕЛИТЬ_ОБЪЕКТ НавМенюВертикальноеОдинУровень2 КАК BootStrap_Объект

   СписокПунктов = ПУСТО     
   Ширина = '300px'          
   ЦветФона = '#000032'          
   ЦветСимволов = '#FFFFFF'  
   ЦветАктивФона = '#711515'   
                             
   ФУНКЦИЯ ПолучитьCSS()     
     ЛПЕРЕМ СтрокаВ, ИмяОбъекта
       ЕСЛИ НЕ ТипЗнч(ЭТОТ_ОБЪЕКТ.Ширина) == 'Строка'
         Предупреждение('В объекте НавМенюВертикальноеОдинУровень Свойство Ширина имеет строковый тип. '+;
                                                                          'Следует присваивать строку типа "200px" ')
         ВОЗВРАТ ""
       КОНЕЦЕСЛИ;
       ИмяОбъекта = ЭТОТ_ОБЪЕКТ.Имя
       СтрокаВ = ' #'+ИмяОбъекта+' { width: '+ЭТОТ_ОБЪЕКТ.Ширина+'; } #'+ИмяОбъекта+;
                               ' ul {list-style: none; margin: 0; padding: 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
   КОНЕЦФУНКЦИИ
   
   ФУНКЦИЯ ПолучитьОбъект()
    ЛПЕРЕМ СтрокаВ, Значение, Номер, Команда
СтрокаВ = '
    '
             ЕСЛИ ТипЗнч(ЭТОТ_ОБЪЕКТ.СписокПунктов)=='Объект'
               ДЛЯ Номер=1 ПО ЭТОТ_ОБЪЕКТ.СписокПунктов.Количество()
                 Значение = ЭТОТ_ОБЪЕКТ.СписокПунктов.Получить(Номер)
                 Команда = ОбъектСтрока.Между_Символами(1, Значение, '|')  
                 Значение = ОбъектСтрока.Между_Символами(2, Значение, '|')  
    
    СтрокаВ=СтрокаВ+'
  • <a href="'+Команда+'" >'+Значение+'</a>
  • '
               КОНЕЦЦИКЛА;
             КОНЕЦЕСЛИ;  
    
    СтрокаВ = СтрокаВ+'
'
    ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML
  КОНЕЦФУНКЦИИ

КОНЕЦ_ОПРЕДЕЛЕНИЯ_ОБЪЕКТА

    Конечно же, создатель новых объектов должен знать CSS и HTML в отличие от того, кто будет использовать эти объекты. 
   Важно, чтоб такой объект был наследником объекта «BootStrap_Объект». Затем мы своему объекту добавляем нужные свойства и переписываем методы ПолучитьОбъект() и ПолучитьCSS(). Оба этих метода должны возвращать строки, первый код HTML, а второй код CSS.  Разберем формирование кода CSS.
      В предке нашего объекта «BootStrap_Объект» есть свойство «Имя» оно может быть переопределено, но изначально присваивается при инициализации и уникально. Вы можете его посмотреть командой Сообщить(ЭТОТ_ОБЪЕКТ.Имя)  Если желаете его переопределить то следует это делать в начале метода  ПолучитьCSS(), так как этот метод выполняется первым. Другой более сложный способ переопределить имя — это переписать метод ПРИ_ИНИЦИАЛИЗАЦИИ_ОБЪЕКТА(), в котором присваивать свое имя объекту.
      В данном случае имя объекта мы используем как id 
       Но можем использовать и как имя класса.
      Для переменных, которые мы хотим дать возможность изменять пользователю данного объекта, мы создаем свойства (в данном случае создали Ширина, ЦветФона, ЦветСимволов, ЦветАктивФона, СписокПунктов)  Ширина — это ширина объекта, ЦветАктивФона — это цвет при наведении мышки на строку меню.  СписокПунктов — это массив строк с командами нашего меню, который мы создаем данным объектом. В каждой строке данного массива через разделитель «|» будут записаны команда, вызываемая при нажатии строки меню, и текст в строке меню, который увидит пользователь.
    В результате такой текст, при использовании нашего объекта
   ФУНКЦИЯ НавигационноеМенюВертикальноеОдинУровень
    ЛПЕРЕМ Меню, Меню2
     Меню = НовыйМассив(1)
     Меню.Добавить("|#|Пункт1|")  
     Меню.Добавить("|#|Пункт2|")  
     Меню.Добавить("|#|Пункт3|")  
     Меню.Добавить("|#|Пункт4|")  
     Меню2 = НовыйОбъект("НавМенюВертикальноеОдинУровень2") 
     Меню2.СписокПунктов = Меню
     Меню2.Ширина = '300px'
     ВОЗВРАТ Меню2    
   КОНЕЦФУНКЦИИ
   Выдаст такой результат.
    Вид возвращаемой строки с CSS-кодом зависит от свойств объекта, которые можно переопределять после создания данного объекта до его использования объектом «BootStrap». 
     Несколько сложнее формируется строка HTML, так как ее окончательный вид зависит от массива строк переданных объекту, на который указывает свойство «СписокПунктов».
      В каждой строке массива «СписокПунктов» содержатся два значения, разделенные символом «|» : команда, выполняемая при выборе пункта меню, текст строки меню.
             Значение = ЭТОТ_ОБЪЕКТ.СписокПунктов.Получить(Номер)
             Команда = ОбъектСтрока.Между_Символами(1, Значение, '|')  
             Значение = ОбъектСтрока.Между_Символами(2, Значение, '|')  
    В функции мы получаем каждый элемент массива по очереди методом Получить(Номер). Затем забираем первое значение через функцию Между_Символами() и второе значение. После чего для каждой строки меню формируем HTML-код
СтрокаВ=СтрокаВ+'
  • <a href="'+Команда+'" >'+Значение+'</a>
  • '
      К возвращаемой строке добавляется строка из свойства «ТекстHTML», чтоб при использовании вашего объекта можно было добавить свой HTML-код
                       ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML
             Аналогично, добавляется строка из свойства «ТекстCSS» для добавления в объект кодов CSS. 
     Если вам надо добавить JS-коды, то аналогично переопределяйте метод ПолучитьJavaScript() в в своем объекте. В возвращаемую строку так же добавляйте свойство «ТекстJavaScript».
    


         Таким образом, вы можете создавать свои объекты для модуля «BootStrap», упаковывать их в модуль с расширением «fxp» и распространять для использования вместе с бесплатной программой РусскийФокс версии не ниже 1.11 и модулем «BootStrap».  По сути, РусскийФокс выступает, как программный генератор сайтов. Для этого генератора вы можете создавать свои объекты на языке программирования РусскийФокс или использовать чужие из сторонних модулей fxp.
        
    



    Для изучения создания интернет страниц на языке программирования Русский Фокс требуется, чтоб учащиеся имели следующие навыки: 1) Читать и печатать. 2) Понимать, что такое файл и каталог в компьютере. 3) Уметь устанавливать программы в компьютер.

    Этапы обучения: 1) Знакомство с языком программирования Русский Фокс (РФокс). 2) Установка редактора. Настройка редактора NotePad++ для удобного редактирования кодов РФокс. Как сделать цветные слова и сворачивание кода. Как работать в редакторе. 3) Изучение основных функций РФокс. 4) Создание своих функций на РФокс. 5) Как создавать сайты на РФоксе. 6) Как создавать локальный хостинг для проверки работы сайта. 7) Как регистрировать удаленный хостинг для размещения страниц в интернет.

    Пример создания сайта можно посмотреть в учебных видео

    • Урок 18 Создание сайта
    • РусскийФокс как фреймворк