render.button.js

一个ajax富客户端的ajax类库

    
    _setRolloverState: function(rolloverState) {
        var foreground = EchoAppRender.getEffectProperty(this.component, "foreground", "rolloverForeground", rolloverState);
        var background = EchoAppRender.getEffectProperty(this.component, "background", "rolloverBackground", rolloverState);
        var backgroundImage = EchoAppRender.getEffectProperty(
                this.component, "backgroundImage", "rolloverBackgroundImage", rolloverState);
        var font = EchoAppRender.getEffectProperty(this.component, "font", "rolloverFont", rolloverState);
        var border = EchoAppRender.getEffectProperty(this.component, "border", "rolloverBorder", rolloverState);
        
        EchoAppRender.Color.renderClear(foreground, this._divElement, "color");
        EchoAppRender.Color.renderClear(background, this._divElement, "backgroundColor");
        EchoAppRender.FillImage.renderClear(backgroundImage, this._divElement, "backgroundColor");
        EchoAppRender.Font.renderClear(font, this._divElement);
        EchoAppRender.Border.renderClear(border, this._divElement);
    
        if (this._iconElement) {
            var iconUrl = EchoAppRender.ImageReference.getUrl(
                    EchoAppRender.getEffectProperty(this.component, "icon", "rolloverIcon", rolloverState));
            if (iconUrl != this._iconElement.src) {
                this._iconElement.src = iconUrl;
            }
        }
    }
});

/**
 * Component rendering peer: ToggleButton
 */
EchoAppRender.ToggleButtonSync = Core.extend(EchoAppRender.ButtonSync, {
    
    $load: function() {
        EchoRender.registerPeer("ToggleButton", this);
    },
    
    _selected: false,

    _stateElement: null,
    
    $abstract: {
        createStateElement: function() { },
    
        updateStateElement: function() { }
    },
    
    $virtual: {
        doAction: function() {
            this.setSelected(!this._selected);
            EchoAppRender.ButtonSync.prototype.doAction.call(this);
        }
    },
    
    renderAdd: function(update, parentElement) {
        this._selected = this.component.render("selected");
        
        EchoAppRender.ButtonSync.prototype.renderAdd.call(this, update, parentElement);
    },
    
    getStateIcon: function() {
        var icon;
        if (this._selected) {
            icon = EchoAppRender.getEffectProperty(this.component, "selectedStateIcon", "disabledSelectedStateIcon", 
                    !this._enabled);
        }
        if (!icon) {
            icon = EchoAppRender.getEffectProperty(this.component, "stateIcon", "disabledStateIcon", !this._enabled);
        }
        return icon;
    },
    
    renderContent: function() {
        var text = this.component.render("text");
        var icon = this.component.render("icon");
        this._stateElement = this.createStateElement();
        
        var entityCount = (text ? 1 : 0) + (icon ? 1 : 0) + (this._stateElement ? 1 : 0);
        if (entityCount == 1) {
            if (text != null) {
                this._renderButtonText(this._divElement, text);
            } else if (icon) {
                this._iconElement = this._renderButtonIcon(this._divElement, icon);
            } else {
                this._divElement.appendChild(this._stateElement);
            }
        } else if (entityCount == 2) {
            var orientation = EchoAppRender.TriCellTable.getOrientation(this.component, "textPosition");
            var margin;
            if (this._stateElement) {
                margin = this.component.render("stateMargin", EchoAppRender.ButtonSync._defaultIconTextMargin);
            } else {
                margin = this.component.render("iconTextMargin", EchoAppRender.ButtonSync._defaultIconTextMargin);
            }
            var tct = new EchoAppRender.TriCellTable(orientation, EchoAppRender.Extent.toPixels(margin));
            if (text != null) {
                this._renderButtonText(tct.tdElements[0], text);
                if (icon) {
                    this._iconElement = this._renderButtonIcon(tct.tdElements[1], icon);
                } else {
                    tct.tdElements[1].appendChild(this._stateElement);
                }
            } else {
                this._iconElement = this._renderButtonIcon(tct.tdElements[0], icon);
                tct.tdElements[1].appendChild(this._stateElement);
            }
            this._divElement.appendChild(tct.tableElement);
        } else if (entityCount == 3) {
            var orientation = EchoAppRender.TriCellTable.getOrientation(this.component, "textPosition");
            var margin = this.component.render("iconTextMargin", EchoAppRender.ButtonSync._defaultIconTextMargin);
            var stateOrientation = EchoAppRender.TriCellTable.TRAILING_LEADING;
            var stateMargin = this.component.render("stateMargin", EchoAppRender.ButtonSync._defaultIconTextMargin);
            var tct = new EchoAppRender.TriCellTable(orientation, 
                EchoAppRender.Extent.toPixels(margin), stateOrientation, EchoAppRender.Extent.toPixels(stateMargin));
            this._renderButtonText(tct.tdElements[0], text);
            this._iconElement = this._renderButtonIcon(tct.tdElements[1], icon);
            tct.tdElements[2].appendChild(this._stateElement);
            this._divElement.appendChild(tct.tableElement);
        }
    },
    
    renderDispose: function(update) {
        EchoAppRender.ButtonSync.prototype.renderDispose.call(this, update);
        if (this._stateElement) {
            WebCore.EventProcessor.removeAll(this._stateElement);
            this._stateElement = null;
        }
    },
    
    /**
     * Selects or deselects this button.
     * 
     * @param newState {Boolean} the new selection state
     */
    setSelected: function(newState) {
        if (this._selected == newState) {
            return;
        }
        this._selected = newState;
        this.component.set("selected", newState);
        
        this.updateStateElement();
    }
});

