Saltar para o conteúdo principal
Versão: 20

Botão

Um botão é um objeto ativo ao qual pode ser atribuída uma ação (por exemplo, uma tarefa de banco de dados ou uma função de interface) a executar quando um usuário clica nele.

Os botões podem desempenhar várias funções, dependendo de seu estilo e da ação atribuída a eles. Por exemplo, os botões podem levar o usuário a preencher um questionário ou formulário, ou a fazer escolhas. Dependendo de suas configurações, um botão pode ser projetado para ser clicado apenas uma vez e executar um comando, enquanto outros podem exigir que o usuário clique mais de uma vez para obter o resultado desejado.

Manipulação de botões​

As ações atribuídas aos botões podem se originar de ações padrão predefinidas ou de métodos objeto personalizados. Exemplos de ações típicas incluem permitir que o usuário aceite, cancele ou exclua registros, copie ou cole dados, passe de uma página para outra em um formulário de várias páginas, abra, exclua ou adicione registros em um subformulário, manipule atributos de fonte em áreas de texto etc.

Os botões com ações padrão são escurecidos quando apropriado durante a execução do formulário. Por exemplo, se o primeiro registro de uma tabela for exibido, um botão com a ação padrão firstRecordaparecerá esmaecido.

Se você quiser que um botão execute uma ação que não esteja disponível como ação padrão, deixe o campo de ação padrão vazio e escreva um método objeto para especificar a ação do botão. Para obter mais informações sobre métodos de objeto e como criá-los e associá-los, consulte Usando métodos objeto. Normalmente, você ativaria o evento On Clicked e o método seria executado somente quando o botão fosse clicado. Pode associar um método a qualquer botão.

A variável associada a um botão é automaticamente definida como 0 quando o formulário é executado pela primeira vez no modo Desenho ou Aplicação. Quando o usuário clica em um botão, sua variável é definida como 1.

A um botão pode ser atribuída uma ação padrão e um método. Nesse caso, se o botão não for desativado pela ação padrão, o método será executado antes da ação padrão.

Estilos de botões​

Os estilos dos botões controlam a aparência geral de um botão, bem como as suas propriedades disponíveis. É possível aplicar diferentes estilos pré-definidos a botões ou associar-lhes menus pop-up. Um grande número de variações podem ser obtidas combinando essas propriedades/comportamentos.

Com excepção do propriedades disponíveis, muitos objectos de botão são estruturalmente idênticos. A diferença é no processamento das variáveis associadas.

4D fornece botões nos seguintes estilos pré-definidos:

Clássico​

O estilo de botão Clássico é um botão padrão do sistema (ou seja, um retângulo com um rótulo descritivo) que executa o código quando o usuário clica nele.

Por padrão, o estilo Regular tem um fundo cinza-claro com um rótulo no centro. Quando o cursor passa o mouse sobre o estilo de botão Clássico, a borda e a cor de fundo mudam para demonstrar que o foco está no botão. Além de iniciar a execução do código, o estilo de botão Clássico imita um botão mecânico, mudando rapidamente a cor do plano de fundo ao ser clicado.

Exemplo JSON:​


    "myButton": {
  "type": "button", //define the type of object
  "style":"regular", //define the style of the button
  "defaultButton":"true" //define button as the default choice
  "text": "OK", //text to appear on the button
  "action": "Cancel", //action to be be performed 
  "left": 60,  //left position on the form  
  "top": 160, //top position on the form 
    "width": 100,  //width of the button
  "height": 20 //height of the button
  }

Apenas os estilos Regular e Flat oferecem a propriedade Botão Padrão.

Plano​

O estilo de botão Plano é um botão padrão do sistema (ou seja, um retângulo com um rótulo descritivo) que executa o código quando o usuário clica nele.

Por padrão, o estilo Plano tem um fundo branco com um rótulo no centro, cantos arredondados e uma aparência minimalista. A natureza gráfica do estilo Plano é especialmente útil para os formulários que vão ser impressos.

Exemplo JSON:​


    "myButton": {
                "type": "button", 
                "style":"flat", 
                "defaultButton":"true" 
                "text": "OK", 
                "action": "Cancel", 
                "left": 60,   
                "top": 160,   
                "width": 100, 
                "height": 20 
                }

Apenas os estilos Regular e Plano oferecem a propriedade Botão padrão.

Barra de ferramentas​

O estilo de botão Barra de Ferramentas está pensado principalmente para sua integração em uma barra de ferramentas. Inclui a opção de adicionar um menu pop-up (indicado por um triângulo invertido), sendo geralmente usado para exibir opções adicionais para o usuário selecionar.

Por padrão, o estilo da barra de ferramentas tem um fundo transparente com um rótulo no centro. A aparência do botão pode ser diferente quando o cursor passar por cima dele, dependendo do SO:

  • Windows - o botão é destacado quando usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e no centro do botão.

  • macOS - o destaque do botão nunca aparece. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e na parte inferior do botão.

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"toolbar", 
                "text": "OK",  
                "popupPlacement":"separated" 
                "action": "Cancel",  
                "left": 60,    
                "top": 160,    
                "width": 100,   
                "height": 20  
                }

Bevel​

O estilo de botão Bevel combina a aparência do estilo Regular(ou seja,, um retângulo com um rótulo descritivo) com a opção de propriedade de menu pop-up do estilo Barra de ferramentas.

Por padrão, o estilo Bevel tem um fundo cinza-claro com um rótulo no centro. A aparência do botão pode ser diferente quando o cursor passar por cima dele, dependendo do SO:

  • Windows - o botão é realçado. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e no centro do botão.

  • macOS - o destaque do botão nunca aparece. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e na parte inferior do botão.

Exemplo JSON:​

    "myButton": {
                "type": "button",
                "style":"bevel", 
                "text": "OK",  
                "popupPlacement":"linked" 
                "action": "Cancel", 
                "left": 60,  
                "top": 160,  
                "width": 100, 
                "height": 20 
                }

Bevel arredondado​

O estilo de botão Bevel arredondado é quase idêntico ao estilo Bevel, exceto que, dependendo do sistema operativo, as esquinas do botão podem ser arredondadas. Assim como o estilo Bevel, o estilo Rounded Bevel combina a aparência do estilo Regular com a opção de propriedade do menu pop-up do estilo Barra de ferramentas.

Por padrão, o estilo Bevel arredondado tem um fundo cinza-claro com um rótulo no centro. A aparência do botão pode ser diferente quando o cursor passar por cima dele, dependendo do SO:

  • Windows - o botão é idêntico ao estilo Bevel. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e no centro do botão.

  • macOS - os cantos do botão são arredondados. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e na parte inferior do botão.

Exemplo JSON:​

    "myButton": {
                "type": "button",
                "style":"roundedBevel", 
                "text": "OK", 
                "popupPlacement":"none" /
                "action": "Cancel", 
                "left": 60,   
                "top": 160, 
                "width": 100, 
                "height": 20 
                }

OS X Gradient​

The OS X Gradient button style is nearly identical to the Bevel style except, depending on the OS, it may have a two-toned appearance. Assim como o estilo Bevel, o estilo OS X Gradient combina a aparência do estilo Regular com a opção de propriedade do menu pop-up do estilo Barra de ferramentas.

Por padrão, o estilo OS X Gradient tem um fundo cinza-claro com um rótulo no centro. A aparência do botão pode ser diferente quando o cursor passar por cima dele, dependendo do SO:

  • Windows - o botão é idêntico ao estilo Bevel. When it uses the “With Pop-up Menu” property, a triangle is displayed to the right and in the center of the button.

  • macOS - o botão é exibido como um botão de sistema de dois tons. Quando ele usa a propriedade "Com menu pop-up", um triângulo é exibido à direita e na parte inferior do botão.

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"gradientBevel",
                "text": "OK", 
                "popupPlacement":"linked"
                "action": "Cancel",  
                "left": 60,  
                "top": 160, 
                "width": 100, 
                "height": 20 
                }

OS X Texturizado​

