Try out the new dijit.layout.BorderContainer widget, now available in trunk. This widget combines the functionality of the LayoutContainer and SplitContainer widgets, and does so with a smaller and simpler implementation. It employs a CSS trick to lay out boxes using the four corners technique outlined in A List Apart for smoother rendering with less JavaScript logic. The API has changed somewhat from the original widgets, with renamed attributes and an emphasis on using CSS. The plan is to deprecate the older widgets for 1.1, and eventually use this same layout logic for TabContainer. I'd like your feedback. Try out the tests in dijit/layout or revisit the themeTester and mail demos, which now use this widget.
Introducing BorderContainer
Submitted by peller on Fri, 01/25/2008 - 02:53.
- peller's blog
- Login or register to post comments
- Subscribe blog
- Subscribe post

Cool but it's not as smooth as before
I have tested this new BorderContainer, but I have hoped that the result would be smoother and I am sorry but what I see is that it's slower than the older LayoutContainer and SplitContainer.
I've tested themeTester on IE7 and FF2.0.
I have seen that you can activate or desactivate live resizing with attribute liveSplitters, but even with liveSplitters at false, it's still slower than the previous example.
May be you need some improvements, but personnaly I think that if the performance is not better, keep the old version.
Does anyone feel like me ?
I was interested in your
I was interested in your comments, since I have a SplitContainer within another SplitContainer, and, with SplitContainers becoming deprecated as of 1.1, if I read correctly, we would want the replacement to work at least as well.
I did a quick look at the three pages. In FF, the performance seemed fine. In IE, it may have been a small amount slower, hard to tell, but seemed fine.
I did notice that when the mouse pointer is dragging the splitter and passes into the Editor box (in the Editing tab on the themes page), and the mouse button is released over the Editor, the behavior is very erratic/bad (the splitter doesn't realize the mouse button has been released, so continues to follow the mouse around the screen), probably due to the editor consuming the mouse events?? The prior version of Theme Tester did not have that problem.
thanks for reminding me!
Frank, I noticed the editor/textarea mouse tracking also, and it's driving me nuts. The mouse events are on the document, like they were with SplitContainer, so I'm not sure why they're failing in that case. I filed a ticket against myself so I won't forget: #5678 That's got to get fixed. And yeah, deprecation for 1.1 is the plan, but it's got to be a viable replacement.
interesting catch. The
interesting catch. The editor is an Iframe, so it's probably doing the same thing and when you start dragging a moveable object and move the cursor outside the window (and release) ... The drag stop is never fired until you mousedown and up again.
this should be a ticket.
I didn't look, but had
I didn't look, but had guessed that an iframe may be involved. In our app, we have an applet filling one of the panes, so have had to deal with the event consumption issue there. About the only thing that can override the event consumption is an iframe. At one point, maybe for IE6 only, not sure, the sizer may have had a BackgroundIframe attached to it. In any case, I've had to extend BackgroundIframe to work for all browser types so that it can/will be attached to various elements/widgets I display, e.g., Dialog (over the applet), pop-ups in FilteringSelects (within Dialogs, but the pop-ups are large enough to extend outside the Dialog), and the "Invalid" pop-ups from sidepane FilteringSelects where the pop-up messages spill over into the applet area. If you come up with a way for all widgets and their components to always have backing iframes, automatically, when over iframes/applets, that will be great :-). In the meantime, the dojo.extend works fine.
Do you know if BackgroundIframes will be retained in most widgets? Or will they be deprecated?
Performance matters here
I do hope to spend some more time on performance. I think I'm doing more size updates than necessary atm. I actually thought the performance as-is is generally better than the old code in FF, roughly the same in IE7, and, well, pretty crappy in IE6 (for "live" dragging anyway) I'm considering turning off liveDragging for IE6, but I'd be real concerned if FF or IE7 had any noticeable degradation in any mode. Do you have an example where you think the new code is worse?
For compound widgets like TabContainers inside BorderContainers, if/when I move the layout code up a level, I think there should be an additional improvement, but I'd hope that we're not much worse off.
But with performance above or even at old levels, this code would be a huge benefit because I think it'll be less buggy, smaller, and easier to maintain.
What does 'deprecate' mean?
Bob Goldstein
I'm a dojo newbie, having just discovered it a couple months ago.
There is a lot of wonderful magic here, but I'm a bit concerned you
mentioned deprecating what I thought were stable widgets in an upcoming .1 release.
I understand the urge to add new features, and even the urge to "fix" old APIs
when you find better ways. But still, if I have to rework my apps every few
months or avoid dojo upgrades or have different apps using different dojo versions,
that's a real problem for production applications.
The "roadmap" from the dojo home page is way out of date, and the trac link
way too detailed.
Sorry if this is the wrong place to ask, but how do I find out
what kinds of changes dojo might make at which version? What kind
of stability and backward compatibility can I count on? I really
want to keep using dojo.
Dojo has a deprecation policy, keeps APIs stable for a major rel
Bob,
As you say, sometimes to improve code, an API change is involved. We are very careful about the disruption to our users. This is the first such deprecation I know of since the 0.9 release, so I don't think there is any need to be alarmed by this.
If the two layout widgets are deprecated, it will be done according to our policy, which is to mark the old code as deprecated, provide a replacement, and leave the old code in place for one release cycle (a major release cycle, if I'm not mistaken -- you shouldn't be forced to change your code in any big hurry) API additions are not subject to any freeze, since additive changes tend not to break old code, but we take everything into consideration and aim for stability. We did do a major overhaul of the APIs after the 0.4 release with a one-time lapse of our deprecation policy, and we tried to lump as many changes as we could into that release cycle to minimize the pain. This particular widget didn't make it in time. In fact, those two widgets were the only two widgets from the old 0.4 release that did not get a major rewrite for dijit, and they need it.
So we do have a policy in place for API stability. I should be able to cite something written... I'll look in the book. If it's not written up, we need to make sure it gets added to the book.
The roadmap is out of date indeed. Sorry. Rest assured, nobody is planning another 0.4->0.9 transition. We're focused on 'fit and finish' of 1.0 right now.
too slow in IE6.
in safari,FF it is fast and coool but there is some problem in IE6. it is too sloooow
oops. it wasn't really an apples-to-apples comparison
as of tonight's build (a couple of hours from now) I changed themeTester to use liveSplitters="false", which is the behavior we had previously. liveSplitters -- having the splitters interactively resize the content as you drag -- is of course much slower, and particularly slow with themeTester and the very high number of the widgets on the page. I suspect it was very slow with the old widgets also, perhaps even slower.
the mail demo uses liveSplitters, but with a simpler page, so the performance is tolerable on most browsers.
Sorry but still slower than before
I have retested themeTester with old version and new one with IE7 on my old Athlon 1700+, and even with liveSplitters at false, it is really slower with BorderContainer, than with LayoutContainer and SplitContainer.
Can't you consider it and not deprecate old code.
I have to stay that even when you feel that a code is nicer, simpler... , the thing is that only final perfomance matters. Haven't you made performance comparison before introducing these new components into core ?
Hope things will get better soon with BorderContainer.
I've made a performance comparison
and it looks fine to me, and others I've spoken to. please contact me via private e-mail (peller at dojotoolkit dot org) and let's figure out why we're seeing different results. Are you talking about the initial layout or the splitter activity?
Hide assembly
I haven't done any testing on performance to comment. In previewing the mail/themeTester, it kinda 'feels' the same...
My problem with the new widget is the fact that there is still no mechanism in place to show ONLY an assembled page, not the assembly of the page. I can't imagine a site that would want to show the assembly of a page and not put a loader message/page/something up like the themeTester does.
Why isn't this provided out-of-the-box for this widget? I should be able to specify some attribute that hides the assembly, with either: a blank page, an image, some text (that's customizable via css) or some dialog.
Not to be backseat driver and come up with requirements after the fact (I hate that myself), but I really thought this was a given and would be part of the release. If the code is easier/simplier, I think it would be a great addition. Is this a consideration for the widget or are you suggesting that every developer extend the widget with their own logic to do this?
good suggestion
what you suggest is additive, and perhaps not limited to BorderContainer. You may wish to suggest it in trac or perhaps better yet in the dijit dev forum.
what am i suggesting in trac?
What should be posted to trac or the forum? The comment i posted above for this widget or what? What other widgets can benefit from such behavior in your mind? I can't think of anything else off the top of my head where this issue is noticed.
what I said.
It sounds like it might be functionally similar to what's in ContentPane. Perhaps other widgets, present of future (or dojox) need it, or not, or entire custom web applications, I don't know. Which is why I thought maybe the forum would be appropriate (the dijit dev community likely isn't monitoring this thread) But if you want a new feature, it's perfectly appropriate to post it to trac. Providing a patch is even better :-)
I'm guessing this would be a div with high z-order, customizable content, and the right event/aop to tear it down. The infrastructure to customize this could outweigh the implementation -- perhaps an example would be all we need?
check out themeTester
Check out themeTester.html for an example of a loading screen.
Not sure if it's practical to build that functionality into dojo/dijit because of the obvious catch-22 that it wouldn't be able to display the loading screen until dojo had finished loading (but I guess before the widgets instantiated).
specifics about performance
I just tried some experiments now, on IE6 (the worst performing of our supported browsers).
For liveSplitter=false, I compared 1.0.2 themeTester with the BorderContainer themeTester. Ignoring page load time (which is just due to the second link not being a build), I see that, measuring the time it takes from mouseup (after moving a splitter) to the time it takes to finish redraw is about twice as slow. About 1/3 vs. 2/3 of a second, perhaps. Also, moving the splitters might be a bit more jumpy than before? Not sure.
As for liveSplitter=true, I compared test_BorderContainer.html to test_SplitContainer.html and when moving the splitter on the border container tests it seems jumpier than on the split container test (in the upper right). That's a bit of an unfair test since test_BorderContainer is resizing 4 panes and test_SplitContainer is only resizing two, and also since the panes on test_SplitContainer have no borders, but still a good starting point.
Collapsible areas?
Has any thought been given to making areas of a BorderContainer be collapsible/expandable out of the box? I think it would be an excellent addition and really make dojo widget layouts very powerful and flexable. I would offer to investigate but I won't have time for a few weeks.
agreed
http://trac.dojotoolkit.org/ticket/5689 I like 'collapsible'. Perhaps it would be as simple as saying 'collapsible=true' on one of the 4 edge panels? I guess the tricky part is what would the UI look like and how would it impact the layout.
Hi, Why is SplitContainer
Hi,
Why is SplitContainer being deprecated? As folks have mentioned, it is part of production for many user's apps. Also, why make such a change without user request? And if it is an internal change driven by a serious bug or new requirement, it needs to be posted to the community, along with the bug/requirements driving the change. That way users can either weigh in on the change or (at least) understand the motivation for the change. Anyone that went through the 0.4 - 0.9 migration can testify to the pain associated with doing things like this. There are great things in dojo, but documentation (including a roadmap) and user engagement in toolkit updates, enhancements, etc is not one of them.
Making changes and announcing them suddenly (at least that's what it looks like from the outside), is not helpful to those who are using and promoting dojo.
Regards,
John
It may look sudden, but...
We're announcing the deprecation of SplitContainer and LayoutContainer and the beginning of something new. Those old widgets will continue to be around (and haunt the Dijit development team) for at least another major release cycle... that could be a year or more!
Why replace the old widgets? Because we feel they are buggy, difficult to maintain, and frankly the code quality doesn't measure up to the standards of the Dijit project, which include using CSS more and making the code more concise. Take a look at the size of the SplitContainer module, and then compare with the _Splitter class in BorderContainer and you'll see what I mean. Rather than continue to invest in that code, a rewrite was deemed the best approach by the Dijit maintainers. SplitContainer and LayoutContainer are basically the only two modules which were not rewritten or redesigned for 0.9, and they really needed to be. This migration was supposed to be part of the 0.9/1.0 rewrite for Dijit, but it couldn't be contained within that schedule. I imagine that's what you're upset about, and I'm sorry, we just didn't have the resources to do everything we wanted to do. But, unlike the extremely painful 0.9/1.0 rewrite, we're following deprecation rules with this. We're focusing on making BorderContainer a performant, rich, and light-weight container and ask for your patience as well as your input.
There are many SplitContainer bugs marked open or wont fix in trac, which like everything we do (including the source control) is fully available for your browsing and searching pleasure. The matter was debated extensively in the development community in public irc meetings and on the mailing lists. Like a lot of development matters, these topics aren't secret but they don't typically get broadcast to the announcement blog until they're fleshed out. If that's a mistake, please accept my apologies and feel free to suggest a better way (but please, this is the wrong place to post if you want to have a real discussion with the community; as you'll see, I'm pretty much the only one following up because I posted the blog entry and I get e-mail updates)
As previously stated on this thread, the old widgets will not disappear overnight. If you wish to continue using the deprecated classes, you may do so. Improvements, however, will happen in the new widget, which is designed to interact better with Dijit. Also, as previously stated on this thread, sometimes API changes are going to happen. No, we don't plan a lot of changes like this in the future, and this one is fairly limited in scope. There will not be another 0.4-0.9 type migration any time soon. We take API stability seriously, keep changes to a minimum and follow the deprecation cycle we have pledged to.
Performance concerns are being looked at. We'll do everything we can to improve performance on IE, in particular.
Hi Peller, It sounds great
Hi Peller,
It sounds great to want to reduce and simplify the code which will improve the maintainability. Of course we will have (probably) a lot of work to modify our application to use the borderContainer, instead of dijit and perhaps dojox layout stuff. But if it works better and faster why not?
I tried the test_BorderContainer.html (dojo-release-1.1.0b3). It tooks 12s on my Dell PowerEdge 400SC (500Mo, Pentium 4 2.26GHz) to load it on firefox 2.0.12 (fedora core 8) from localhost.
I read here that performance problems are mainly an IE concern, let me have some doubts ;-)
Once loaded, the execution is enough fast, even if some improvement may be a good thing.
Regards,
12s compared to what?
Yeah, so you'll have plenty of time to change your app, and I've found that for what seems to be the common case, it results in a simpler containment hierarchy/markup for the user.
I can load it over the network in much less time. What's different here? Granted, I have different hardware, but 12 seconds is a very long time for anything. Does everything in dijit take you that long? How long does it take you to load the LayoutContainer example?
I don't think anyone found load time to be significantly different for BorderContainer. I think the bulk of the complaints were over the splitter resizing, which, as with most new code, needed tuning.