Bootstrap + Qlik Sense = легкая разработка расширений визуализации

Что отличает хорошего хорошего разработчика? Конечно, здоровая лень, выражающаяся в желании облегчить процесс разработки и максимально использовать для этого современные инструменты. Twitter Bootstrap с Qlik Sense? Конечно!  😉

Рассчитываю, что для вас слово BootStrap – не пустой звук. Для тех, кто еще не знает, что это за зверь, рассказываю максимально кратко, а затем к делу: покажу методику использования библиотеки стилей BootStrap для расширений визуализации Qlik Sense.

BootStrap Qlik Sense разработка

Bootstrap: небольшой экскурс в фронт-энд разработку

Bootstrap позволяет вести быструю веб-разработку сайтов и приложений, а также ориентирован на создание адаптивных интерфейсов, благодаря динамическому CSS, что весьма полезно и при создании расширений визуализации Qlik Sense.

Это довольно известное детище разработчиков Twitter со своими плюсами и капризами:

Преимущества:

  • Ускоряет разработку и снижает число ошибок верстки (совместимость версий браузеров, подсветка синтаксиса и т.д.),
  • Свободный фреймворк и регулярное обновление,
  • Идеален для создания адаптивных веб-приложений,
  • Имеет библиотеку встроенных шаблонов CSS и HTML, включая JS-расширения,
  • Работа со слоями,
  • Встроенный генератор кода,
  • Набор дополнительных компонентов.

Недостатки:

  • Прописаны дополнительные стили, которые могут не использоваться в нашем расширении визуализации. Решается вопрос просто, но вдумчиво – внимательно просматриваем код, удаляем лишнее.

Bootstrap + Qlik Sense: быстрый старт

Скачиваем Bootstrap CSS с официального сайта. Во избежание конфликтов стилей Qlik Sense и Bootstrap делаем следующее:

BootStrap Qlik Sense разработка

Ограничиваем работу стилей Bootstrap для расширений, а для всего документа применяем стили Qlik Sense.

HTML-код:

01 <!—Стили Bootstrap не работают —>
02
03 <div class=»bootstrap_inside»>
04
05    <!—Стили Bootstrap работают —>
06    <button class=»btn btn-success»>Конпка BootStrap</button>
07
08 </div>
09
10 <!—Стили Bootstrap больше не работают—>

Код CSS:

1 .bootstrap_inside { }
2
3 .bootstrap_inside .btn {
4
5    /* Класс btn работает только внутри класса bootstrap_inside */
6
7 }

Понятно, что вручную менять всю библиотеку Bootstrap – не дело. Bootstrap использует Less для создания стилей, а для написания директив в помощники возьмем пре-обработчик CSS.

Инструкция

Предполагаю, что вам известны основы Node.jsBower и Grunt.

  • Создаем папку с названиемBootstrapExtension
  • В папку устанавливаем Bootstrap с помощью Bower:
1 bower install bootstrap
  • Вы увидите папку компанентов BootStrap bower_compoentsвнутри папки BootstrapExtension.

Если вы просмотрите содержимое \BootstrapExtension\bower_components\bootstrap\less, то увидите все стили .less. Файл bootstrap.less – начальная точка для генерации всего стиля Bootstrap CSS.

  • Создаем другую папку с названием less, получится примерно так:BootStrap Qlik Sense разработка
  • Затем мы должны добавить наш классbootstrap_inside :
1 .bootstrap_inside {}
  • Внутри этого класса мы теперь можем добавить наш основной файл из Bootstrap. После этого все определения Bootstrap CSS будут масштабированы внутри.bootstrap_inside, поэтому вместо того, чтобы создавать less-файл .btn, создаем.bootstrap_inside .btn {}
1 .bootstrap_inside {
2    @import «./../bower_components/less/bootstrap.less»;
3 }

Создание конечного CSS

Теперь используем Grunt для генерации CSS на основе файлов .less:

  • Устанавливаем Grunt
1 npm install grunt —save-dev
  • Устанавливаем Grunt-плагин для компиляции LESS-файлов в CSS (grunt-contrib-less)
1 npm install grunt-contrib-less —save-dev
  • Создаем файл с задачами (Gruntfile.js)
  • Создаем файл в корне папки BootstrapExtension и вставляем в него такой код:
01 ‘use strict’;
02
03 module.exports = function(grunt) {
04
05   grunt.initConfig({
06     less: {
07      bootstrap: {
08       files: {
09         «./output/scoped-bootstrap.css»: «./less/_root.less»
10       }
11      }
12    }
13   });
14
15   grunt.loadNpmTasks(‘grunt-contrib-less’);
16
17   grunt.registerTask(‘default’, [‘less’]);
18
19 };
  • Запускаем командуgrunt в командной строке, и получаем файл scopedbootstrap.css с кодом стиля.
  • Заключительный шаг – делаем ссылку на сгенерированный файл scopebootstrap.css в нашем расширении и используем его в таком виде:
01 paint: function ( $element /*, layout*/ ) {
02
03    $element.empty();
04
05    var $noBootstrap = $( document.createElement( ‘div’ ) );
06    $noBootstrap.html( ‘<button>Should not be bootstrap style</button><br/><br/>’ );
07    $element.append( $noBootstrap );
08
09    var $bootstrapStyle = $( document.createElement( ‘div’ ) );
10    $bootstrapStyle.addClass( ‘bootstrap_inside’ );
11    $bootstrapStyle.html( ‘<button class=»btn btn-success»>Should be bootstrap style</button><br/>’ );
12    $element.append( $bootstrapStyle );
13
14 }

Итог:

BootStrap Qlik Sense разработка

На этом все сегодня.

Расскажите, вы уже пробовали создавать собственные расширения? Какие использовали фреймворки для их разработки?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подпишись на Data-Daily!

Введите email и будьте в курсе!

Подпишись!