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.


 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 

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 
478 
imagens:

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: