РусскийФокс. Модуль BootStrap — различия между версиями

Версия 15:09, 6 декабря 2020

Внимание! Из за обилия HTML кода в коде этого модуля отображение страницы ломается и для просмотра кода перейдите в режим редактирования :(

Модуль 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)

30 мая 2018 г.

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

16 мая 2018 г.

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

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, наш текст на сайте будет выглядеть так:

Чтобы создать «Карусель» слайдов на сайте, достаточно создать массив с перечислением имен файлов картинок. Мы используем три разных размера одной картинки для адаптивности карусели. На маленьких экранах будет использоваться наименьший размер картинки.

16 мая 2018 г.

В каждую строку массива записывается строка с разделителями «|», где первое значение — малая картинка, затем средняя, затем большая, а последнее значение — это комментарий к картинке, в котором есть ссылка на канал в YouTube.

Создаем свой объект для объекта «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
   КОНЕЦФУНКЦИИ
   
   ФУНКЦИЯ ПолучитьОбъект()
    ЛПЕРЕМ СтрокаВ, Значение, Номер, Команда

    ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML
  КОНЕЦФУНКЦИИ
КОНЕЦ_ОПРЕДЕЛЕНИЯ_ОБЪЕКТА

Конечно же, создатель новых объектов должен знать CSS и HTML в отличие от того, кто будет использовать эти объекты.

Важно, чтоб такой объект был наследником объекта «BootStrap_Объект». Затем мы своему объекту добавляем нужные свойства и переписываем методы ПолучитьОбъект() и ПолучитьCSS(). Оба этих метода должны возвращать строки, первый код HTML, а второй код CSS. Разберем формирование кода CSS.

В предке нашего объекта «BootStrap_Объект» есть свойство «Имя» оно может быть переопределено, но изначально присваивается при инициализации и уникально. Вы можете его посмотреть командой Сообщить(ЭТОТ_ОБЪЕКТ.Имя) Если желаете его переопределить то следует это делать в начале метода ПолучитьCSS(), так как этот метод выполняется первым. Другой более сложный способ переопределить имя — это переписать метод ПРИ_ИНИЦИАЛИЗАЦИИ_ОБЪЕКТА(), в котором присваивать свое имя объекту.

В данном случае имя объекта мы используем как id

   ФУНКЦИЯ НавигационноеМенюВертикальноеОдинУровень
    ЛПЕРЕМ Меню, Меню2
     Меню = НовыйМассив(1)
     Меню.Добавить("|#|Пункт1|")  
     Меню.Добавить("|#|Пункт2|")  
     Меню.Добавить("|#|Пункт3|")  
     Меню.Добавить("|#|Пункт4|")  
     Меню2 = НовыйОбъект("НавМенюВертикальноеОдинУровень2") 
     Меню2.СписокПунктов = Меню
     Меню2.Ширина = '300px'
     ВОЗВРАТ Меню2    
   КОНЕЦФУНКЦИИ

     Значение = ЭТОТ_ОБЪЕКТ.СписокПунктов.Получить(Номер)
     Команда = ОбъектСтрока.Между_Символами(1, Значение, '|')  
     Значение = ОбъектСтрока.Между_Символами(2, Значение, '|')  

         ВОЗВРАТ СтрокаВ+ЭТОТ_ОБЪЕКТ.ТекстHTML