Como a planilha do google

Front-end
#1

Apenas por curiosidade eu queria saber como é que se faz algo parecido como a planilha do google. Alguém sabe o q o google faz?

#2

Javascript…
Até os ossos…

#3

Bem, vou explicar como funciona a camada model de uma planilha, ok?

Embora visualmente, a planilha seja uma grande matriz (255 colunas versus 32767 linhas, no caso do Excel), é óbvio que armazenar tudo isto de informação é algo dispendioso. Logo, como fazer? Simples: Cada célula possui uma chave, no formato coluna + linha. Lembre-se: Em planilhas, uma coluna é expressa em forma de letra. Logo, ‘A1’ é equivalente ao elemento 0,0 de uma matriz.

Além disso, é óbvio que uma planilha também pode possuir faixas (“A1:B2”) e algumas faixas podem também possuir nomes simbólicos (como “Subtotais”). Logo, uma planilha são células e nomes de regiões.

Ao recalcular uma célula, é interessante analisar a lógica como a mesma é recalculada. Eu diria que um bom método de recalcular uma célula, como “A1”, envolve eu montar uma árvore de derivação envolvendo todos os fatores, imediatos (“1”) ou simbólicos (“subtotais”) envolvidos. A partir desta relação de símbolos, e enquanto esta árvore de derivação é construída, eu preciso ter em mente evitar uma recursividade infinita (em javanês, é uma StackOverflowError). Bem, de posse da célula A1, eu posso montar uma árvore / grafo de dependências:

+ A1 (Raiz):
   + A2
      + A4
         + A1
   + A3
      + A4
         + A1

Uma otimização óbvia e implícita está em você não ver o que A2 precisa, visto que o que queres é apenas o que A1 precisa. Mas, ao analisar A2, você vê que A4 precisa de A1, incluindo uma dependência circular. E eis que temos uma provável fonte de loop infinito.

E aí, como fazer? Bem, pura e simplesmente, um processo chamado de Topological Sorting pode te ajudar a identificar estes “furos” e a resolvê-los, invalidando a entrada do usuário. O Topological Sorting também vai ser útil no ato de “recalcular” toda a planilha.

#4

Aldrin Leal, parabéns por sua explicação, muito boa…

Mas na realidade eu queria saber como funciona o “componente” sem as “amarrações” da planilha mesmo…
Pois eu pensei (futuramente) em usar como uma “grid”. Por exemplo, ao invés de você listar um cadastro X e clicar nele para
abrir uma tela para edição, a edição poderia ser feita direto na grid…

#5

Não sei como está o suporte a isso no Google, porém te sugiro conferir o site do Google Code. Eles, em geral, possuem API’s que permitem automatizar isso, seja via JSON, ou Ajax.

Visto que é tudo javascript, o único limite é a sua imaginação.

#6

vejam http://www.java2s.com/Code/JavaScript/GUI-Components/Editabletablecell.htm

#7

Exemplo muito legal! Parabéns!

#8

Este site é muito bom… tem bastante exemplos de Java e JavaScript

#9