1 package Arquivos; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 import java.io.FileOutputStream; 6 import java.io.IOException; 7 import java.io.ObjectInputStream; 8 import java.io.ObjectOutputStream; 9 import java.util.List; 10 import java.util.ArrayList; 11 12 13 // Referencia: 14 // http://www.javasimples.com.br/core-java/serializacao-transformando-objetos-em-bytes 15 public class Crud 16 { 17 18 public void serializar(List<String> filmes, String arquivo) 19 { 20 FileOutputStream arq = null; 21 ObjectOutputStream out = null; 22 try 23 { 24 //arquivo no qual os dados vao ser gravados 25 arq = new FileOutputStream(arquivo); 26 27 //objeto que vai escrever os dados 28 out = new ObjectOutputStream(arq); 29 30 //escreve todos os dados 31 out.writeObject(filmes); 32 } 33 catch (IOException ex) 34 { 35 ex.printStackTrace(); 36 } 37 finally 38 { 39 try 40 { 41 arq.close(); 42 out.close(); 43 } 44 catch (IOException ex) 45 { 46 ex.printStackTrace(); 47 } 48 } 49 } 50 51 public List<String> deserializar(String arquivo) 52 { 53 FileInputStream arqLeitura = null; 54 ObjectInputStream in = null; 55 List<String> lista = null; 56 try 57 { 58 File destinationFile = new File(arquivo); 59 if (!destinationFile.exists()) 60 { 61 serializar(new ArrayList<String>(), arquivo); 62 } 63 64 //arquivo onde estao os dados serializados 65 arqLeitura = new FileInputStream(arquivo); 66 67 //objeto que vai ler os dados do arquivo 68 in = new ObjectInputStream(arqLeitura); 69 70 //recupera os dados 71 lista = (List<String>) in.readObject(); 72 } 73 catch (ClassNotFoundException ex) 74 { 75 ex.printStackTrace(); 76 } 77 catch (IOException ex) 78 { 79 ex.printStackTrace(); 80 } 81 finally 82 { 83 try 84 { 85 arqLeitura.close(); 86 in.close(); 87 } 88 catch (IOException ex) 89 { 90 ex.printStackTrace(); 91 } 92 } 93 return lista; 94 } 95 } 96
sexta-feira, 7 de novembro de 2014
Java: Serializar e deserializar lista de objetos, salva-lo em arquivo e recuperá-lo em lista de objetos novamente
Esta classe tem me ajudado muito desde o dia em que foi criada. Já reaproveitei pelo menos 5 vezes.
Adicionar fragmentos de uma imagem como Style em uma página HTML
Imagem que será usada no exemplo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .frame 6 { 7 position: relative; 8 } 9 10 .frame_1_1 11 { 12 background: url('Frame.png') -0px -0px; 13 position: absolute; 14 background-repeat: no-repeat; 15 width: 5px; 16 height: 5px; 17 top: 0px; 18 left: 0px; 19 } 20 21 .frame_1_2 22 { 23 background: url('Frame.png') -5px -0px; 24 position: absolute; 25 background-repeat: no-repeat; 26 width: 2px; 27 height: 5px; 28 top: 0px; 29 left: 5px; 30 } 31 32 .frame_1_3 33 { 34 background: url('Frame.png') -7px -0px; 35 position: absolute; 36 background-repeat: repeat-y; 37 width: 19px; 38 height: 5px; 39 top: 0px; 40 left: 7px; 41 } 42 43 .frame_1_4 44 { 45 background: url('Frame.png') -26px -0px; 46 position: absolute; 47 background-repeat: no-repeat; 48 width: 2px; 49 height: 5px; 50 top: 0px; 51 left: 26px; 52 } 53 54 .frame_1_5 55 { 56 background: url('Frame.png') -28px -0px; 57 position: absolute; 58 background-repeat: no-repeat; 59 width: 5px; 60 height: 5px; 61 top: 0px; 62 left: 28px; 63 } 64 65 .frame_2_1 66 { 67 background: url('Frame.png') -0px -5px; 68 position: absolute; 69 background-repeat: no-repeat; 70 width: 5px; 71 height: 26px; 72 top: 5px; 73 left: 0px; 74 } 75 76 .frame_2_2 77 { 78 background: url('Frame.png') -5px -5px; 79 position: absolute; 80 background-repeat: no-repeat; 81 width: 2px; 82 height: 26px; 83 top: 5px; 84 left: 5px; 85 } 86 87 .frame_2_3 88 { 89 background: url('Frame.png') -7px -5px; 90 position: absolute; 91 background-repeat: repeat-y; 92 width: 19px; 93 height: 26px; 94 top: 5px; 95 left: 7px; 96 } 97 98 .frame_2_4 99 { 100 background: url('Frame.png') -26px -5px; 101 position: absolute; 102 background-repeat: no-repeat; 103 width: 2px; 104 height: 26px; 105 top: 5px; 106 left: 26px; 107 } 108 109 .frame_2_5 110 { 111 background: url('Frame.png') -28px -5px; 112 position: absolute; 113 background-repeat: no-repeat; 114 width: 5px; 115 height: 26px; 116 top: 5px; 117 left: 28px; 118 } 119 120 .frame_3_1 121 { 122 background: url('Frame.png') -0px -31px; 123 position: absolute; 124 background-repeat: no-repeat; 125 width: 5px; 126 height: 2px; 127 top: 31px; 128 left: 0px; 129 } 130 131 .frame_3_2 132 { 133 background: url('Frame.png') -5px -31px; 134 position: absolute; 135 background-repeat: no-repeat; 136 width: 2px; 137 height: 2px; 138 top: 31px; 139 left: 5px; 140 } 141 142 .frame_3_3 143 { 144 background: url('Frame.png') -7px -31px; 145 position: absolute; 146 background-repeat: repeat-y; 147 width: 19px; 148 height: 2px; 149 top: 31px; 150 left: 7px; 151 } 152 153 .frame_3_4 154 { 155 background: url('Frame.png') -26px -31px; 156 position: absolute; 157 background-repeat: no-repeat; 158 width: 2px; 159 height: 2px; 160 top: 31px; 161 left: 26px; 162 } 163 164 .frame_3_5 165 { 166 background: url('Frame.png') -28px -31px; 167 position: absolute; 168 background-repeat: no-repeat; 169 width: 5px; 170 height: 2px; 171 top: 31px; 172 left: 28px; 173 } 174 175 .frame_4_1 176 { 177 background: url('Frame.png') -0px -33px; 178 position: absolute; 179 background-repeat: repeat-x; 180 width: 5px; 181 height: 33px; 182 top: 33px; 183 left: 0px; 184 } 185 186 .frame_4_2 187 { 188 background: url('Frame.png') -5px -33px; 189 position: absolute; 190 background-repeat: repeat-x; 191 width: 2px; 192 height: 33px; 193 top: 33px; 194 left: 5px; 195 } 196 197 .frame_4_3 198 { 199 background: url('Frame.png') -7px -33px; 200 position: absolute; 201 background-repeat: repeat; 202 width: 19px; 203 height: 33px; 204 top: 33px; 205 left: 7px; 206 } 207 208 .frame_4_4 209 { 210 background: url('Frame.png') -26px -33px; 211 position: absolute; 212 background-repeat: repeat-x; 213 width: 2px; 214 height: 33px; 215 top: 33px; 216 left: 26px; 217 } 218 219 .frame_4_5 220 { 221 background: url('Frame.png') -28px -33px; 222 position: absolute; 223 background-repeat: repeat-x; 224 width: 5px; 225 height: 33px; 226 top: 33px; 227 left: 28px; 228 } 229 230 .frame_5_1 231 { 232 background: url('Frame.png') -0px -66px; 233 position: absolute; 234 background-repeat: no-repeat; 235 width: 5px; 236 height: 2px; 237 top: 66px; 238 left: 0px; 239 } 240 241 .frame_5_2 242 { 243 background: url('Frame.png') -5px -66px; 244 position: absolute; 245 background-repeat: no-repeat; 246 width: 2px; 247 height: 2px; 248 top: 66px; 249 left: 5px; 250 } 251 252 .frame_5_3 253 { 254 background: url('Frame.png') -7px -66px; 255 position: absolute; 256 background-repeat: repeat-y; 257 width: 19px; 258 height: 2px; 259 top: 66px; 260 left: 7px; 261 } 262 263 .frame_5_4 264 { 265 background: url('Frame.png') -26px -66px; 266 position: absolute; 267 background-repeat: no-repeat; 268 width: 2px; 269 height: 2px; 270 top: 66px; 271 left: 26px; 272 } 273 274 .frame_5_5 275 { 276 background: url('Frame.png') -28px -66px; 277 position: absolute; 278 background-repeat: no-repeat; 279 width: 5px; 280 height: 2px; 281 top: 66px; 282 left: 28px; 283 } 284 285 .frame_6_1 286 { 287 background: url('Frame.png') -0px -68px; 288 position: absolute; 289 background-repeat: no-repeat; 290 width: 5px; 291 height: 5px; 292 top: 68px; 293 left: 0px; 294 } 295 296 .frame_6_2 297 { 298 background: url('Frame.png') -5px -68px; 299 position: absolute; 300 background-repeat: no-repeat; 301 width: 2px; 302 height: 5px; 303 top: 68px; 304 left: 5px; 305 } 306 307 .frame_6_3 308 { 309 background: url('Frame.png') -7px -68px; 310 position: absolute; 311 background-repeat: repeat-y; 312 width: 19px; 313 height: 5px; 314 top: 68px; 315 left: 7px; 316 } 317 318 .frame_6_4 319 { 320 background: url('Frame.png') -26px -68px; 321 position: absolute; 322 background-repeat: no-repeat; 323 width: 2px; 324 height: 5px; 325 top: 68px; 326 left: 26px; 327 } 328 329 .frame_6_5 330 { 331 background: url('Frame.png') -28px -68px; 332 position: absolute; 333 background-repeat: no-repeat; 334 width: 5px; 335 height: 5px; 336 top: 68px; 337 left: 28px; 338 } 339 </style> 340 </head> 341 <body> 342 <div class='frame'> 343 <div class='frame_1_1'></div> 344 <div class='frame_1_2'></div> 345 <div class='frame_1_3'></div> 346 <div class='frame_1_4'></div> 347 <div class='frame_1_5'></div> 348 <div class='frame_2_1'></div> 349 <div class='frame_2_2'></div> 350 <div class='frame_2_3'></div> 351 <div class='frame_2_4'></div> 352 <div class='frame_2_5'></div> 353 <div class='frame_3_1'></div> 354 <div class='frame_3_2'></div> 355 <div class='frame_3_3'></div> 356 <div class='frame_3_4'></div> 357 <div class='frame_3_5'></div> 358 <div class='frame_4_1'></div> 359 <div class='frame_4_2'></div> 360 <div class='frame_4_3'></div> 361 <div class='frame_4_4'></div> 362 <div class='frame_4_5'></div> 363 <div class='frame_5_1'></div> 364 <div class='frame_5_2'></div> 365 <div class='frame_5_3'></div> 366 <div class='frame_5_4'></div> 367 <div class='frame_5_5'></div> 368 <div class='frame_6_1'></div> 369 <div class='frame_6_2'></div> 370 <div class='frame_6_3'></div> 371 <div class='frame_6_4'></div> 372 <div class='frame_6_5'></div> 373 </div> 374 </body> 375 </html> 376
Como adicionar Checkboxes de 3 estados em uma arvore em JavaScript
O segredo está no conceito de nó e arvores:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html lang="pt"><head> 3 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Exemplo de abrir/fechar elemento usando Javascript e CSS</title> 6 7 <style type="text/css" > 8 9 .link { 10 color: #809823; 11 text-decoration: none; 12 display:inline; 13 font-weight: bold; 14 } 15 .link :hover { 16 background: #000000; 17 cursor: pointer; 18 color:#000; 19 text-decoration: none; 20 font-weight: bold; 21 } 22 23 body { 24 background: #f6f9ea ; 25 color: #000; 26 margin: 20px; 27 text-align: left; 28 padding: 0; 29 font-size: 80%; 30 line-height: 1.6em; 31 font-family: "Lucida Grande", Helvetica, Arial, sans-serif; 32 } 33 34 a, a:link, a:visited {color: #809823;} 35 a:hover { 36 background: #ccea8d; 37 color: #000; 38 text-decoration: none; 39 } 40 a:active { 41 background: #c3e933; 42 color: #fff; 43 text-decoration: none; 44 } 45 46 code {color: #c63;} 47 code strong {color: #930;} 48 49 em {font-style: italic;} 50 strong {font-weight: bold;} 51 52 .highlight { 53 background: #fffddd; 54 } 55 56 h1 { 57 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; 58 letter-spacing: -1px; 59 font-weight: normal; 60 font-size: 1.5em; 61 color: #525252; 62 } 63 64 .erro { 65 padding: 3px 0 3px 25px; 66 font-weight: bold; 67 color: #444; 68 } 69 70 # ['a','b','c','d'] { 71 margin-top:100px; 72 border-top:1px solid #ccc; 73 font-size:0.9em; 74 height:3em; 75 } 76 77 #footer p { 78 margin:0; 79 line-height: 3em; 80 padding-left:120px; 81 } 82 </style> 83 84 <script type="text/javascript"> 85 86 87 88 89 90 // ******************************************************************************* 91 // ******************************************************************************* 92 // ******************************************************************************* 93 // nos 94 function Sofia_Nos(contrutor) 95 { 96 this.IdNome=""; 97 this.NoPai=null; 98 this.NosFilhos=[]; 99 100 this.typeof=null; 101 this.text=""; 102 this.value=null; 103 104 this.isShowing=null; 105 106 107 this.Add=function(nos) 108 { 109 if(!this.IdNome) 110 throw new Error("this.IdNome is null"); 111 if(nos&&nos.length) 112 { 113 for(var i=0;i<nos.length;i++) 114 { 115 nos[i].NoPai=this 116 this.NosFilhos.push(nos[i]) 117 } 118 } 119 else 120 { 121 nos.NoPai=this 122 this.NosFilhos.push(nos) 123 } 124 } 125 126 127 128 this.Find=function(IdNome) 129 { 130 var retorno=null 131 for(i=0;i<this.NosFilhos.length;i++) 132 { 133 if(this.NosFilhos[i].IdNome==IdNome) 134 { 135 retorno=this.NosFilhos[i] 136 break 137 } 138 } 139 if(retorno==null) 140 for(i=0;i<this.NosFilhos.length;i++) 141 { 142 if(this.NosFilhos[i].NosFilhos.length>0) 143 { 144 retorno=this.NosFilhos[i].Find(IdNome) 145 break 146 } 147 } 148 return retorno; 149 150 } 151 this.Remove=function(IdNome) 152 { 153 var excluir=this.Find(IdNome) 154 this.Find(excluir.NoPai). 155 splice(excluir) 156 } 157 158 159 // ====================================================================================== 160 // metodos para pegar valores 161 // ====================================================================================== 162 // formatos: this.IdNome:this.valor, this.IdNome, this.arraysCompareds(), MyChoice 163 this.formaresposta=function(){ 164 return this.IdNome; 165 } 166 // ao chamar getValues(valido) na raiz deste nó informa ao metodo se pode ou nao pegar o valor deste no. 167 this.allowToGetAnswer=true; 168 169 this.functionToValidate=true; 170 171 this.getIdsTrues=function(pegardequalquerforma) 172 { 173 if(this.allowToGetAnswer||pegardequalquerforma) 174 { 175 var retorno=[] 176 var qt=this.NosFilhos.length; 177 if(qt>0) 178 { 179 for(var i=0;i<qt;i++) 180 { 181 var res=this.NosFilhos[i].getIdsTrues(pegardequalquerforma) 182 for(var v=0;v<res.length;v++) 183 retorno.push(res[v]) 184 } 185 return retorno; 186 } 187 else 188 { 189 if(this.value==true) 190 retorno.push(this.formaresposta()) 191 return retorno; 192 } 193 } 194 } 195 this.getIdsFalses=function(pegardequalquerforma) 196 { 197 if(this.allowToGetAnswer||pegardequalquerforma) 198 { 199 var retorno=[] 200 var qt=this.NosFilhos.length; 201 if(qt>0) 202 { 203 for(var i=0;i<qt;i++) 204 { 205 var res=this.NosFilhos[i].getIdsFalses(pegardequalquerforma) 206 for(var v=0;v<res.length;v++) 207 retorno.push(res[v]) 208 } 209 return retorno; 210 } 211 else 212 { 213 if(this.value!=true) 214 retorno.push(this.formaresposta()) 215 return retorno; 216 } 217 } 218 } 219 this.getValues=function(pegardequalquerforma) 220 { 221 if(functionToValidate()&&this.allowToGetAnswer||pegardequalquerforma&&this.allowToGetAnswer) 222 { 223 var retorno=[] 224 var qt=this.NosFilhos.length; 225 if(qt>0) 226 { 227 for(var i=0;i<qt;i++) 228 { 229 var res=this.NosFilhos[i].getValues(pegardequalquerforma) 230 for(var v=0;v<res.length;v++) 231 retorno.push(res[v]) 232 } 233 return retorno; 234 } 235 else 236 { 237 retorno.push(this.formaresposta()) 238 return retorno; 239 } 240 } 241 } 242 243 244 245 // ====================================================================================== 246 // construir codigo html deste no 247 // ====================================================================================== 248 this.Builder=contrutor; 249 250 this.getElement=function() 251 { 252 if(this.Element==null&&this.Builder!=null) 253 { 254 this.Element=new this.Builder(this).getElement(); 255 } 256 return this.Element; 257 } 258 } 259 260 261 262 263 264 // ******************************************************************************* 265 // ******************************************************************************* 266 // ******************************************************************************* 267 // tabela 268 function Sofia_Tree(nos) 269 { 270 this.table=document.createElement("table"); 271 this.table.id="table_"+nos.IdNome 272 //if(nos.NoPai!=null) this.table.style.display = 'none'; 273 this.table.cellpadding=0; 274 this.table.cellspacing=0; 275 this.table.border=0; 276 //this.table.no = nos 277 this.tablebody=document.createElement("TBODY"); 278 279 for(var linhas=0;linhas<nos.NosFilhos.length;linhas++) 280 { 281 var tr=document.createElement("TR"); 282 var td=document.createElement("TD"); 283 td.vAlign='top'; 284 nos.NosFilhos[linhas].Builder=Sofia_CheckBox 285 var btn=nos.NosFilhos[linhas].getElement(); 286 td.appendChild(btn); 287 tr.appendChild(td); 288 var td2=document.createElement("TD"); 289 td2.vAlign='top'; 290 if(nos.NosFilhos[linhas].text) 291 { 292 td2.appendChild(document.createTextNode(nos.NosFilhos[linhas].text)); 293 } 294 if(nos.NosFilhos[linhas].NosFilhos.length>0) 295 { 296 var noi=(new Sofia_Tree(nos.NosFilhos[linhas])).getElement() 297 td2.appendChild(noi); 298 } 299 tr.appendChild(td2); 300 this.tablebody.appendChild(tr); 301 btn.changeTriState() 302 } 303 this.table.appendChild(this.tablebody); 304 this.getElement=function() 305 { 306 return this.table; 307 } 308 } 309 310 311 312 313 314 function Sofia_Div(no) 315 { 316 this.div=document.createElement("div"); 317 this.div.appendChild(document.createTextNode(no.text)) 318 this.div.style.background="#00ffff" 319 this.div.cellpadding=0; 320 this.div.cellspacing=0; 321 this.div.no=no; 322 this.div.onclick=function() 323 { 324 alert(this.no.IdNome) 325 } 326 this.getElement=function() 327 { 328 return this.div; 329 } 330 } 331 332 333 334 335 function Sofia_CheckBox(no) 336 { 337 this.div=document.createElement("div"); 338 //this.div.appendChild( document.createTextNode(no.text) ) 339 this.div.style.background="#00ffff" 340 this.div.cellpadding=0; 341 this.div.cellspacing=0; 342 this.div.border=0; 343 this.div.style.width="13px"; 344 this.div.style.height="13px"; 345 this.div.style.backgroundImage="url('b0.png')"; 346 this.div.no=no; 347 if(no.NosFilhos.length) 348 { 349 this.div.onclick=function() 350 { 351 this.caixa=document.getElementById("table_"+this.no.IdNome) 352 if(this.caixa.style.display!="none") 353 { 354 this.caixa.style.display='none'; 355 } 356 else 357 { 358 this.caixa.style.display=''; 359 } 360 } 361 } 362 else 363 { 364 this.div.onclick=function() 365 { 366 if(this.no.disabled!=true) 367 { 368 if(this.no.value==false) 369 { 370 this.no.value=true 371 this.style.backgroundImage="url('b2.png')"; 372 if(this.no.NoPai.getElement().changeTriStates!=null) 373 this.no.NoPai.getElement(). 374 changeTriStates() 375 } 376 else 377 { 378 this.no.value=false 379 this.style.backgroundImage="url('b0.png')"; 380 if(this.no.NoPai.getElement().changeTriStates!=null) 381 this.no.NoPai.getElement(). 382 changeTriStates() 383 } 384 } 385 } 386 } 387 this.div.changeTriState=function() 388 { 389 if(this.no.getIdsFalses(true).length==0) 390 { 391 this.no.value=true 392 this.style.backgroundImage="url('b2.png')"; 393 394 } 395 else if(this.no.getIdsTrues(true).length==0) 396 { 397 this.no.value=false 398 this.style.backgroundImage="url('b0.png')"; 399 } 400 else 401 { 402 this.no.value=null 403 this.style.backgroundImage="url('b1.png')"; 404 } 405 } 406 this.div.changeTriStates=function() 407 { 408 this.changeTriState() 409 if(this.no.NoPai.getElement().changeTriStates!=null) 410 this.no.NoPai.getElement(). 411 changeTriStates() 412 } 413 this.getElement=function() 414 { 415 return this.div; 416 } 417 } 418 419 420 421 422 var n0=new Sofia_Nos(Sofia_Tree) 423 function load() 424 { 425 n0.IdNome="raiz" 426 for(i=0;i<2;i++) 427 { 428 var n1=new Sofia_Nos() 429 n1.NoPai=n0; 430 n1.IdNome="IdNome"+i 431 n1.text="titulo "+i; 432 for(a=0;a<2;a++) 433 { 434 var n2=new Sofia_Nos() 435 n2.NoPai=n1; 436 n2.IdNome="IdNome"+i+a 437 n2.text="titulo "+i+a; 438 for(b=0;b<3;b++) 439 { 440 var n3=new Sofia_Nos() 441 n3.NoPai=n2; 442 n3.IdNome="IdNome "+i+a+b 443 n3.text="titulo "+i+a+b; 444 n3.value=true 445 n2.Add(n3); 446 } 447 n1.Add(n2); 448 } 449 n0.Add(n1) 450 } 451 //alert( JSON.stringify(JSON.decycle(noPai)) ) 452 //n0.builderElement() 453 var tb=n0.getElement() 454 document.getElementById('ggg'). 455 appendChild(tb) 456 n0.Remove('IdNome00') 457 } 458 459 460 461 function teste() 462 { 463 //var yyy = n0.Find("cabeca 0") 464 var yyy=n0.getIdsTrues(true) 465 alert(yyy) 466 } 467 468 469 470 </script> 471 </head> 472 <body id="aqui" onload="load()" > 473 <div id="ggg" > </div> 474 <input type="button" onclick="teste()" value="teste"/> 475 </body></html> 476 477 478imagens:
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:
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==" ") 255 { 256 TDs[h2].style.backgroundColor=corMedia; 257 } 258 else //if( this.parentNode.getElementsByTagName('td')[0].innerHTML != " " ) 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=" "; 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!=" ") 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!=" ") 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=" "; 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 1242Imagens: