Ícones de endpoint da SDK do Conector UI

Ícones de endpoint e atividade

A interface do Integration Studio para um conector criado com o Jitterbit Connector SDK utiliza ícones na interface para representar o endpoint e suas atividades.

Na paleta de componentes, os ícones representam tanto o endpoint configurado quanto suas atividades. Esta captura de tela do conector do Dropbox mostra como diferentes ícones são utilizados:

Um ícone (uma pasta) é usado para a conexão, com um ícone diferente usado para as atividades. É possível ter um ícone diferente para cada atividade, embora seja aconselhável manter um tema comum de cores e formas para um endpoint. Como o texto que descreve a atividade é sobreposto ao ícone, é melhor deixar a metade inferior do ícone de uma cor sólida para que o texto branco, que pode ocupar até duas linhas, tenha um fundo sólido para aparecer.

Note que os endpoints não configurados estão ligeiramente desbotados em comparação com os endpoints configurados. Compare os dois ícones do Amazon S3 nesta imagem:

Em uma operação, os ícones representam as atividades do conector do Dropbox:

Como pode ser visto no esquema JSON do conector, você pode definir ícones para a conexão e cada uma das atividades (juntas referidas como um endpoint). Os ícones são definidos no formato SVG e são fornecidos como um caminho para um arquivo SVG.

Para funcionar corretamente na interface do Integration Studio—tanto graficamente quanto esteticamente—os ícones devem seguir convenções específicas em seu design e criação.

Como pode ser visto nesses exemplos, o padrão de design para um ícone consiste em um fundo colorido contra o qual um logotipo branco é aplicado. O tipo branco é adicionado pela interface do Integration Studio em tempo de execução para rotular as atividades. Por essa razão, deve-se deixar espaço no design de um ícone para acomodar esse texto, que pode ocupar até duas linhas.

Tamanhos de ícones, tipo de arquivo e regras de cor

São necessários dois ícones: um ícone de endpoint e um ícone de atividade.

Ambos os ícones têm o mesmo tamanho (90 pixels por 90 pixels), com o logotipo dentro de uma largura máxima de 74 pixels e alturas máximas de 38 pixels (ícone de endpoint) e 42 pixels (ícone de atividade).

Um ícone deve ser salvo como um arquivo SVG.

Os ícones—para se adequar à estética do Integration Studio—devem seguir estas regras de cor:

• Cor do logotipo: Branco. Sem exceções.

• Cor clara: A cor principal da marca, preferencialmente escolhida para que suporte texto branco por cima.

• Cor escura: Tom mais escuro da cor clara. Normalmente, isso significa reduzir o brilho para 80% do valor original.

• Gradiente: Aplicado ao ícone de atividade, com a cor clara na parte superior e a cor escura na parte inferior.

• Dimensionamento: Os ícones devem se encaixar dentro das diretrizes conforme mostrado nas imagens de exemplo abaixo.

• Posicionamento: Centralize os ícones usando centralização matemática ou óptica para o eixo horizontal e, em seguida, centralize verticalmente nas diretrizes conforme mostrado nas imagens de exemplo abaixo.

Ícone de endpoint

O ícone de endpoint consiste em uma série de pastas com um logotipo branco em cima. A pasta mais ao fundo está na cor escura e a pasta mais à frente está na cor clara. Essas cores podem ser atribuídas usando as diferentes camadas de modelos.

O logotipo precisa ser criado com um fundo transparente para que, ao ser colocado nas imagens das pastas, as cores apareçam ao redor e através do logotipo de forma apropriada.

Esta imagem mostra um ícone de endpoint com diretrizes adicionadas mostrando os limites para o posicionamento do ícone:

Ícone de atividade

O ícone de atividade é um gradiente sólido, com a cor clara na parte superior e a cor escura na parte inferior. O logotipo pode ser o mesmo usado no ícone de endpoint ou um diferente, conforme apropriado. No entanto, na maioria dos casos, será o mesmo que o do endpoint, mas posicionado mais alto, deixando espaço na parte inferior para os rótulos de atividade.

O espaço mínimo na parte inferior deve ser de 40 pixels (50% da altura).

Assim como o ícone do endpoint, o logotipo precisa ser criado com um fundo transparente para que, ao ser colocado nas imagens da pasta, as cores apareçam ao redor e através do logotipo de forma apropriada.

Esta imagem mostra um ícone de atividade com diretrizes adicionadas mostrando os limites para a colocação do ícone:

Badges

Os ícones podem ser exibidos com um badge beta ou um badge deprecated no canto superior esquerdo. Esses badges podem ser configurados no endpoint e nos ícones de atividades, adicionando propriedades apropriadas aos metadados de um endpoint ou atividade.

• Para adicionar um badge beta, defina a propriedade isPreview como true:

"isPreview": true,

• Para adicionar um badge deprecated, defina a propriedade isDeprecated como true:

"isDeprecated": true,

Por exemplo, para definir um endpoint Dropbox e sua atividade Fetch para ter um badge beta:

{
  "name": "Dropbox",
  "isPreview": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isPreview": true,
      "properties": []
    }
  }
}

Para definir um endpoint Dropbox e sua atividade Fetch para ter um badge deprecated:

{
  "name": "Dropbox",
  "isDeprecated": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isDeprecated": true,
      "properties": []
    }
  }
}

Exemplos de trabalho

Os exemplos mostrados acima estão disponíveis como arquivos SVG:

• Ícone do endpoint: endpoint.svg
• Ícone de atividade: activity.svg

Veja o arquivo adapter.json do conector Dropbox para um exemplo funcional usando arquivos de ícone.

Para exemplos de diferentes logotipos e tratamentos de cores, veja a seleção atual de conectores disponíveis no Integration Studio.