Front-end Developer Specialist (OutSystems 11) — Sample exam (PT) — comentado
Se você prefere ler em Inglês, está disponível neste link.
As perguntas abaixo são do exemplo de exame da certificação de Front-end Developer Specialist (OutSystems 11) disponível no site da OutSystems.
O objetivo é comentar cada uma das 8 questões disponíveis no exemplo de exame — o que não exclui a necessidade de verificar o mateiral de suporte disponível no site.
- Considerando o Architecture Canvas e suas camadas, em qual tipo de módulo devem ser criados os padrões (Patterns) da aplicação?
A. Módulo Foundation
B. Módulo End-User
C. Módulo Core Services
D. Módulo Business Services.
Resposta — A
Architecture Canvas é um diagrama de arquitetura recomendado pela OutSystems. Que classifica os módulos em três camadas dependendo de sua função.
- Camada do Módulo do Usuário Final: Não inclui peças reutilizáveis. UI e processos que fornecem funcionalidade diretamente aos usuários finais
- Camada Core Module/Core Services: Peças reutilizáveis. Inclui especificações/lógica de negócios
- Camada do Módulo de Fundação: Peças reutilizáveis. Não inclui especificações/lógica de negócios
Em OutSystems, os padrões referem-se a partes comuns da UI que são altamente reutilizáveis, por isso, a resposta correta é a A.
2. Considere o cenário da imagem a seguir, em que o tema DirectoryTh é o tema de módulo padrão e o ItemBlock é utilizado na Screen chamada Items. Sabendo que nenhum outro Tema é usado no módulo, qual é o estilo correto para o Item Container na Screen Items?
A. A cor do fundo será black e a cor do texto será a cor padrão.
B. A cor do fundo será red e a cor do texto será blue.
C. A cor do fundo será blue e a cor do texto será white.
D. A cor do fundo será black e a cor do texto será white.
Resposta — D
OutSystems permite que você defina CSS nos seguintes locais:
- 1. Folha de estilos do sistema do widget Grid Container
- 2. Folha de estilo de bloco
- 3. Folha de estilo do tema contendo o tema base (se especificado)
- 4. Folha de estilo de tela ou e-mail
- 5. Folha de estilo extra do tema com configurações de grade definidas na propriedade Tema
- 6. Estilos gerados pelo Service Studio ao usar o editor de estilo
- 7. Estilos embutidos definidos em atributos ou propriedades estendidas
De acordo com as regras de aplicação do CSS, quanto maior o número desta lista, maior será a prioridade.
Ignorando os detalhes adicionais, a ordem geral de aplicação CSS é Bloco > Tema > Tela > Editor de Estilo. Olhando para a imagem em questão, a mesma classe está descrita em Bloco/Tema/Tela.
- cor de fundo: vermelho do Bloco -> azul do Tema -> preto da Tela é aplicado, então de acordo com a regra, preto
- cor: azul do Bloco -> branco do Tema é aplicado, então de acordo com a regra, branco
3. Qual será a aparência de um Container com a classe .main-container aplicada a ele no navegador e no Service Studio?
A. O Container terá uma borda quando renderizado no navegador e na pré-visualização do Service Studio.
B. O Container terá uma borda somente na pré-visualização do Service Studio, mas não quando renderizado no navegador.
C. O Container terá uma borda somente quando renderizado no navegador e (não) na pré-visualização do Service Studio.
D. O Container não terá uma borda quando renderizado no navegador nem na pré-visualização do Service Studio.
Resposta — B
Os estilos normalmente são aplicados no navegador e no Service Studio (aberto no editor da UI).
No entanto, quando você prefixa um atributo com “-servicestudio”, a configuração só é aplicada quando visualizada no Service Studio.
Olhando para o CSS da questão, vamos só analisar a opção de borda, pois somente esta está com o atributo “-servicestudio” e sem considerar se há outros themes ou informação adicional, pois não há esta informação na questão.
- Navegador:
estilo de borda: tracejado; largura da borda não especificada;
- Service Studio: mantém todos os estilos definidos para o navegador e altera o que estiver com o atributo “-servicestudio”
estilo de borda: tracejado; e largura de borda: 4px; Uma linha tracejada com largura de 4px é exibida
*O (não) na resposta C foi adicionado para que a opção faça sentido conforme a amostra em inglês.
**E atenção, na amostra de exame em Inglês diz que a resposta correta seria a A e na amostra nas outras línguas que a resposta seria a B; mas com a imagem que está a ser apresentada, não temos como saber o restante do código CSS para afirmar se há borda no navegador ou não, pois não temos o restante do código, e a base para a responder as questões deveria ser o que temos disponível — esta dualidade de respostas já foi questionada ao canal de training da OutSystems.
4. Considerando as Style Sheets na imagem e sabendo que o Block é utilizado dentro da Screen, qual Style Sheet é carregada por último quando a Screen está carregando?
A. O Style Sheet do Block.
B. O Style Sheet da Screen.
C. Os Style Sheets são carregados ao mesmo tempo.
D. O Style Sheet do Theme.
Resposta — B
Ordem de carregamento das folhas de estilo — conforme indicado acima — para bloco, tela e tema.
Desta forma, ele é carregado na ordem Bloco > Tema > Tela.
5. Quais das opções a seguir NÃO é uma boa prática para criar padrões (Patterns) personalizados?
A. Um padrão personalizado deve evitar lógica de negócio.
B. Um padrão personalizado deve ter uma pré-visualização e uma amostra de uso.
C. Um padrão personalizado deve definir a estrutura e o estilo requerido.
D. Um padrão personalizado deve promover e contribuir com a isolação de arquitetura.
Resposta — C
Sugiro esta documentação da OutSystems: https://success.outsystems.com/documentation/best_practices/development/front_end_architecture_best_practices/
Quais são as boas práticas:
- Não adicione estilos embutidos aos elementos.
- Não adicione classes para os valores desejados, como nome da cor (.Black), tamanho (.Width20px), estilo (.Bold), tamanho (.fontSize15), etc.
- Não coloque a lógica de negócios dentro desses padrões.
Leia sempre muito bem as questões do exame, o que a pergunta está a pedir a opção errada ou “o que NÃO é uma prática recomendada”, então escolha a opção errada.
Opção C: “Um padrão personalizado deve definir a estrutura e o estilo necessário.” Em outras palavras, o padrão deve definir a estrutura e o estilo desejado. Embora pareça sutil no trecho acima, as partes comuns da UI devem ter o mínimo de estilos possível. Afinal, por se tratar de um componente comum, presume-se que o destino do posicionamento pode ter vários estilos, e existe a preocupação de que se tiver um estilo próprio, não corresponderá ao destino do posicionamento.
Portanto, a última parte, “O estilo necessário”, está incorreta, portanto a opção C está correta (opção errada).
6. Uma Screen tem um OnReady Event e sua OnReady Event Handler Action tem um elemento JavaScript que contém o código mostrado na imagem. Neste contexto, qual das seguintes opções é falsa?
A. O valor resultante ao acionar uma Client Action a partir do código JavaScript é um objeto JavaScript com os parâmetros de saída da Action, quando aplicável.
B. A Toggle Action executada no código JavaScript será acionada após 10 segundos.
C. Se o usuário navega para uma Screen diferente, a aplicação lança um erro se o Timeout configurado não for destruído antes da transição.
D. A Toggle Action executada no código JavaScript pode ser uma Screen Action ou uma Client Action definida no escopo global do módulo.
Resposta — B
A questão refere que existe um elemento JavaScript no manipulador de eventos OnReady. Seus elementos incluem
setTimeout(function(){$actions.Toggle();}, 10);
setTimeout é uma função não relacionada ao OutSystems que executa a função no primeiro argumento após o número de milissegundos especificado no segundo argumento.
Se quiser avaliar com precisão todas as opções, você precisará de conhecimento de OutSystems, mas a opção B “A ação de alternância executada no código JavaScript será chamada após 10 segundos”está errada — 10 milissegundos em vez de após 10 segundos. Desta forma, B está correto porque a opção solicitada é falsa.
Vamos dar uma olhada em outras opções,
A: o valor de retorno quando chamado com o nome $actions.ClientAction do JavaScript é Um objeto JavaScript simples que contém os parâmetros de saída para cada ação do cliente. (consulte a documentação aqui)
Então está correto.
C: Esta opção refere o que acontece se a tela transitar antes da execução da função (se o Timeout configurado não for destruído no onDestroy). A resposta é que se Toggle for uma Action em Client Actions, funcionará normalmente, mas se for Screen Action, ocorrerá um erro. Mas, não há informações suficientes — então pode ser usado de qualquer maneira. No entanto, a opção B está definitivamente errada, então alternar provavelmente é Ação de Tela e a opção C está correta.
D: É possível a Toggle Action executada no código JavaScript ser uma Screen Action ou uma Client Action definida no escopo global do módulo. Esta opção é verdadeira e em caso de dúvidas sobre JavaScript e OutSystems, podes ver mais sobre a documentação e javascript em OutSystems aqui
7. Considerando a possibilidade de acionar Actions assíncronas em código JavaScript definido em uma aplicação OutSystems, quais das opções a seguir é verdadeira?
A. Uma Client Action somente é considerada assíncrona quando as funções $resolve() ou $reject() são usadas em um elemento JavaScript dentro da Action.
B. Se for acionada uma Client Action assíncrona, o seu valor resultante é um objeto JavaScript simples.
C. A função $reject() disparará uma Exception, se usada, que será tratada pelo primeiro tratador de Exception disponível.
D. A função $resolve() sinaliza uma execução bem-sucedida ou mal-sucedida de uma Client Action assíncrona.
Resposta — C
As Ações do Cliente serão executadas de forma assíncrona quando determinadas condições forem atendidas.
Esta pergunta é sobre a definição de código JavaScript assíncrono e você pode consultar mais sobre este assunto aqui.
A: Leia sempre bem as opções, neste caso o “somente” é um detalhe importante.
Se um elemento JavaScript usar as funções predefinidas $ resolve() ou $ reject(), a ação do cliente à qual esse elemento pertence será considerada assíncrona. Além disso, uma ação do cliente também é considerada assíncrona se envolver uma chamada do servidor, como a execução de uma ação do servidor ou a atualização de um agregado.
Portanto, a opção A, que afirma que apenas a primeira é o caso, está incorreta.
B: Opção que está incorreto porque o valor de retorno de uma ação assíncrona do cliente é uma promessa, não um simples objeto JavaScript.
Quando uma ação assíncrona do cliente é chamada, seu valor de retorno é uma promessa em vez de um objeto JavaScript como no caso síncrono.
D: $resolve indica processamento assíncrono bem-sucedido.
Para sinalizar a conclusão da execução de um cliente assíncrono chamado, use a função predefinida $resolve().
8. Considere um Placeholder com a classe ph definida. Como OutSystems trata tal marcador de posição quando utilizado em uma Screen?
A. Oculta o marcador de posição na Screen, se não houver conteúdo dentro dele.
B. Sempre assegura que o espaço reservado para o Placeholder apareça na Screen, mesmo se o marcador de posição não tiver conteúdo dentro dele.
C. Remove o Placeholder da estrutura da Screen, se não houver conteúdo dentro dele.
D. Assegura que nenhum conteúdo adicional possa ser adicionado ao Placeholder.
Resposta — A
Primeiro, o Placeholder é algo colocado em Block (elemento que define as partes da UI). Este componente UI (block) é utilizado colocando-o na Tela ou outro Bloco, e nesse momento o desenvolvedor pode colocar qualquer widget no Placeholder.
A classe .ph tem a função de ocultar elementos vazios em tempo de execução (e tem o comportamento de display: none).
Podemos adicionar a classe ph a qualquer elemento que não queremos exibir se não incluir nenhum conteúdo
Portanto, a opção A está correta.
Adicionalmente: CSS display:none e visibility:hidden qual a diferença entre eles?
display:none e visibility:hidden são duas declarações de estilo que você pode usar para ocultar elementos na tela com CSS.
Display none — Com “none” para esta propriedade, a exibição do elemento é desativada. Isso significa que o elemento — assim como seus filhos — não serão exibidos. O documento é renderizado sem o elemento como se ele não existisse.
Visibility:hidden - esta propriedade não afeta o layout do elemento. O elemento ao qual ela é aplicada torna-se “invisível”. O espaço exigido pelo modelo de caixa do elemento permanece, mas o próprio elemento fica oculto. É renderizado com o espaço reservado.
O material para o exame de Front-end Developer Specialist (OutSystems 11) está disponível na página da OutSystems.