Os temas Bootstrap e o Gentelella

Por que temas?

Os temas Bootstrap e o Gentelella

Temas Pagos

Os temas Bootstrap e o Gentelella

Temas Free

• Bootstrap free

  • AdminLTE

  • Gentelella

  • wrappixel

• Materal Desgin

  • ​​creative-tim

O Bootstrap Gentelella

Principais Recursos:

• Sidebar

  • Menu lateral multi-level

  • Header

• Dashboards

• Cards e Widgets / Tabs / Modal / Icons & Glyphicons / Notification

• Muitos outros recursos...

O Bootstrap Gentelella

Adaptação do CDE

Adaptação do CDE

App Builder

Criação do plugin para encapsular o Gentelella

• Plugin GAmenu - Gentelella App menu (system/gamenu)

• Elements

  • Dashboards - *.cds, *.cdfde, *.wcdf (gamenu/dashboards)

  • Endpoints - *.ktr (gamenu/endpoints)

• Resources (gamenu/resources)

  • style cpk.html -> GA.html

  • Wapper dos dashboards

• ​Adaptação do Styles no Settings do Dashboards no CDE

Adaptação do CDE

GAmenu no App Builder - Elements

Adaptação do CDE

GAmenu - Resources

• Resources (gamenu/resources)

  • style cpk.html -> GA.html

  • Wapper dos dashboards

Adaptação do CDE

GAmenu no App Builder - ​Adaptação do Styles no Settings do Dashboards no CDE

Menus e Links

okey, I don’t even know where to start with this menu!

Menus e Links

• Construção de menu e submenu
  • Elementos html e css
  • Links para arquivos do PUC
• Configurando autorização por menu e submenu
  • Amarrando com as Roles do PUC

Menus e Links

• Elementos html e css
• Links para arquivos do PUC

Construção de menu e submenu

Menus e Links

• Amarrando com as Roles do PUC (auth.json)

Configurando autorização por menu e submenu

Arquitetura frontend para BI

Arquitetura frontend para BI

O projeto frontend de BI dentro do plugin

• Dashboards de negócio (gamenu/resources/app)

• Componentização (gamenu/resources/web-components)

​Domínio do Dashboard CDE no frontend

• Movemos todo HTML, JS e CSS para o projeto frontend
• O que muda no CDE?

Arquitetura frontend para BI

Arquitetura do GAmenu

Dashboards de negócio (gamenu/resources/app)

• Cada dash tem um pasta referência a ele com os arquivos referente ao seu negócio

Arquitetura frontend para BI

Arquitetura do GAmenu

Componentização

(gamenu/resources/web-components)

• Contém os componentes web reutilizáveis pelos dashboards

  • Autorização (auth)

  • Estilização especializada (bi-alfa - SASS)

  • Funções genéricas (custom-dashboard)

  • Bibliotecas externas (jQuery UI, Highchart e outras...)

• Todos os componentes são gerenciado como dependência via Bower

Arquitetura frontend para BI

Domínio do Dashboard no frontend

• Movemos todo HTML, JS e CSS para o projeto frontend

  • load -> mydash.js

  • style -> mydash.css

  • header.html

  • body.html

  • e mais outros elementos *.html necessários

Arquitetura frontend para BI

Domínio do Dashboard no frontend

• O que muda no CDE?

  • Mapeamento dos novos elementos

  • Removendo código (html / css / js) do CDE

  • Chamadas a funções de Layout Component