sync.windowpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

        if (icon) {
            var titleIconDiv = document.createElement("div");
            titleIconDiv.style[Core.Web.Env.CSS_FLOAT] = this._rtl ? "right" : "left";
            Echo.Sync.Insets.render(this.component.render("iconInsets"), titleIconDiv, "padding");
            this._titleBarDiv.appendChild(titleIconDiv);
            
            var img = document.createElement("img");
            Echo.Sync.ImageReference.renderImg(icon, img);
            titleIconDiv.appendChild(img);
        }
    
        var title = this.component.render("title");
        var titleTextDiv = document.createElement("div");
        if (icon) {
            titleTextDiv.style[Core.Web.Env.CSS_FLOAT] = this._rtl ? "right" : "left";
        }
        titleTextDiv.style.whiteSpace = "nowrap";
        Echo.Sync.Font.render(this.component.render("titleFont"), titleTextDiv);
        Echo.Sync.Insets.render(this.component.render("titleInsets", 
                Echo.WindowPane.DEFAULT_TITLE_INSETS), titleTextDiv, "padding");
        titleTextDiv.appendChild(document.createTextNode(title ? title : "\u00a0"));
        this._titleBarDiv.appendChild(titleTextDiv);
        
        var titleBarHeight = this.component.render("titleHeight");
        if (titleBarHeight) {
            this._titleBarHeight = Echo.Sync.Extent.toPixels(titleBarHeight);
        }
        if (!titleBarHeight) {
            var titleMeasure = new Core.Web.Measure.Bounds(this._titleBarDiv);
            if (titleMeasure.height) {
                this._titleBarHeight = titleMeasure.height;
            } else {
                this._titleBarHeight = Echo.Sync.Extent.toPixels(Echo.WindowPane.DEFAULT_TITLE_HEIGHT);
            }
        }
    
        this._titleBarDiv.style.top = this._contentInsets.top + "px";
        this._titleBarDiv.style.left = this._contentInsets.left + "px";
        this._titleBarDiv.style.height = this._titleBarHeight + "px";
        this._titleBarDiv.style.overflow = "hidden";
        if (movable) {
            this._titleBarDiv.style.cursor = "move";
            Core.Web.Event.add(this._titleBarDiv, "mousedown", Core.method(this, this._processTitleBarMouseDown), true);
        }
    
        Echo.Sync.Color.render(this.component.render("titleForeground"), this._titleBarDiv, "color");
    
        var titleBackground = this.component.render("titleBackground");
        var titleBackgroundImage = this.component.render("titleBackgroundImage");
    
        if (titleBackground) {
            this._titleBarDiv.style.backgroundColor = titleBackground;
        }
        if (titleBackgroundImage) {
            Echo.Sync.FillImage.render(titleBackgroundImage, this._titleBarDiv);
        }
    
        if (!titleBackground && !titleBackgroundImage) {
            this._titleBarDiv.style.backgroundColor = Echo.WindowPane.DEFAULT_TITLE_BACKGROUND;
        }
        
        if (hasControlIcons) {
            this._controlDiv = document.createElement("div");
            this._controlDiv.style.cssText = "position:absolute;top:0;";
            this._controlDiv.style[this._rtl ? "left" : "right"] = 0;
            Echo.Sync.Insets.render(this.component.render("controlsInsets",  
                    Echo.WindowPane.DEFAULT_CONTROLS_INSETS), this._controlDiv, "margin");
            this._titleBarDiv.appendChild(this._controlDiv);

            // Close Button
            if (closable) {
                this._renderControlIcon("close", this.client.getResourceUrl("Echo", "resource/WindowPaneClose.gif"), "[X]");
                Core.Web.Event.add(this._div, "keydown", Core.method(this, this._processKeyDown), false);
                Core.Web.Event.add(this._div, "keypress", Core.method(this, this._processKeyPress), false);
            }
            if (maximizeEnabled) {
                this._renderControlIcon("maximize", this.client.getResourceUrl("Echo", "resource/WindowPaneMaximize.gif"), "[+]");
            }
            if (minimizeEnabled) {
                this._renderControlIcon("minimize", this.client.getResourceUrl("Echo", "resource/WindowPaneMinimize.gif"), "[-]");
            }
        }
        
        this._div.appendChild(this._titleBarDiv);
        
        // Add content to main DIV.  
        // The object this._contentDiv will have been created by renderAdd(). 
        // Note that overflow is set to 'hidden' if child is a pane component, this is necessary to workaround what
        // what is presumably a bug in Safari 3.0.x.  It should otherwise not be required.
        this._contentDiv.style.cssText = "position:absolute;z-index:2;top:" + 
                (this._contentInsets.top + this._titleBarHeight) + "px;bottom:" + this._contentInsets.bottom + "px;left:" + 
                this._contentInsets.left + "px;right:" + this._contentInsets.right + "px;" +
                "overflow:"+ ((this.component.children.length === 0 || this.component.children[0].pane) ? "hidden;" : "auto;");
        Echo.Sync.Font.renderClear(this.component.render("font"), this._contentDiv);
        if (this.component.children.length > 0 && !this.component.children[0].pane) {
            Echo.Sync.Insets.render(this.component.render("insets"), this._contentDiv, "padding");
        }
                
        Echo.Sync.Color.render(this.component.render("background", Echo.WindowPane.DEFAULT_BACKGROUND),
                this._contentDiv, "backgroundColor");
        Echo.Sync.Color.render(this.component.render("foreground", Echo.WindowPane.DEFAULT_FOREGROUND),
                this._contentDiv, "color");
        Echo.Sync.FillImage.render(this.component.render("backgroundImage"), this._contentDiv);
        this._div.appendChild(this._contentDiv);

        // Add Internet Explorer 6-specific windowed control-blocking IFRAME.
        if (Core.Web.Env.QUIRK_IE_SELECT_Z_INDEX) {
            this._div.appendChild(this._maskDiv);
        }
        Core.Web.Event.add(this._div, "click", 
                Core.method(this, this._processFocusClick), true);
    },

    /**
     * Renders a specific control button icon.
     * 
     * @param {String} name the name of the control icon, used for both event identification and to
     *        retrieve icon property names from component (e.g., a value "close" will cause
     *        "closeIcon" and "closeRolloverIcon" properties of component to be used)
     * @param {#ImageReference} defaultIcon the default icon image to use in the event none is specified
     *        by the component
     * @param {String} altText the alternate text to display if no icon is available (and defaultIcon is null)
     */
    _renderControlIcon: function(name, defaultIcon, altText) {
        var controlDiv = document.createElement("div"),
            icon = this.component.render(name + "Icon", defaultIcon),
            rolloverIcon = this.component.render(name + "RolloverIcon");
 
        var controlSpacing = Echo.Sync.Extent.toCssValue(this.component.render("controlsSpacing", 
                Echo.WindowPane.DEFAULT_CONTROLS_SPACING));
        controlDiv.style.cssText = this._rtl ? ("float:left;cursor:pointer;margin-right:" + controlSpacing) :  
                ("float:right;cursor:pointer;margin-left:" + controlSpacing);
        Echo.Sync.Insets.render(this.component.render(name + "Insets"), controlDiv, "padding");

        if (icon) {
            var img = document.createElement("img");
            Echo.Sync.ImageReference.renderImg(icon, img);
            controlDiv.appendChild(img);
            if (rolloverIcon) {
                Core.Web.Event.add(controlDiv, "mouseover", Core.method(this, this._processControlRolloverEnter), false);
                Core.Web.Event.add(controlDiv, "mouseout", Core.method(this, this._processControlRolloverExit), false);
            }
        } else {
            controlDiv.appendChild(document.createTextNode(altText));
        }
        
        Core.Web.Event.add(controlDiv, "click", Core.method(this, this._processControlClick), false);

        this._controlDiv.appendChild(controlDiv);
        if (this._controlIcons == null) {
            this._controlIcons = [];
        }
        this._controlIcons.push(controlDiv);
        
        controlDiv._controlData = {
            name: name,
            icon: icon,
            rolloverIcon: rolloverIcon
        };
    },
    
    /** @see Echo.Render.ComponentSync#renderDisplay */
    renderDisplay: function() {
        this._loadContainerSize();
        this._setBounds(this._requested, false);
        Core.Web.VirtualPosition.redraw(this._contentDiv);
        Core.Web.VirtualPosition.redraw(this._maskDiv);
    },
    
    /** @see Echo.Render.ComponentSync#renderDispose */
    renderDispose: function(update) {
        this._overlayRemove();
        this._renderDisposeFrame();
        this._div = null;
        this._maskDiv = null;
        this._contentDiv = null;
    },
    
    /**
     * Disposes state of rendered window frame.  This method disposes all resources initialized in _renderAddFrame().
     */
    _renderDisposeFrame: function() {
        var i;

        Core.Web.Event.removeAll(this._div);

        for (i = 0; i < 8; ++i) {
            if (this._borderDivs[i]) {
                Core.Web.Event.removeAll(this._borderDivs[i]);
            }
        }
        this._borderDivs = null;
        
        if (this._controlIcons != null) {
            for (i = 0; i < this._controlIcons.length; ++i) {
                Core.Web.Event.removeAll(this._controlIcons[i]);
            }
            this._controlIcons = null;
        }
        
        Core.Web.Event.removeAll(this._titleBarDiv);
        this._titleBarDiv = null;
        
    },
    
    /** @see Echo.Render.ComponentSync#renderFocus */
    renderFocus: function() {
        Core.Web.DOM.focusElement(this._div);
    },
    
    /** @see Echo.Render.ComponentSync#renderUpdate */
    renderUpdate: function(update) {
        if (update.hasAddedChildren() || update.hasRemovedChildren()) {
            // Children added/removed: perform full render.
        } else if (update.isUpdatedPropertySetIn(Echo.Sync.WindowPane.NON_RENDERED_PROPERTIES)) {
            // Do nothing.
            return false;
        } else if (update.isUpdatedPropertySetIn(Echo.Sync.WindowPane.PARTIAL_PROPERTIES_POSITION_SIZE)) {
            this._loadPositionAndSize();
            return false;
        } else if (update.isUpdatedPropertySetIn(Echo.Sync.WindowPane.PARTIAL_PROPERTIES)) {
            this._renderUpdateFrame();
            return false;
        }

        var element = this._div;
        var containerElement = element.parentNode;
        Echo.Render.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return true;
    },
    
    /**
     * Renders an update to the window frame.  Disposes existing frame, removes rendered elements, adds new frame.
     */
    _renderUpdateFrame: function() {
        this._renderDisposeFrame();
    
        // Remove all child components from main DIV (necessary in cases where frame is being redrawn
        // on previously rendered WindowPane in response to property update). 
        while (this._div.childNodes.length > 0) {
            this._div.removeChild(this._div.lastChild);
        }

        this._renderAddFrame();
    },
    
    /**
     * Sets the bounds of the window.  Constrains the specified bounds to within the available area.
     * Invokes _redraw().
     * 
     * @param bounds an object containing extent properties x, y, width, and height
     * @param {Boolean} userAdjusting flag indicating whether this bounds adjustment is a result of the user moving/resizing
     *        the window (true) or is programmatic (false)
     */
    _setBounds: function(bounds, userAdjusting) {
        var c = this._coordinatesToPixels(bounds);
        
        if (this._rendered == null) {
            this._rendered = { };
        }

        if (c.width != null) {
            if (this._maximumWidth && c.width > this._maximumWidth) {
                if (userAdjusting && c.x != null) {
                    c.x += (c.width - this._maximumWidth);
                }
                c.width = this._maximumWidth;
            }
            if (c.width < this._minimumWidth) {
                if (userAdjusting && c.x != null) {
                    c.x += (c.width - this._minimumWidth);
                }
                c.width = this._minimumWidth;
            }
            this._rendered.width = Math.round(c.width);
        }
        
        if (c.height != null) {
            if (this._maximumHeight && c.height > this._maximumHeight) {
                if (userAdjusting && c.y != null) {
                    c.y += (c.height - this._maximumHeight);
                }
                c.height = this._maximumHeight;
            }
            if (c.height < this._minimumHeight) {
                if (userAdjusting && c.y != null) {
                    c.y += (c.height - this._minimumHeight);
                }
                c.height = this._minimumHeight;
            }
            this._rendered.height = Math.round(c.height);
        }
    
        if (c.x != null) {
            if (this._containerSize.width > 0 && c.x > this._containerSize.width - this._rendered.width) {
                c.x = this._containerSize.width - this._rendered.width;
            }
            if (c.x < 0) {
                c.x = 0;
            }
            this._rendered.x = Math.round(c.x);
        }
    
        if (c.y != null) {
            if (this._containerSize.height > 0 && c.y > this._containerSize.height - this._rendered.height) {
                c.y = this._containerSize.height - this._rendered.height;
            }
            if (c.y < 0) {
                c.y = 0;
            }
            this._rendered.y = Math.round(c.y);
        }

        this._redraw();
    }
});