render.js

来自「echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里」· JavaScript 代码 · 共 713 行 · 第 1/2 页

     */
    renderComponentDisplay: function(parent) {
        this._doRenderDisplay(parent, true);
    },
    
    /**
     * Disposes of a component and its descendants.
     * This method should be invoked by any peer that will be updating a component in such
     * a fashion that it will be destroying the rendering of its children and re-rendering them.
     * It is not necessary to invoke this method on components that may not contain children.
     *
     * @param {Echo.Update.ComponentUpdate} update the <code>ComponentUpdate</code> for which this change is being performed
     * @param {Echo.Component} component the <code>Component</code> to be disposed
     */
    renderComponentDispose: function(update, component) {
        this._renderComponentDisposeImpl(update, component);
    },
    
    /**
     * Recursive implementation of renderComponentDispose.  Invokes
     * renderDispose() on all child peers, sets disposed state on each.
     * 
     * @param {Echo.Update.ComponentUpdate} update the <code>ComponentUpdate</code> for which this change is being performed
     * @param {Echo.Component} component the <code>Component</code> to be disposed
     */
    _renderComponentDisposeImpl: function(update, component) {
        if (!component.peer || component.peer.disposed) {
            return;
        }
        Echo.Render._setPeerDisposedState(component, true);
    
        component.peer.renderDispose(update);
        for (var i = 0; i < component.children.length; ++i) {
            Echo.Render._renderComponentDisposeImpl(update, component.children[i]);
        }
    },
    
    /**
     * Sets the peer disposed state of a component.
     * The peer disposed state indicates whether the renderDispose()
     * method of the component has been executed since it was last rendered.
     * 
     * @param {Echo.Component} component the component
     * @param {Boolean} disposed the disposed state, true indicating the component has
     *        been disposed
     */
    _setPeerDisposedState: function(component, disposed) {
        if (disposed) {
            component.peer.disposed = true;
            Echo.Render._disposedComponents[component.peer._peerId] = component;
        } else {
            component.peer.disposed = false;
            delete Echo.Render._disposedComponents[component.peer._peerId];
        }
    },
    
    /**
     * Destroys a component synchronization peer for a specific components.
     * The peer will be removed from the "peer" property of the component.
     * The client will be removed from the "client" property of the component.
     * The peer to component association will be removed.
     * 
     * @param {Echo.Component} component the component
     */
    _unloadPeer: function(component) {
        component.peer.client = null;
        component.peer.component = null;
        component.peer = null;
        --this._loadedPeerCount;        
    },

    /**
     * Focuses the currently focused component of the application.  
     *
     * This method may be necessary to invoke manually by component renderers
     * that use animation and may be hiding the focused component (such that
     * the client browser will not focus it) when processUpdates() completes.
     * 
     * @param {Echo.Client} client the client 
     */
    updateFocus: function(client) {
        var focusedComponent = client.application.getFocusedComponent();
        if (focusedComponent && focusedComponent.peer) {
            focusedComponent.peer.renderFocus();
        }
    }
};

/**
 * Component synchronization peer. 
 * @class
 */