O estilo do botão OS X Textured é quase igual ao estilo Bevel, mas pode possuir uma aparência diferente, dependendo do sistema operativo. Assim como o estilo Bevel, o estilo OS X Textured combina a aparência do estilo Regular com a opção de propriedade do menu pop-up do estilo Barra de ferramentas.

Como padrão, o estilo OS X Textured aparece como:

  • Windows - um botão padrão do sistema com um fundo cinza-claro e um rótulo no centro. Tem a particularidade de ser transparente no Vista.

  • macOS - - um botão sistema padrão que mostra uma mudança de cor cinza claro a cinza escuro. Sua altura está predefinida: não é possível ampliar ou reduzir.

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"texturedBevel", 
                "text": "OK", 
                "popupPlacement":"separated" 
                "action": "Cancel", 
                "left": 60,   
                "top": 160,  
                "width": 100, 
                "height": 20 
                }

Office XP​

O estilo de botão Office XP combina a aparência do estilo Regular com a transparência do estilo Barra de ferramentas e a opção de propriedade de menu pop-up.

As cores (ressaltado e fundo) de um botão com o estilo Office XP são baseadas nos sistemas de cores. A aparência do botão pode ser diferente quando o cursor passar por cima dele, dependendo do SO:

  • Windows - seu fundo só aparece quando o mouse passa por cima.

  • macOS - seu fundo é sempre mostrado.

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"office",
                "text": "OK",
                "popupPlacement":"none" 
                "action": "Cancel", 
                "left": 60,  
                "top": 160, 
                "width": 100,
                "height": 20 
                }

Ajuda​

O estilo do botão Ajuda pode ser usado para exibir um botão padrão de ajuda do sistema. Por padrão, o estilo de Ajuda é exibido como um ponto de interrogação dentro de um círculo.

Exemplo JSON:​

    "myButton": {
                "type": "button",
                "style":"help",  
                "text": "OK", 
                "dropping": "custom", 
                "left": 60, 
                "top": 160,  
                "width": 100, 
                "height": 20 
                }

O estilo de ajuda não suporta as propriedades básicasNúmero de estados, Caminho do nome de imagem e Título/Posição da imagem.

Círculo​

O estilo de botão Círculo aparece como um botão sistema redondo. Este estilo de botão foi concebido para macOS.

No Windows, ele é idêntico ao estilo "Nenhum" (o círculo no plano de fundo não é considerado).

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"circular", 
                "text": "OK", 
                "dropping": "custom", 
                "left": 60, 
                "top": 160,  
                "width": 100,
                "height": 20 
                }

Personalizado​

O estilo de botão Personalizado aceita uma imagem de fundo personalizada e permite gerenciar parâmetros adicionais, como a margem e o deslocamento do ícone.

Exemplo JSON:​

    "myButton": {
                "type": "button", 
                "style":"custom", 
                "text": "", 
                "customBackgroundPicture": "/RESOURCES/bkgnd.png",
                "icon": "/RESOURCES/custom.png",  
                "textPlacement": "center",
                "left": 60, 
                "top": 160,  
                "width": 100, 
                "height": 20
                }

Propriedades compatíveis​

Todos os botões partilham o mesmo conjunto de propriedades básicas:

Negrito - Estilo da linha de borda - Inferior - Estilo do botão - Classe - Descartável - Focalizável - Fonte - Cor da fonte - Tamanho da fonte - Altura - Dica de ajuda - Alinhamento horizontal - Dimensionamento horizontal - Itálico - Título dos abraços da imagem(1) - Esquerda - Não renderizado - Número de estados(1) - Nome do objeto - Nome do caminho da imagem(1) - Direita - Atalho - Ação padrão - Título - Posição do título/da imagem(1) - Superior - Tipo - Sublinhado - Variável ou expressão - Dimensionamento vertical - Visibilidade - Largura - Com menu pop-up(2)

(1) Não suportado pelo estilo Ajuda.
(2) Não suportado pelos estilos Ajuda, Flat e Regular.

Propriedades específicas adicionais estão disponíveis, dependendo do estilo botão: