render.tabpane.js

一个ajax富客户端的ajax类库

        EchoAppRender.Border.render(border, headerContentTableElement, "borderLeft");
        EchoAppRender.Border.render(border, headerContentTableElement, "borderRight");
        
        var font;
        if (state) {
            font = this._parent.component.render("tabActiveFont");
        } else {
            font = this._parent.component.render("tabInactiveFont");
        }
        EchoAppRender.Font.renderClear(font, headerContentTableElement);
    
        if (this._leftTdElement) {
            var leftImage = this._getLeftImage(state); 
            EchoAppRender.FillImage.renderClear(leftImage, this._leftTdElement, null);
            if (leftImage && leftImage.width) {
                this._leftTdElement.style.width = leftImage.width.toString();
            }
        }
        
        if (this._rightTdElement) {
            var rightImage = this._getRightImage(state); 
            EchoAppRender.FillImage.renderClear(rightImage, this._rightTdElement, null);
            if (rightImage && rightImage.width) {
                this._rightTdElement.style.width = rightImage.width.toString();
            }
        }
        
        // show/hide content
        if (WebCore.Environment.BROWSER_MOZILLA && !WebCore.Environment.BROWSER_FIREFOX) {
            contentDivElement.style.right = state ? "0px" : "100%";
            contentDivElement.style.bottom = state ? "0px" : "100%";
        } else {
            contentDivElement.style.display = state ? "block" : "none";
        }
        if (state) {
            // FIXME hack to notify the tab content component that it's size may have changed, this is
            // required because any previous notifications could have taken place when this tab was hidden.
            EchoRender.renderComponentDisplay(this._childComponent);
        }
    },
    
    _isTabCloseEnabled: function() {
        var layoutData = this._childComponent.render("layoutData");
        return layoutData ? layoutData.closeEnabled : false;
    },
    
    _processClick: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
        if (this._closeImageTdElement && WebCore.DOM.isAncestorOf(this._closeImageTdElement, e.target)) {
            // close icon clicked
            if (!this._isTabCloseEnabled()) {
                return;
            }
            this._parent.component.fireEvent({type: "tabClose", source: this._parent.component, 
                    data: this._childComponent.renderId});
        } else {
            // tab clicked
            this._parent._selectTab(this._childComponent.renderId);
            this._parent._setActiveTabId(this._childComponent.renderId);
            this._parent.component.fireEvent({type: "tabSelect", source: this._parent.component, 
                    data: this._childComponent.renderId});
        }
    },
    
    _processEnter: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
        
        this._closeImageTdElement.firstChild.style.visibility = "visible";
    },
    
    _processExit: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
    
        var relTarget = WebCore.DOM.getEventRelatedTarget(e);
        if (relTarget && WebCore.DOM.isAncestorOf(this._headerTdElement, relTarget)) {
            // within tab box
            return;
        }
           
        this._closeImageTdElement.firstChild.style.visibility = "hidden";
    },
    
    _render: function(update) {
        this._headerTdElement = this._renderHeader();
        this._headerContentTableElement = this._headerTdElement.firstChild;
        this._contentDivElement = this._renderContent(update);
        
        this._highlight(this._childComponent.renderId == this._parent._activeTabId);
        this._addEventListeners();
    },
    
    _renderCloseIconElement: function() {
        var imgTdElement = document.createElement("td");
        EchoAppRender.Alignment.render(this._parent.component.render("tabAlignment", 
                ExtrasRender.ComponentSync.TabPane._defaultTabAlignment), imgTdElement, true, this._parent.component);
        imgTdElement.style.padding = "0 0 0 " + this._parent.component.render("tabCloseIconTextMargin", 
                ExtrasRender.ComponentSync.TabPane._defaultTabCloseIconTextMargin + "px");
        imgTdElement.style.cursor = "pointer";
        var imgElement = document.createElement("img");
        imgElement.style.visibility = "hidden";
        var closeImage = this._getCloseImage(false);
        if (!closeImage) {
            closeImage = this._getCloseImage(true);
        }
        if (closeImage) {
            imgElement.src = EchoAppRender.ImageReference.getUrl(closeImage);
        } else {
            imgElement.src = this._parent.client.getResourceUrl("Extras", "image/tabpane/Close.gif");
        }
        
        if (WebCore.Environment.BROWSER_INTERNET_EXPLORER) {
            // remove auto-calculated width & height, to prevent problems with different image sizes
            imgElement.removeAttribute("width");
            imgElement.removeAttribute("height");
        }
        imgTdElement.appendChild(imgElement);
        return imgTdElement;
    },
    
    _renderContent: function(update) {
        var contentDivElement = document.createElement("div");
        contentDivElement.style.position = "absolute";
        contentDivElement.style.top = "0px";
        // hide content
        if (WebCore.Environment.BROWSER_MOZILLA && !WebCore.Environment.BROWSER_FIREFOX) {
            contentDivElement.style.right = "100%";
            contentDivElement.style.bottom = "100%";
        } else {
            contentDivElement.style.display = "none";
            contentDivElement.style.right = "0px";
            contentDivElement.style.bottom = "0px";
        }
        contentDivElement.style.left = "0px";
        EchoAppRender.Insets.render(this._getContentInsets(), contentDivElement, "padding");
        contentDivElement.style.overflow = "auto";
        
        EchoRender.renderComponentAdd(update, this._childComponent, contentDivElement);
        
        return contentDivElement;
    },
    
    _renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this._contentDivElement);
    },

    _renderHeader: function() {
        var layoutData = this._childComponent.render("layoutData");
        
        var headerTdElement = document.createElement("td");
        headerTdElement.style.borderWidth = "0px";
        headerTdElement.style.padding = "0px";
        headerTdElement.vAlign = this._parent._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM ? "top" : "bottom";
        
        var tabTableElement = document.createElement("table");
        tabTableElement.cellPadding = "0px";
        tabTableElement.cellSpacing = "0px";
        tabTableElement.style.padding = "0px";
        tabTableElement.style.marginRight = this._parent._tabSpacing.toString();
        var width = this._parent.component.render("tabWidth");
        if (width) {
            tabTableElement.style.width = width.toString();
        }
        
        var tabTbodyElement = document.createElement("tbody");
        var tabTrElement = document.createElement("tr");
        
        // left
        if (this._hasLeftImage()) {
            this._leftTdElement = document.createElement("td");
            this._leftTdElement.appendChild(document.createTextNode("\u00a0"));
            tabTrElement.appendChild(this._leftTdElement);
        }
        
        // center
        var centerTdElement = document.createElement("td");
        EchoAppRender.Insets.render(ExtrasRender.ComponentSync.TabPane._defaultTabInsets, centerTdElement, "padding");
        
        var icon = layoutData ? layoutData.icon : null;
        var title = layoutData ? (layoutData.title ? layoutData.title : "*") : "*";
        if (icon || this._parent._tabCloseEnabled) {
            // Render Text and Icon(s)
            var tableElement = document.createElement("table");
            tableElement.style.padding = "0px";
            tableElement.cellPadding = "0px";
            tableElement.cellSpacing = "0px";
            var tbodyElement = document.createElement("tbody");
            var trElement = document.createElement("tr");
            if (icon) {
                trElement.appendChild(this._renderIconElement(icon));
            }
            var textTdElement = document.createElement("td");
            textTdElement.style.whiteSpace = "nowrap";
            EchoAppRender.Alignment.render(this._parent.component.render("tabAlignment", 
                    ExtrasRender.ComponentSync.TabPane._defaultTabAlignment), textTdElement, true, this._parent.component);
            textTdElement.appendChild(document.createTextNode(title));
            tableElement.appendChild(tbodyElement);
            tbodyElement.appendChild(trElement);
            trElement.appendChild(textTdElement);
            if (this._parent._tabCloseEnabled) {
                this._closeImageTdElement = this._renderCloseIconElement();
                trElement.appendChild(this._closeImageTdElement);
            }
            centerTdElement.appendChild(tableElement);
        } else {
            // Render Text Only
            centerTdElement.style.whiteSpace = "nowrap";
            EchoAppRender.Alignment.render(this._parent.component.render("tabAlignment", 
                    ExtrasRender.ComponentSync.TabPane._defaultTabAlignment), centerTdElement, true, this._parent.component);
            centerTdElement.appendChild(document.createTextNode(title));
        }
        tabTrElement.appendChild(centerTdElement);
        this._centerTdElement = centerTdElement;
    
        // right
        if (this._hasRightImage()) {
            this._rightTdElement = document.createElement("td");
            this._rightTdElement.appendChild(document.createTextNode("\u00a0"));
            tabTrElement.appendChild(this._rightTdElement);
        }
    
        tabTbodyElement.appendChild(tabTrElement);
        tabTableElement.appendChild(tabTbodyElement);
        headerTdElement.appendChild(tabTableElement);
        
        return headerTdElement;
    },
    
    _renderIconElement: function(icon) {
        var imgTdElement = document.createElement("td");
        EchoAppRender.Alignment.render(this._parent.component.render("tabAlignment", 
                ExtrasRender.ComponentSync.TabPane._defaultTabAlignment), imgTdElement, true, this._parent.component);
        var imgElement = document.createElement("img");
        imgElement.src = EchoAppRender.ImageReference.getUrl(icon);
        imgElement.style.marginRight = this._parent.component.render("tabIconTextMargin", 
                ExtrasRender.ComponentSync.TabPane._defaultTabIconTextMargin + "px");
        imgTdElement.appendChild(imgElement);
        return imgTdElement;
    }
});