Echo.Render.ComponentSync = Core.extend({ 

    $static: {
    
        /**
         * Focus flag indicating up arrow keypress events should be handled by focus manager when
         * the component is focused.
         * @type Number
         */
        FOCUS_PERMIT_ARROW_UP: 0x1,

        /**
         * Focus flag indicating down arrow keypress events should be handled by focus manager when
         * the component is focused.
         * @type Number
         */
        FOCUS_PERMIT_ARROW_DOWN: 0x2, 

        /**
         * Focus flag indicating left arrow keypress events should be handled by focus manager when
         * the component is focused.
         * @type Number
         */
        FOCUS_PERMIT_ARROW_LEFT: 0x4,
        
        /**
         * Focus flag indicating right arrow keypress events should be handled by focus manager when
         * the component is focused.
         * @type Number
         */
        FOCUS_PERMIT_ARROW_RIGHT: 0x8, 

        /**
         * Focus flag indicating all arrow keypress events should be handled by focus manager when
         * the component is focused.
         * @type Number
         */
        FOCUS_PERMIT_ARROW_ALL: 0xf,
        
        /**
         * Dimension value for <code>getPreferredSize()</code> indicating height should be calculated.
         * @type Number
         */
        SIZE_HEIGHT: 0x1,
        
        /**
         * Dimension value for <code>getPreferredSize()</code> indicating width should be calculated.
         * @type Number
         */
        SIZE_WIDTH: 0x2
    },
    
    /**
     * Unique peer identifier, for internal use only.
     * Using component renderId is inadequate, as two unique component instances may have same id across
     * add-remove-add operations.
     * @type Number
     */
    _peerId: null,

    /**
     * The client supported by this peer.
     * @type Echo.Client
     */
    client: null,

    /**
     * The component instance supported by this peer.  
     * Each peer instance will support a single component instance.
     * @type Echo.Component
     */
    component: null,
    
    /**
     * Flag indicating that the component has been disposed, i.e., the peer's <code>renderDispose()</code> method 
     * has run since the last time <code>renderAdd()</code> was last invoked.
     * @type Boolean
     */
    disposed: false,

    /**
     * Creates a new component synchronization peer.
     */
    $construct: function() { },
    
    $abstract: {

        /**
         * Renders the component to the DOM.
         * The supplied update will refer to a ancestor component of the supported component
         * being updated.
         *
         * @param {Echo.Update.ComponentUpdate} update the update being rendered
         * @param {Element} parentElement the parent DOM element to which the component should be rendered.
         */
        renderAdd: function(update, parentElement) { },

        /**
         * Invoked when the rendered component is about to be removed from the DOM.
         * This method should dispose of any client resources in use by the component, e.g.,
         * unregistering event listeners and removing any DOM elements that are not children of
         * the parent component's DOM element.
         * The DOM should NOT be modified to remove the element(s) representing this component
         * for performance as well as aesthetic reasons (e.g., in the case where a parent component
         * might be using an animated transition effect to remove the component.
         * The supplied update will refer to a ancestor component of the supported component
         * being updated.
         *
         * A component may be re-added to the screen after being disposed, e.g., in the case
         * where a parent component does not possess a 'partial update' capability and removes
         * a child component hierarchy and then re-renders it.  A synchronization peer should
         * allow for the fact that its renderAdd() method may be invoked at some point in time
         * after renderDispose() has been invoked.
         *        
         * @param {Echo.Update.ComponentUpdate} update the update being rendered
         */
        renderDispose: function(update) { },
        
        /**
         * Renders an update to a component, e.g., children added/removed, properties updated.
         * The supplied update will refer specifically to an update of the supported component.
         * 
         * The provided update will contain a <code>renderContext</code> object property.
         * The following properties of <code>renderContext</code> may be configured by the
         * implementation, if desired:
         *  
         * <ul>
         *  <li><code>displayRequired</code>: an array of child component objects whose synchronization peers should have their
         *  renderDisplay() methods invoked once the update cycle is complete.  The default value of null indicates the peers
         *  of all descendant components and the updated component itself will have their renderDisplay() methods invoked.
         *  Specifying an empty array will cause NO components to have their renderDisplay() methods invoked.
         *  This property is generally used on container components (or application-rendered components) which may have property
         *  updates that need not cause renderDisplay() to be invoked on their entire descendant tree for performance reasons.
         * </ul> 
         *
         * @param {Echo.Update.ComponentUpdate} update the update being rendered
         * @return true if this invocation has re-rendered all child components, false otherwise
         * @type Boolean
         */
        renderUpdate: function(update) { }
    },
    
    $virtual: {
    
        /**
         * Returns the focus flags for the component, one or more of the following values, ORed together.
         * <ul>
         *  <li><code>FOCUS_PERMIT_ARROW_UP</code>: indicates that the container may change focus from the current component if
         *   the up arrow key is pressed.</li>
         *  <li><code>FOCUS_PERMIT_ARROW_DOWN</code>: indicates that the container may change focus from the current component if
         *   the down arrow key is pressed.</li>
         *  <li><code>FOCUS_PERMIT_ARROW_LEFT</code>: indicates that the container may change focus from the current component if
         *   the left arrow key is pressed.</li>
         *  <li><code>FOCUS_PERMIT_ARROW_RIGHT</code>: indicates that the container may change focus from the current component if
         *   the right arrow key is pressed.</li>
         *  <li><code>FOCUS_PERMIT_ARROW_ALL</code>: indicates that the container may change focus from the current component if
         *   any arrow key is pressed (this is a shorthand for up, left, down, and right ORed together).</li>
         * </ul>
         * 
         * @return the focus flags
         * @type Number
         */
        getFocusFlags: null,
        
        /**
         * (Optional) Returns the preferred rendered size of the component in pixels.  Certain parent
         * components may query this method during <code>renderDisplay()</code> to determine
         * the space provided to the child component.  If implemented, this method should return
         * an object containing height and/or width properties specifying integer pixel values.
         * 
         * @param dimension the dimension to be calculated, one of the following values, or null
         *        to specify that all dimensions should be calculated:
         *        <ul>
         *         <li><code>SIZE_WIDTH</code></li>
         *         <li><code>SIZE_HEIGHT</code></li>
         *        </ul>
         * @return the preferred rendered size of the component
         * @type {Number}
         */
        getPreferredSize: null,
        
        /**
         * (Optional) Invoked when component is rendered focused.
         */
        renderFocus: null,
        
        /**
         * (Optional) Invoked when the component has been added to the hierarchy and first appears
         * on screen, and when ancestors of the component (or the containing window) have
         * resized.         
         */
        renderDisplay: null
    }
});

