|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| A1 | B1 | C1 | |||
=A1+B1 |
Change any referenced cell and the value is recalculated. We change A1, then C1 is recalculated...
| A1 | B1 | C1 | |||
| 18 | 18 |
We change B1... and C1 is recalculated...
| A1 | B1 | C1 | |||
| 18 | 24 | 42 |
If we wanted to represent this same behaviour in javascript... it all happens back to front. We wouldn't add any code to the C1 item at all. Instead we add code to the referenced cells, A1 and B1. We do this by adding our old friends, 'event handlers'.
| A1 | B1 | C1 | |||
| 18 | 24 | 42 | |||
OnChange='Calc_c1();' | OnChange='Calc_c1();' | ||||
| Function: | |||||
function Calc_c1() {
var a1 = document.getElementById('A1');
var b1 = document.getElementById('B1');
var c1 = document.getElementById('C1');
c1.value = a1.value + b1.value;
}
|
|||||
(OKay okay... in practice it's trickier than that: you first parse each 'cell' into an int or float, and remember to treat blank strings as zero... but I digress...)
You also use a similar 'event-driven' approach in a windows forms program, such as Visual Basic or Delphi.
So, to get the sort of function that an excel user takes for granted, a javascript or windows programmer has to put event handlers all over the place...
Now, what I'd like to play with is a programming tool that uses the back-to-front-spreadsheet model of programming and yet is nothing like a spreadsheet.
I'm picturing a wiki-style webpage, where you can edit the content of the page. But you can also attach 'spreadsheet-style Formulae' inside controls. Or even inside the text of paragraphs.
Here's a dirty mockup, or 'DMU' as i like to call it. (It's a conceptual mockup only -- it doesn't actually do anything)
The following paragraph contains an embedded function.
Mouse over this paragraph to read the formula. Or click to edit.
You have to mouse over the elements in the above panel to understand the mockup. The paragraph that says "Total 482", for example, is named "p9" (because it is the ninth paragraph) and contains a formula that says "@Sum(t1..t3)" , meaning, "Add up the value of the three text boxes".
Okay -- so what I've got is a panel where each element is automatically given a name, much like the way cells in a spreadsheet are automatically named.
(Perhaps you could also give an element a custom name, say that second textbox might be named 'RentTextBox')
On mouseover you can see the name and formula of an element. (Perhaps it would be shown in a textbox fixed to the top of the screen, in much the same way a spreadsheet shows the current cell's content or formula at the top of the form.
If you click on a formula you can edit it, or even possibly break it into more elements.
When you click in a textbox you would be able to select it's value. But if you press "F2", you would instead see the underlying formula, (if there is one).
Finally, you can edit the whole page at once by clicking a button -- much like how 'edit' works on a wiki page.
If it was working as it should, then clicking on the edit button would show a textarea containing this text:
The following paragraph contains an embedded function. Mouse over this @p2.Type to read @p3.ToLower(). @p4.ToSentence() THE FORMULA or click to edit [124] [201] [157] __Total: @Sum(t1..t3)__
Notice that text boxes are represented very simply using square brackets. I know that clashes with some existing wiki standards, but i have to say i really don't care.
Notice also that the deault numbering scheme is one-based, not zero-based. Again, I really don't care.
I can't schedule in time to do a better demonstration of this idea until, say 2041. But if you have time to work on it, I've got a fairly decent spec underway, so ask for details.
Also -- i call this thing "Functional Text Language" -- or "FTL" for short, which is of course a sci-fi term for "Faster Than Light" (Travel). I've been watching a lot of Battlestar Galactica recently. My wife is a huge fan
Here's how you'd use FTL to represent other elements, with and without functions and values:
| FTL | Renders a bit like... |
[] check box | check box |
[x] check box | check box |
[ ] text box | text box |
[fred] | |
() yes | yes |
(x) yes | yes |
((x) male ()female ()) unknown | male
female
unknown Note the double brackets used to mark a group of radio buttons |
[@t3*t1] | |
[male;female;unknown;^] | |
[male,0;female,1;unknown,2;^] | |
[male,0;*female,1;unknown,2;^] |
Okay, that's my esoteric idea of the week. Give it a go if you can!
'http://' on Thu, 13 Apr 2006 20:41:48 GMT, sez:
A declarative (rather than imperative) text-markup form-builder. Nifty-ish.
'SlyW' on Tue, 30 May 2006 15:34:25 GMT, sez:
Surely you must understand that, behind the scenes, Excel has all of the aforementioned event driven code built-in. It simply is at a level that Excel users do not need to interact.
More to the point, the FTL implementation will also contain all of the corresponding event logic only behind the scenes like Excel.
In the end, you have an abstraction of the event model to (hopefully) simplify web application development?
'lb' on Tue, 30 May 2006 20:18:29 GMT, sez:
yep slyw, that's the idea.
i've found that Dan Bricklin (developer of the first spreadsheet, visicalc) has been working on something called 'wikicalc'... i haven't got it to work yet but i think it will do some of the things ftl does... though maybe in a more table-oriented way.
it's here:
http://danbricklin.com/log/aboutwikicalc01.htm
'Wesley Shephard' on Thu, 05 Apr 2007 15:14:17 GMT, sez:
There is an interesting declarative user interface found in FrTime for PLT Scheme.
http://citeseer.ist.psu.edu/cooper04frtime.html
The idea is that the user interface needs only to declare (like a spreadsheet declares) the code for the UI elements and it uses a heartbeat (the time aspect) to re-evaluate the UI state as time passes.
This means a change to a field will cause another to update "automatically" on the next "tick" of the underlying timer. I saw a presentation on this, and it was quite powerful, although I did (and do) have questions about scalability.
'tarnacious' on Tue, 10 Apr 2007 02:41:41 GMT, sez:
Hardware description languages (like VHDL and Verilog) describe not only logic that is faster than light, they can describe logic that occurs concurrently. You actually have to put in propagation delays if you want to describe 'real' hardware.
I haven't used VHDL in years, but, your initial spread sheet formula might be described like this in VHDL:
C1_LOGIC: process(A1,B1)
begin
C1 <= A1 + B1;
end process;
This process will occur whenever A1 or B1 change. You could then use C1 as the trigger for another process if you wanted.
Of course these languages must be synthesized (or actually built) to actually do anything, and it describes hardware not software.
However if anyone is actually interested in FTL, then you should at least be aware of HDL.
'lb' on Tue, 10 Apr 2007 02:46:00 GMT, sez:
i tinkered with VHDL back in university.
Verilog hardware definition language or something.
so you're example:
C1_LOGIC: process(A1,B1)
begin
C1 <= A1 + B1;
end process;
would represent a tiny circuit with a1 and b1 as inputs to a 'summing' circuit (which would be defined elsewhere)
and once the whole circuit is defined, you can use all sorts of optimisations to improve the circuit, since you never have to worry about side effects.
so it's very 'functional' in nature i guess.
or not, i could have this all wrong. the uni years are a blur.
'tarnacious' on Tue, 10 Apr 2007 04:26:36 GMT, sez:
Indeed, my VHDL knowledge is also from hazy uni days.
I do like your idea. And I have always wanted to see a concurrent language (like VHDL) used to describe software. A spreadsheet type application is a perfect starting point, as they are ideally concurrent.
I would also like to see a client side (Javascript/DTML) implementation. I can see a page, with cells, where every cell has an OnChange() event. You would need a compiler of sorts on the page (which would just be a clever javascript function, called first in OnChange() for every cell when the first character is (or was) an '='). When you enter a formula to a cell the 'compliler' adds extra tasks to OnChange() for every cell that the formula references. If you just changed or added a value, you wouldn't need to change any event logic, the correct events would just fire, hopefully in the correct order ;)
Gee, its been a long easter break, not sure if I'm even making sense and probably completely missing the point, but its been fun ;) Now back to work people are actually paying me for, but doesn't seem as much fun :(
Cheers.
'Doekman' on Thu, 26 Apr 2007 15:39:49 GMT, sez:
A friend of me implemented a spreadsheet algoritm in javascript. That should ease stuff. It even has comments.
http://www.tuitman.org/downloads/evaluator.zip
'Jason' on Mon, 14 May 2007 13:18:46 GMT, sez:
I think you would be interested in flapjax:
http://www.flapjax-lang.org/tutorial/
'Doekman' on Thu, 17 May 2007 13:25:50 GMT, sez:
OK. I've done it. I made an implementation.
http://zanstra.com/base/blog/faster_than_light
Let all of you know me what you think of it here, since I don't have a commenting system.
'lb' on Thu, 17 May 2007 22:42:12 GMT, sez:
thanks Doekman! Top work .
thanks Jason for flapjax links.
'Chui Tey' on Fri, 15 Jun 2007 00:48:37 GMT, sez:
Actually, given that most Excel usages are around expense forms or timesheets, why not an Excel to HTML translator so that you get instant forms. Just mark certain cells as ReadWrite and off they go.
'lb' on Fri, 15 Jun 2007 01:33:28 GMT, sez:
nice idea chui.
i reckon some people would've done this already -- and i fear how ugly the result would be ;-)
hey i love your blog, by the way, chui. a very nice read -- lots of good info.
'Chui' on Sat, 16 Jun 2007 22:21:26 GMT, sez:
Hi Leon,
I had a look at my company's Excel expense forms, it runs into three tabs (?!!). Some are just computations, but this kinds of make it hard to translate to the web. You might as well let them download the Excel xlt file and fill them in manually.
There was a product that translated Excel into HTML, I lost the bookmark long ago. It would have been cool to write something on the server side to trigger a chain of emails or whatever whenever the Excel form was submitted.
Chui
'Functional is a library for functional programming in JavaScript' on Fri, 02 Nov 2007 04:21:48 GMT, sez:
Functional is a library for functional programming in JavaScript....
Add your comment.
Mind-boggling Demo of New Gaming Genre, aka Folder-Based Hangman, aka Fun with Recursion
Got CSV in your javascript? Use agnes.
I went to write down a book name and founded an internet empire instead.
NimbleText: Origins
The Windows 8 Mullet
Cosby: spontaneous striped background generator
Slides from WDCNZ: Live Coding Asp.net MVC3
MVC 3, "Third Times a Charm" references
Custom Errors in ASP.Net MVC: It couldn't be simpler, right?
Anatomy of a Domain Hijacking, part 2: The Website Who Came In From The Cold
Anatomy of a Domain Hijacking, part 1
secretGeek.net domain has been stolen. The site may go down.
Boring article: 'untrusted domain' issue with SQL Server.
Coding While You Commute
Test Driven Dentistry Is A Good Thing
The 'less crashy' release of NimbleText
Rethinking Toolbars in Visual Studio (or any IDE)
Where shall we have lunch?
Setting up email for your microIsv
The NO Visual Studio movement: Compiling .net projects in Notepad++
ZeroOne: the editor for programmers who think in binary
Mercurial workflow for personal projects (with a .net bias)
I see you're using vim. Let me fix that for you.
The worst recruitment spam I've ever read
A thank you I forgot to say
My new product, NimbleText, is live
Grabbing the free songs of Jonathan Coulton (with Powershell)
Using NimbleSet to compare lists
Wanted: Wiki Lists (dot org)
DOS on Dope: The last MVC web framework you'll ever need
JSON Query Languages: 5 special purpose editors
What then, is b?
SQLike: A simple editor
Yet Another BizPlan Generator.
HOT GUIDS: A hot or not site for guids
How does life get better? One tiny hack at a time.
24 things to do, and 100 things *not* to do (yet) for building a MicroISV
Venture capital won't kill Jeff Atwood, it will only make him Jeffer.
A handy workflow image for newbie mercurial users
Fractal Feedback, a diversion into recreational programming
Hump-Jumping: How the Education of Computer Science can be Saved, err, maybe.
Suggested User Experience Improvements for DiffMerge
SQL Style Extensions for C#
The Movie Hollywood (And My Wife) Doesn't Want You To See: Weekend at Jacko's
Sysi: the ultimate administrators toolkit
.: secretGeek :: Complete Archives
TimeSnapper.com
NextAction
NimbleText -- World's Simplest Code Generator, Text Manipulator, Data Extractor
25 steps for building a Micro-ISV
3 Minute Guide Series
Universal Troubleshooting Checklist
Top 10 SecretGeek articles
ShinyPower
RealTime Online CSS Editor
Gradient Maker
How to be depressed
You are not inadequate.
The Best Software Writing I
The Business Of Software (Eric Sink)
Jeff Atwood
Joseph Cooney
Phil Haack
Scott Hanselman
Julia Lerman
Rhys Parry
Joel Pobar
Thomas White
OJ Reeves
Eric Sink
proggit
dzone
hacker news
dot net kicks
interesting finds
a continuous learner's weblog
arjan's world
weekly link post
LogEnvy - event logs made sexy
Computer, Unlocked. A rapid computer customization resource
PC Smart Buys - Computer Hardware in Australia