Stiod Blog

Continuando a série de post sobre jQuery iniciado por Gabriel.

Hoje vou mostrar um pouco sobre Effects e alguns métodos interessantes do jQuery, Usando como exemplo um simples slide de Imagem.

Neste código vemos o effect FadeIn(efeito de aparecer) e fadeOut(efeito de desaparecer) e o método next
Continue Reading »

Talvez você já tenha se deparado em uma situação onde precisava de uma ou mais funções em Javascript com o mesmo nome, porém com listas de argumentos diferentes ou com um argumento com um valor padrão.

Pois é, isso não existe em Javascript, pelo menos não como outras linguagens normalmente implementam. Um das formas de resolver este problema é utilizando a propriedade arguments das funções.

Propriedade arguments

arguments é uma propriedade que contém os argumentos passados para a função. Ele só pode ser chamado localmente e pode ser utilizado como um array.

Propriedades:
Function.arguments.length: Quantidade de argumentos declarados.
arguments.length: Quantidade real de argumentos.
arguments.callee: Referência para função.

Lembre-se que o arguments deve ser utilizado de dentro da função. Aqui vão alguns exemplos para deixar as coisas mais claras.

Você pode passar quantos argumentos quiser sem precisar declara-los na função:

function myfunc() {
    a = arguments[0];
    b = arguments[1];
    c = arguments[2];
    // ...
}
 
myfunc(1, 2, 3);
 

Um meio de se indicar um valor padrão para um argumento que não é passado:

function myfunc(a, b) {
    var c = 3;
    if (arguments.length == 3) {
        c = arguments[2];
    }
    /*
    ou
    var c = arguments.length == 3 ? arguments[2] : 3;
    */
}
 
myfunc(1, 2);
 
/* ou */
 
myfunc(1, 2, 3);
 

Verificando a quantidade de argumentos passados com os permitidos:

function myfunc(a, b) {
    if (arguments.length != myfunc.arguments.length) {
        alert('Passe 2 argumentos!');
    }
    // ...
}
 
myfunc(1); // exibe 'Passe 2 argumentos!'
 
/* ou */
 
myfunc(1, 2, 3); // exibe 'Passe 2 argumentos!'
 

O callee pode ser utilizado em recursões onde não se conhece o nome da função, como as funções anônimas:

function myfunc() {
    return function(a) {
        if (a > 10) {
            return a;
        }
        return arguments.callee(a + 1);
    }
    // ...
}
 
myfunc()(1);
 

Segue a segunda parte do tutorial de introdução ao framework do ExJs.

Vamos falar dos Widgets, que são aplicativos feitos com o Extjs para facilitar o desenvolvimento das aplicações web.

E pra começar crie um arquivo HTML [não esqueça de baixar os fontes do ExtJs] e :
No HEAD do arquivo HTML referencie os arquivos script e de formatação de estilo.

 
<!-- CSS pegue o arquivo na pasta ext-2.2\resources\ -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
 
<!-- Ext-base.js pegue o arquivo na pasta ext-2.2\adapter\ext\ -->
<script type="text/javascript" src="js/ext-base.js" ></script>
<!-- Ext-all.js pegue o arquivo na pasta raiz ext-2.2\ -->
<script type="text/javascript" src="js/ext-all.js"></script>
 

E insira no corpo do documento esses elementos:

 
<div id="quadro-id"></div>
<div id="quadro-conteudo"><span>Conte&uacute;do</span></div>
 

Coloquei essa formatação em um STYLE pra deixar os textos mais harmônicos e definir um tamanho para o quadro que irá gerar o Ext Panel

 
body{
  font:normal normal 12px/1.8em arial, 'trebuchet ms', verdana;
}
#quadro-id{
  width:500px;
}
 

Agora indo para a parte mais importante os Scripts:

 
//Verificando se o ExtJs foi carregado
Ext.onReady(function(){
  //Instanciando um novo objeto do Extjs
  var quadro = new Ext.Panel({
    title:'meu quadro',
    //referenciando um objeto no corpo do HTML
    renderTo:'quadro-id',
    //tem a opção de ser expansível
    collapsible:true,
    //Opção de ser arrastado, mas volta ao ponto original
    //Necessita incluir as propriedades de Drag n' Drop
    draggable:true,
    //icone de fechar,  precisa de programação pra interatividade
    closable:true,
    //Inserção e programação dos botões do cabeçalho do PANEL
    tools:[{
      id:'help',
      handler:function(){
          Ext.Msg.show({
          width:350,
          title:'titulo do texto de ajuda',
          msg:'corpo do  quadro de ajuda'
        })
      }
    },{
    id:'close',
    handler:function(){
      Ext.destroy(quadro);
    }
    }],
    // conteúdo a ser renderizado dentro do PANEL
    contentEl:'quadro-conteudo'
  })
  //Centralizando quadro no centro da tela
  Ext.get("quadro-id").center();
});
 

O Widget PANEL e seus elementos visuais podem ser customizados, os arquivos de imagens e css desse objeto estão separados na pasta RESOURCES com seu respectivo nome.

Bom.. é só isso .

Coloquei esse exemplo no nosso servidor pra quem quiser acessar e ver funcionando.

Abraços a todos e em seguinda colocarei mais funcionalidades do ExtJs.