Echo Web Framework

Echo.Render.ComponentSync allows for an optional method, renderDisplay() which is invoked whenever a component is about to be displayed on screen, or when the size of the containing component may have changed.

renderDisplay() is also invoked shortly after a component is rendered for the first time. When renderDisplay() is invoked, you can count on the fact that your parent component has been added to the DOM, and that any ancestor components have had their renderDisplay() methods invoked.

Uses

At first it may seem odd that a method like renderDisplay() is necessary, and that all rendering can be accomplished in renderAdd() and renderUpdate(). This will in fact be true for many components. But if, for example, you're using 4-sided CSS positioning (and supporting IE6), or want to ensure content appears properly on screen in resizable areas, a good understanding of renderDisplay() is critical.

Virtual Positioning

If your component's rendered HTML requires the use of four-sided CSS positioning, i.e., specifying either both left and right CSS attributes or top and bottom CSS attributes, you will want to use renderDisplay() to notify Echo's virtual positioning system of a potential size update. This is accomplished by invoking the following code on any element that potentially has both left and right or top and bottom CSS attributes set:

Core.Web.VirtualPosition.redraw(element);

Note that the above code has no effect on browsers that do not require virtual positioning (browsers other than IE6). For more information on how virtual positioning works, see the virtual positioning documentation in the Core JavaScript Framework Developer's Guide.

Layout

If your component has a complex layout that cannot be defined to automatically resize using standard HTML, the renderDisplay() method can be a useful alternative.

As an example, Echo's WindowPane and SplitPane components use renderDisplay() to ensure that windows and splitpane-separators are always placed on-screen after the containing window has been resized. It is thus not possible to drag a window to the far side of the screen and then make the browser smaller such that the window will disappear. When renderDisplay() is invoked after the user resizes the browser, the windows will automatically be moved back on-screen.