Embutindo CTools com RequireJS

CTools Dashboard

<HTML>

js

js

js

CSS

CSS

CSS

Tradicional

browser (global)

http://localhost:8080/pentaho/.../meudashboard

  • Server gera HTML
  • HTML contém includes
  • Includes são requisitados
  • Variáveis do dashboard ficam disponíveis em todo o browser (escôpo global);

RequireJS

browser (global)

JSON : { ... }

  • URL retorna Objeto RequireJS com todas as dependências do dashboard (js, css, html)
  • Aplicação renderiza Objeto no local necessário;
  • Aplicação manipula objeto (dash);
  • Variáveis do dash ficam isoladas no escôpo do objeto

CTools Dashboard

http://localhost:8080/pentaho/.../meudashboard

Vantagens

  • Somente dependências (js, css) utilizadas no dashboard;
  • Simples de embutir;
  • Possibilita reuso - dashboard dentro de dashboard;
  • Nenhum objeto vaza para escopo global

Mudanças

  • Objeto Dashboards vira this.dashboard - ou dashboard em alguns casos;
  • Arquivos javascript externos - estrutura RequireJS;
  • Dashboards.numberFormat vira Utils.numberFormat;
  • Parâmetros e componentes não são mais globais
  • ...
script
  src="http://localhost:8080/pentaho/plugin/pentaho-cdf/api/cdf-embed.js"
  type="text/javascript"›‹/script

1. Incluir script de configuração

2. Chamar endpoint e renderizar

HANDS ON

  • Plugin - estrutura + vantagens;
  • App javascript (AngularJS 1.x);
  • Integração de Dashboard via RequireJS;
  • Adicionando novo dashboard;
  • Utilizando CTools para integrar artefatos Pentaho;
  • Módulos js externos;
  • Manipulando HTML do CTools (AngularJS compile);

Copy of Embutindo CTools com RequireJS

By oncase

Copy of Embutindo CTools com RequireJS

  • 88
Loading comments...

More from oncase