/**
 * Component rendering peer: CheckBox
 */
EchoAppRender.CheckBoxSync = Core.extend(EchoAppRender.ToggleButtonSync, {
    
    $load: function() {
        EchoRender.registerPeer("CheckBox", this);
    },
    
    createStateElement: function() {
        var stateIcon = this.getStateIcon();
        var stateElement;
        if (stateIcon) {
            stateElement = document.createElement("img");
            EchoAppRender.ImageReference.renderImg(stateIcon, stateElement);
        } else {
            stateElement = document.createElement("input");
            stateElement.type = "checkbox";
            stateElement.defaultChecked = this._selected ? true : false;
            WebCore.EventProcessor.add(stateElement, "change", Core.method(this, this._processStateChange), false);
        }
        return stateElement;
    },
    
    _processStateChange: function(e) {
        this.updateStateElement();
    },
        
    updateStateElement: function() {
        var stateIcon = this.getStateIcon();
        if (stateIcon) {
            this._stateElement.src = EchoAppRender.ImageReference.getUrl(stateIcon);
        } else {
            this._stateElement.checked = this._selected ? true : false;
        }
    }
});

/**
 * Component rendering peer: RadioButton
 */
EchoAppRender.RadioButtonSync = Core.extend(EchoAppRender.ToggleButtonSync, {

    $static: {
    
        _nextNameId: 0,
        
        /**
         * Contains mappings from RadioButton render ids to EchoAppRender.RadioButtonSync.Group objects.
         * 
         * @type Core.Arrays.LargeMap
         */
        _groups: new Core.Arrays.LargeMap()
    },

    $load: function() {
        EchoRender.registerPeer("RadioButton", this);;
    },
    
    _group: null,

    $construct: function() {
        EchoAppRender.ToggleButtonSync.call(this);
    },

    doAction: function() {
        if (this._group) {
            this._group.deselect();
        }
        EchoAppRender.ToggleButtonSync.prototype.doAction.call(this);
    },
    
    renderAdd: function(update, parentElement) {
        var groupId = this.component.render("group");
        if (groupId != null) {
            var group = EchoAppRender.RadioButtonSync._groups.map[groupId];
            if (!group) {
                group = new EchoAppRender.RadioButtonSync.Group(groupId);
                EchoAppRender.RadioButtonSync._groups.map[groupId] = group;
            }
            group.add(this);
            this._group = group;
        }
        EchoAppRender.ToggleButtonSync.prototype.renderAdd.call(this, update, parentElement);
    },
    
    createStateElement: function() {
        var stateIcon = this.getStateIcon();
        var stateElement;
        if (stateIcon) {
            stateElement = document.createElement("img");
            EchoAppRender.ImageReference.renderImg(stateIcon, stateElement);
        } else {
            stateElement = document.createElement("input");
            stateElement.type = "radio";
            stateElement.name = "__echo_" + EchoAppRender.RadioButtonSync._nextNameId++;
            stateElement.defaultChecked = this._selected ? true : false;
            WebCore.EventProcessor.add(stateElement, "change", Core.method(this, this._processStateChange), false);
        }
        return stateElement;
    },
    
    _processStateChange: function(e) {
        this.updateStateElement();
    },
    
    renderDispose: function(update) {
        EchoAppRender.ToggleButtonSync.prototype.renderDispose.call(this, update);
        if (this._group) {
            this._group.remove(this);
            if (this._group.size() == 0) {
                EchoAppRender.RadioButtonSync._groups.remove(this._group.id);
            }
            this._group = null;
        }
    },
    
    updateStateElement: function() {
        var stateIcon = this.getStateIcon();
        if (stateIcon) {
            this._stateElement.src = EchoAppRender.ImageReference.getUrl(stateIcon);
        } else {
            this._stateElement.checked = this._selected ? true : false;
        }
    }
});

EchoAppRender.RadioButtonSync.Group = Core.extend({

    id: null,
    
    _buttons: null,

    /**
     * Creates a RadioButton group.
     * 
     * @param id {String} the id
     */
    $construct: function(id) {
        this.id = id;
        this._buttons = [];
    },
    
    /**
     * Adds the specified button to this button group.
     *
     * @param button {EchoRender.ComponentSync.ToggleButton} the button
     */
    add: function(button) {
        this._buttons.push(button);
    },
    
    /**
     * Deselects all buttons in this button group.
     */
    deselect: function() {
        for (var i = 0; i < this._buttons.length; ++i) {
            this._buttons[i].setSelected(false);
        }
    },
    
    /**
     * Removes the specified button from this button group.
     * 
     * @param button {EchoRender.ComponentSync.ToggleButton} the button
     */
    remove: function(button) {
        // Find index of button in array.
        var buttonIndex = -1;
        for (var i = 0; i < this._buttons.length; ++i) {
            if (this._buttons[i] == button) {
                buttonIndex = i;
                break;
            }
        }
        
        if (buttonIndex == -1) {
            // Button does not exist in group.
            throw new Error("No such button: " + button.component.renderId);
        }
        
        if (this._buttons.length == 1) {
            // Array will now be empty.
            this._buttons = [];
        } else {
            // Buttons remain, remove button from button group.
            this._buttons[buttonIndex] = this._buttons[this._buttons.length - 1];
            this._buttons.length = this._buttons.length - 1;
        }
    },

    /**
     * Gets the amount of buttons contained by this button group.
     * 
     * @return the number of buttons.
     * @type {Number}
     */
    size: function() {
        return this._buttons.length;
    }
});