Делаем настройки с помощью BotUI и Bootstrap

[YrKa]

Решил для новых своих проектов заморочиться с настройками BotUI и обнаружил, что в папке настроек BotUI есть папка с bootstrap, на котором помниться клепал достаточно большое количество лендингов с помощью драг-энд-дроп темки select 7, серваков ovh и панельки vesta.

Что такое Bootstrap?

Если кратко то - просто фронтенд фрейм, основанный на html и css. В осноении очень простой: достаточно мин знаний в html. Дизайн просто отличный, все адаптировано под мобилки, большое количество тем можно найти. При этом подключить какой-нить javascript плагин можно очень быстро, например, для галереи и пр. дизайнерских плюшек.

Более подробно можно здесь почитать https://www.w3schools.com/bootstrap/

Посмотрев на создание настроек BotUI с помощью редактора HTML, который сейчас реализован в прожекте (не в обиду разработчикам))), решил поискать темки бутстрапа. Есть в открытом доступе тему, есть много онлайн редакторов бутстрапа сейчас (гуглите что-то типа "bootstrap theme generator online"); некоторые платные, некоторые бесплатные. Для настроек, конечно, как мне кажется, лучше всего подходят админки разные. Нашел темку AdminLTE-2.4.2 (https://github.com/almasaeed2010/AdminLTE/releases) и попробовал загрузить ее в редактор.

Что нужно сделать, чтобы добавить тему в настройки?

1. Найти и скачать архив темы
2. Закинуть разархивированную папку в C:\Program Files (x86)\ZennoLab\RU\ZennoPoster Pro\5.14.0.0\Progs\HtmlEditorContent
3. Отредактировать index.html - это главная страница или в нашем случае основа для вставки в BotUI

3.1. Прописать путь для стилей и скриптов (скрипты желательно в низ страницы убрать)
было так, например

<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

а нужно так

<link rel="stylesheet" href="file:///C:/Program%20Files%20(x86)/ZennoLab/RU/ZennoPoster%20Pro/5.14.0.0/Progs/HtmlEditorContent/AdminLTE-2.4.2/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<script src="file:///C:/Program%20Files%20(x86)/ZennoLab/RU/ZennoPoster%20Pro/5.14.0.0/Progs/HtmlEditorContent/AdminLTE-2.4.2/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

3.2. Прописать пути до всех a href на странице
3.3. Отредактировать саму страницу под себя.
4. Отредактировать остальные страницы под нужды своего проекта. В данном случае html файлы страниц, которые здесь лежат C:\Program Files (x86)\ZennoLab\RU\ZennoPoster Pro\5.14.0.0\Progs\HtmlEditorContent\AdminLTE-2.4.2\pages

Что в итоге получается?

А в итоге получается BotUI с большим количеством графических вариантов настроек.

Вариант дашборда #1

Вариант дажборда #2

Опции разметки

Виджеты

Графики

Элементы ЮИ

Формы

Таблицы

Календари

Почта, Инвойсы, Страница профиля и пр страницы

Для чего все это нужно?

• для красоты и юзабилити
• можно, например, интегрировать, наверное, с различными сервисами типа почты и пр
• можно вести статистику выполнения проекта наглядно, если создать доп скрипт, которые будет править значения в html файлах из HtmlEditorContent
• думаю еще большое количество преимуществ есть)

Проблемы, с которыми столкнулся (может кто найдет решение)

1. Автоматом добавляется style в head зенковский
   <style type="text/css">.jqstooltip { position: absolute;left: 0px;top: 0px;visibility: hidden;background: rgb(0, 0, 0) transparent;background-color: rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";color: white;font: 10px arial, san serif;text-align: left;white-space: nowrap;padding: 5px;border: 1px solid white;box-sizing: content-box;z-index: 10000;}.jqsfield { color: white;font: 10px arial, san serif;text-align: left;}</style><style type="text/css">.jqstooltip { position: absolute;left: 0px;top: 0px;visibility: hidden;background: rgb(0, 0, 0) transparent;background-color: rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";color: white;font: 10px arial, san serif;text-align: left;white-space: nowrap;padding: 5px;border: 1px solid white;box-sizing: content-box;z-index: 10000;}.jqsfield { color: white;font: 10px arial, san serif;text-align: left;}</style><style type="text/css">.jqstooltip { position: absolute;left: 0px;top: 0px;visibility: hidden;background: rgb(0, 0, 0) transparent;background-color: rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";color: white;font: 10px arial, san serif;text-align: left;white-space: nowrap;padding: 5px;border: 1px solid white;box-sizing: content-box;z-index: 10000;}.jqsfield { color: white;font: 10px arial, san serif;text-align: left;}</style>
   который сбивает разметку страницы главной
2. Не нашел как можно добавить переменные на вложенные страницы, пробовал через атрибут variable_name, но не получилось.
3. Не пробовал интегрировать с сервисами.

P.S. BotUI - отличная задумка авторов, но реализация пока как мне кажется сейчас немного прихрамывает) Нужно очень-очень много времени потратить для создания крутого интерфейса, и стоимость его создания думаю зачастую может превышать стоимость самого проекта.
Я бы на месте авторов самом деле более тесно интегрировал bootstrap, т.к. создавать с нуля фроненд фрейм - очень затратно, лучше использовать готовые хорошие решения.

P.P.S. Если понравилась статья, то просьба поставить +1, если вас это не затруднит и считаете нужным вот это нововведение http://zennolab.com/discussion/threads/41129/
Просто очень его жду))

Прилагаю сам проект и архив для загрузки в C:\Program Files (x86)\ZennoLab\RU\ZennoPoster Pro\5.14.0.0\Progs\HtmlEditorContent
https://cloud.mail.ru/public/6rfr/FgQ2G1eoz

 

[Lord_Alfred]

Хорошая статья, показывающая красоту)

Только я не понял зачем AdminLTE качать, он ведь и так идет с зенкой. Или там отдельно пересобранный какой-то?

Ну и по поводу графиков/диаграмм в BotUI - если бы там делать такое, то это было бы просто изумительно! Но только вот есть одно жирное "но" - сейчас данные из проекта (работу кубиков или c#) - никак не передать в интерфейс BotUI... То есть по сути шаблон и интерфейс BotUI - это две разные сущности, которые живут независимо друг от друга, причем могут общаться между собой только в одном направлении (BotUI -> шаблон). Поэтому я даже не знаю как надо ухитриться и изловчиться, чтоб можно было в BotUI что-то показать из того, с чем работает шаблон (хотя бы статистику какую-то простенькую, аля "сколько аккаунтов в списке")...
Туда бы хотя бы для начала какой-то метод прикрутить, который будет выполняться перед запуском BotUI, т.е., например, в общий код добавить метод, который можно будет перегрузить и выполнить какие-то действия, а результат работы метода чтоб передавался в json уже в BotUI. Для начала это было бы идеально

 

[YrKa]

Хорошая статья, показывающая красоту)

Только я не понял зачем AdminLTE качать, он ведь и так идет с зенкой. Или там отдельно пересобранный какой-то?

Ну и по поводу графиков/диаграмм в BotUI - если бы там делать такое, то это было бы просто изумительно! Но только вот есть одно жирное "но" - сейчас данные из проекта (работу кубиков или c#) - никак не передать в интерфейс BotUI... То есть по сути шаблон и интерфейс BotUI - это две разные сущности, которые живут независимо друг от друга, причем могут общаться между собой только в одном направлении (BotUI -> шаблон). Поэтому я даже не знаю как надо ухитриться и изловчиться, чтоб можно было в BotUI что-то показать из того, с чем работает шаблон (хотя бы статистику какую-то простенькую, аля "сколько аккаунтов в списке")...
Туда бы хотя бы для начала какой-то метод прикрутить, который будет выполняться перед запуском BotUI, т.е., например, в общий код добавить метод, который можно будет перегрузить и выполнить какие-то действия, а результат работы метода чтоб передавался в json уже в BotUI. Для начала это было бы идеально

да я AdminLTE сначала новыу версию нашел закачал, а потом увидел только, что в папке какая-то обрезанная версия была)
может кто-то или авторы смогут реализовать данный функционал по статистике и пр вещам а так пища для пытливых умов)

 

[Lord_Alfred]

Часть гифок, кстати, не отображается, там косяк в расширении - на конце .gifv, а надо просто .gif

 

[YrKa]

Часть гифок, кстати, не отображается, там косяк в расширении - на конце .gifv, а надо просто .gif

это cloudflare мне все не давал загрузить и ссылки оставить - видимо косяк небольшой получился( пришлось некоторые гифки заменить на vimeo

 

[Lord_Alfred]

это cloudflare мне все не давал загрузить и ссылки оставить - видимо косяк небольшой получился( пришлось некоторые гифки заменить на vimeo

Оооо, как я тебя понимаю) Когда конкурсную статью по BotUI писал - тоже самое было))) Наверное, с 20го раза вышло запостить только, всё перекидывал на страницу проверки с рекапчей. Там суть в том, что надо вставить в поле ввода текст нужный, но в режиме визуального редактора ещё и что-то написать и поприсутствовать на странице, тогда защита клаудфлары не срабатывает) Но всё равно может быть, что с 5 раза это только выйдет

 

[z@jivalo]

что-то у меня не получается завести это дело
Пути поменял

В итоге вот что

вот какие директории

 

[Lord_Alfred]

Открой код шаба в браузере и загляни в консоль - увидишь все ошибки

 

[z@jivalo]

Сделал нашел ошибки ссылается на папку
content
Но ее нету в новой версии AdminLTE

 

[YrKa]

Сделал нашел ошибки ссылается на папку
content
Но ее нету в новой версии AdminLTE

а какая строка ссылается? ссылки открываются, если кликнуть на Dashboard v1?
если что в лс напиши - по тимке могу посмотерть

 

[Master4eg]

Т.е. в роли входных настроек эту красоту незаюзать никак?

 

[doc]

Т.е. в роли входных настроек эту красоту незаюзать никак?

заюзать. Только нужны хорошие познания в вёрстке. в том числе Js