Coming Up - The Next Echo2 Tutorial

Dietrich Kappe, Sunday, April 8, 2007 @ 11:47 pm

I've been hard at work on the next installment of my Echo2 tutorial series, which has been stalled at installment #1 (sorry about that). I decided that a nice, simple Sudoku program might be just the ticket for installment #2. Saturday was spent spelunking around, looking for some reusable Java Sudoku code. That was a bust. Everyone had their generator and solver glued to a GUI, and the actual generator code was fuggly. So the rest of Saturday was spent implementing an efficient puzzle generator.

My all too brief Easter Sunday was spent slapping the Sudoku library from Saturday into an Echo2 app. I didn't get all the way there. Right now, the application generates and displays the puzzles and will toggle back and forth between the solution view. You can try it out here.

Note that this Sudoku puzzle generator produces "hard" puzzles with minimal constraints, i.e. blanking out any of the filled in squares will produce a puzzle with more than one solution. Just a warning.

BTW, the toggling back and forth between the solution and puzzle view takes a bit of time (lots of components being updated). Using something like EPNG's StackedPaneEx (see the April 4th announcement of new goodies in the Echo2 forums) would speed things up quite a bit:

This is a Pane that can contain an number of child components (including other Panes) but ONLY ONE can is visible at a time. The others may however be rendered on the client (lazy is default) and when you pop the stack of visible children, the previous top child is hidden and the one under is in the stack is shown.

This is useful for "descending" in the UI. Say you have a form, that the user selects a record and you show a related subform of data. With StackedPaneEx, you can push the subform onto the stack, have it display and then at the click of a "return" button, display the top level form without re-rendering it.

This performance issue is actually a good lesson in the limits of GUI frameworks (Ajax libraries that sit on the browser side and manipulate the DOM are also affected): if you have to represent hundreds or even thousands of objects or widgets in a GUI, the overhead of the component heirarchy and event observer/observable plumbing makes doing this directly using first-class GUI objects problematic. One approach would involve rendering the widgets graphically (SVG?), and translating mouse clicks on the graphic into model events through pixel location to object mapping. As an example, think of an application that allows patrons to buy stadium tickets. You don't want to render every one of the 20,000 available seats, so instead you allow the patrons to drag a box across a graphic of the stadium and display a corresponding zoom box with a few dozen seats.

OK, enough digression. I'll try and get this tutorial done and polished up by the end of the week, but these tutorials always end up taking a long time to produce; to teach you have to remove all confusion and to be clear and brief at the same time is hard work.

Technorati : ajax, echo2, tutorial

agile ajax

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Nice idea for a tutorial! (Perhaps now I also want a WtSudoku)

   I’m surprised with the performance concern ? Firebug shows that about 30K is transmitted in the AJAX request, which is still fairly limited ? What is the part that takes most time: the collection of the updates into XML or the rendering ?

   The Wt library generates JavaScript responses (instead of XML). I’m not sure if this would actually make sense for echo2 to do as well, if it improves rendering time ?

   About the StackedPaneEx, I don’t think you want the solution to be preloaded which would allow for cheating in a setting where you’re actually keeping track of ranking of users ?

   Comment by Koen Deforche, Wednesday, April 11, 2007 @ 6:18 am

2. 

   From my experience IE usually cracks first in terms of GUI operations. Any way I think the best way to go around the bush in this case is to have a virtual UI such as Google’s map which adds UI items to the screen as you scroll.

   Another example for a work around for the GUI issue is Visual WebGui( http://www.visualwebgui.com ) which has a mechanism that does not have hidden GUI items appear with in the UI DOM. That way instead of having divs switching their display mode in a tab control, we render the tab control again with the selected tab inside. This means that you can have many tabs with multiple controls packed with data that will not overload the browser.

   Guy

   Comment by Guy, Thursday, April 12, 2007 @ 11:44 pm

Leave a comment