Upgrading the SpreadServe GUI

September 19, 2015

Recently I’ve been updating SpreadServe‘s JavaScript web GUI. The edit facility presented on the livesheet page was quite crude. It used a bootstrap-editable to pop up an edit field in a message box. Not really a seamless user experience, so I’ve upgraded to a JavaScript grid that supports in place editing. The end result is a user experience closer to Excel itself. I chose to use webismymind’s editablegrid since it can attach to an existing HTML table. In the case of SpreadServe the HTML table is generated in C++ code inside the SpreadServeEngine whenever a running spreadsheet is published to the RealTimeWebServer. I changed the C++ code to add attributes to the table and tr elements that editablegrid uses to latch on to. I made a couple of small changes to the editablegrid JavaScript so that the isEditable and modelChanged callbacks passed through more information. My isEditable implementation needed to get hold of the DOM element as well as the row column address so it could check for an ssedit attribute. And modelChanged needed the element ID so it could POST the changed data back to the RealTimeWebServer with a unique ID. The RealTimeWebServer sends the updated value back in to the SpreadServeEngine. I’ve forked editablegrid on github here with my changes. While I was doing this JS dev I found two resources very helpful: Oscar Rotero’s jQuery cheat sheet, and the Chrome debugger. I was a Firefox advocate for a long time, as Firebug was the first JavaScript debugger I used. The Chrome debugger is just faster, snappier, breakpointing is easier, and examining the DOM and variables seems better too.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s