sexta-feira, 7 de novembro de 2014

JavaScript puro para desenvolvimento de formulários de cadastro e pesquisa

JavaScript puro para desenvolvimento de formulários de cadastro e pesquisa
No ano de 2010, desenvolvi em uma empresa uma app web em ExtJs por exigência do Analista.
Bom, foi super difícil e não achava a biblioteca tão produtiva.
No ano de 2013 refiz em casa as disposições dos elementos, mas utilizando JavaScript puro, para provar que era possível utilizar elementos mais simples e obter as mesmas funcionalidades.
Não utilizei os conceitos de orientação à objeto (OK, sei não existe orientação à objetos em JavaScript) que seria o ideal para uma melhor organização do fonte em classes e objetos, pois este é apenas um esboço.
É possível baixar o mesmo fonte com as imagens pelos seguintes links:
Arquivo: http://www.guj.com.br/posts/downloadAttach/9619.java
Sobre : http://www.guj.com.br/java/301766-javascript-puro-formularios-genericos-e-geradores


Segue o fonte:

   1 <html>
   2  <script>
   3 
   4       // Desenvolvido por Luiz Augusto Prado. 2013
   5       // www.codigorapido.com.br 
   6       // Esboço para melhoria futura e utilização em OO. 
   7 
   8       var botoes=new Array();
   9 
  10       var modo_edicao="Selecionar";
  11 
  12 
  13       var divTop=document.createElement("div");
  14       var divBotoesCrud=document.createElement("div");
  15       var divRodape=document.createElement("div");
  16       var divCentro=document.createElement("div");
  17       var divTabela=document.createElement("div");
  18       var divModalMensagem=document.createElement("div");
  19       var divModalEspera=document.createElement("div");
  20 
  21 
  22       var tableDados=document.createElement("table");
  23 
  24       var txt_irParaPagina=document.createElement("input");
  25       var txt_PaginaAtual=document.createElement("input");
  26       var txt_PaginasTotal=document.createElement("input");
  27 
  28 
  29       var corMuitoEscura="#336699";
  30       var corEscura="#6688bb";
  31       var corMedia="#88aadd";
  32       var corClara="#bad4ff";
  33       var corMuitoClara="#d1e2ff";
  34       var corBranca="#FFFFFF";
  35 
  36 
  37 
  38 
  39 
  40       var arrayCrudButtonsVisibility=[8];
  41       //                              legenda
  42       // 
  43       //                              [    L, 
  44       //                              [    O, I,
  45       //                              [ S, C, N,
  46       //                              [ E, A, S, E, 
  47       //                              [ L, L, E, D, 
  48       //                              [ E, I, R, I, 
  49       //                              [ Ç, Z, Ç, T, 
  50       //                              [ Ã, A, Ã, A, 
  51       //                              [ O, R, O, R,             
  52       //arrayCrudButtonsVisibility[]= [         // Seleçionar
  53       arrayCrudButtonsVisibility[0]=[1,0,0,0];  // Buscar
  54       arrayCrudButtonsVisibility[1]=[1,0,0,0];  // Inserir
  55       arrayCrudButtonsVisibility[2]=[1,0,0,0];  // Editar
  56       arrayCrudButtonsVisibility[3]=[0,0,0,1];  // Excluir
  57       arrayCrudButtonsVisibility[4]=[0,1,0,0];  // Localizar
  58       arrayCrudButtonsVisibility[5]=[0,0,1,1];  // Salvar
  59       arrayCrudButtonsVisibility[6]=[0,1,1,1];  // Limpar  
  60       arrayCrudButtonsVisibility[7]=[0,1,0,0];  // Sair
  61       arrayCrudButtonsVisibility[8]=[0,0,1,1];  // Cancelar
  62 
  63 
  64       image=function(lugar,caminhoNome)
  65       {
  66        var img=document.createElement("IMG");
  67        img.src=caminhoNome;
  68        lugar.appendChild(img);
  69        //lugar.style.backgroundImage = "url(" + caminhoNome + ")";  
  70       }
  71 
  72 
  73       setmodo=function()
  74       {
  75        if(modo_edicao=="Selecionar")
  76        {
  77         for(var i=0;i<botoes.length;i++)
  78         {
  79          var obj=document.getElementById(botoes[i].id);
  80          if(botoes[i].visibilidadeModo[0]==0)
  81           obj.style.visibility="hidden";
  82          else
  83           obj.style.visibility="visible";
  84         }
  85        }
  86        else if(modo_edicao=="Buscar")
  87        {
  88         for(var i=0;i<botoes.length;i++)
  89         {
  90          var obj=document.getElementById(botoes[i].id);
  91          if(botoes[i].visibilidadeModo[1]==0)
  92           obj.style.visibility="hidden";
  93          else
  94           obj.style.visibility="visible";
  95         }
  96        }
  97        else if(modo_edicao=="Inserir")
  98        {
  99         for(var i=0;i<botoes.length;i++)
 100         {
 101          var obj=document.getElementById(botoes[i].id);
 102          if(botoes[i].visibilidadeModo[2]==0)
 103           obj.style.visibility="hidden";
 104          else
 105           obj.style.visibility="visible";
 106         }
 107        }
 108        else if(modo_edicao=="Editar")
 109        {
 110         for(var i=0;i<botoes.length;i++)
 111         {
 112          var obj=document.getElementById(botoes[i].id);
 113          if(botoes[i].visibilidadeModo[3]==0)
 114           obj.style.visibility="hidden";
 115          else
 116           obj.style.visibility="visible";
 117         }
 118        }
 119       }
 120 
 121 
 122 
 123 
 124 
 125 
 126 
 127       //=============================================================================================
 128       // Criar Botão
 129       //=============================================================================================
 130       loadButton=function(obj)
 131       {
 132        var divSombra=document.createElement("div");
 133        divSombra.style.position="absolute";
 134        divSombra.style.top=obj.y;
 135        divSombra.style.left=obj.x;
 136        divSombra.style.width=obj.w;
 137        divSombra.style.height=obj.h;
 138        divSombra.style.padding="0px";
 139        divSombra.style.border="1px solid "+corMuitoEscura;
 140        divSombra.style.backgroundImage="url("+obj.fotoEscura+")";
 141        obj.lugar.appendChild(divSombra);
 142 
 143        var iDiv=document.createElement("div");
 144        iDiv.id=obj.id;
 145        iDiv.style.position="absolute";
 146        iDiv.style.top=obj.y;
 147        iDiv.style.left=obj.x;
 148        iDiv.style.width=obj.w;
 149        iDiv.style.height=obj.h;
 150        iDiv.style.padding="0px";
 151        iDiv.style.backgroundColor=obj.backgroundColor;
 152        iDiv.style.border="1px solid "+corMuitoEscura;
 153        image(iDiv,obj.imagem);
 154        iDiv.onclick=botao.acao;
 155        obj.lugar.appendChild(iDiv);
 156       }
 157 
 158 
 159 
 160 
 161 
 162 
 163 
 164 
 165       //=============================================================================================
 166       // Criar Tabela
 167       //=============================================================================================
 168       createTable=function(titulo,idnome,titulos,dimensoes)
 169       {
 170 
 171        //=================================================
 172        // div
 173        //=================================================
 174        var divA=document.createElement("div");
 175        divA.id=idnome;
 176 
 177        divA.style.padding="2px";
 178        divA.style.position="absolute";
 179        divA.style.top="0px";
 180        divA.style.right="0px";
 181        divA.style.bottom="0px";
 182        divA.style.left="0px";
 183        divA.style.backgroundColor=corMedia;
 184 
 185 
 186        //=========================================================
 187        // tabela
 188        //=========================================================
 189        divTitulo=document.createElement("div");
 190        divTitulo.style.backgroundColor=corEscura;
 191        //divTitulo.style.position               = "absolute"; 
 192        //divTitulo.style.top                    = "5px"; 
 193        //divTitulo.style.left                   = "6px";  
 194        divTitulo.style.margin="1px";
 195        divTitulo.style.padding="5px";
 196        divTitulo.style.border="1px solid "+corMuitoEscura;
 197        divTitulo.style.fontWeight="bold";
 198        divTitulo.style.color=corBranca;
 199        divTitulo.innerHTML=titulo;
 200        divA.appendChild(divTitulo);
 201 
 202 
 203        //=========================================================
 204        // campos
 205        //=========================================================
 206        var tableTitulos=document.createElement("table");
 207        //tableTitulos.style.position            ="absolute";  
 208        //tableTitulos.style.top                 = "32px"; 
 209        tableTitulos.style.paddingTop="0px";
 210        tableTitulos.style.width="100%";
 211        tableTitulos.cellSpacing="1px";
 212        tableTitulos.cellPadding="0px";
 213        rowA=tableTitulos.insertRow(0);
 214        var total=0;
 215        for(var i=0;i<titulos.length;i++)
 216        {
 217         colA=rowA.insertCell(i);
 218         colA.style.fontWeight="bold";
 219         colA.style.width=dimensoes[i];
 220         colA.style.padding="2px";
 221         colA.style.border="1px solid #336699";
 222         colA.style.backgroundColor=corClara;
 223         colA.innerHTML=titulos[i];
 224         colA.style.fontSize="10pt";
 225         total=i;
 226        }
 227        colA=rowA.insertCell(total+1);
 228        colA.style.backgroundColor=corClara;
 229        colA.style.border="1px solid "+corMuitoEscura;
 230        var img=document.createElement("IMG");
 231        img.src="barra.png";
 232        colA.appendChild(img);
 233 
 234 
 235        divA.appendChild(tableTitulos);
 236 
 237        //=========================================================
 238        // dados
 239        //=========================================================
 240        tableDados.cellSpacing="0px";
 241        tableDados.cellPadding="0px";
 242        tableDados.style.width="100%";
 243 
 244 
 245 
 246        tableDados.limpar=function()
 247        {
 248         TRs=this.getElementsByTagName('tr');
 249         for(var h=0;h<TRs.length;h++)
 250         {
 251          TDs=TRs[h].getElementsByTagName('td');
 252          for(var h2=0;h2<TDs.length;h2++)
 253          {
 254           if(TDs[0].innerHTML=="&nbsp;")
 255           {
 256            TDs[h2].style.backgroundColor=corMedia;
 257           }
 258           else //if( this.parentNode.getElementsByTagName('td')[0].innerHTML != "&nbsp;" )
 259           {
 260            TDs[h2].style.backgroundColor="#F0F8FF";
 261           }
 262          }
 263         }
 264        }
 265 
 266 
 267        for(var y=0;y<50;y++)
 268        {
 269         rowA=tableDados.insertRow(y);
 270         for(var i=0;i<titulos.length;i++)
 271         {
 272          colA=rowA.insertCell(i);
 273          colA.innerHTML="&nbsp;";
 274          colA.style.width=dimensoes[i];
 275          colA.style.padding="2px";
 276          colA.style.borderBottom="1px solid "+corMuitoEscura;
 277          colA.style.borderLeft="1px solid "+corMuitoEscura;
 278 
 279 
 280          //colA.style.backgroundColor = "#F0F8FF"  ; 
 281          colA.style.backgroundColor=corMedia;
 282          colA.style.fontSize="10pt";
 283 
 284          colA.onclick=function()
 285          {
 286           test1=this.parentNode.getElementsByTagName('td')[0];
 287           if(test1.innerHTML!="&nbsp;")
 288           {
 289            objsTitulos=tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');
 290 
 291            tableDados.limpar();
 292 
 293            arrayResp=new Array();
 294            //resp = "";
 295            for(var h=0;h<objsTitulos.length-1;h++)
 296            {
 297             //resp+="'"+objsTitulos[h].innerHTML +"':'"+ this.parentNode.getElementsByTagName('td')[h].innerHTML+"', "; 
 298             arrayResp.push(this.parentNode.getElementsByTagName('td')[h].innerHTML);
 299             if(this.parentNode.getElementsByTagName('td')[0].innerHTML!="&nbsp;")
 300             {
 301              this.parentNode.getElementsByTagName('td')[h].style.backgroundColor=corMuitoClara;
 302             }
 303            }
 304            //if(resp.length>0){ resp = resp.substring(0, resp.length-2)};
 305            tabelaSelecionar(arrayResp);
 306           }
 307          }
 308         }
 309        }
 310 
 311 
 312 
 313        tableDados.getIntColunName=function(str)
 314        {
 315         ssss=tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');
 316         for(var i=0;i<ssss.length;i++)
 317         {
 318          if(ssss[i]==str)
 319           return i;
 320         }
 321        }
 322 
 323 
 324        tableDados.removeAll=function()
 325        {
 326         for(var y=0;y<tableDados.getElementsByTagName('tr').length;y++)
 327         {
 328          for(var x=0;x<tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td').length;x++)
 329          {
 330           tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML="&nbsp;";
 331           tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].style.backgroundColor=corMedia;
 332          }
 333         }
 334        }
 335 
 336        tableDados.setData=function(dados)
 337        {
 338         for(var y=0;y<dados.length;y++)
 339         {
 340          for(var x=0;x<dados[y].length;x++)
 341          {
 342           tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML=dados[y][x];
 343          }
 344         }
 345         tableDados.limpar();
 346        }
 347 
 348        divScroll=document.createElement("div");
 349 
 350        divScroll.style.position="absolute";
 351        divScroll.style.border="1px solid "+corMuitoEscura;
 352 
 353        divScroll.style.top="57px";
 354        divScroll.style.right="3px";
 355        divScroll.style.bottom="31px";
 356        divScroll.style.left="3px";
 357        divScroll.style.overflow="auto";
 358 
 359        //divScroll.style.height         = "120px"  ; 
 360 
 361        divScroll.appendChild(tableDados);
 362        divA.appendChild(divScroll);
 363 
 364 
 365        //=========================================================
 366        // cursor
 367        //=========================================================
 368        var tableCursor=document.createElement("div");
 369        tableCursor.style.position="absolute";
 370        tableCursor.style.left="2px";
 371        tableCursor.style.right="2px";
 372        tableCursor.style.height="24px";
 373        tableCursor.style.bottom="2px";
 374        tableCursor.style.margin="1px";
 375        tableCursor.style.border="1px solid "+corMuitoEscura;
 376        tableCursor.style.backgroundColor=corEscura;
 377 
 378 
 379 
 380        // =================================== 
 381        txt_irParaPagina.type="text";
 382        txt_irParaPagina.lugar=tableCursor;
 383        txt_irParaPagina.id="btn_irParaPagina";
 384        txt_irParaPagina.style.position="absolute";
 385        txt_irParaPagina.style.left="2px";
 386        txt_irParaPagina.style.top="2px";
 387        txt_irParaPagina.style.width="57px";
 388        txt_irParaPagina.style.height="20px";
 389        txt_irParaPagina.style.border="1px solid "+corMuitoEscura;
 390        tableCursor.appendChild(txt_irParaPagina);
 391 
 392 
 393        // =================================== 
 394        botao=document.createElement("div");
 395        botao.lugar=tableCursor;
 396        botao.id="Ir";
 397        botao.style.position="absolute";
 398        botao.style.fontWeight="bold";
 399        botao.style.left="60px";
 400        botao.style.top="2px";
 401        botao.style.width="20px";
 402        botao.style.height="20px";
 403        //botao.style.backgroundColor = corEscura ; 
 404        //botao.style.border = "1px solid "+corMuitoEscura;
 405        botao.onclick=Ir_Click;
 406        var img=document.createElement("IMG");
 407        img.src="ir.png";
 408        botao.appendChild(img);
 409        tableCursor.appendChild(botao);
 410 
 411 
 412 
 413        // =================================== 
 414        botao=document.createElement("div");
 415        botao.lugar=tableCursor;
 416        botao.id="Primeira";
 417        botao.style.position="absolute";
 418        botao.style.fontWeight="bold";
 419        botao.style.right="350px";
 420        botao.style.top="2px";
 421        botao.style.width="20px";
 422        botao.style.height="20px";
 423        //botao.style.backgroundColor = corEscura ; 
 424        //botao.style.border = "1px solid "+corMuitoEscura;
 425        var img=document.createElement("IMG");
 426        img.src="primeira.png";
 427        botao.onclick=Primeira_Click;
 428        botao.appendChild(img);
 429        tableCursor.appendChild(botao);
 430 
 431 
 432        // =================================== 
 433        botao=document.createElement("div");
 434        botao.lugar=tableCursor;
 435        botao.id="Anterior";
 436        botao.style.position="absolute";
 437        botao.style.fontWeight="bold";
 438        botao.style.right="325px";
 439        botao.style.top="2px";
 440        botao.style.width="20px";
 441        botao.style.height="20px";
 442        //botao.style.backgroundColor = corEscura ; 
 443        //botao.style.border = "1px solid "+corMuitoEscura; 
 444        var img=document.createElement("IMG");
 445        img.src="anterior.png";
 446        botao.onclick=Anterior_Click;
 447        botao.appendChild(img);
 448        tableCursor.appendChild(botao);
 449 
 450 
 451        // =================================== 
 452        txt_PaginaAtual.type="text";
 453        txt_PaginaAtual.lugar=tableCursor;
 454        txt_PaginaAtual.disabled=true
 455        txt_PaginaAtual.id="pagina";
 456        txt_PaginaAtual.style.position="absolute";
 457        txt_PaginaAtual.style.right="265px";
 458        txt_PaginaAtual.style.top="2px";
 459        txt_PaginaAtual.style.width="57px";
 460        txt_PaginaAtual.style.height="20px";
 461        txt_PaginaAtual.style.border="1px solid "+corMuitoEscura;
 462        tableCursor.appendChild(txt_PaginaAtual);
 463 
 464 
 465        // =================================== 
 466        botao=document.createElement("div");
 467        botao.lugar=tableCursor;
 468        botao.id="Proxima";
 469        botao.style.position="absolute";
 470        botao.style.fontWeight="bold";
 471        botao.style.right="240px";
 472        botao.style.top="2px";
 473        botao.style.width="20px";
 474        botao.style.height="20px";
 475        //botao.style.backgroundColor = corEscura ; 
 476        //botao.style.border = "1px solid "+corMuitoEscura;
 477        var img=document.createElement("IMG");
 478        img.src="proxima.png";
 479        botao.onclick=Proxima_Click;
 480        botao.appendChild(img);
 481        tableCursor.appendChild(botao);
 482 
 483        // =================================== 
 484        botao=document.createElement("div");
 485        botao.lugar=tableCursor;
 486        botao.id="Ultima";
 487        botao.style.position="absolute";
 488        botao.style.fontWeight="bold";
 489        botao.style.right="215px";
 490        botao.style.top="2px";
 491        botao.style.width="20px";
 492        botao.style.height="20px";
 493        //botao.style.backgroundColor = corEscura ; 
 494        //botao.style.border = "1px solid "+corMuitoEscura;
 495        var img=document.createElement("IMG");
 496        img.src="ultima.png";
 497        botao.onclick=Ultima_Click;
 498        botao.appendChild(img);
 499        tableCursor.appendChild(botao);
 500 
 501        // =================================== 
 502        botao=document.createElement("div");
 503        botao.lugar=tableCursor;
 504        botao.innerHTML="Total de Páginas:";
 505        botao.style.position="absolute";
 506        botao.style.color=corBranca;
 507        //botao.style.fontWeight = "bold";
 508        botao.style.right="70px";
 509        botao.style.top="3px";
 510        botao.style.width="120px";
 511        botao.style.height="20px";
 512        tableCursor.appendChild(botao);
 513 
 514        // =================================== 
 515        txt_PaginasTotal.type="text";
 516        txt_PaginasTotal.lugar=tableCursor;
 517        txt_PaginasTotal.disabled=true
 518        txt_PaginasTotal.id="pagina";
 519        txt_PaginasTotal.style.position="absolute";
 520        txt_PaginasTotal.style.right="30px";
 521        txt_PaginasTotal.style.top="2px";
 522        txt_PaginasTotal.style.width="55px";
 523        txt_PaginasTotal.style.height="20px";
 524        txt_PaginasTotal.style.border="1px solid "+corMuitoEscura;
 525        tableCursor.appendChild(txt_PaginasTotal);
 526 
 527 
 528        divA.appendChild(tableCursor);
 529 
 530        return divA;
 531       }
 532 
 533 
 534 
 535 
 536       //=============================================================================================
 537       // Cria Modal Area
 538       //=============================================================================================
 539       CriatePanelCRUD=function()
 540       {
 541        // ===================================
 542        divBotoesCrud.style.position="absolute";
 543        divBotoesCrud.style.bottom="45px";
 544        divBotoesCrud.style.right="5px";
 545        divBotoesCrud.style.left="5px";
 546        divBotoesCrud.style.height="43px";
 547        divBotoesCrud.style.border="1px solid "+corMuitoEscura;
 548        document.body.appendChild(divBotoesCrud);
 549 
 550        // =================================== 
 551        botao=new Object();
 552        botoes.push(botao);
 553        botao.lugar=divBotoesCrud;
 554        botao.id="Buscar";
 555        botao.x="3px";
 556        botao.y="3px";
 557        botao.w="35px";
 558        botao.h="35px";
 559        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 560        botao.imagem="buscar2.png";
 561        botao.fotoEscura="buscar0.png";
 562        botao.backgroundColor=corEscura;
 563        botao.acao=Buscar_Click;
 564        loadButton(botao);
 565 
 566        // =================================== 
 567        botao=new Object();
 568        botoes.push(botao);
 569        botao.lugar=divBotoesCrud;
 570        botao.id="Inserir";
 571        botao.x="50px";
 572        botao.y="3px";
 573        botao.w="35px";
 574        botao.h="35px";
 575        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 576        botao.imagem="inserir.png";
 577        botao.fotoEscura="inserir0.png";
 578        botao.backgroundColor=corEscura;
 579        botao.acao=Inserir_Click;
 580        loadButton(botao);
 581 
 582        // =================================== 
 583        botao=new Object();
 584        botoes.push(botao);
 585        botao.lugar=divBotoesCrud;
 586        botao.id="Editar";
 587        botao.x="100px";
 588        botao.y="3px";
 589        botao.w="35px";
 590        botao.h="35px";
 591        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 592        botao.imagem="editar.png";
 593        botao.fotoEscura="editar0.png";
 594        botao.backgroundColor=corEscura;
 595        botao.acao=Editar_Click;
 596        loadButton(botao);
 597 
 598        // =================================== 
 599        botao=new Object();
 600        botoes.push(botao);
 601        botao.lugar=divBotoesCrud;
 602        botao.id="Excluir";
 603        botao.x="150px";
 604        botao.y="3px";
 605        botao.w="35px";
 606        botao.h="35px";
 607        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 608        botao.imagem="lixo.png";
 609        botao.fotoEscura="lixo0.png";
 610        botao.backgroundColor=corEscura;
 611        botao.acao=Excluir_Click;
 612        loadButton(botao);
 613 
 614        // =================================== 
 615        botao=new Object();
 616        botoes.push(botao);
 617        botao.lugar=divBotoesCrud;
 618        botao.id="Localizar";
 619        botao.x="200px";
 620        botao.y="3px";
 621        botao.w="35px";
 622        botao.h="35px";
 623        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 624        botao.imagem="localizar.png";
 625        botao.fotoEscura="localizar0.png";
 626        botao.backgroundColor=corEscura;
 627        botao.acao=Localizar_Click;
 628        loadButton(botao);
 629 
 630        // =================================== 
 631        botao=new Object();
 632        botoes.push(botao);
 633        botao.lugar=divBotoesCrud;
 634        botao.id="Salvar";
 635        botao.x="250px";
 636        botao.y="3px";
 637        botao.w="35px";
 638        botao.h="35px";
 639        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 640        botao.imagem="salvar.png";
 641        botao.fotoEscura="salvar0.png";
 642        botao.backgroundColor=corEscura;
 643        botao.acao=Salvar_Click;
 644        loadButton(botao);
 645 
 646        // =================================== 
 647        botao=new Object();
 648        botoes.push(botao);
 649        botao.lugar=divBotoesCrud;
 650        botao.id="Limpar";
 651        botao.x="300px";
 652        botao.y="3px";
 653        botao.w="35px";
 654        botao.h="35px";
 655        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 656        botao.imagem="limpar.png";
 657        botao.fotoEscura="limpar0.png";
 658        botao.backgroundColor=corEscura;
 659        botao.acao=Limpar_Click;
 660        loadButton(botao);
 661 
 662        // =================================== 
 663        botao=new Object();
 664        botoes.push(botao);
 665        botao.lugar=divBotoesCrud;
 666        botao.id="Sair";
 667        botao.x="350px";
 668        botao.y="3px";
 669        botao.w="35px";
 670        botao.h="35px";
 671        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 672        botao.imagem="sair.png";
 673        botao.fotoEscura="sair0.png";
 674        botao.backgroundColor=corEscura;
 675        botao.acao=Sair_Click;
 676        loadButton(botao);
 677 
 678        // =================================== 
 679        botao=new Object();
 680        botoes.push(botao);
 681        botao.lugar=divBotoesCrud;
 682        botao.id="Cancelar";
 683        botao.x="400px";
 684        botao.y="3px";
 685        botao.w="35px";
 686        botao.h="35px";
 687        botao.visibilidadeModo=arrayCrudButtonsVisibility[botoes.length-1];
 688        botao.imagem="cancelar.png";
 689        botao.fotoEscura="cancelar0.png";
 690        botao.backgroundColor=corEscura;
 691        botao.acao=Cancelar_Click;
 692        loadButton(botao);
 693 
 694       }
 695 
 696 
 697       //=============================================================================================
 698       // Cria Modal Espera
 699       //=============================================================================================
 700       CriateModalEspera=function()
 701       {
 702        // =======================================================
 703        divModalEspera.id="divModalEspera";
 704        divModalEspera.style.position="absolute";
 705        divModalEspera.style.bottom="0px";
 706        divModalEspera.style.top="0px";
 707        divModalEspera.style.right="0px";
 708        divModalEspera.style.left="0px";
 709        divModalEspera.style.border="1px solid "+corMuitoEscura;
 710        divModalEspera.style.backgroundImage="url(alpha.png)";
 711        divModalEspera.style.backgroundRepeat="repeat";
 712        divModalEspera.style.visibility="visible";
 713        divModalEspera.Close=function()
 714        {
 715         divModalEspera.style.visibility="hidden";
 716        }
 717        divModalEspera.Show=function()
 718        {
 719         divModalEspera.style.visibility="visible";
 720        }
 721        document.body.appendChild(divModalEspera);
 722       }
 723 
 724 
 725       //=============================================================================================
 726       // Cria Modal Mensagem
 727       //=============================================================================================
 728       CriateModalMensagem=function()
 729       {
 730        // =======================================================
 731        var messagemText=document.createElement("div");
 732        var messagem=document.createElement("div");
 733        messagem.appendChild(messagemText);
 734        divModalMensagem.id="divModalMensagem";
 735        divModalMensagem.style.position="absolute";
 736        divModalMensagem.style.bottom="0px";
 737        divModalMensagem.style.top="0px";
 738        divModalMensagem.style.right="0px";
 739        divModalMensagem.style.left="0px";
 740        divModalMensagem.style.border="1px solid "+corMuitoEscura;
 741        divModalMensagem.style.backgroundImage="url(alpha.png)";
 742        divModalMensagem.style.backgroundRepeat="repeat";
 743        divModalMensagem.style.visibility="hidden";
 744        divModalMensagem.Close=function()
 745        {
 746         divModalMensagem.style.visibility="hidden";
 747        }
 748        divModalMensagem.Show=function()
 749        {
 750         divModalMensagem.style.visibility="visible";
 751        }
 752        divModalMensagem.setMessage=function(str,tipo)
 753        {
 754         messagemText.innerHTML=str;
 755        }
 756 
 757        // =======================================================
 758        messagem.style.position="absolute";
 759        messagem.style.bottom="100px";
 760        messagem.style.top="100px";
 761        messagem.style.right="100px";
 762        messagem.style.left="100px";
 763        messagem.style.padding="10px";
 764        messagem.style.maggin="10px";
 765        messagem.style.border="1px solid "+corMuitoEscura;
 766        messagem.style.backgroundImage="url(alpha.png)";
 767        messagem.style.backgroundRepeat="repeat";
 768 
 769        //==============================================
 770        btn=document.createElement("input");
 771        btn.type="button";
 772        btn.value="Ok";
 773        btn.style.position="absolute";
 774        btn.style.bottom="5px";
 775        btn.style.right="5px";
 776        btn.onclick=function()
 777        {
 778         divModalMensagem.Close();
 779        }
 780        messagem.appendChild(btn);
 781        divModalMensagem.appendChild(messagem);
 782        document.body.appendChild(divModalMensagem);
 783       }
 784 
 785 
 786 
 787 
 788       //=============================================================================================
 789       // Load Page
 790       //=============================================================================================
 791       loadPage=function()
 792       {
 793        document.body.style.backgroundColor=corClara;
 794 
 795        // =======================================================
 796        divTop.style.position="absolute";
 797        divTop.style.padding="5px";
 798        divTop.style.top="5px";
 799        divTop.style.right="5px";
 800        divTop.style.left="5px";
 801        divTop.style.height="60px";
 802        divTop.style.border="1px solid "+corMuitoEscura;
 803        document.body.appendChild(divTop);
 804        divTop.innerHTML="Ola";
 805 
 806 
 807 
 808        // =======================================================
 809        divRodape.style.position="absolute";
 810        divRodape.style.bottom="2px";
 811        divRodape.style.right="5px";
 812        divRodape.style.left="5px";
 813        divRodape.style.height="40px";
 814        divRodape.style.border="1px solid "+corMuitoEscura;
 815        document.body.appendChild(divRodape);
 816        // =================================== 
 817        botao=new Object();
 818        botao.lugar=divRodape;
 819        botao.id="testeModal";
 820        botao.x="3px";
 821        botao.y="3px";
 822        botao.w="35px";
 823        botao.h="35px";
 824        botao.imagem="buscar2.png";
 825        botao.fotoEscura="buscar0.png";
 826        botao.backgroundColor=corEscura;
 827        botao.acao=testeModal_Click;
 828        loadButton(botao);
 829 
 830 
 831 
 832        // =======================================================
 833        divCentro.id="formulario";
 834        divCentro.style.position="absolute";
 835        divCentro.style.top="80px";
 836        divCentro.style.rigth="5px";
 837        divCentro.style.bottom="92px";
 838        divCentro.style.left="5px";
 839        divCentro.style.width="560px";
 840        divCentro.style.padding="5px";
 841        divCentro.style.border="1px solid "+corMuitoEscura;
 842        divCentro.addFormularios=function(formularios)
 843        {
 844         for(var i=0;i<formularios.length;i++)
 845         {
 846          ob=document.createElement("div");
 847          ob.id=formularios[i].id
 848          ob.style.position="absolute";
 849          ob.style.top=formularios[i].top;
 850          ob.style.bottom=formularios[i].bottom;
 851          ob.style.left=formularios[i].left;
 852          ob.style.right=formularios[i].right;
 853 
 854 
 855          for(var j=0;j<formularios[i].model.length;j++)
 856          {
 857           if(formularios[i].model[j].type=="div")
 858           {
 859            cam=document.createElement("div");
 860            cam.innerHTML=formularios[i].model[j].value;
 861           }
 862           else if(formularios[i].model[j].type=="checkbox")
 863           {
 864            cam=document.createElement("input");
 865            cam.type="checkbox";
 866            cam.value=formularios[i].model[j].value;
 867           }
 868           else if(formularios[i].model[j].type=="radio")
 869           {
 870            cam=document.createElement("input");
 871            cam.type="radio";
 872            cam.name=formularios[i].model[j].name;
 873            cam.value=formularios[i].model[j].value;
 874           }
 875           else if(formularios[i].model[j].type=="combobox")
 876           {
 877            cam=document.createElement("select");
 878 
 879            cam.value=formularios[i].model[j].value;
 880           }
 881           else if(formularios[i].model[j].type=="text")
 882           {
 883            cam=document.createElement("input");
 884            cam.value=formularios[i].model[j].value;
 885           }
 886           else if(formularios[i].model[j].type=="password")
 887           {
 888            cam=document.createElement("input");
 889            cam.type="password";
 890            cam.value=formularios[i].model[j].value;
 891           }
 892           else if(formularios[i].model[j].type=="titulo")
 893           {
 894            cam=document.createElement("div");
 895 
 896            cam.style.position="absolute";
 897            cam.style.margin="3px";
 898            cam.style.padding="2px";
 899            cam.style.left="0px";
 900            cam.style.right="0px";
 901            cam.style.top=formularios[i].model[j].y;
 902            cam.style.height=formularios[i].model[j].h;
 903            cam.style.backgroundColor=corEscura;
 904            cam.style.border="1px solid "+corMuitoEscura;
 905            cam.style.color=corBranca;
 906            cam.style.fontWeight="bold";
 907            cam.innerHTML=formularios[i].model[j].value;
 908           }
 909           cam.id=formularios[i].model[j].id
 910           cam.style.position="absolute";
 911           cam.style.top=formularios[i].model[j].y;
 912           cam.style.left=formularios[i].model[j].x;
 913           cam.style.width=formularios[i].model[j].w;
 914           cam.style.height=formularios[i].model[j].h;
 915           //ob.style.border     = "1px solid "+corMuitoEscura; 
 916           ob.appendChild(cam);
 917          }
 918 
 919          //ob.style.border      = "1px solid "+corMuitoEscura; 
 920          divCentro.appendChild(ob);
 921 
 922         }
 923        }
 924        document.body.appendChild(divCentro);
 925 
 926        // =======================================================
 927        divTabela.id="tabela";
 928        divTabela.style.position="absolute";
 929        divTabela.style.top="80px";
 930        divTabela.style.left="580px";
 931        divTabela.style.right="5px";
 932        divTabela.style.bottom="92px";
 933        divTabela.style.padding="0px";
 934        //divTabela.style.width  = "100%"; 
 935        divTabela.style.border="1px solid "+corMuitoEscura;
 936        document.body.appendChild(divTabela);
 937 
 938        CriatePanelCRUD();
 939        CriateModalMensagem();
 940        CriateModalEspera();
 941        load();
 942        divModalEspera.Close();
 943        setmodo();
 944       }
 945 
 946 
 947 
 948       //=============================================================================================
 949       // Criando Formulário do lado direito e estrutura da tabela do lado esquerdo
 950       //=============================================================================================
 951       load=function()
 952       {
 953        Formularios=new Array();
 954        Formularios[0]=new Object();
 955        Formularios[0].id="Pessoa";
 956        Formularios[0].top="0px";
 957        Formularios[0].bottom="0px";
 958        Formularios[0].left="0px";
 959        Formularios[0].right="0px";
 960        Formularios[0].height="50px";
 961 
 962 
 963        var objC=new Object();
 964        objC.type="titulo";
 965        objC.left="0px";
 966        objC.right="0px";
 967        objC.y="0px";
 968        objC.h="20px";
 969        objC.value="Pessoas";
 970 
 971        var objA=new Object();
 972        objA.id="nome";
 973        objA.type="div";
 974        objA.x="5px";
 975        objA.y="35px";
 976        objA.w="65px";
 977        objA.h="20px";
 978        objA.value="5px";
 979 
 980        var objB=new Object();
 981        objB.id="nome";
 982        objB.type="text";
 983        objB.x="85px";
 984        objB.y="35px";
 985        objB.w="65px";
 986        objB.h="20px";
 987        objB.value="5px";
 988 
 989        var objD=new Object();
 990        objD.id="nome";
 991        objD.type="combobox";
 992        objD.x="235px";
 993        objD.y="35px";
 994        objD.w="65px";
 995        objD.h="20px";
 996        objD.value="5px";
 997 
 998        var objE=new Object();
 999        objE.id="nome";
1000        objE.type="checkbox";
1001        objE.x="295px";
1002        objE.y="35px";
1003        objE.w="25px";
1004        objE.h="20px";
1005        objE.value="5px";
1006 
1007        var objF=new Object();
1008        objF.nome="nome";
1009        objF.type="radio";
1010        objF.x="325px";
1011        objF.y="35px";
1012        objF.w="25px";
1013        objF.h="20px";
1014        objF.value="opaaa w";
1015 
1016        var objG=new Object();
1017        objG.nome="nome";
1018        objG.type="radio";
1019        objG.x="325px";
1020        objG.y="55px";
1021        objG.w="25px";
1022        objG.h="20px";
1023        objG.value="opaaa e";
1024 
1025        var objG=new Object();
1026        objG.nome="nome";
1027        objG.type="password";
1028        objG.x="125px";
1029        objG.y="55px";
1030        objG.w="85px";
1031        objG.h="20px";
1032        objG.value="opaaa e";
1033 
1034        Formularios[0].model=[objC,objA,objB,objD,objE,objF,objG];
1035 
1036 
1037 
1038        Formularios[1]=new Object();
1039        Formularios[1].id="Pessoa";
1040        Formularios[1].top="80px";
1041        Formularios[1].bottom="0px";
1042        Formularios[1].left="0px";
1043        Formularios[1].right="0px";
1044 
1045        var objC=new Object();
1046        objC.type="titulo";
1047        objC.left="0px";
1048        objC.right="0px";
1049        objC.y="0px";
1050        objC.h="20px";
1051        objC.value="Pessoas";
1052 
1053        var objA=new Object();
1054        objA.id="nome";
1055        objA.type="div";
1056        objA.x="5px";
1057        objA.y="35px";
1058        objA.w="65px";
1059        objA.h="20px";
1060        objA.value="5px";
1061 
1062        var objB=new Object();
1063        objB.id="nome";
1064        objB.type="text";
1065        objB.x="85px";
1066        objB.y="35px";
1067        objB.w="65px";
1068        objB.h="20px";
1069        objB.value="5px";
1070 
1071        var objD=new Object();
1072        objD.id="nome";
1073        objD.type="combobox";
1074        objD.x="235px";
1075        objD.y="35px";
1076        objD.w="65px";
1077        objD.h="20px";
1078        objD.value="5px";
1079 
1080        var objE=new Object();
1081        objE.id="nome";
1082        objE.type="checkbox";
1083        objE.x="285px";
1084        objE.y="35px";
1085        objE.w="65px";
1086        objE.h="20px";
1087        objE.value="5px";
1088        Formularios[1].model=[objC,objA,objB,objD,objE];
1089 
1090        divCentro.addFormularios(Formularios);
1091 
1092        divTabela.appendChild(createTable("Nome tabela","table_id",["id","nome"],["10%","90%"]));
1093 
1094        var arrayDatateste=new Array();
1095        arrayDatateste[0]=new Array();
1096        arrayDatateste[0][0]="1";
1097        arrayDatateste[0][1]="Luiz";
1098        arrayDatateste[1]=new Array();
1099        arrayDatateste[1][0]="2";
1100        arrayDatateste[1][1]="Augusto";
1101        arrayDatateste[2]=new Array();
1102        arrayDatateste[2][0]="3";
1103        arrayDatateste[2][1]="Sofia";
1104        arrayDatateste[3]=new Array();
1105        arrayDatateste[3][0]="4";
1106        arrayDatateste[3][1]="Oliveira";
1107 
1108        tableDados.setData(arrayDatateste);
1109 
1110        //tableDados.removeAll();
1111       }
1112 
1113 
1114 
1115 
1116       //=============================================================================================
1117       // Atribuindo funções aos botões de CRUD
1118       //=============================================================================================
1119       Buscar_Click=function()
1120       {
1121        modo_edicao="Buscar";
1122        setmodo();
1123       }
1124       Inserir_Click=function()
1125       {
1126        modo_edicao="Inserir";
1127        setmodo();
1128       }
1129       Editar_Click=function()
1130       {
1131        modo_edicao="Editar";
1132        setmodo();
1133       }
1134       Excluir_Click=function()
1135       {
1136        modo_edicao="Selecionar";
1137        setmodo();
1138       }
1139       Localizar_Click=function()
1140       {
1141        modo_edicao="Selecionar";
1142        setmodo();
1143       }
1144       Salvar_Click=function()
1145       {
1146        modo_edicao="Selecionar";
1147        setmodo();
1148       }
1149       Limpar_Click=function()
1150       {
1151        //modo_edicao = "Selecionar";
1152        //setmodo();
1153       }
1154       Sair_Click=function()
1155       {
1156        modo_edicao="Selecionar";
1157        setmodo();
1158       }
1159       Cancelar_Click=function()
1160       {
1161        modo_edicao="Selecionar";
1162        setmodo();
1163       }
1164 
1165 
1166       //=============================================================================================
1167       // Outros botões de exemplo
1168       //=============================================================================================
1169       Ir_Click=function()
1170       {
1171        divModalMensagem.setMessage("Ir","sf");
1172        divModalMensagem.Show();
1173        // txt_irParaPagina.value 
1174        // txt_PaginaAtual.value 
1175        // txt_PaginasTotal.value  
1176       }
1177       Primeira_Click=function()
1178       {
1179        divModalMensagem.setMessage("Primeira","sf");
1180        divModalMensagem.Show();
1181        // txt_irParaPagina.value 
1182        // txt_PaginaAtual.value 
1183        // txt_PaginasTotal.value  
1184       }
1185       Anterior_Click=function()
1186       {
1187        divModalMensagem.setMessage("Anterior","sf");
1188        divModalMensagem.Show();
1189        // txt_irParaPagina.value 
1190        // txt_PaginaAtual.value 
1191        // txt_PaginasTotal.value  
1192       }
1193       Proxima_Click=function()
1194       {
1195        divModalMensagem.setMessage("Proxima","sf");
1196        divModalMensagem.Show();
1197        // txt_irParaPagina.value 
1198        // txt_PaginaAtual.value 
1199        // txt_PaginasTotal.value  
1200       }
1201       Ultima_Click=function()
1202       {
1203        divModalMensagem.setMessage("Ultimo","sf");
1204        divModalMensagem.Show();
1205        // txt_irParaPagina.value 
1206        // txt_PaginaAtual.value 
1207        // txt_PaginasTotal.value  
1208       }
1209 
1210 
1211       testeModal_Click=function()
1212       {
1213        divModalMensagem.setMessage("meu texto de teste","sf");
1214        divModalMensagem.Show();
1215        // txt_irParaPagina.value 
1216        // txt_PaginaAtual.value 
1217        // txt_PaginasTotal.value  
1218       }
1219 
1220       tabelaSelecionar=function(str)
1221       {
1222        divTop.innerHTML=str;
1223        // txt_irParaPagina.value 
1224        // txt_PaginaAtual.value 
1225        // txt_PaginasTotal.value    
1226 
1227        //divModalMensagem.setMessage( str, "sf" ); 
1228        //divModalMensagem.Show(); 
1229 
1230        //alert(str); 
1231       }
1232 
1233 
1234 
1235  </script>
1236  <body style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt;" onload="loadPage()"  >
1237  </body>
1238 
1239 </html>
1240 
1241 
1242 
Imagens:



























Nenhum comentário: