Desenvolvedor OutSystems, como anda o seu CSS?

Alterando o comportamento de widgets sem codificação

 

Fala aí pessoal!

Alguns devem pensar: “Lá vem o cara de novo falando de CSS!”

Mas para mim é simples. Quando se trabalha com qualquer desenvolvimento Web, algumas coisas devem ser raiz, estar no sangue, sabe? HTML, CSS, JavaScript e C#, são algumas delas.

Não estou dizendo que você deve ser expert, mas ter boas noções dessas linguagens de programação ajuda muito a desenvolver sua carreira, pois em algum momento este conhecimento pode ser o seu diferencial.

Hoje, existe conteúdo infindável na web sobre qualquer assunto. Descobrir como algo funciona não é mais uma questão experimental − apesar de que sempre teremos de testar e ajustar − mas para isso há ótimos emuladores para você testar antes de levar o código para sua aplicação (playcode, codePen, jsfiddle entre outros).

Uma dica: Esqueça o conceito de que CSS é apenas a camada de layout de sua aplicação e que apenas possui definições de cores, fontes, detecção de tamanho e situações adaptativas de formulários.

E se eu te disser que podemos utilizar um componente OutSystems e modelá-lo para desenvolver o que quisermos sem mexer em programação (criar clone), mantendo suas caraterísticas originais?

Tudo isso é possível apenas alterando o estilo e assim redefinindo sua função!

Podemos dizer que o estilo também é funcional?

Missão: Utilizar o componente Accordion (UI Pattern), alterando sua funcionalidade básica que permite que os usuários expandam e ocultem o conteúdo quando clicado, para função abrir opção, ou abrir ou expandir em painel flutuante sobre os demais Container/Div.

Abaixo recriaremos tudo passo a passo. Pode ser redundante para quem já tem alguma experiência com OutSystems, mas acredito ser a melhor maneira de acompanhar o processo.

Entenda o que você precisa fazer:

1) Pré-Requisitos:

  1. Ter instalado a plataforma de desenvolvimento OutSystems;
  2. Possuir alguma experiência com OutSystems ou ter feito o BootCamp (treinamento OutSystems);

2) Na plataforma, clique em <New Application>;

3) Crie uma aplicação do tipo Traditional Web;

4) Digite o nome da aplicação e descrição, defina a cor primária e informe um ícone, se desejar. Depois clique em <CREATE APP>;

5) Depois clique em <CREATE MODULE>;

6) Clique na aba Interface;

7) Clique com o botão direito do mouse sobre MainFlow;

8) Clique na opção Add Web Screen;

9) Na opção de New Screen escolha a opção Empty;

10) Clique em <CREATE SCREEN>

11) Dê dois cliques com o botão esquerdo do mouse sobre WebScreen1

12) Clique em Widget Tree;

13) Á esquerda do formulário, arraste Container para a área MainContent;

14) Ainda à esquerda do formulário, digite “acc” e tecle <Enter>;

15) Arraste o componente Accordion para a área Main Content;

16) Como utilizaremos apenas um AccordionItem podemos excluir dois, já que por default são criados três AccordionItem. Selecione os dois últimos cliques com o botão direito do mouse e clique em <Delete>;

17) Após excluir estas duas opções teremos apenas um AccordionItem;

18) Agora arraste um componente Text para a área Title do AccordionItem;

19) Clique em Text localizado a área Title do AccordionItem e digite “Título” na propriedade Text;

20) Arraste um Widget Container para a área Content do AccordionItem. Em seguida, arraste um componente Text para dentro do Container;

21) Clique no Widget Text que você arrastou para dentro de Container e informe:

Text=“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Chegamos ao final da parte padrão de qualquer utilização com o Widget Accordion. Publique a sua aplicação e veja como ela se comporta.

Na figura acima, temos a aplicação CSSFlexible rodando no browse Google Chrome. Clique na área de título para o container expandir.

Então como disse antes, até agora nada demais.

O widget Accordion é padrão, utiliza o CSS padrão do BaseTheme da OutSystemsUiWeb, se comportando de forma padrão quanto ao estilo e à funcionalidade.

Mas agora vem o desafio!

História de Usuário: Utilizando o widget Accordion (Pattern OutSystemsUIWeb), quero que o componente Accordion seja aplicado como um Icon ou Label e que, ao ser clicado, abra um painel flutuante sobre os demais itens do formulário, mas que as propriedades originais de layout ou funcionais deste widget não sejam alteradas.

E seu eu te contar que dá para fazer isso apenas alterando o CSS?

Dica 1: Utilize variáveis de CSS e utilize somente as variáveis em suas classes, organize seu CSS.

Implementação da história de usuário:

1) Clique em MainFlow. A seguir, com o botão direito do mouse clique em Add Web Block;

Atenção: Eu optei por criar o WebBlock nesta pasta, mas você pode criar em outra pasta ou mesmo criar a sua pasta própria para WebBlock.

 

2) Agora, com o WebBlock criado dê dois cliques com o botão esquerdo do mouse sobre ele;

3) Agora arraste três Widgets Container para dentro do WebBlock, um dentro do outro;

4) Clique no segundo Container e digite “text-orange” na propriedade Style Classes;

5) Clique no terceiro Container e digite “over” na propriedade Style Classes;

