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.

Exemplo de forma incorreta de utilização

O método GravaCurriculo é nativo do Currículo WEB, portanto, não deve haver uma função em um JavaScript customizado com o mesmo nome. O exemplo abaixo é uma customização para alterar a mensagem de gravação do Currículo WEB:

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.");

}

}

})

}

Conceito

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

Motivo

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.

Exemplo de forma incorreta de utilização

Exemplo para converter informações nos campos apresentados no Currículo WEB para maiúsculo:

$('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();

});

Exemplo de forma correta de utilização

Exemplo para converter informações nos campos apresentados no Currículo WEB para maiúsculo. Porém, neste caso, o código foi organizado a fim de garantir mais performance e não impactar na funcionalidade do Currículo WEB:

JavaScript:

$('input, textarea').live("change",function() {

//Converte os caracteres do campo ativo para maiúsculo ao sair do campo.

$(this).val($(this).val().toUpperCase());

});

CSS:

input, textarea{

text-transform: uppercase; /* Apresenta o valor dos campos em maiúsculo*/

}

Motivo

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.

Motivo

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.

Exemplo de forma incorreta de utilização

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');

}

Exemplo de forma correta de utilização

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');

}

Motivo

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.

Exemplo

O evento $(document).ready é executado após o carregamento completo da página HTML. Sendo assim, o script que está dentro do código function(){ /* Código */ } somente será executado após o carregamento da página:

$(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 */

}

}

});

Motivo

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.

Exemplo

Método para apresentar uma mensagem quando sair de um campo obrigatório para o qual não foi informado um valor:

/* 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();

}

});

}

Motivo

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.

Funções

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.

Identificadores

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.

Motivo

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:

Exemplo

$(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*/

}

}

})

Motivo

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:

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.

Motivo

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:

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

Motivo

É 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.

Motivo

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.

Motivo

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.

Motivo

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