Continued from HofPattern. ''Note that CGB stands for Commodity (or Common) Gui Behavior.'' ------- This example uses a hypothetical HTML-like markup language to demonstrate a grid of multiple panels that refresh independently at their own refresh rate. The example name gets its nickname from the 70's Brady Bunch show's opening sequence showing active shots of the heads of each Brady family member. Each "box" is generally independent. This demonstrates what could be a more compact version of a "frameset" or "iframe" approach that would use the "refresh" header. (A "revised" version in the links has horizontal bar charts stacked on top of each other.) This particular example shows five 200x200 pixel boxes across for each row. Interval unit is "seconds" unless specified otherwise (default unit). A "frame div" is sort of a hybrid between an HTML "div" and a "frame" or "iframe". Each frame-div "panel" runs a php script, although it could be Javascript, etc. The point is that each panel is an independent browser "window" like HTML frames and iframes.
(It could be made even shorter using the "template" approach shown in GuiMarkupProposal.) A better UI approach would allow the user to re-size the grid row and column dimensions, similar to how one would in a spreadsheet. HTML "framesets" sort of allow this, but only one dimension propagates the resizing. It's my opinion that markup-based GUI's are generally easier to learn and remember for typical custom business developers, as most developers will be using a variety of different languages, and some will be doing mostly server-side UI control and some client-side. Markup allows them to develop sufficient server-side-controlled interfaces without mastering the nitty gritty of a client language, such as JavaScript + DOM. (Server-side UI control is also less likely to "break" due to client upgrades or vendor differences. Internal apps especially tend to rely on the server-centric UI control.) --top [The first problem I see here is that if the number of divisions change, or the syntax for accessing panel.php changes, or really ''anything'' changes, you're going to need to change multiple lines of markup to cope with that (you'll need at least one more line for any extra division added, and you'll need to change ''every'' line if panel.php changes). Under the original example, changing each of those things only requires one to change a single line of JavaScript. -DavidMcLean] Regenerate the HTML with a button or hyperlink if it needs to change. Web pages have been doing this for almost 2 decades. A trivial fix. And of course one can change the DOM or equivalent on the client side. [Obviously you ''can'' change that stuff. That's what I was talking about: If you need to change the number of divisions, or the access to panel.php, or anything, you need to change the stuff in the DOM. It's still more stuff being changed than under the original approach. -DavidMcLean] That depends on how the GUI "structure" is specified. [Given the structure you've shown above, there are more change points than under the original approach. If you have a different structure in mind to the one you've already shown us, show that one. -DavidMcLean] How are you calculating that? Pick a scenario. [Under any scenario. There's more "code" in this markup approach, therefore any change or maintenance will potentially touch a larger volume of code. For example, if you need to add more divisions, you need to add a whole markup line like the above for each new division. With the JavaScript method, you change the numberOfDivisions variable, which is exactly one line no matter how many divisions you add---heck, it's one ''token'' no matter how many you add. -DavidMcLean] Either it's going to write to the DOM/equiv or write markup. Either way it's going to loop for each row. Yes the main "generator" function may accept a single integer for number of rows, but ''something'' is still going to loop for each row. [Ah, so the unspoken assumption with your above example is that the developer ''won't'' write out the markup shown, but will instead use a loop to generate it? Fair enough; that does address that particular concern.] [However, as shown will only address exactly one use of AJAX, that of blindly updating a page section with a given interval; AJAX happens to do other stuff too. I know the original example doesn't have them, but what about, for example, notifications? Suppose there are some cases where you'd want a "popup" notification shown at the top of the page, perhaps making sure the user can't miss a particularly important bit of monitoring information. How does your design address these? -DavidMcLean ] Using the MDI GUI model. Div's and Framediv's would be part of the same "window", and a different new (or "activated") window would pop up on top. That's how GUI's used to work, but the browsers bastardized that model for unknown reasons. A variation on "target=_blank" tends to be used with browsers, although the JS/Dom "window.open()" tends to give one more control. [So, to confirm, you're suggesting opening a small popup window to display notifications? I see two issues with this. Firstly, how do you propose to trigger and open this notification popup? I don't see how your proposed methods for communicating with the server will enable this, although it's possible with AJAX. Second, is it really a good idea to open a full new browser window, with all the browser chrome (sometimes you can stop that, but at least with a title bar), for a transient notification? -DavidMcLean] No, we don't need a "full" browser window, but the existing HtmlStack gives us stupid alternatives. That's not my fault. And how are we defining "browser window"? When is a rectangle panel "on top" a window and not a window? The kind of features/behavior we want on a "window" can run the gamut. I'm not quite sure what kind of notifications you are envisioning. Please be more specific. There are a lot of ways to notify and I cannot read your mind. [Popup notifications of the sort lots of major sites use, including Facebook. Here's one implementation, for jQuery, which has some examples you can play with to get the idea: http://needim.github.com/noty/ How do you propose handling these? -DavidMcLean] Well, that's one "type" of window. What's your point? By the way, those draw in clunky fashion, like Commodore 64 graphics. That's because people try to use JavaScript as SystemsSoftware, which is not its forte. [With your AJAX-free model of the Web, how does the Web server deliver notification messages to the client, such that they may be displayed like in that example? Also, if you don't like how those look, there are plenty of other libs around: http://boedesign.com/demos/gritter/ and http://codeseven.github.com/toastr/ for example, both of which mostly resemble Growl for Mac OS X. -DavidMcLean] When a given "cell" panel with a "condition" refreshes, it can contain the code to draw the pop-up window, somewhat similar to how one may put a JS "alert()" box in a web page. Ideally the characteristics of the pop-up window would be controlled by the markup specification: resizable, closable, transparency, etc. [Under the standard model of what frames mean, the contents of a frame can't really affect what's going on in other frames; you're free to change what frames mean, though, so that's not a good counterpoint. Aside from that, under this method the notifications must be delivered with and are therefore tied to a specific existing panel. What if there's a notification ''not'' related to an individual panel, something about the state of the system as a whole? How would that be handled? -DavidMcLean] I'm not sure what you mean by "tied to" here. [First, I'll clarify that I do indeed understand what you're suggesting. Are you saying that notifications would be handled by modifying the HTML generated and sent by panel.php to a specific panel, such that it includes something like a