Explorando fundamentos de componentes

Qual é a função da interface do usuário (IU) em um app?

A IU abrange o que você verá e poderá fazer no app. A IU não só define os elementos que podem ser visualizados, mas também define algumas das interações básicas no app. Os ambientes de desenvolvimento low-code são normalmente equipados com um conjunto de ferramentas para criar uma IU.

No SAP Build Apps, os componentes são a chave poderosa para criar aplicativos com facilidade e rapidez que atendem às mais diversas necessidades das empresas e enriquecem os processos de trabalho. Uma descrição simples dos componentes é que eles são partes de código pré-fabricadas que podem ser usadas como módulos com funções predefinidas para projetar a IU e permitir que a ponte use lógica.

Os componentes podem ocorrer em qualquer tipo de elemento, como botões, campos de entrada, áreas de texto ou imagens. Não há limites fixos de quão grandes ou pequenos componentes podem ser. Os componentes mais pequenos podem ser como um ícone individual ou uma linha divisória. Os maiores componentes podem ser um componente de mapa para geolocalização ou um player de vídeo. Ao pré-fabricá-los, promovem uma experiência intuitiva no campo visual do desenvolvimento e, com as funções fornecidas, permitem que sejam abrangidas muitas possibilidades de desenvolvimento. No entanto, se forem necessários requisitos adicionais específicos, os componentes também podem ser adaptados e criados com base na aparência e funcionalidade.

Os componentes no SAP Build Apps são divididos em várias seções no lado esquerdo. Na parte superior, você pode encontrar os componentes ESSENCIAIS que permitem adicionar os blocos de construção mais básicos de um aplicativo. Os componentes de título e texto estão sempre presentes e combinados entre si em diferentes estilos para preparar bem as informações. O componente do cartão combina texto e título e é destacado pelo formato do componente.

Principalmente para o estilo, com componentes de imagem e ícone, um aplicativo pode ser projetado para ser fácil de usar ou mais informações direcionadas. Os componentes de botão são predestinados a estimular interações e iniciar processos lógicos. Juntamente com componentes de formulário, o app de exemplo exibido no exercício seguinte também descreve que a maioria dos componentes ocorrem frequentemente e, em combinação entre si, muitas vezes formam a base de uma interface de usuário de app intuitiva e dinâmica.

Os componentes do formulário podem ser usados para inserir formas úteis no app. Estes são particularmente vantajosos para explorar informações do usuário e permitir interações. Ele permite que o usuário acione ações simples e mais complexas. O componente utilizado com mais frequência é o componente de botão que é predestinado a acionar uma ação selecionando a mesma, mesmo que outros componentes estejam conectados à lógica e também possam acionar ações selecionando a mesma.

Os campos de entrada e senha são essenciais para que os usuários insiram informações que podem continuar sendo processadas, por exemplo, para armazenar e exibir ou autenticar um usuário.

Além disso, as caixas de seleção, os campos suspensos e os controles deslizantes fornecem uma forma rápida e intuitiva de os usuários selecionarem valores predefinidos nesses componentes. Em seguida, essas informações também podem continuar sendo processadas pelo app.

A criação de listas usando componentes de lista é uma abordagem importante e usada com frequência para o SAP Build Apps. Para exibir determinadas informações usando listas, os componentes da lista geralmente são conectados a um banco de dados (fonte) onde os dados armazenados estão localizados. As informações temporárias do app combinadas com a entrada do usuário ou novas informações que resultam de funções e formulários podem ser listadas. Outras opções são, no entanto, a conexão por meio de interfaces com dados/informações da Internet ou de outras soluções da SAP ou de terceiros. O tipo de exibição com os componentes é diversificado; há aqueles, usando listas normais às quais mais de uma informação está conectada ou a quais imagens e ícones também serão exibidos. Com listas, em particular, é importante usar o componente de propriedades, que é explicado mais detalhadamente na próxima lição, para uma exibição dinâmica ou direcionada.

Por padrão, o SAP Build Apps oferece três componentes de layout que permitem criar outras opções relacionadas ao layout da IU e aos elementos de estrutura. Você só pode agrupar componentes ou efetuar ações mais complexas, como tornar componentes em grupos invisíveis ou visíveis após um acionador como uma seção ao mesmo tempo. Dessa forma, os componentes de layout trazem vantagens adicionais para o design de apps, como:

• Mais clareza, especialmente com a árvore de layout.
• Exibir seções de conteúdo lado a lado.
• O conteúdo e os componentes podem ser facilmente proporcionados e agrupados.
• Insira vários componentes de uma só vez como grupo.
• Exibição intuitiva possível rolando na área definida, etc.

Assista ao vídeo para obter uma visão geral da árvore de layout e aprender a usar a oferta de árvore de layout do SAP Build Apps.

Não só os componentes de layout são úteis para criar uma estrutura clara, mas - especialmente em combinação com estes - também a visão de árvore, que pode ser encontrada na parte inferior direita e fornece uma síntese clara.

Na visualização de árvore, os contêineres usados são listados em sua ordem para exibir o layout da página. Deste modo, pode ser vantajoso selecionar componentes diretamente na visão de árvore, uma vez que os componentes exibem nomes que podem ser atribuídos a componentes também são exibidos aí.

Outro método útil é que você pode mover e reestruturar componentes usando arrastar e soltar com o suporte de uma linha auxiliar que aparece.

Se for usado um componente de layout, isso também é exibido na visão de árvore. No entanto, ainda existe a vantagem de você poder utilizar outros componentes que estão subordinados ao componente de layout e que podem ser expandidos e comprimidos na visão.