Customização do Currículo WEB - Novo RS

Conceito

• Sobrecarga (Overloading): permite vários métodos com o mesmo nome, mas parâmetros diferentes dentro da mesma classe.
• Sobrescrita (Overriding): permite que uma classe derivada forneça uma implementação específica para um método já definido em sua superclasse.

Motivo

Ambas as técnicas citadas não são recomendadas no Currículo WEB quando a ação se der sobre um método nativo do currículo, pois, subscrevendo os métodos do Currículo WEB, a implementação do método original será descartada. Além disso, caso fosse feito algum ajuste nesse método pela Senior, essa alteração não seria considerada no Currículo WEB do cliente.

function GravaCurriculo(aGravarEfetivo){
    $.ajax({
        type: "POST",
        url: "http://nomeservidor:8080/conector?",
        async: true,
        cache: false,
        data: $(".cv-paginas .cv-campo").serialize(),
        success: function(result){
            if (result.status == 'OK'){
                alert("Alteração efetuada com sucesso.");
            }
        }
    })
}

• KeyDown: evento disparado ao pressionar uma tecla;
• KeyUp: evento disparado ao soltar uma tecla pressionada;
• KeyPress: evento disparado ao pressionar ou soltar qualquer tecla.

A manipulação dos eventos KeyDown, KeyUp e KeyPress pode impactar na performance do Currículo WEB e ocasionar erros devido a conflitos com funções internas. Sendo assim, os eventos não devem ser utilizados para customizações.

$('input, textarea').live("keyup",function(a) {
    // Converte os caracteres do campo ativo para maiúsculo quando a tecla é solta.
    a.currentTarget.value = a.currentTarget.value.toUpperCase();
});

$('input, textarea').live("change",function() {
    // Converte os caracteres do campo ativo para maiúsculo ao sair do campo.
    $(this).val($(this).val().toUpperCase());
});

input, textarea {
    text-transform: uppercase; /* Apresenta o valor dos campos em maiúsculo */
}

A manipulação do cursor do mouse dentro de um texto não é aconselhável, pois impacta em várias funcionalidades do Currículo WEB, como o recurso de AutoComplete, digitação no campo e vários outros.

Como o Currículo WEB gera os IDs dos elementos HTML dinamicamente e a composição deles é feita por uma série de informações, a utilização do ID para selecionar elementos não é aconselhável.

Nos exemplos a seguir, a borda do campo Nome do Candidato é alterada para a cor vermelha.

var xCampo = $("#R122CEX_NOMCAN_1_1_1"); // Está errada a utilização do ID
if (xCampo.length > 0) { // Se o campo existe
    xCampo.css('border-color', 'red');
}

var xCampo = $("[name=R122CEX_NOMCAN]"); // Está errada a utilização do ID
if (xCampo.length > 0) { // Se o campo existe
    xCampo.css('border-color', 'red');
}

Caso elementos do HTML sejam manipulados antes do carregamento da página, pode ocorrer erro, pois o browser ainda não criou o elemento que se deseja utilizar.

$(document).ready(function(){
    if($("#cv-frmcurriculo").length > 0){ // Se for o formulário do Currículo WEB
        if($("[name=R122CEX_CODCEP]").length > 0){ // Se existir o campo CEP, aplica a máscara
            $("[name=R122CEX_CODCEP]").setMask('99999-999'); /* Máscara para o campo CEP */
        }
    }
});

Sempre que possível, reutilize código. Isso facilita a manutenção, pois ajustes em comportamentos usados em vários pontos do sistema podem ser feitos em um único local, caso a lógica esteja centralizada.

/* Método com o objetivo de fazer consistências para campos obrigatórios. Parâmetro: aFormulario -> Objeto do formulário que deve ser aplicada à consistência */
function custon_InicializaConsistenciaCamposObrigatorios(aFormulario){
    var xCamposObrigatorios = [];

    if (aFormulario == undefined){
        xCamposObrigatorios = $(".cv-campo-obrigatorio");
    }
    else{
        xCamposObrigatorios = $(aFormulario).find(".cv-campo-obrigatorio");
    }

    $(xCamposObrigatorios).blur(function(){
        if ($(this).val().length == 0){ // Não informado valor para campo obrigatório
            alert('É necessário informar valor para este campo.');
            $(this).focus();
        }
    });
}

Estabeleça um padrão e defina nomes claros para nomenclaturas de identificadores e funções, pois isso é imprescindível para organização e manutenção do código customizado.

Nas funções customizadas, utilize o prefixo “custon_” antes da nomenclatura do método. A vantagem de adicionar um prefixo antes da nomenclatura real da função é garantir que uma função customizada nunca entre em conflitos com um método nativo do Currículo WEB.

Diferencie a nomenclatura de parâmetros, variáveis locais e globais para que o código fique mais legível e não cause conflito entre estes identificadores.

Os arquivos adicionados na guia customização do configurador do perfil do Currículo WEB são referenciados nas telas de login, currículo (após login), anúncios, candidatura e área pública do currículo. Sendo assim, ao fazer uma customização que deve ser aplicada somente para uma das telas, ela deve ser programada de forma que essa customização somente seja executada na tela desejada, conforme ilustrado no exemplo a seguir:

