Nesta seção: |
Ao utilizar um processo com três etapas, você pode criar e personalizar uma página para conexão específica para sua empresa ou organização. As três etapas são:
Estas etapas estão descritas em mais detalhes no Centro do Suporte Técnico. Para obter informações específicas e orientação sobre como criar uma página para conexão única, consulte https://techsupport.informationbuilders.com
Como: |
A página para conexão personalizada e compacta, como ilustrado na imagem a seguir, consiste de uma imagem de plano de fundo que contém uma caixa de diálogo para as credenciais de conexão.
A imagem de plano de fundo é centralizada em uma classe div, fornecendo espaço em volta da imagem. Para construir sua página, consulte Como Construir a Página.
Observação: Nem todas as imagens necessitam de configuração de transparência alfa. Geralmente, o valor se encontra entre 50% e 75%.
A última etapa é ativar a nova página criada por você. Utilize as etapas a seguir para completar esta tarefa.
Como: |
O WebFOCUS fornece a possibilidade de se alterar o texto de todos os rótulos na página Conecte-se. O programa também oferece a possibilidade de inclusão de até dois links personalizados na barra de menu.
As tabelas a seguir fornecem o elemento, o nome da tag XML e o valor padrão para este elemento (que pode ser alterado). O valor inserido por você não inclui o wrapper CDATA do XML.
Observação: Caso você não queira ver suas alterações nesta seção ou na seção CSS entrando em vigor, pode ser necessário limpar o cache do seu navegador.
Elementos da Página Principal |
Tag XML |
Valor Padrão |
---|---|---|
Título da Página |
<signin_custom_page_title> |
Conecte-se ao Portal de BI |
Texto do Item 1 do Menu |
<signin_menu_button1> |
menu1 |
Link do Item 1 do Menu |
<signin_menu_button1_link> |
http://www.informationbuilders.com/ |
Texto do Item 2 do Menu |
<signin_menu_button2> |
menu2 |
Link do Item 2 do Menu |
<signin_menu_button2_link> |
http://www.informationbuilders.com/ |
Título do Quadro (Área do Formulário) |
<signin_custom_frame_title> |
Conecte-se ao Portal de BI |
Rótulo do Nome do Usuário |
<signin_user_name_label> |
Nome Usuário: |
Rótulo da Senha |
<signin_password_label> |
Senha: |
Texto do botão Conectar |
<signin_button> |
Conectar |
Opção Lembrar Senha |
<remember_me_checkbox> |
Lembrar-me neste computador |
Elementos de Diálogo de Alteração de Senha |
Tag XML |
Valor Padrão |
---|---|---|
Texto do Título |
<signin_custom_change_password_frame_title> |
Alterar a Senha |
Rótulo do Nome do Usuário |
<signin_change_password_user_name_label> |
Nome Usuário |
Antiga do Rótulo da Senha |
<signin_change_password_old_password_label> |
Senha Antiga |
Novo Rótulo da Senha |
<signin_change_password_new_password_label> |
Nova Senha |
Confirmar Senha Rótulo |
<signin_change_password_confirm_password_label> |
Confirmar Nova Senha |
Texto do botão Conectar |
<signin_change_password_sigin_button> |
Conectar |
texto do Botão Cancelar |
<signin_change_password_cancel_button> |
Cancelar |
Elementos de Diálogo Já Conectados |
Tag XML |
Valor Padrão |
---|---|---|
Texto do Título |
<signin_custom_user-already-signin_frame_title> |
Usuário já está conectado |
Texto da Mensagem |
<signin_custom_user-already-signin_message> |
Já existe uma sessão ativa para este usuário. Gostaria de continuar a conexão e cancelar a outra sessão? |
Como: |
Você tem muita flexibilidade ao construir a página personalizada para conexão. A criação do estilo e o posicionamento são feitos exclusivamente no CSS.
Comunicado:
http://server:port/ibi_apps/
http://server:port/ibi_apps/web_resource/signin.
A tabela a seguir fornece os elementos que você pode editar, o nome de suas classes CSS e os atributos sugeridos que você pode desejar alterar.
Elementos da Página Principal |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Cor do Plano de Fundo |
corpo, html |
Gradiente ou Sólido:
|
Cor do Plano de Fundo da Página (continuação) |
corpo, html (continuação) |
|
Imagem do Plano de fundo |
.signin-background-image |
|
.signin-box |
Observação: O topo e a esquerda podem ser utilizados para centralizar a imagem e todos os controles, se desejado. | |
Posição da Barra de Menu |
.signin-custom-menu-bar-position |
|
Estilo da Barra de Menu |
.signin-custom-menu-bar |
|
Estilo dos Separadores da Barra de Menu |
.signin-menu-bar-separator |
|
Posição do Título do Quadro |
.signin-custom-frame-title |
|
Estilo do Título do Quadro |
.signin-custom-frame-label |
|
Posição do Rótulo do Nome do Usuário |
.signin-custom-username-label-position |
|
Estilo do Rótulo do Nome do Usuário |
.signin-custom-username-label |
|
Posição do Controle de Saída do nome de Usuário |
.signin-custom-username-editbox |
|
Estilo do Controle de Saída do nome de Usuário |
.signin-custom-username-editbox-input |
|
Posição do Rótulo da Senha |
.signin-custom-password-label-position |
|
Estilo do Rótulo da Senha |
.signin-custom-password-label |
|
Posição do Controle de Entrada de Senha |
.signin-custom-password-editbox |
|
Estilo do Controle de Entrada de Senha |
.signin-custom-password-editbox-input |
|
Posição da Opção Lembrar Senha |
.signin-custom-remember-me-position |
|
Estilo da Opção Lembrar Senha |
signin-custom-remember-me |
Defina o estilo desejado, como a família da fonte, tamanho, cor, etc. |
Estilo do Rótulo do Botão Conectar |
.signin-button-label |
Defina o estilo desejado, como a família da fonte, tamanho, cor, etc. |
Posição do Botão Conectar |
.signin-custom-button-signin-position |
|
Estilo do Botão Conectar |
.signin-custom-button-signin |
|
.signin-button, .button |
Observação: Caso você precise redimensionar qualquer objeto, utilize a mesma classe na qual você estabeleceu a posição.
Elementos de Mensagens de Erros |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Posição da Mensagem de Erro |
.signin-custom-error-position |
|
Estilo da Mensagem de Erro |
.signin-custom-error-message |
|
Imagem da Mensagem de Erro |
.signin-custom-error-image |
|
O estilo dos elementos nas duas tabelas a seguir são herdados dos elementos da página principal. Isto significa que os botões, rótulos e controles correspondem à página principal.
Elementos de Diálogo de Alteração de Senha |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Estilo e Posição da Caixa de Diálogo |
.signin-custom-change-password-position |
|
Barra de Título da Caixa de Diálogo |
.signin-custom-change-password-title-position |
|
Rótulo do Título da Caixa de Diálogo |
.signin-custom-change-password-title-label |
Defina o estilo desejado, como a família da fonte, tamanho, cor, etc. |
Ícone do Título da Caixa de Diálogo |
.signin-custom-change-password-title-image |
Defina a imagem. |
Posição do Rótulo do Nome do Usuário |
.signin-custom-change-password_username-label-position |
|
Posição do Controle de Saída do nome de Usuário |
.signin-custom-change-password_username-editbox-position |
|
Posição Antiga do Rótulo da Senha |
.signin-custom-change-password_old-password-label-position |
|
Posição Antiga do Controle de Entrada de Senha |
.signin-custom-change-password_old-password-editbox-position |
|
Nova Posição do Rótulo da Senha |
.signin-custom-change-password_new-password-label-position |
|
Posição de Controle de Entrada de Nova Senha |
.signin-custom-change-password_new-password-editbox-position |
|
Confirmar Nova Posição do Rótulo da Senha |
.signin-custom-change-password_confirm-password-label-position |
|
Confirmar Posição de Controle de Entrada de Nova Senha |
.signin-custom-change-password_confirm-password-editbox-position |
|
Confirmar Posição de Controle de Entrada de Nova Senha |
.signin-custom-change-password_confirm-password-editbox-position |
|
Posição do Botão Conectar |
.signin-custom-change-password-button-signin-position |
|
Posição do Botão Cancelar |
.signin-custom-change-password-button-cancel-position |
|
Elementos de Diálogo Usuário Já Conectado |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Estilo e Posição da Caixa de Diálogo |
.signin-custom-user-already-signin-position |
|
Rótulo do Título da Caixa de Diálogo |
.signin-custom-user-already-signin-label-position |
|
Ícone do Título da Caixa de Diálogo |
.signin-custom-user-already-signin-title-image |
|
Posição do Botão Conectar |
.signin-custom-user-already-signin-button-signin-position |
|
Posição do Botão Cancelar |
.signin-custom-user-already-signin-button-cancel-position |
|
As informações a seguir são um guia, utilizando a imagem de exemplo, para a implementação de uma página personalizada para conexão. Presume-se que você já tenha passado pelas etapas de construção e ativação.
Observação: A tabela a seguir exibe somente os elementos que foram alterados no exemplo. Insira o valor exibido na coluna Valor de Exemplo no arquivo XML.
Elementos da Página Principal |
Tag XML |
Valor de Exemplo |
---|---|---|
Título da Página |
<signin_custom_page_title> |
Conexão com a Information Builders |
Texto do Item 1 do Menu |
<signin_menu_button1> |
Summit 2013 |
Link do Item 1 do Menu |
<signin_menu_button1_link> |
http://www.informationbuilders.com/summit |
Texto do Item 2 do Menu |
<signin_menu_button2> |
IBI |
Título do Quadro (Área do Formulário) |
<signin_custom_frame_title> |
Conexão com a Information Builders |
Rótulo do Nome do Usuário |
<signin_user_name_label> |
Nome do Cliente |
Rótulo da Senha |
<signin_password_label> |
Senha |
Opção Lembrar Senha |
<remember_me_checkbox> |
Lembre-me |
Observação: A opção Lembrar Senha não está ativada por padrão, mas está configurada nos arquivos de exemplo, caso você a ative.
Altere Elementos de Diálogo |
Tag XML |
Valor de Exemplo |
---|---|---|
Rótulo do Nome do Usuário |
<signin_change_password_user_name_label> |
Nome do Cliente: |
Comunicado:
http://server:port/ibi_apps/
http://server:port/ibi_apps/web_resource/signin.
As tabelas a seguir contêm as alterações que você precisa fazer para criar o estilo da página Conecte-se e duas caixas de diálogo. Antes de cada tabela há uma captura de tela do que você deve visualizar ao concluir as alterações.
Elementos da Página Principal |
Classse CSS ou Tag HTML |
Valores a serem Adicionados, Alterados ou Excluídos |
---|---|---|
Cor do Plano de Fundo |
corpo, html |
plano de fundo: #000000; Exclua todas as linhas gradientes. |
Imagem do Plano de fundo |
.signin-background-image |
background-image: url("images/customsignin.gif"); largura: 960px; altura: 638px; |
.signin-box |
largura: 960px; altura: 638px; | |
Posição da Barra de Menu |
.signin-custom-menu-bar-position |
topo: 220px; esquerda: 475px; |
Estilo da Barra de Menu |
.signin-custom-menu-bar |
cor: #ffffff; fonte: 11px Tahoma, Verdana, Arial, Sans-Serif; |
Estilo dos Separadores da Barra de Menu |
.signin-menu-bar-separator |
cor: #ffffff; Esta classe está localizada na parte inferior do arquivo CSS. |
Posição do Título do Quadro |
.signin-custom-frame-title |
topo: 245px; esquerda: 370px; |
Estilo do Título do Quadro |
.signin-custom-frame-label |
cor: #ffffff; |
Posição do Rótulo do Nome do Usuário |
.signin-custom-username-label-position |
text-align: esquerda; topo: 275px; esquerda: 370px; |
Nome Usuário |
.signin-custom- |
cor: #ffffff; |
Posição do Controle de Saída do nome de Usuário |
.signin-custom-username-editbox |
largura: 221px; topo: 295px; esquerda: 370px; Observação: Para mostrar todas as bordas de forma adequada, a largura deve ser de pelo menos 5px. |
Estilo do Controle de Saída do nome de Usuário |
.signin-custom-username-editbox-input |
largura: 216px; |
Posição do Rótulo da Senha |
.signin-custom-password-label-position |
text-align: esquerda; topo: 330px; esquerda: 370px; |
Estilo do Rótulo da Senha |
.signin-custom-password-label |
cor: #ffffff; Exclua font-size:12px; |
Posição do Controle de Entrada de Senha |
.signin-custom-password-editbox |
largura: 221px; topo: 350px; esquerda: 370px; Observação: A largura é de 5px a mais que a do controle para mostrar todas as bordas. |
Estilo do Controle de Entrada de Senha |
.signin-custom-password-editbox-input |
largura: 216px; |
Posição da Opção Lembrar Senha |
.signin-custom-remember-me-position |
largura: 216px; topo: 388px; esquerda: 490px; Observação: O topo é de 2px ou menos do que o valor no desenho devido ao processo do HTML. A largura e a margem esquerda são correspondentes aos controles de entrada, como alinhamento de texto à direita para alinhar a margem direita. |
Estilo da Opção Lembrar Senha |
signin-custom-remember-me |
cor: #ffffff; font-size:12px; |
Posição do Botão Conectar |
.signin-custom-button-signin-position |
cor: #ffffff; |
Estilo do Botão Conectar |
.signin-custom-button-signin |
cor: #ffffff; borda: 1px solid #223AA7; border-radius: 10px; |
Estilo do Botão Conectar |
a.signin-custom-button-signin |
background-color: #223AA7; largura: 96px; Exclua a linha de plano de fundo. Exclua a linha de preenchimento à direita. |
a.signin-custom-button-signin span |
preenchimento: 3px 0px 3px 0px; Exclua a linha de altura de linha. |
A imagem e a tabela a seguir fornecem informações sobre como resolver as mensagens de erro.
Elementos de Mensagens de Erros |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Estilo do Plano de Fundo e Posição da Mensagem de Erro |
.signin-custom-error-position |
largura: 340px; altura: 27px; topo: 240px; esquerda: 310px; background-color: #ff0000; borda: 1px solid #ff0000; border-radius: 10px; comportamento: url(web_resource/signin/PIE.htc); |
Estilo do Texto e Posição da Mensagem de Erro |
.signin-custom-error-message |
cor: #ffffff; font-size: 11px; topo: 5px; largura: 340px; text-align: centralizado; Exclua à esquerda: 20; Observação: O topo é a diferença entre o topo da caixa e o topo do texto do seu software de edição de imagem. A largura aqui deve corresponder à largura da classe acima. |
Imagem da Mensagem de Erro |
.signin-custom-error-image |
exibição: nenhum; Observação: Isto foi feito paraque não haja imagem. |
Observação: Caso você precise redimensionar qualquer objeto, utilize a mesma classe na qual você estabeleceu a posição.
A criação do estilo de elementos na caixa de diálogo Alterar Senha, assim como a caixa Já Conectado, é herdado dos elementos da página principal. Isto significa que os botões, rótulos e controles correspondem à página principal.
A imagem e a tabela a seguir fornecem informações sobre como alterar senhas.
Elementos de Diálogo de Alteração de Senha |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Estilo e Posição da Caixa de Diálogo |
.signin-custom-change-password-position |
topo: 220px; esquerda: 353px; background-color: #565352; cor: #ffffff; borda: 1px, sólida, transparente; border-radius:25px; -webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); -moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); comportamento: url(web_resource/signin/PIE.htc); Observação: A visibilidade: oculta; a linha terá que ser excluída, adicionada novamente ou transformada em comentários durante os testes. |
Barra de Título da Caixa de Diálogo |
.signin-custom-change-password-title-position |
background-color: #223AA7; |
Ícone do Título da Caixa de Diálogo |
.signin-custom-change-password-title-image |
visibilidade: oculta; |
Posição do Botão Conectar |
.signin-custom-change-password-button-signin-position |
altura: 25px; topo: 190px; esquerda: 100px; |
Posição do Botão Cancelar |
.signin-custom-change-password-button-cancel-position |
altura: 25px; topo: 190px; esquerda: 200px; |
A imagem e tabela a seguir fornecem informações sobre como trabalhar com a caixa de diálogo Já Conectado.
Elementos de Diálogo Já Conectados |
Classse CSS ou Tag HTML |
Sugestões de Alterações |
---|---|---|
Estilo e Posição da Caixa de Diálogo |
.signin-custom-user-already-signin-position |
altura: 130px; topo: 305px; esquerda: 332px; background-color: #565352; borda: 1px, sólida, transparente; border-radius:25px; -webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); -moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75); comportamento: url(web_resource/signin/PIE.htc); Observação: A visibilidade: oculta; a linha terá que ser excluída, adicionada novamente ou transformada em comentários durante os testes. |
Rótulo do Título da Caixa de Diálogo |
.signin-custom-user-already-signin-label-position |
largura: 270px; cor: #ffffff; |
Ícone do Título da Caixa de Diálogo |
.signin-custom-user-already-signin-title-image |
visibilidade: oculta; |
Posição do Botão Conectar |
.signin-custom-user-already-signin-button-signin-position |
altura: 25px; topo: 100px; esquerda: 100px; |
Posição do Botão Cancelar |
.signin-custom-user-already-signin-button-cancel-position |
altura: 25px; topo: 100px; esquerda: 200px; |
WebFOCUS |