/**
 * Root component synchronization peer.
 * The root component is not managed by the server, but rather is an existing
 * element within which the Echo application is rendered.
 * This is a very special case in that there is no renderAdd() method.
 */
Echo.Render.RootSync = Core.extend(Echo.Render.ComponentSync, { 

    $load: function() {
        Echo.Render.registerPeer("Root", this);
    },
    
    /** @see Echo.Render.ComponentSync#renderAdd */
    renderAdd: function(update, parentElement) {
        throw new Error("Unsupported operation: renderAdd().");
    },
    
    /**
     * Removes all content from root container and adds current content.
     * 
     * @param {Echo.Update.ComponentUpdate} update the causing update 
     */
    _renderContent: function(update) {
        Echo.Render.renderComponentDispose(update, update.parent);
        Core.Web.DOM.removeAllChildren(this.client.domainElement);
        for (var i = 0; i < update.parent.children.length; ++i) {
            Echo.Render.renderComponentAdd(update, update.parent.children[i], this.client.domainElement);
        }
    },
    
    /** @see Echo.Render.ComponentSync#renderDispose */
    renderDispose: function(update) { },
    
    /** @see Echo.Render.ComponentSync#renderUpdate */
    renderUpdate: function(update) {
        var property, fullRender = false;

        if (update.fullRefresh || update.hasAddedChildren() || update.hasRemovedChildren()) {
            Echo.Sync.renderComponentDefaults(this.component, this.client.domainElement);
            document.title = this.component.render("title", "");
            this._renderContent(update);
            fullRender = true;
        } else {
            this.client.domainElement.dir = this.client.application.getLayoutDirection().isLeftToRight() ? "ltr" : "rtl";
            if (update.hasUpdatedProperties()) {
                property = update.getUpdatedProperty("title");
                if (property) {
                    document.title = property.newValue;
                }
                property = update.getUpdatedProperty("background");
                if (property) {
                    Echo.Sync.Color.renderClear(property.newValue, this.client.domainElement, "backgroundColor");
                }
                property = update.getUpdatedProperty("foreground");
                if (property) {
                    Echo.Sync.Color.renderClear(property.newValue, this.client.domainElement, "foreground");
                }
                property = update.getUpdatedProperty("font");
                if (property) {
                    Echo.Sync.Font.renderClear(property.newValue, this.client.domainElement);
                }
                Echo.Sync.LayoutDirection.render(this.component.getLayoutDirection(), this.client.domainElement);
            }
        }
        
        return fullRender;
    }
});