$(document).ready(function(){
    /*
    * Tela de login, o id cv-div-geral-login representa um elemento utilizado somente pela tela de login do currículo.
    * Logo, se ela existir, significa que o que está dentro da condição abaixo estará sendo aplicado somente para esta tela.
    */
    if ($("#cv-div-geral-login").length > 0){
        // Altera a imagem de logo da tela de login currículo
        $("#cv-div-geral-login").css("background-image", "url('img/logosenior.png')")
    }

    /*
    * Adicionar máscara para o campo CEP somente no formulário do Currículo WEB
    */
    if ($("#cv-frmcurriculo").length > 0){ // Se for o formulário do Currículo WEB
        if ($("[name=R122CEX_CODCEP]").length > 0){ // Se existe o campo CEP aplica a máscara
            $("[name=R122CEX_CODCEP]").setMask('99999-999'); /* Máscara para o campo CEP */
        }
    }
})

Quando precisar fazer a seleção de um elemento HTML por seletor do JQuery ou pelo CSS, é importante utilizar hierarquias para que não haja impacto em outras rotinas ou telas nas quais não se deseja aplicar esta customização.

HTML:

<div class="formulário-teste">
    <div class="primeiro-grupo">
        <Button class="cv-button">Botão 1</button>
        <Button class="cv-button">Botão 2</button>
    </div>
    <div class="segundo-grupo">
        <Button class="cv-button">Botão 3</button>
    </div>
</div>

CSS:

Posicione todos os botões que estão dentro do grupo “primeiro-grupo” à direita. Caso deseje posicionar todos os botões para direita, selecione o formulário e a classe dos botões que estão dentro deste formulário.

/* Para posicionar os botões do primeiro grupo à direita */
.formulário-teste .primeiro-grupo .cv-button {
    Float: right;
}

/* Para posicionar todos os botões do formulário "formulários-teste" à direita */
.formulário-teste .cv-button {
    Float: right;
}

No Currículo WEB, muitos atributos e classes de elementos HTMLs são dinâmicos, ou seja, seus valores são alterados constantemente. Por isso, não é aconselhável utilizar estes atributos para selecionar elementos pelo CSS ou JQuery. O adequado é utilizar atributos que são estáticos, como por exemplo, o atributo NAME de algum campo:

JQUERY:

$("[name=R122CEX_NOMCAN]").css('color','blue');

Para selecionar vários elementos HTML, é aconselhável a utilização de classes desses elementos conforme abaixo:

/* Pinta todos os campos obrigatórios com a cor vermelha*/
$("#cv-frmcurriculo.cv-campo-obrigatorio").css('color', 'red');

É aconselhável a utilização de recursos nativos ao invés de customização, pois os nativos foram feitos da melhor forma, prevendo performance, segurança e as melhores práticas a serem adotadas. Além disso, caso algum ajuste seja necessário, ele é feito pela Senior sem que haja necessidade de alteração da customização, como recurso de carregar as informações do país, estado e cidade após informar um CEP cadastrado na base, por exemplo.

Sempre antes de acessar qualquer atributo HTML, é necessário verificar se o campo selecionado realmente existe ou foi encontrado, pois ao tentar acessar um atributo de um campo não encontrado, ocorrerá um erro de JavaScript.

/* Seleciona o campo nome e armazena em uma variável */
var xCampoNome = $("[name=R122CEX_NOMCAN]");

if (xCampoNome.length > 0){ /* Se o length for maior que zero é porque ele existe */
    xCampoNome.css('color', 'blue'); // Pinta o campo de azul
}

Sempre evite o uso de variáveis globais, pois esta prática pode afetar a qualidade da customização. Alguns motivos para não utilizar esta prática:

1. Prejudica a legibilidade do código, pois não se sabe todos os lugares que utilizam ou alteram o valor desta variável.
2. Gera maior risco de afetar outras rotinas e funcionalidades do currículo, uma vez que a variável está acessível em qualquer lugar da página e pode ser alterada a qualquer momento.
3. Prejudica a manutenção da customização.

No JavaScript, uma variável global é toda variável declarada fora de um método ou sem a palavra reservada VAR à sua frente. Se uma variável é declarada no início da página sem estar dentro de um método, utilizando a palavra reservada “var” ou não, esta variável será global. Se estiver dentro do escopo de um método e uma variável declarada sem a utilização do “var”, esta variável será global, podendo ser acessada, inclusive, fora do método em que ela foi declarada.

function custon_metodoteste(){
    /* Esta variável é local */
    var xValor1 = 1;

    /*
    * Esta variável é global, pois na sua declaração
    * não foi utilizado a palavra reservada var
    */
    xValor2 = 2;
}

Nunca utilize palavras reservadas da linguagem JavaScript em nome de identificadores ou funções. Isso pode ocasionar conflitos e o código não funcionar da maneira esperada. Abaixo há algumas palavras reservadas do JavaScript:

• Break
• Case
• Catch
• Continue
• Default
• Delete
• Do
• Else
• Finally
• Short
• Static
• For
• Function
• IF
• In
• Instanceof
• New
• Return
• Switch
• This
• Throw
• Try
• Super
• Synchronized
• Throws
• Typeof
• Var
• Void
• While
• With
• Abstract
• Boolean
• Byte
• Char
• Class
• Const
• Transient
• Volatile
• Package
• Debugger
• Double
• Enum
• Export
• Final
• Float
• Goto
• Implements
• Protected
• Public
• Private
• Import
• Int
• Interface
• Long
• Native