Observação: Aqui começa o segredo para isolar as definições de classe, pois ao declarar classes abaixo desta hierarquia, estas definições apenas valem a partir deste identificador de classe.

Exemplo: . over .accordion { background-color: transparent; }

 

Explicando: Na definição de classe accordion para background transparente só vale para widgets criados abaixo de um elemento que utilizar a classe over (em um container/div, por exemplo).

 

6) Arraste e solte um widget Accordion para dentro do Container over, novamente exclua dois AccordionItem;

7) Arraste e solte um widget Container dentro da área Title do AccordionItem e defina a propriedade Style Classes como “text-orange”;

8) Depois clique na aba Styles defina o Width e Height:

9) Arraste e solte um widget Icon dentro da Container na área Title do AccordionItem;

10) Clique no Icon e informe;

11) Arraste e solte um widget Container dentro da área Content do AccordionItem, depois clique na aba Styles e informe Width e Height;

12) Agora arraste solte um widget Text para dentro do container

Pode ser o nosso famoso texto de testes ”lorem ipsum dolor…”

Tá, mas... Até agora o nosso componente Accordion está com o
comportamento e layout padrão?

É isso mesmo! Lembrando que a nossa história de usuário diz para usarmos o widget Accordion padrão, mas que:

 

  • Seu comportamento seja diferente do padrão;
  • Qualquer alteração seja isolada do padrão, ou seja, que não afete o layout anterior;
  • Mas que tenha um funcionamento completamente do padrão.

Até agora é um comportamento padrão, e minha proposta é fazermos isso apenas com CSS.

1) Clique no WebBlock1 que criamos;

2) Clique no CSS deste WebBlock1

3) Cole a folha de estilos abaixo

. over .accordion { background-color: transparent; }
.over .accordion-item {
   border: 0;
}
.over .accordion-item:first-child {
   border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}
.over .accordion-item:last-child {
   border-bottom-width: var(--border-size-s);
   border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}
.over .accordion-item.is--open {
   border-top: 0;
}
.over .accordion-item .accordion-item-header {
   -webkit-box-align: start;
      -ms-flex-align: start;
         align-items: flex-start;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: var(--font-size-s);
   padding: 0px !important;
   padding-left: 3px;
   padding-right: 3px;
}
.over .accordion-item.is--open .accordion-item-header {
   font-weight: var(--font-semi-bold);
}
.over .accordion-item .accordion-item-content.is--animating.is--expanded {
   overflow: hidden;
   z-index: 9;
   overflow: float;
   position: absolute;
   background-color: var(--color-neutral-2) !important;
   border: var(--border-size-m) solid var(--color-black) !important;    
   padding: 5px;
}
.over .accordion-item .accordion-item-content.is--expanded {
   overflow: visible;
   z-index: 9;    
   overflow: float;
   position: absolute;
   background-color: var(--color-neutral-2) !important;
   border: var(--border-size-m) solid var(--color-black) !important;
   padding: 5px;
}
.over .accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
   height: 0;
   padding: var(--space-none) var(--space-m);
   visibility: hidden;
}
.over .accordion-item .accordion-item-content.is--expanded {
  height: auto;
  padding: var(--space-none) var(--space-m) var(--space-m) !important;
  visibility: visible;
  background-color: var(--color-neutral-2) !important;
  border: var(--border-size-m) solid var(--color-black) !important;   
  padding: 5px;
}
.over .accordion-item .accordion-item-content.is--animating {
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
}
.over .accordion-item-icon {
   color: transparent;
   width: 10px;
   height: 2px;
}
.over .accordion-item-icon .fa {
   color: transparent;    
   width: 10px;
   height: 2px;
}
.over .accordion-item.is--open .accordion-item-icon {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
}

4) Agora vá até sua WebScreen1 e dê dois Cliques com o mouse;

5) Clique em Widget Tree;

6) Clique na área Title do formulário e sobre ela clique botão direito no mouse;

7) Clique em Insert WebBlock e depois em WebBlock;

8) Localize o WebBlock1, contendo a redefinição de Accordion que criamos e clique nele;

9) Clique em Deploy e depois em Open in Browser;

Conclusão: Rodando a aplicação você verá o Widget Accordion se comportando de duas formas distintas, como se fossem mesmos dois widgets. A solução não alterou em nada o comportamento padrão utilizando apenas as regras de hierarquia CSS.

Pessoal, além da longa “receita de bolo” compartilho com vocês o projeto CSSFlexiblle.OML

A funcionalidade criada é abstrata, mas pode conter uma seleção, configuração, filtros para listagens e relatórios ou até mesmo um cadastro rápido.

Este artigo não tem a pretensão de te ensinar CSS, mas dar uma luz no que pode ser feito antes de você desperdiçar esforço e horas de desenvolvimento, refazendo o que na verdade não precisa.

Assim como a inserção de código nativo (javascript ou C#), podem dar um gás a nível de performance em sua aplicação, um bom CSS é capaz de dar um sentido funcional completamente diferente.

Espero que estas tenham sido dicas úteis!

Artigo de Marco Peres – Desenvolverdor OutSystems na .add

Receba conteúdo Sobre OutSystems e Low-code

Quero receber conteúdo sobre OutSystems

Deixe uma resposta